import React, { useState, useEffect } from 'react';
import { 
  Users, User, CalendarDays, Trophy, CheckCircle2, 
  MapPin, Image as ImageIcon, RefreshCw, Plus, 
  Settings, Camera, X, FileText, Upload, Download, Edit2, LogOut, Trash2, Loader2
} from 'lucide-react';

// ==========================================
// 🚀 CLOUDFLARE 部署設定
// ==========================================
// 若要串接真實的 Cloudflare Worker，請將下方引號內填入 Worker 網址
// 例如: "https://visit-api.your-subdomain.workers.dev"
// 預設留空 ("") 時，系統會在網頁本地運行，方便預覽測試！
const API_BASE = "https://visit2026.jayee861103.workers.dev"; 

// --- Mock Data Initialization (僅供預覽模式或初始使用) ---
const initialStaff = [
  { id: 's1', name: '王大明' },
  { id: 's2', name: '陳小華' },
  { id: 's3', name: '林雅婷' }
];

const initialWorkers = Array.from({ length: 30 }).map((_, i) => ({
  id: `w${i+1}`,
  empId: `A${String(i+1).padStart(3, '0')}`,
  name: `Worker ${String.fromCharCode(65 + (i % 26))}${i}`
}));

export default function App() {
  const [currentUser, setCurrentUser] = useState(null);
  const [activeTab, setActiveTab] = useState('tasks');
  const [isLoading, setIsLoading] = useState(false);
  
  // 自訂對話框狀態
  const [dialog, setDialog] = useState({ isOpen: false, type: 'alert', message: '', onConfirm: null });
  const showAlert = (message) => setDialog({ isOpen: true, type: 'alert', message, onConfirm: null });
  const showConfirm = (message, onConfirm) => setDialog({ isOpen: true, type: 'confirm', message, onConfirm });
  const closeDialog = () => setDialog({ ...dialog, isOpen: false });

  const [staffList, setStaffList] = useState(initialStaff);
  const [workerList, setWorkerList] = useState(initialWorkers);
  const [schedule, setSchedule] = useState([]);
  
  const [currentStaffId, setCurrentStaffId] = useState('');
  const [currentMonth, setCurrentMonth] = useState(3);

  // 初始化與讀取 Cloudflare 資料
  useEffect(() => {
    // 載入 Excel 套件
    if (!document.getElementById('xlsx-script')) {
      const script = document.createElement('script');
      script.id = 'xlsx-script';
      script.src = 'https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js';
      document.head.appendChild(script);
    }

    // 讀取遠端 API (Cloudflare KV)
    const loadData = async () => {
      if (!API_BASE) {
        if (schedule.length === 0) generateSchedule(initialStaff, initialWorkers);
        return;
      }
      try {
        setIsLoading(true);
        const res = await fetch(`${API_BASE}/api/data`);
        
        // 先將回應當作文字讀取，避免直接 .json() 解析失敗
        const textData = await res.text(); 
        
        try {
          const data = JSON.parse(textData);
          if(data.staffList?.length) setStaffList(data.staffList);
          if(data.workerList?.length) setWorkerList(data.workerList);
          if(data.schedule?.length) {
            setSchedule(data.schedule);
          } else {
             // 如果遠端沒有排程，使用遠端名單(或本地初始名單)生成一次
            generateSchedule(data.staffList?.length ? data.staffList : initialStaff, data.workerList?.length ? data.workerList : initialWorkers);
          }
        } catch (parseError) {
          console.warn("JSON 解析失敗，可能後端回傳錯誤訊息:", textData);
          // 若解析失敗（例如拿到 Cannot read property...），則使用預設資料並幫忙產生初始排程
          if (schedule.length === 0) generateSchedule(initialStaff, initialWorkers);
        }
        
      } catch(e) {
        console.error("連線 API 失敗，使用本地預設資料", e);
        if (schedule.length === 0) generateSchedule(initialStaff, initialWorkers);
      } finally {
        setIsLoading(false);
      }
    };
    loadData();
  }, []);

  // 儲存資料至 Cloudflare KV
  const saveData = async (newStaff, newWorkers, newSchedule) => {
    if (!API_BASE) return;
    try {
      await fetch(`${API_BASE}/api/data`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ staffList: newStaff, workerList: newWorkers, schedule: newSchedule })
      });
    } catch (e) {
      console.error("儲存至雲端失敗", e);
    }
  };

  // --- Login Logic ---
  const handleLogin = (inputValue) => {
    const trimmedInput = inputValue.trim();
    if (trimmedInput === 'Az123456') {
      setCurrentUser({ id: 'admin', name: '系統管理員', role: 'admin' });
      setCurrentStaffId(staffList[0]?.id || '');
      setActiveTab('admin');
      return;
    }

    const staff = staffList.find(s => s.name === trimmedInput);
    if (staff) {
      setCurrentUser({ ...staff, role: 'staff' });
      setCurrentStaffId(staff.id);
      setActiveTab('tasks');
    } else {
      showAlert('找不到此負責人，或密碼輸入錯誤。');
    }
  };

  const handleLogout = () => setCurrentUser(null);

  // --- Core Logic ---
  // 改寫：接受參數以便在初始化時傳入正確的清單
  const generateSchedule = (staffs = staffList, workers = workerList) => {
    if (staffs.length === 0 || workers.length === 0) return;

    let shuffledWorkers = [...workers].sort(() => 0.5 - Math.random());
    let staffPiles = {};
    staffs.forEach(s => staffPiles[s.id] = []);
    shuffledWorkers.forEach((w, index) => {
      const staff = staffs[index % staffs.length];
      staffPiles[staff.id].push(w);
    });

    const months = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    let newSchedule = [];
    
    staffs.forEach(staff => {
      let pile = staffPiles[staff.id];
      pile.forEach((w, idx) => {
        let m = months[idx % months.length];
        newSchedule.push({
          id: `sch_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
          workerId: w.id,
          workerEmpId: w.empId,
          workerName: w.name,
          staffId: staff.id,
          month: m,
          status: 'pending', 
          address: '',
          imageUrl: null,
          completeDate: null
        });
      });
    });

    setSchedule(newSchedule);
    saveData(staffs, workers, newSchedule);
    
    // 如果是手動觸發(已有currentUser)才顯示提示
    if (currentUser?.role === 'admin') showAlert("已成功為 2026年 (3-12月) 重新隨機分配訪視名單！");
  };

  const handleReplace = (scheduleId) => {
    showConfirm("確定該移工無法訪視(如返鄉)並要進行替換嗎？\n系統將從下個月(或未來月份)抽調一位至本月，並將該移工移至12月份（最後面）。", () => {
      const currentTask = schedule.find(s => s.id === scheduleId);
      const futureTask = schedule
        .filter(s => s.staffId === currentTask.staffId && s.month > currentTask.month && s.status === 'pending')
        .sort((a, b) => a.month - b.month)[0]; 

      if (futureTask) {
        const newSchedule = schedule.map(s => {
          if (s.id === scheduleId) return { ...s, month: 12, status: 'pending' }; 
          if (s.id === futureTask.id) return { ...s, month: currentTask.month }; 
          return s;
        });
        setSchedule(newSchedule);
        saveData(staffList, workerList, newSchedule);
        showAlert("已成功替換！該移工已移至 12 月份，並從未來月份抽調一名補上本月。");
      } else {
        const anyOtherTask = schedule.find(s => s.staffId === currentTask.staffId && s.id !== scheduleId && s.status === 'pending');
        if (anyOtherTask) {
          const newSchedule = schedule.map(s => {
            if (s.id === scheduleId) return { ...s, month: anyOtherTask.month }; 
            if (s.id === anyOtherTask.id) return { ...s, month: currentTask.month };
            return s;
          });
          setSchedule(newSchedule);
          saveData(staffList, workerList, newSchedule);
          showAlert("已從其他月份抽調一名移工作為替換！");
        } else {
          showAlert("您已經沒有其他待訪視的移工可以替換了。");
        }
      }
    });
  };

  const handleComplete = async (scheduleId, address, imageBase64) => {
    let finalImageUrl = imageBase64;

    // 儲存至 Cloudflare R2
    if (API_BASE && imageBase64.startsWith('data:image')) {
      try {
        const res = await fetch(`${API_BASE}/api/upload`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ imageBase64 })
        });
        
        const textData = await res.text();
        try {
            const data = JSON.parse(textData);
            if(data.imageUrl) finalImageUrl = `${API_BASE}${data.imageUrl}`;
        } catch(e) {
            console.error("解析上傳回傳值失敗:", textData);
            showAlert("圖片上傳 R2 發生錯誤，暫存為本地資料。");
        }
      } catch (e) {
        console.error("Upload error", e);
        showAlert("圖片上傳連線失敗，暫存為本地資料。");
      }
    }

    const newSchedule = schedule.map(s => {
      if (s.id === scheduleId) {
        return {
          ...s,
          status: 'completed',
          address: address,
          imageUrl: finalImageUrl,
          completeDate: s.completeDate || new Date().toISOString()
        };
      }
      return s;
    });

    setSchedule(newSchedule);
    saveData(staffList, workerList, newSchedule);
  };

  // 刪除與清理
  const handleDeleteStaff = (id) => {
    showConfirm('確定要刪除此負責人嗎？\n注意：刪除後建議重新產生年度分配表。', () => {
      const newList = staffList.filter(s => s.id !== id);
      setStaffList(newList);
      saveData(newList, workerList, schedule);
    });
  };

  const handleDeleteWorker = (id) => {
    showConfirm('確定要刪除此移工嗎？\n注意：刪除後建議重新產生年度分配表。', () => {
      const newList = workerList.filter(w => w.id !== id);
      setWorkerList(newList);
      saveData(staffList, newList, schedule);
    });
  };

  const handleClearStaff = () => {
    showConfirm('確定要「一鍵清空」所有負責人名單嗎？\n注意：資料刪除後無法復原！', () => {
      setStaffList([]);
      saveData([], workerList, schedule);
    });
  };

  const handleClearWorkers = () => {
    showConfirm('確定要「一鍵清空」所有移工名單嗎？\n注意：資料刪除後無法復原！', () => {
      setWorkerList([]);
      saveData(staffList, [], schedule);
    });
  };

  // --- Views ---
  const renderContent = () => {
    if (!currentUser) return <LoginScreen onLogin={handleLogin} />;

    return (
      <div className="flex h-screen w-full bg-slate-50 font-sans text-slate-800 overflow-hidden">
        {/* Desktop Sidebar (綠色系) */}
        <aside className="hidden md:flex flex-col w-64 bg-white border-r border-slate-200 shadow-sm z-20">
          <div className="p-6 bg-emerald-700 text-white flex flex-col items-start relative overflow-hidden">
            <div className="absolute top-0 right-0 w-32 h-32 bg-white opacity-10 rounded-full -mr-10 -mt-10 blur-2xl"></div>
            <h1 className="text-xl font-bold tracking-wide flex items-center gap-2 relative z-10">
              <CalendarDays size={24} /> 訪視系統
            </h1>
          </div>
        
          <div className="px-5 py-4 border-b border-slate-100 bg-slate-50 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <div className="bg-emerald-100 text-emerald-700 p-1.5 rounded-lg"><User size={16}/></div>
              <span className="font-bold text-sm text-slate-700">{currentUser.name}</span>
            </div>
            <button onClick={handleLogout} className="text-slate-400 hover:text-red-500 transition" title="登出">
              <LogOut size={16} />
            </button>
          </div>

          <nav className="flex-1 p-4 space-y-2">
            <DesktopNavButton icon={<CalendarDays />} label="訪視任務" active={activeTab === 'tasks'} onClick={() => setActiveTab('tasks')} />
            <DesktopNavButton icon={<Trophy />} label="完成度排名" active={activeTab === 'leaderboard'} onClick={() => setActiveTab('leaderboard')} />
            {currentUser.role === 'admin' && (
              <DesktopNavButton icon={<Settings />} label="後台管理" active={activeTab === 'admin'} onClick={() => setActiveTab('admin')} />
            )}
          </nav>
        </aside>

        {/* Main Content Area */}
        <div className="flex-1 flex flex-col h-screen overflow-hidden relative">
          {/* Mobile Header */}
          <header className="md:hidden bg-emerald-600 text-white px-4 py-3 shadow-md sticky top-0 z-20 flex justify-between items-center transition-colors duration-300">
            <div className="flex items-center gap-2">
              <CalendarDays size={20} />
              <h1 className="text-lg font-bold tracking-wide">外宿訪視系統</h1>
            </div>
            <button onClick={handleLogout} className="bg-black/10 hover:bg-black/20 p-1.5 rounded-lg transition">
              <LogOut size={18} />
            </button>
          </header>

          <main className="flex-1 overflow-y-auto p-4 md:p-8 pb-24 md:pb-8 w-full max-w-5xl mx-auto">
            {isLoading ? (
              <div className="flex flex-col justify-center items-center h-full text-emerald-600">
                <Loader2 className="animate-spin w-10 h-10 mb-4" /> 
                <span className="font-bold">連線至 Cloudflare 讀取資料中...</span>
              </div>
            ) : (
              <>
                {activeTab === 'tasks' && (
                  <TasksView 
                    staffList={staffList} currentUser={currentUser} 
                    currentStaffId={currentStaffId} setCurrentStaffId={setCurrentStaffId}
                    currentMonth={currentMonth} setCurrentMonth={setCurrentMonth}
                    schedule={schedule} handleReplace={handleReplace} handleComplete={handleComplete}
                    showAlert={showAlert}
                  />
                )}
                {activeTab === 'leaderboard' && (
                  <LeaderboardView staffList={staffList} schedule={schedule} showAlert={showAlert} />
                )}
                {activeTab === 'admin' && currentUser.role === 'admin' && (
                  <AdminView 
                    staffList={staffList} setStaffList={setStaffList}
                    workerList={workerList} setWorkerList={setWorkerList}
                    generateSchedule={() => generateSchedule(staffList, workerList)}
                    handleDeleteStaff={handleDeleteStaff} handleDeleteWorker={handleDeleteWorker}
                    handleClearStaff={handleClearStaff} handleClearWorkers={handleClearWorkers}
                    showAlert={showAlert} saveData={saveData} schedule={schedule}
                  />
                )}
              </>
            )}
          </main>

          {/* Mobile Bottom Navigation */}
          <nav className="md:hidden bg-white border-t border-slate-200 absolute bottom-0 w-full flex justify-around pb-safe z-20 shadow-[0_-5px_15px_rgba(0,0,0,0.03)]">
            <MobileNavButton icon={<CalendarDays />} label="任務" active={activeTab === 'tasks'} onClick={() => setActiveTab('tasks')} />
            <MobileNavButton icon={<Trophy />} label="排名" active={activeTab === 'leaderboard'} onClick={() => setActiveTab('leaderboard')} />
            {currentUser.role === 'admin' && (
              <MobileNavButton icon={<Settings />} label="管理" active={activeTab === 'admin'} onClick={() => setActiveTab('admin')} />
            )}
          </nav>
        </div>
      </div>
    );
  };

  return (
    <>
      {renderContent()}
      {/* Custom Dialog */}
      {dialog.isOpen && (
        <div className="fixed inset-0 bg-slate-900/60 z-[100] flex items-center justify-center p-4 backdrop-blur-sm">
          <div className="bg-white rounded-3xl w-full max-w-sm overflow-hidden shadow-2xl animate-in fade-in zoom-in-95 duration-200 border border-slate-100">
            <div className="p-6">
              <h3 className="text-lg font-bold text-slate-800 mb-2 flex items-center gap-2">
                {dialog.type === 'confirm' ? <RefreshCw className="text-emerald-500" size={20}/> : <CheckCircle2 className="text-emerald-500" size={20}/>}
                {dialog.type === 'confirm' ? '請確認' : '系統提示'}
              </h3>
              <p className="text-slate-600 whitespace-pre-line leading-relaxed font-medium">{dialog.message}</p>
            </div>
            <div className="bg-slate-50 p-4 flex justify-end gap-3 border-t border-slate-100">
              {dialog.type === 'confirm' && (
                <button onClick={closeDialog} className="px-5 py-2.5 text-slate-500 font-bold hover:bg-slate-200 hover:text-slate-800 rounded-xl transition">
                  取消
                </button>
              )}
              <button 
                onClick={() => {
                  if (dialog.onConfirm) dialog.onConfirm();
                  closeDialog();
                }}
                className={`px-6 py-2.5 text-white font-bold rounded-xl transition shadow-md bg-emerald-600 hover:bg-emerald-700`}
              >
                確定
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

// --- Login Screen (Green) ---
function LoginScreen({ onLogin }) {
  const [inputValue, setInputValue] = useState('');
  
  const handleSubmit = (e) => {
    e.preventDefault();
    if(inputValue.trim()) onLogin(inputValue);
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-slate-50 p-4 relative overflow-hidden">
      {/* Background Decorative Blobs */}
      <div className="absolute top-[-10%] left-[-10%] w-96 h-96 bg-emerald-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
      <div className="absolute bottom-[-20%] right-[-10%] w-96 h-96 bg-teal-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>

      <div className="bg-white/80 backdrop-blur-xl p-8 md:p-10 rounded-3xl shadow-[0_20px_50px_rgba(16,185,129,0.1)] w-full max-w-md border border-white relative z-10">
        <div className="w-20 h-20 bg-emerald-600 text-white rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg shadow-emerald-200 transform rotate-3">
          <User size={36} className="-rotate-3" />
        </div>
        <h1 className="text-2xl font-extrabold text-center text-slate-800 mb-2">移工外宿訪視系統</h1>
        <p className="text-center text-slate-500 mb-8 text-sm font-medium">請輸入您的姓名登入</p>
        
        <form onSubmit={handleSubmit} className="space-y-5">
          <div>
            <input 
              type="text" 
              value={inputValue}
              onChange={e => setInputValue(e.target.value)}
              placeholder="姓名 (例: 王大明)"
              className="w-full px-5 py-4 rounded-xl border border-slate-200 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition text-slate-800 bg-white/50 text-center text-lg font-bold placeholder:text-slate-400 placeholder:font-medium shadow-sm"
              required
            />
          </div>
          <button 
            type="submit"
            className="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-4 rounded-xl transition shadow-lg shadow-emerald-200 text-lg flex justify-center items-center gap-2"
          >
            登入系統
          </button>
        </form>
      </div>
    </div>
  );
}

// --- Navigation Components ---
function DesktopNavButton({ icon, label, active, onClick }) {
  return (
    <button 
      onClick={onClick}
      className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all font-bold ${
        active ? 'bg-emerald-50 text-emerald-700 shadow-sm border border-emerald-100' : 'text-slate-500 hover:bg-slate-50 hover:text-slate-800'
      }`}
    >
      <div className={active ? 'text-emerald-600' : 'text-slate-400'}>{icon}</div>
      <span>{label}</span>
    </button>
  );
}

function MobileNavButton({ icon, label, active, onClick }) {
  return (
    <button onClick={onClick} className={`flex-1 flex flex-col items-center justify-center py-3.5 transition-colors relative ${active ? 'text-emerald-600' : 'text-slate-400 hover:text-slate-600'}`}>
      {active && <div className={`absolute top-0 w-8 h-1 bg-emerald-500 rounded-b-full`}></div>}
      <div className={`${active ? 'scale-110' : 'scale-100'} transition-transform mb-1`}>{icon}</div>
      <span className="text-[10px] font-bold">{label}</span>
    </button>
  );
}

// --- Sub-Views ---

// 1. Tasks View (Green Theme)
function TasksView({ staffList, currentUser, currentStaffId, setCurrentStaffId, currentMonth, setCurrentMonth, schedule, handleReplace, handleComplete, showAlert }) {
  const [selectedTask, setSelectedTask] = useState(null);
  const months = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
  
  const displayStaffId = currentUser.role === 'admin' ? currentStaffId : currentUser.id;
  const myTasks = schedule.filter(s => s.staffId === displayStaffId && s.month === currentMonth);
  const completedCount = myTasks.filter(t => t.status === 'completed').length;

  return (
    <div className="space-y-6 max-w-3xl mx-auto">
      {currentUser.role === 'admin' && (
        <div className="bg-emerald-50 p-4 rounded-xl border border-emerald-100 flex items-center justify-between shadow-sm">
          <label className="text-sm font-semibold text-emerald-800 flex items-center gap-2">
            <User size={16} /> 查看特定負責人視角
          </label>
          <select 
            className="w-1/2 p-2.5 border border-emerald-200 rounded-lg bg-white focus:ring-2 focus:ring-emerald-400 outline-none cursor-pointer font-bold text-slate-700 shadow-sm"
            value={currentStaffId}
            onChange={(e) => setCurrentStaffId(e.target.value)}
          >
            {staffList.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
          </select>
        </div>
      )}

      <div className="bg-white p-5 rounded-3xl shadow-sm border border-slate-100">
        <h2 className="text-lg font-bold mb-4 flex items-center gap-2 text-slate-800">
          <CalendarDays size={20} className="text-emerald-500" /> 2026年度 訪視月份
        </h2>
        <div className="flex overflow-x-auto gap-3 pb-2 scrollbar-hide">
          {months.map(m => (
            <button
              key={m}
              onClick={() => setCurrentMonth(m)}
              className={`flex-shrink-0 w-16 h-16 md:w-20 md:h-20 rounded-2xl flex flex-col items-center justify-center font-bold transition-all ${
                currentMonth === m 
                  ? 'bg-emerald-600 text-white shadow-lg shadow-emerald-200 transform scale-105' 
                  : 'bg-slate-50 text-slate-500 border border-slate-200 hover:bg-emerald-50 hover:text-emerald-600'
              }`}
            >
              <span className="text-xs md:text-sm font-normal mb-1">月份</span>
              <span className="text-xl md:text-2xl leading-none">{m}</span>
            </button>
          ))}
        </div>
      </div>

      <div>
        <div className="flex justify-between items-end mb-4 px-1">
          <h2 className="text-xl font-bold text-slate-800">本月分配名單</h2>
          <span className="text-sm text-slate-500 bg-white px-3.5 py-1.5 rounded-full border border-slate-200 shadow-sm font-medium">
            當月任務: <span className="text-emerald-600 font-extrabold text-base">{completedCount}</span> / {myTasks.length}
          </span>
        </div>

        {myTasks.length === 0 ? (
          <div className="text-center py-16 bg-white rounded-3xl border border-dashed border-slate-300 shadow-sm">
            <CheckCircle2 size={48} className="mx-auto text-slate-200 mb-3" />
            <p className="text-slate-500 font-medium">本月份尚無分配任務</p>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {myTasks.map(task => (
              <TaskCard key={task.id} task={task} onReplace={() => handleReplace(task.id)} onEdit={() => setSelectedTask(task)} />
            ))}
          </div>
        )}
      </div>

      {selectedTask && (
        <CompleteModal 
          task={selectedTask} 
          onClose={() => setSelectedTask(null)}
          onSubmit={(address, image) => handleComplete(selectedTask.id, address, image).then(() => setSelectedTask(null))}
          showAlert={showAlert}
        />
      )}
    </div>
  );
}

function TaskCard({ task, onReplace, onEdit }) {
  const isCompleted = task.status === 'completed';

  return (
    <div className={`p-5 rounded-3xl border transition-all ${isCompleted ? 'bg-emerald-50/50 border-emerald-200 shadow-sm' : 'bg-white border-slate-200 shadow-sm hover:shadow-md'}`}>
      <div className="flex justify-between items-start mb-2">
        <div>
          <h3 className="font-bold text-slate-800 text-lg md:text-xl">{task.workerName}</h3>
          <p className="text-sm text-slate-500 flex items-center gap-1 mt-1 font-medium bg-slate-100 px-2 py-0.5 rounded-md inline-flex">
            <FileText size={14} className="text-slate-400" /> 工號: {task.workerEmpId}
          </p>
        </div>
        <div>
          {isCompleted ? (
             <span className="bg-emerald-100 text-emerald-800 text-xs px-3 py-1.5 rounded-full font-bold flex items-center gap-1 shadow-sm border border-emerald-200">
               <CheckCircle2 size={14}/>已完成
             </span>
          ) : (
             <span className="bg-slate-100 text-slate-600 text-xs px-3 py-1.5 rounded-full font-bold shadow-sm border border-slate-200">待訪視</span>
          )}
        </div>
      </div>

      {isCompleted && (
        <div className="mt-4 text-sm text-slate-700 bg-white p-4 rounded-2xl border border-emerald-100 shadow-sm relative group">
          <div className="flex justify-between items-start pr-16">
            <p className="flex items-start gap-1.5 font-medium leading-relaxed"><MapPin size={16} className="mt-0.5 text-emerald-500 flex-shrink-0"/> {task.address}</p>
          </div>
          <button onClick={onEdit} className="absolute top-3 right-3 text-emerald-600 bg-emerald-50 hover:bg-emerald-100 px-2.5 py-1.5 rounded-lg flex items-center gap-1 text-xs font-bold transition">
            <Edit2 size={14} /> 編輯
          </button>
          {task.imageUrl && (
            <div className="mt-3 relative h-28 w-28 rounded-xl border border-slate-200 overflow-hidden bg-slate-50">
               <img src={task.imageUrl} alt="對話紀錄" className="object-cover w-full h-full" />
            </div>
          )}
        </div>
      )}

      {!isCompleted && (
        <div className="flex gap-3 mt-5">
          <button onClick={onEdit} className="flex-1 bg-emerald-600 hover:bg-emerald-700 text-white py-2.5 rounded-xl text-sm font-bold transition flex items-center justify-center gap-2 shadow-md">
            <Camera size={18} /> 填寫紀錄
          </button>
          <button onClick={onReplace} className="px-4 bg-white hover:bg-slate-50 text-slate-500 py-2.5 rounded-xl text-sm font-bold transition flex items-center justify-center border border-slate-200 shadow-sm" title="無法訪視，點此替換">
            <RefreshCw size={18} /> 替換
          </button>
        </div>
      )}
    </div>
  );
}

function CompleteModal({ task, onClose, onSubmit, showAlert }) {
  const [address, setAddress] = useState(task.address || '');
  const [imagePreview, setImagePreview] = useState(task.imageUrl || null);
  const [uploading, setUploading] = useState(false);

  const handleImageChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => setImagePreview(reader.result);
      reader.readAsDataURL(file);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!address.trim()) return showAlert('請輸入外宿地址');
    if (!imagePreview) return showAlert('請上傳對話紀錄圖片');
    setUploading(true);
    await onSubmit(address, imagePreview);
    setUploading(false);
  };

  return (
    <div className="fixed inset-0 bg-slate-900/60 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
      <div className="bg-white rounded-3xl w-full max-w-md overflow-hidden shadow-2xl animate-in fade-in zoom-in-95 duration-200 border border-slate-100">
        <div className="bg-emerald-600 p-5 flex justify-between items-center text-white">
          <h3 className="font-bold text-lg flex items-center gap-2">
            <CheckCircle2 size={20} className="text-emerald-200" />
            {task.status === 'completed' ? '編輯訪視紀錄' : '完成訪視紀錄'}
          </h3>
          <button onClick={onClose} className="text-white/70 hover:text-white transition bg-black/10 p-1.5 rounded-full"><X size={20}/></button>
        </div>
        
        <form onSubmit={handleSubmit} className="p-6 space-y-5">
          <div className="bg-emerald-50 p-4 rounded-2xl border border-emerald-100">
            <p className="text-xs text-emerald-600 mb-1 font-bold">訪視對象</p>
            <p className="font-bold text-lg text-slate-800">{task.workerName} <span className="text-sm font-normal text-slate-500">({task.workerEmpId})</span></p>
          </div>

          <div>
            <label className="block text-sm font-bold text-slate-700 mb-2 flex items-center gap-1.5">
              <MapPin size={18} className="text-emerald-500"/> 外宿地址
            </label>
            <textarea 
              className="w-full p-3.5 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-emerald-400 outline-none transition shadow-sm bg-slate-50 hover:bg-white"
              rows="3" placeholder="請輸入移工外宿地址..." value={address} onChange={(e) => setAddress(e.target.value)}
            ></textarea>
          </div>

          <div>
            <label className="block text-sm font-bold text-slate-700 mb-2 flex items-center gap-1.5">
              <ImageIcon size={18} className="text-emerald-500"/> 對話紀錄截圖
            </label>
            <div className="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-slate-200 border-dashed rounded-2xl relative hover:bg-slate-50 transition bg-slate-50/50">
              <div className="space-y-2 text-center">
                {imagePreview ? (
                  <img src={imagePreview} alt="預覽" className="mx-auto h-40 object-contain rounded-xl shadow-sm border border-slate-200" />
                ) : (
                  <Camera className="mx-auto h-12 w-12 text-slate-300" />
                )}
                <div className="flex text-sm text-slate-600 mt-2 justify-center">
                  <label htmlFor="file-upload" className="relative cursor-pointer bg-white rounded-lg font-bold text-emerald-600 hover:text-emerald-700 focus-within:outline-none border border-emerald-100 shadow-sm">
                    <span className="px-4 py-2 inline-block">{imagePreview ? '重新選擇圖片' : '點擊上傳圖片'}</span>
                    <input id="file-upload" type="file" accept="image/*" className="sr-only" onChange={handleImageChange} />
                  </label>
                </div>
              </div>
            </div>
          </div>

          <button type="submit" disabled={uploading} className="w-full bg-emerald-600 text-white font-bold py-4 rounded-2xl hover:bg-emerald-700 transition shadow-lg shadow-emerald-200 text-lg mt-2 flex justify-center items-center">
            {uploading ? <Loader2 className="animate-spin" /> : (task.status === 'completed' ? '儲存更新' : '確認送出紀錄')}
          </button>
        </form>
      </div>
    </div>
  );
}

// 2. Leaderboard View (Green Theme with Gold/Silver/Bronze badges)
function LeaderboardView({ staffList, schedule, showAlert }) {
  const stats = staffList.map(staff => {
    const staffTasks = schedule.filter(s => s.staffId === staff.id);
    const completedTasks = staffTasks.filter(s => s.status === 'completed');
    const total = staffTasks.length;
    const completed = completedTasks.length;
    const rate = total === 0 ? 0 : Math.round((completed / total) * 100);
    return { ...staff, total, completed, rate };
  }).sort((a, b) => b.rate - a.rate || b.completed - a.completed);

  const exportToExcel = () => {
    if (!window.XLSX) {
      showAlert("Excel 處理模組載入中，請稍後再試！");
      return;
    }
    const XLSX = window.XLSX;
    const months = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    
    const data = staffList.map(staff => {
      const row = { '負責人': staff.name };
      let totalAssigned = 0;
      let totalCompleted = 0;

      months.forEach(m => {
        const tasks = schedule.filter(s => s.staffId === staff.id && s.month === m);
        const completed = tasks.filter(s => s.status === 'completed').length;
        totalAssigned += tasks.length;
        totalCompleted += completed;
        // 匯出為百分比格式
        row[`${m}月份`] = tasks.length > 0 ? `${Math.round((completed / tasks.length) * 100)}%` : "0%";
      });

      row['總完成'] = totalCompleted;
      row['總分配'] = totalAssigned;
      row['年度完成率'] = totalAssigned ? `${Math.round((totalCompleted / totalAssigned) * 100)}%` : '0%';
      return row;
    });

    const worksheet = XLSX.utils.json_to_sheet(data);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "年度完成率");
    XLSX.writeFile(workbook, "2026年度訪視完成率報表.xlsx");
  };

  return (
    <div className="space-y-6 max-w-4xl mx-auto">
      <div className="bg-emerald-600 p-8 rounded-3xl text-white shadow-xl shadow-emerald-200/50 text-center relative overflow-hidden">
        <Trophy size={48} className="mx-auto mb-3 text-emerald-100 drop-shadow-md relative z-10" />
        <h2 className="text-3xl font-extrabold relative z-10 drop-shadow-sm">2026 年度完成度排名</h2>
        
        <button onClick={exportToExcel} className="mt-6 inline-flex items-center gap-2 bg-white text-emerald-600 hover:bg-emerald-50 px-6 py-3 rounded-xl font-bold transition shadow-lg relative z-10">
          <Download size={18} /> 匯出百分比報表 (.xlsx)
        </button>
      </div>

      <div className="bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden p-2">
        {stats.map((stat, index) => (
          <div key={stat.id} className={`p-4 flex items-center gap-4 rounded-2xl mb-2 last:mb-0 transition border border-transparent ${index === 0 ? 'bg-amber-50/30 border-amber-50' : 'hover:bg-slate-50'}`}>
            <div className={`w-12 h-12 rounded-2xl flex items-center justify-center font-black text-xl shadow-sm ${
              index === 0 ? 'bg-amber-400 text-white shadow-amber-200' : 
              index === 1 ? 'bg-slate-300 text-white shadow-slate-200' : 
              index === 2 ? 'bg-orange-300 text-white shadow-orange-200' : 'bg-slate-100 text-slate-400'
            }`}>
              {index + 1}
            </div>
            
            <div className="flex-1">
              <h3 className="font-bold text-slate-800 text-lg">{stat.name}</h3>
              <div className="w-full bg-slate-100 rounded-full h-2.5 mt-2.5 overflow-hidden">
                <div className={`h-full rounded-full transition-all duration-1000 bg-emerald-500`} style={{ width: `${stat.rate}%` }}></div>
              </div>
            </div>
            
            <div className="text-right">
              <div className="font-extrabold text-2xl text-slate-800">{stat.rate}%</div>
              <div className="text-sm text-slate-500 font-bold bg-slate-100 px-2.5 py-1 rounded-lg inline-block mt-1">{stat.completed} / {stat.total}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// 3. Admin View (Emerald/Green Theme)
function AdminView({ staffList, setStaffList, workerList, setWorkerList, generateSchedule, handleDeleteStaff, handleDeleteWorker, handleClearStaff, handleClearWorkers, showAlert, saveData, schedule }) {
  const [newStaff, setNewStaff] = useState('');
  const [newWorkerEmp, setNewWorkerEmp] = useState('');
  const [newWorkerName, setNewWorkerName] = useState('');

  const handleAddStaff = () => {
    if (!newStaff.trim()) return;
    const newList = [...staffList, { id: `s_${Date.now()}`, name: newStaff.trim() }];
    setStaffList(newList);
    saveData(newList, workerList, schedule);
    setNewStaff('');
  };

  const handleAddWorker = () => {
    if (!newWorkerEmp.trim() || !newWorkerName.trim()) return;
    const newList = [...workerList, { id: `w_${Date.now()}`, empId: newWorkerEmp.trim(), name: newWorkerName.trim() }];
    setWorkerList(newList);
    saveData(staffList, newList, schedule);
    setNewWorkerEmp('');
    setNewWorkerName('');
  };

  const handleImportStaffExcel = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    if (!window.XLSX) return showAlert("Excel 模組載入中，請稍後再試！");
    
    const reader = new FileReader();
    reader.onload = (evt) => {
      const data = new Uint8Array(evt.target.result);
      const workbook = window.XLSX.read(data, { type: 'array' });
      const json = window.XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);
      
      const newStaff = [];
      json.forEach((row, i) => {
        const name = row['姓名'] || row['Name'] || Object.values(row)[0];
        if (name) newStaff.push({ id: `s_imp_${Date.now()}_${i}`, name: String(name).trim() });
      });
      if(newStaff.length > 0) {
        const newList = [...staffList, ...newStaff];
        setStaffList(newList);
        saveData(newList, workerList, schedule);
        showAlert(`成功匯入 ${newStaff.length} 位負責人！`);
      } else showAlert('無法匯入：請確保包含「姓名」欄位。');
      e.target.value = ''; 
    };
    reader.readAsArrayBuffer(file);
  };

  const handleImportWorkerExcel = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    if (!window.XLSX) return showAlert("Excel 模組載入中，請稍後再試！");

    const reader = new FileReader();
    reader.onload = (evt) => {
      const data = new Uint8Array(evt.target.result);
      const workbook = window.XLSX.read(data, { type: 'array' });
      const json = window.XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);
      
      const newWorkers = [];
      json.forEach((row, i) => {
        const empId = row['工號'] || row['EmpId'] || Object.values(row)[0];
        const name = row['英文姓名'] || row['Name'] || Object.values(row)[1];
        if (empId && name) newWorkers.push({ id: `w_imp_${Date.now()}_${i}`, empId: String(empId).trim(), name: String(name).trim() });
      });
      if(newWorkers.length > 0) {
        const newList = [...workerList, ...newWorkers];
        setWorkerList(newList);
        saveData(staffList, newList, schedule);
        showAlert(`成功匯入 ${newWorkers.length} 位移工！`);
      } else showAlert('無法匯入：請確保包含「工號」與「英文姓名」欄位。');
      e.target.value = ''; 
    };
    reader.readAsArrayBuffer(file);
  };

  return (
    <div className="space-y-6 pb-6 max-w-5xl mx-auto">
      <div className="bg-emerald-50 p-6 rounded-3xl border border-emerald-100 shadow-sm flex flex-col md:flex-row items-center justify-between gap-5">
        <div>
          <h2 className="text-xl font-extrabold flex items-center gap-2 mb-2 text-emerald-800">
            <Settings size={22} className="text-emerald-600"/> 系統排程設定
          </h2>
          <p className="text-sm text-slate-600 font-medium">設定好名單後，點擊右方按鈕將任務隨機平均分配至 2026年 3~12 月份。</p>
        </div>
        <button onClick={generateSchedule} className="w-full md:w-auto px-6 py-3.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-xl shadow-lg shadow-emerald-200 transition flex justify-center items-center gap-2 whitespace-nowrap">
          <RefreshCw size={18} /> 產生年度分配表
        </button>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* 負責人 */}
        <div className="bg-white p-5 md:p-6 rounded-3xl shadow-sm border border-slate-100">
          <div className="flex justify-between items-center mb-4">
            <h3 className="font-bold text-slate-800 text-lg flex items-center gap-2">
              <User size={20} className="text-emerald-500"/> 負責人管理 ({staffList.length})
            </h3>
            <div className="flex gap-2">
              <button onClick={handleClearStaff} className="text-sm font-bold text-red-500 bg-red-50 hover:bg-red-100 px-3 py-2 rounded-xl flex items-center gap-1 transition">
                <Trash2 size={14}/> 清空
              </button>
              <label className="cursor-pointer text-sm font-bold text-emerald-700 bg-emerald-50 hover:bg-emerald-100 px-3.5 py-2 rounded-xl flex items-center gap-1.5 transition">
                <Upload size={16}/> 匯入 Excel
                <input type="file" accept=".xlsx, .xls" className="hidden" onChange={handleImportStaffExcel} />
              </label>
            </div>
          </div>
          
          <div className="flex gap-2 mb-5">
            <input type="text" value={newStaff} onChange={e => setNewStaff(e.target.value)} placeholder="輸入負責人姓名" className="flex-1 p-3 border border-slate-200 rounded-xl text-sm outline-none focus:ring-1 focus:ring-emerald-500 bg-slate-50"/>
            <button onClick={handleAddStaff} className="bg-emerald-600 hover:bg-emerald-700 text-white px-4 rounded-xl transition shadow-md"><Plus size={20}/></button>
          </div>
          <div className="flex flex-wrap gap-2 max-h-60 overflow-y-auto">
            {staffList.map(s => (
              <span key={s.id} className="bg-white shadow-sm pl-3.5 pr-1.5 py-1.5 rounded-xl text-sm text-slate-700 border border-slate-200 font-bold flex items-center gap-1">
                {s.name}
                <button onClick={() => handleDeleteStaff(s.id)} className="text-slate-400 hover:text-red-500 p-1 rounded-full hover:bg-red-50 transition"><X size={14} /></button>
              </span>
            ))}
          </div>
        </div>

        {/* 移工 */}
        <div className="bg-white p-5 md:p-6 rounded-3xl shadow-sm border border-slate-100">
          <div className="flex justify-between items-center mb-4">
            <h3 className="font-bold text-slate-800 text-lg flex items-center gap-2">
              <Users size={20} className="text-emerald-500"/> 移工名單 ({workerList.length})
            </h3>
            <div className="flex gap-2">
              <button onClick={handleClearWorkers} className="text-sm font-bold text-red-500 bg-red-50 hover:bg-red-100 px-3 py-2 rounded-xl flex items-center gap-1 transition">
                <Trash2 size={14}/> 清空
              </button>
              <label className="cursor-pointer text-sm font-bold text-emerald-700 bg-emerald-50 hover:bg-emerald-100 px-3.5 py-2 rounded-xl flex items-center gap-1.5 transition">
                <Upload size={16}/> 匯入 Excel
                <input type="file" accept=".xlsx, .xls" className="hidden" onChange={handleImportWorkerExcel} />
              </label>
            </div>
          </div>

          <div className="flex flex-col gap-3 mb-4">
            <div className="flex gap-2">
              <input type="text" value={newWorkerEmp} onChange={e => setNewWorkerEmp(e.target.value)} placeholder="工號" className="w-1/3 p-3 border border-slate-200 rounded-xl text-sm bg-slate-50"/>
              <input type="text" value={newWorkerName} onChange={e => setNewWorkerName(e.target.value)} placeholder="英文姓名" className="flex-1 p-3 border border-slate-200 rounded-xl text-sm bg-slate-50"/>
            </div>
            <button onClick={handleAddWorker} className="w-full bg-emerald-600 hover:bg-emerald-700 text-white py-3 rounded-xl text-sm font-bold flex justify-center items-center gap-1 transition shadow-md">
              <Plus size={16}/> 手動新增移工
            </button>
          </div>
          
          <div className="max-h-60 overflow-y-auto border border-slate-100 rounded-2xl bg-slate-50">
            {workerList.map((w, i) => (
              <div key={w.id} className={`p-3 text-sm flex justify-between items-center border-b border-slate-100 last:border-0 ${i % 2 === 0 ? 'bg-white' : 'bg-slate-50'}`}>
                <span className="font-mono text-slate-500 font-medium w-20">{w.empId}</span>
                <span className="flex-1 text-slate-800 font-bold truncate pl-2">{w.name}</span>
                <button onClick={() => handleDeleteWorker(w.id)} className="text-slate-400 hover:text-red-500 p-1.5 rounded-lg hover:bg-red-50 transition"><Trash2 size={16} /></button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}