import React, { useState, useEffect } from 'react';
import { X, Check, User, LogOut, ClipboardList, Sun, Moon } from 'lucide-react';

export default function App() {
  // --- 後端 API 網址 (請替換為你的 Cloudflare Worker 網址) ---
  const API_URL = 'https://treasure-bowl.sbackfud.workers.dev'; 

  // --- 狀態管理 ---
  // 當前登入的使用者與 Token
  const [currentUser, setCurrentUser] = useState(null);
  const [authToken, setAuthToken] = useState(null);
  
  // 紀錄資料
  const [userRecords, setUserRecords] = useState([]); // 登入後的雲端紀錄
  const [guestRecords, setGuestRecords] = useState([]); // 訪客的本地紀錄
  
  // 深色模式狀態
  const [isDarkMode, setIsDarkMode] = useState(false);
  
  // 登入/註冊彈窗狀態
  const [authModal, setAuthModal] = useState({ isOpen: false, type: 'login' });
  const [authForm, setAuthForm] = useState({ username: '', password: '', confirm: '' });
  const [authError, setAuthError] = useState('');

  // 度數狀態，預設排到 200 度
  const [degrees, setDegrees] = useState([
    45, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200
  ]);

  // --- 初始化：檢查是否已登入 ---
  useEffect(() => {
    const token = localStorage.getItem('treasure_token');
    const user = localStorage.getItem('treasure_user');
    if (token && user) {
      setAuthToken(token);
      setCurrentUser(user);
      fetchUserRecords(token);
    }
  }, []);

  // 取得雲端紀錄
  const fetchUserRecords = async (token) => {
    try {
      const res = await fetch(`${API_URL}/records`, {
        headers: { 'Authorization': `Bearer ${token}` }
      });
      const data = await res.json();
      if (data.success) {
        setUserRecords(data.records);
      } else if (res.status === 401) {
        handleLogout(); // Token 過期或無效
      }
    } catch (e) {
      console.error('無法載入紀錄', e);
    }
  };

  // 取得目前的紀錄列表 (有登入看專屬雲端紀錄，沒登入看訪客紀錄)
  const currentRecords = currentUser ? userRecords : guestRecords;

  // 處理點擊打勾或 X
  const handleAction = async (degree, actionType) => {
    const now = new Date();
    const timeString = now.toLocaleTimeString('zh-TW', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
    const dateString = now.toLocaleDateString('zh-TW');
    const fullTime = `${dateString} ${timeString}`;
    
    const newRecord = {
      id: Date.now(), // 暫時的 ID，避免畫面延遲
      time: fullTime,
      degree: degree,
      action: actionType
    };

    if (currentUser && authToken) {
      // 樂觀更新 UI (讓點擊瞬間就有反應)
      setUserRecords(prev => [newRecord, ...prev]);
      
      // 同步到雲端
      try {
        await fetch(`${API_URL}/records`, {
          method: 'POST',
          headers: { 
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${authToken}`
          },
          body: JSON.stringify({ time: fullTime, degree, action: actionType })
        });
        // 實際應用中可以在此重新 fetchUserRecords() 以獲得真正的資料庫 ID
      } catch (e) {
        console.error('紀錄同步失敗', e);
      }
    } else {
      // 訪客模式，只保存在本地
      setGuestRecords(prev => [newRecord, ...prev]);
    }
  };

  // 增加 100 度的級距 (10 個欄位)
  const addMoreDegrees = () => {
    const maxDegree = degrees[degrees.length - 1];
    const newDegrees = Array.from({ length: 10 }, (_, i) => maxDegree + (i + 1) * 10);
    setDegrees(prev => [...prev, ...newDegrees]);
  };

  // 清除所有紀錄
  const handleClearRecords = async () => {
    if (window.confirm('確定要清除所有紀錄嗎？')) {
      if (currentUser && authToken) {
        setUserRecords([]); // 先清空 UI
        try {
          await fetch(`${API_URL}/records`, {
            method: 'DELETE',
            headers: { 'Authorization': `Bearer ${authToken}` }
          });
        } catch (e) {
          console.error('清除雲端紀錄失敗', e);
        }
      } else {
        setGuestRecords([]);
      }
    }
  };

  // 處理表單輸入
  const handleInputChange = (e) => {
    setAuthForm({ ...authForm, [e.target.name]: e.target.value });
    setAuthError('');
  };

  // 送出註冊或登入
  const submitAuth = async (e) => {
    e.preventDefault();
    const { username, password, confirm } = authForm;

    if (!username || !password) {
      setAuthError('帳號與密碼不能為空');
      return;
    }

    const endpoint = authModal.type === 'register' ? '/register' : '/login';

    if (authModal.type === 'register' && password !== confirm) {
      setAuthError('兩次輸入的密碼不一致');
      return;
    }

    try {
      const res = await fetch(`${API_URL}${endpoint}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
      });
      const data = await res.json();

      if (data.success) {
        localStorage.setItem('treasure_token', data.token);
        localStorage.setItem('treasure_user', data.username);
        setAuthToken(data.token);
        setCurrentUser(data.username);
        closeAuthModal();
        fetchUserRecords(data.token);
        if (authModal.type === 'register') alert('註冊成功並已自動登入！');
      } else {
        setAuthError(data.error || '發生錯誤');
      }
    } catch (e) {
      setAuthError('無法連線至伺服器，請確認 API 網址是否正確。');
    }
  };

  const closeAuthModal = () => {
    setAuthModal({ isOpen: false, type: 'login' });
    setAuthForm({ username: '', password: '', confirm: '' });
    setAuthError('');
  };

  const handleLogout = () => {
    localStorage.removeItem('treasure_token');
    localStorage.removeItem('treasure_user');
    setAuthToken(null);
    setCurrentUser(null);
    setUserRecords([]);
  };

  // --- UI 渲染 ---
  return (
    <div className={`min-h-screen font-sans md:p-4 transition-colors duration-300 ${isDarkMode ? 'bg-gray-900 text-gray-100' : 'bg-gray-100 text-gray-800'}`}>
      {/* 導覽列與頭部 */}
      <div className={`max-w-4xl mx-auto shadow-sm md:rounded-t-xl overflow-hidden relative transition-colors duration-300 ${isDarkMode ? 'bg-gray-800' : 'bg-white'}`}>
        
        {/* 左上角深淺色切換 */}
        <div className="absolute top-4 left-4 z-10">
          <button 
            onClick={() => setIsDarkMode(!isDarkMode)}
            className={`p-2 rounded-full transition-colors flex items-center justify-center ${isDarkMode ? 'bg-gray-700 hover:bg-gray-600 text-amber-400' : 'bg-gray-100 hover:bg-gray-200 text-gray-600'}`}
            title={isDarkMode ? "切換為明亮模式" : "切換為深色模式"}
          >
            {isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
          </button>
        </div>

        {/* 右上角登入區塊 (非強制) */}
        <div className="absolute top-4 right-4 flex gap-2 z-10">
          {currentUser ? (
            <div className="flex items-center gap-3">
              <span className={`text-sm font-medium flex items-center gap-1 ${isDarkMode ? 'text-amber-400' : 'text-amber-700'}`}>
                <User size={16} /> {currentUser}
              </span>
              <button 
                onClick={handleLogout}
                className={`text-xs py-1 px-3 rounded-full transition ${isDarkMode ? 'bg-gray-700 hover:bg-gray-600 text-gray-300' : 'bg-gray-200 hover:bg-gray-300 text-gray-700'}`}
              >
                登出
              </button>
            </div>
          ) : (
            <>
              <button 
                onClick={() => setAuthModal({ isOpen: true, type: 'register' })}
                className={`text-sm font-medium transition px-2 py-1 ${isDarkMode ? 'text-amber-400 hover:text-amber-300' : 'text-amber-600 hover:text-amber-800'}`}
              >
                註冊
              </button>
              <button 
                onClick={() => setAuthModal({ isOpen: true, type: 'login' })}
                className="text-sm font-medium bg-amber-500 hover:bg-amber-600 text-white py-1 px-4 rounded-full transition shadow-sm"
              >
                登入
              </button>
            </>
          )}
        </div>

        <div className="p-6 pt-16 md:pt-14 text-center border-b-4 border-amber-400">
          <h1 className={`text-3xl font-bold tracking-wider ${isDarkMode ? 'text-amber-400' : 'text-amber-800'}`}>聚寶盆</h1>
          <p className={`mt-3 text-sm md:text-base font-medium ${isDarkMode ? 'text-gray-300' : 'text-gray-600'}`}>
            說明：木水-人的運勢順 &nbsp;|&nbsp; 金水-身體順
          </p>
        </div>
      </div>

      {/* 主要內容區 - 設定固定高度讓內部出現捲軸 */}
      <div className={`max-w-4xl mx-auto flex flex-col md:flex-row gap-4 p-4 md:rounded-b-xl shadow-md h-[80vh] md:h-[650px] transition-colors duration-300 ${isDarkMode ? 'bg-gray-950' : 'bg-gray-50'}`}>
        
        {/* 左側：操作區 */}
        <div className={`w-full md:w-1/2 rounded-lg border shadow-inner p-4 md:p-6 flex flex-col transition-colors duration-300 ${isDarkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}>
          <h2 className={`text-lg font-semibold mb-4 border-b pb-2 shrink-0 ${isDarkMode ? 'text-gray-200 border-gray-700' : 'text-gray-700 border-gray-200'}`}>操作面板</h2>
          
          <div className="space-y-3 flex-1 overflow-y-auto pr-2">
            {degrees.map(degree => (
              <div key={degree} className={`flex items-center justify-between p-3 rounded-lg transition-colors ${isDarkMode ? 'bg-gray-700 hover:bg-gray-600' : 'bg-amber-50 hover:bg-amber-100'}`}>
                <span className={`text-lg font-bold w-16 ${isDarkMode ? 'text-amber-400' : 'text-amber-900'}`}>{degree}度</span>
                <div className="flex gap-4">
                  <button 
                    onClick={() => handleAction(degree, 'X')}
                    className={`flex items-center justify-center w-10 h-10 rounded-full transition shadow-sm active:scale-95 ${isDarkMode ? 'bg-red-900/50 text-red-400 hover:bg-red-800/50 hover:text-red-300' : 'bg-red-100 text-red-600 hover:bg-red-200 hover:text-red-700'}`}
                    aria-label={`${degree}度 打叉`}
                  >
                    <X size={24} strokeWidth={3} />
                  </button>
                  <button 
                    onClick={() => handleAction(degree, 'V')}
                    className={`flex items-center justify-center w-10 h-10 rounded-full transition shadow-sm active:scale-95 ${isDarkMode ? 'bg-green-900/50 text-green-400 hover:bg-green-800/50 hover:text-green-300' : 'bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-700'}`}
                    aria-label={`${degree}度 打勾`}
                  >
                    <Check size={24} strokeWidth={3} />
                  </button>
                </div>
              </div>
            ))}
          </div>

          {/* 增加 100 度按鈕 */}
          <div className={`mt-4 pt-4 border-t shrink-0 ${isDarkMode ? 'border-gray-700' : 'border-gray-200'}`}>
            <button 
              onClick={addMoreDegrees}
              className={`w-full py-2 rounded-lg font-bold transition shadow-sm ${isDarkMode ? 'bg-gray-700 hover:bg-gray-600 text-amber-400' : 'bg-amber-100 hover:bg-amber-200 text-amber-800'}`}
            >
              + 增加 100 度
            </button>
          </div>
        </div>

        {/* 右側：紀錄區 */}
        <div className={`w-full md:w-1/2 rounded-lg border shadow-inner p-4 md:p-6 flex flex-col transition-colors duration-300 ${isDarkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}>
          <div className={`flex items-center justify-between mb-4 border-b pb-2 shrink-0 ${isDarkMode ? 'border-gray-700' : 'border-gray-200'}`}>
            <h2 className={`text-lg font-semibold flex items-center gap-2 ${isDarkMode ? 'text-gray-200' : 'text-gray-700'}`}>
              <ClipboardList size={20} className={isDarkMode ? 'text-amber-400' : 'text-amber-600'} />
              紀錄清單
            </h2>
            <span className={`text-xs px-2 py-1 rounded-full ${isDarkMode ? 'bg-gray-700 text-amber-400' : 'bg-amber-100 text-amber-700'}`}>
              {currentUser ? `會員雲端紀錄：${currentUser}` : '本地訪客模式'}
            </span>
          </div>
          
          <div className={`flex-1 overflow-y-auto rounded border p-2 ${isDarkMode ? 'bg-gray-900 border-gray-700' : 'bg-gray-50 border-gray-100'}`}>
            {currentRecords.length === 0 ? (
              <div className={`flex flex-col items-center justify-center h-full py-10 ${isDarkMode ? 'text-gray-500' : 'text-gray-400'}`}>
                <ClipboardList size={48} className="mb-2 opacity-20" />
                <p>目前還沒有任何紀錄</p>
              </div>
            ) : (
              <ul className="space-y-2">
                {currentRecords.map((record, idx) => (
                  <li key={record.id || idx} className={`flex justify-between items-center p-3 rounded shadow-sm border animate-in fade-in slide-in-from-top-2 ${isDarkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-100'}`}>
                    <span className={`text-sm font-mono ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}>{record.time}</span>
                    <div className="flex items-center gap-3">
                      <span className={`font-bold ${isDarkMode ? 'text-gray-200' : 'text-gray-700'}`}>{record.degree}度</span>
                      {record.action === 'V' ? (
                        <span className={`flex items-center justify-center w-6 h-6 rounded-full ${isDarkMode ? 'bg-green-900/50 text-green-400' : 'bg-green-100 text-green-600'}`}>
                          <Check size={16} strokeWidth={4} />
                        </span>
                      ) : (
                        <span className={`flex items-center justify-center w-6 h-6 rounded-full ${isDarkMode ? 'bg-red-900/50 text-red-400' : 'bg-red-100 text-red-600'}`}>
                          <X size={16} strokeWidth={4} />
                        </span>
                      )}
                    </div>
                  </li>
                ))}
              </ul>
            )}
          </div>

          {/* 清除紀錄按鈕 */}
          <div className={`mt-4 pt-4 border-t shrink-0 ${isDarkMode ? 'border-gray-700' : 'border-gray-200'}`}>
            <button 
              onClick={handleClearRecords}
              className={`w-full py-2 rounded-lg font-bold transition shadow-sm ${isDarkMode ? 'bg-red-900/50 hover:bg-red-800/50 text-red-400' : 'bg-red-50 hover:bg-red-100 text-red-600'}`}
            >
              清除所有紀錄
            </button>
          </div>
        </div>

      </div>

      {/* 登入/註冊彈窗 */}
      {authModal.isOpen && (
        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
          <div className={`rounded-xl shadow-xl w-full max-w-sm overflow-hidden animate-in zoom-in-95 ${isDarkMode ? 'bg-gray-800 border border-gray-700' : 'bg-white'}`}>
            <div className="bg-amber-500 text-white px-6 py-4 flex justify-between items-center">
              <h3 className="font-bold text-lg">{authModal.type === 'login' ? '會員登入' : '註冊新帳號'}</h3>
              <button onClick={closeAuthModal} className="text-white/80 hover:text-white">
                <X size={20} />
              </button>
            </div>
            
            <form onSubmit={submitAuth} className="p-6 space-y-4">
              {authError && (
                <div className={`p-3 text-sm rounded border ${isDarkMode ? 'bg-red-900/30 text-red-400 border-red-800/50' : 'bg-red-50 text-red-600 border-red-200'}`}>
                  {authError}
                </div>
              )}
              
              <div>
                <label className={`block text-sm font-medium mb-1 ${isDarkMode ? 'text-gray-300' : 'text-gray-700'}`}>帳號</label>
                <input 
                  type="text" 
                  name="username"
                  value={authForm.username}
                  onChange={handleInputChange}
                  className={`w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-amber-500 focus:border-amber-500 outline-none transition ${isDarkMode ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400' : 'bg-white border-gray-300 text-gray-900 placeholder-gray-400'}`}
                  placeholder="請輸入帳號"
                />
              </div>
              
              <div>
                <label className={`block text-sm font-medium mb-1 ${isDarkMode ? 'text-gray-300' : 'text-gray-700'}`}>密碼</label>
                <input 
                  type="password" 
                  name="password"
                  value={authForm.password}
                  onChange={handleInputChange}
                  className={`w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-amber-500 focus:border-amber-500 outline-none transition ${isDarkMode ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400' : 'bg-white border-gray-300 text-gray-900 placeholder-gray-400'}`}
                  placeholder="請輸入密碼"
                />
              </div>

              {authModal.type === 'register' && (
                <div>
                  <label className={`block text-sm font-medium mb-1 ${isDarkMode ? 'text-gray-300' : 'text-gray-700'}`}>密碼確認</label>
                  <input 
                    type="password" 
                    name="confirm"
                    value={authForm.confirm}
                    onChange={handleInputChange}
                    className={`w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-amber-500 focus:border-amber-500 outline-none transition ${isDarkMode ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400' : 'bg-white border-gray-300 text-gray-900 placeholder-gray-400'}`}
                    placeholder="請再次輸入密碼"
                  />
                </div>
              )}
              
              <button 
                type="submit" 
                className="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-2 px-4 rounded-lg transition mt-4 shadow-md"
              >
                {authModal.type === 'login' ? '登入' : '確認註冊'}
              </button>

              <div className="text-center mt-4">
                <button 
                  type="button"
                  onClick={() => {
                    setAuthModal({ isOpen: true, type: authModal.type === 'login' ? 'register' : 'login' });
                    setAuthError('');
                  }}
                  className={`text-sm underline ${isDarkMode ? 'text-amber-400 hover:text-amber-300' : 'text-amber-600 hover:text-amber-800'}`}
                >
                  {authModal.type === 'login' ? '沒有帳號？點此註冊' : '已有帳號？點此登入'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}