import React, { useState, useEffect, useRef } from 'react';
import { 
  Mail, 
  Calendar as CalendarIcon, 
  LayoutGrid,
  User, 
  Send, 
  Clock, 
  Star, 
  Plus,
  Bot,
  LogOut,
  ChevronRight,
  Sun,
  Moon,
  HelpCircle,
  Info,
  Check,
  AlertCircle,
  Search,
  Filter
} from 'lucide-react';

// --- 模擬資料 (Mock Data) ---

const INITIAL_EMAILS = [
  { id: 1, from: "林經理 (Kevin)", subject: "Q4 專案進度匯報確認", snippet: "關於下週的簡報內容，我有幾個重點...", date: "09:30", isHuman: true, isImportant: true, read: false },
  { id: 3, from: "陳小美 (Mei)", subject: "週末聚餐", snippet: "嘿！這週五晚上有空嗎？...", date: "昨天", isHuman: true, isImportant: true, read: true },
  { id: 5, from: "張總監", subject: "緊急：客戶需求變更", snippet: "客戶剛剛來電表示規格需要大改...", date: "10/22", isHuman: true, isImportant: true, read: true },
  { id: 7, from: "系統通知", subject: "伺服器維護公告", snippet: "將於今晚進行停機維護...", date: "10:00", isHuman: false, isImportant: true, read: false },
];

const INITIAL_EVENTS = [
  { id: 101, title: "部門週會", time: "10:00", endTime: "11:00", type: "work", day: 25 },
  { id: 102, title: "與客戶午餐", time: "12:30", endTime: "14:00", type: "personal", day: 25 },
  { id: 103, title: "專案衝刺會議", time: "15:00", endTime: "17:00", type: "work", day: 25 },
  { id: 104, title: "健身房", time: "18:30", endTime: "19:30", type: "personal", day: 25 },
  { id: 105, title: "產品發布會", time: "14:00", endTime: "16:00", type: "work", day: 26 },
  { id: 106, title: "家庭聚餐", time: "18:00", endTime: "20:00", type: "personal", day: 27 },
];

// --- 元件: 用戶頭像 ---
const UserAvatar = () => (
  <div className="w-9 h-9 rounded-full bg-indigo-500 border-2 border-indigo-400 flex items-center justify-center text-white font-bold shadow-lg shadow-indigo-500/30">
    U
  </div>
);

// --- 主程式 ---

export default function SmartDashboard() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [isDarkMode, setIsDarkMode] = useState(true); // 預設深色模式
  const [emails, setEmails] = useState([]);
  const [events, setEvents] = useState([]);
  const [chatInput, setChatInput] = useState("");
  const [chatHistory, setChatHistory] = useState([
    { role: 'assistant', content: '早安。我是您的智能助理。今日行程與重要信件已準備就緒。' }
  ]);
  const [activeTab, setActiveTab] = useState('dashboard'); // dashboard, calendar, mail, help
  const [calendarView, setCalendarView] = useState('day'); // day, week, month
  const chatEndRef = useRef(null);

  // 初始化
  const handleLogin = () => {
    setIsLoggedIn(true);
    setTimeout(() => {
      setEmails(INITIAL_EMAILS);
      setEvents(INITIAL_EVENTS);
    }, 600);
  };

  useEffect(() => {
    chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [chatHistory]);

  // AI 邏輯
  const processAICommand = (input) => {
    const lowerInput = input.toLowerCase();
    let response = "";

    if (lowerInput.includes("新增") || lowerInput.includes("安排")) {
      const newEvent = {
        id: Date.now(),
        title: input.replace(/(新增|安排|行程|會議)/g, "").trim() || "新事項",
        time: "09:00", endTime: "10:00", type: "work", day: 25
      };
      setEvents([...events, newEvent]);
      response = `已為您新增行程：「${newEvent.title}」。`;
    } else if (lowerInput.includes("刪除") || lowerInput.includes("取消")) {
      if (events.length > 0) {
        const removed = events[events.length - 1];
        setEvents(events.slice(0, -1));
        response = `已取消「${removed.title}」。`;
      } else {
        response = "目前無行程可刪除。";
      }
    } else if (lowerInput.includes("月")) {
        setCalendarView('month');
        response = "已切換至月視圖。";
    } else if (lowerInput.includes("週") || lowerInput.includes("周")) {
        setCalendarView('week');
        response = "已切換至週視圖。";
    } else if (lowerInput.includes("日")) {
        setCalendarView('day');
        response = "已切換至日視圖。";
    } else {
      response = "收到。我可以幫您新增行程、切換視圖或朗讀信件。如果不確定如何操作，請查看左側的「使用指南」。";
    }
    return response;
  };

  const handleSendMessage = (e) => {
    e.preventDefault();
    if (!chatInput.trim()) return;
    setChatHistory([...chatHistory, { role: 'user', content: chatInput }]);
    const currentInput = chatInput;
    setChatInput("");
    setTimeout(() => {
      setChatHistory(prev => [...prev, { role: 'assistant', content: processAICommand(currentInput) }]);
    }, 500);
  };

  // --- 主題樣式定義 (Theme Classes) ---
  const theme = {
    bg: isDarkMode ? "bg-slate-950" : "bg-gray-50",
    text: isDarkMode ? "text-slate-300" : "text-slate-600",
    textHead: isDarkMode ? "text-slate-100" : "text-slate-800",
    panelBg: isDarkMode ? "bg-slate-900" : "bg-white",
    panelBorder: isDarkMode ? "border-slate-800" : "border-gray-200",
    navBg: isDarkMode ? "bg-slate-900" : "bg-white",
    navBorder: isDarkMode ? "border-slate-800" : "border-gray-200",
    inputBg: isDarkMode ? "bg-slate-950" : "bg-gray-100",
    hoverBg: isDarkMode ? "hover:bg-slate-800" : "hover:bg-gray-100",
    cardHover: isDarkMode ? "hover:bg-slate-800" : "hover:bg-blue-50",
    divider: isDarkMode ? "border-slate-800" : "border-gray-100",
    scrollTrack: isDarkMode ? "bg-slate-900" : "bg-gray-100",
    subText: isDarkMode ? "text-slate-500" : "text-gray-400",
  };

  // --- 登入畫面 ---
  if (!isLoggedIn) {
    return (
      <div className={`min-h-screen flex flex-col items-center justify-center p-4 transition-colors duration-500 ${theme.bg} ${theme.text}`}>
        <div className={`${theme.panelBg} p-8 rounded-3xl border ${theme.panelBorder} shadow-2xl w-full max-w-md text-center relative overflow-hidden`}>
          <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>
          
          <div className="mb-8 flex justify-center">
            <div className={`p-5 rounded-2xl shadow-inner border ${theme.panelBorder} ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`}>
              <Bot className="w-12 h-12 text-indigo-500" />
            </div>
          </div>
          <h1 className={`text-3xl font-bold mb-3 tracking-tight ${theme.textHead}`}>Smart Workspace</h1>
          <p className={`${theme.subText} mb-10 text-sm leading-relaxed`}>
            沉浸式工作站<br/>整合 Gmail 與 Calendar 的第二大腦
          </p>
          <button 
            onClick={handleLogin}
            className="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-medium py-4 px-6 rounded-xl flex items-center justify-center gap-3 transition-all shadow-lg shadow-indigo-900/30 group"
          >
            <span className="group-hover:translate-x-1 transition-transform">啟動工作站</span>
            <ChevronRight size={18} className="opacity-70" />
          </button>
        </div>
      </div>
    );
  }

  // --- 主介面 ---
  return (
    <div className={`flex h-screen font-sans overflow-hidden transition-colors duration-300 ${theme.bg} ${theme.text}`}>
      
      {/* 側邊導航 */}
      <nav className={`w-16 ${theme.navBg} border-r ${theme.navBorder} flex flex-col items-center py-6 gap-6 z-20 shadow-xl transition-colors duration-300`}>
        <div className={`p-2 rounded-xl mb-2 ${isDarkMode ? 'bg-indigo-600/20' : 'bg-indigo-50'}`}>
          <Bot className="w-6 h-6 text-indigo-500" />
        </div>
        <NavItem icon={<LayoutGrid />} active={activeTab === 'dashboard'} onClick={() => setActiveTab('dashboard')} tooltip="總覽" theme={theme} isDarkMode={isDarkMode} />
        <NavItem icon={<CalendarIcon />} active={activeTab === 'calendar'} onClick={() => setActiveTab('calendar')} tooltip="行事曆" theme={theme} isDarkMode={isDarkMode} />
        <NavItem icon={<Mail />} active={activeTab === 'mail'} onClick={() => setActiveTab('mail')} tooltip="信箱" theme={theme} isDarkMode={isDarkMode} />
        
        {/* 使用指南按鈕 */}
        <NavItem icon={<HelpCircle />} active={activeTab === 'help'} onClick={() => setActiveTab('help')} tooltip="使用指南" theme={theme} isDarkMode={isDarkMode} />

        <div className="mt-auto flex flex-col gap-4 items-center">
            {/* 模式切換 */}
            <button 
                onClick={() => setIsDarkMode(!isDarkMode)} 
                className={`p-2 rounded-full transition-all duration-300 ${theme.hoverBg} ${isDarkMode ? 'text-yellow-400' : 'text-slate-400'}`}
                title={isDarkMode ? "切換至淺色模式" : "切換至深色模式"}
            >
                {isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
            </button>
            
            <div className={`h-px w-8 ${theme.divider}`}></div>
            
            <button onClick={() => setIsLoggedIn(false)} className={`p-2 text-slate-400 hover:text-red-400 transition-colors ${theme.hoverBg} rounded-xl`}>
                <LogOut size={20} />
            </button>
        </div>
      </nav>

      {/* 主要區域 */}
      <main className="flex-1 flex overflow-hidden relative">
        
        {/* 內容區塊 (左側大區塊) */}
        <div className="flex-1 flex flex-col min-w-0">
          
          {/* 頂部資訊列 */}
          <header className={`h-14 border-b ${theme.panelBorder} ${isDarkMode ? 'bg-slate-900/50' : 'bg-white/80'} backdrop-blur-md flex items-center justify-between px-6 z-10 transition-colors duration-300`}>
            <div className="flex items-center gap-4">
                <h2 className={`text-lg font-semibold tracking-wide ${theme.textHead}`}>
                {activeTab === 'dashboard' ? 'Dashboard' : activeTab === 'mail' ? 'Inbox' : activeTab === 'calendar' ? 'Calendar' : 'Help Center'}
                </h2>
                {/* 日期顯示 */}
                <div className={`hidden md:flex items-center gap-2 text-xs px-3 py-1 rounded-full border ${isDarkMode ? 'bg-slate-800/50 border-slate-700/50 text-indigo-300' : 'bg-gray-100 border-gray-200 text-indigo-600'}`}>
                    <Clock size={12} />
                    <span className="font-mono">2023.10.25 Wed</span>
                </div>
            </div>
            <div className="flex items-center gap-4">
                <div className="flex gap-1">
                   <StatusDot color="bg-green-500" />
                   <StatusDot color="bg-indigo-500" animate />
                </div>
                <UserAvatar />
            </div>
          </header>

          {/* 內容捲動區 */}
          <div className="flex-1 overflow-y-auto overflow-x-hidden p-4 lg:p-6 custom-scrollbar">
            
            {activeTab === 'help' ? (
                <Documentation theme={theme} isDarkMode={isDarkMode} />
            ) : (
                <>
                    {/* 上半部：強化的行事曆區塊 (Dashboard 模式下) */}
                    <div className="mb-6 flex flex-col gap-4 h-[55vh]">
                        <div className="flex justify-between items-end mb-1">
                            <div className={`flex gap-2 p-1 rounded-lg border ${theme.panelBg} ${theme.panelBorder}`}>
                                <ViewToggle active={calendarView === 'day'} onClick={() => setCalendarView('day')} label="日 Day" theme={theme} isDarkMode={isDarkMode} />
                                <ViewToggle active={calendarView === 'week'} onClick={() => setCalendarView('week')} label="週 Week" theme={theme} isDarkMode={isDarkMode} />
                                <ViewToggle active={calendarView === 'month'} onClick={() => setCalendarView('month')} label="月 Month" theme={theme} isDarkMode={isDarkMode} />
                            </div>
                            <button className="text-xs flex items-center gap-1 bg-indigo-600 hover:bg-indigo-500 text-white px-3 py-1.5 rounded-lg transition-all shadow-lg shadow-indigo-500/20">
                                <Plus size={14} /> 新增行程
                            </button>
                        </div>

                        {/* 行事曆容器 */}
                        <div className={`flex-1 rounded-2xl border ${theme.panelBorder} ${theme.panelBg} overflow-hidden shadow-sm relative flex flex-col transition-colors duration-300`}>
                            {/* 模擬不同視圖 */}
                            {calendarView === 'day' && (
                                <div className="flex-1 overflow-y-auto p-4 relative custom-scrollbar">
                                    {/* 時間軸背景線 */}
                                    {[9, 10, 11, 12, 13, 14, 15, 16, 17, 18].map(hour => (
                                        <div key={hour} className={`flex items-start h-20 border-b ${theme.divider} group`}>
                                            <div className={`w-14 text-right pr-4 text-xs font-mono pt-1 transition-colors ${theme.subText} group-hover:text-indigo-400`}>{hour}:00</div>
                                            <div className="flex-1 relative"></div>
                                        </div>
                                    ))}
                                    
                                    {/* 行程卡片 (絕對定位模擬) */}
                                    {events.filter(e => e.day === 25).map((event, idx) => {
                                        const startHour = parseInt(event.time.split(':')[0]);
                                        const top = (startHour - 9) * 80 + 10; // 簡單計算位置
                                        return (
                                            <div key={event.id} 
                                                className={`absolute left-16 right-4 p-3 rounded-lg border-l-4 text-sm shadow-sm hover:shadow-md hover:scale-[1.005] transition-all cursor-pointer
                                                    ${event.type === 'work' 
                                                        ? (isDarkMode ? 'bg-indigo-900/40 border-indigo-500 text-indigo-100' : 'bg-indigo-50 border-indigo-500 text-indigo-800') 
                                                        : (isDarkMode ? 'bg-emerald-900/40 border-emerald-500 text-emerald-100' : 'bg-emerald-50 border-emerald-500 text-emerald-800')}`}
                                                style={{ top: `${top}px`, height: '70px' }}
                                            >
                                                <div className="font-bold flex justify-between">
                                                    {event.title}
                                                    <span className="text-xs opacity-70 font-normal">{event.time} - {event.endTime}</span>
                                                </div>
                                                <div className="text-xs opacity-80 mt-1 flex items-center gap-1">
                                                    {event.type === 'work' ? '工作' : '私人'}
                                                </div>
                                            </div>
                                        );
                                    })}
                                </div>
                            )}

                            {calendarView === 'week' && (
                                <div className={`flex-1 grid grid-cols-7 divide-x ${theme.divider}`}>
                                    {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day, i) => (
                                        <div key={day} className={`flex flex-col ${i === 3 ? (isDarkMode ? 'bg-slate-800/30' : 'bg-blue-50/30') : ''}`}>
                                            <div className={`p-2 text-center border-b ${theme.divider} ${i === 3 ? 'text-indigo-500 font-bold' : theme.subText}`}>
                                                <div className="text-xs">{day}</div>
                                                <div className="text-sm">{22 + i}</div>
                                            </div>
                                            <div className="flex-1 p-1 space-y-1">
                                                {events.filter(e => (e.day === 22 + i)).map(e => (
                                                    <div key={e.id} className="h-1.5 rounded-full bg-indigo-500 w-full opacity-70"></div>
                                                ))}
                                                {i === 3 && <div className={`p-1 rounded text-[10px] truncate ${isDarkMode ? 'bg-indigo-600/20 text-indigo-200' : 'bg-indigo-100 text-indigo-700'}`}>部門週會</div>}
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            )}

                            {calendarView === 'month' && (
                                <div className="flex-1 p-4">
                                    <div className="grid grid-cols-7 gap-1 h-full">
                                        {Array.from({length: 35}).map((_, i) => {
                                            const day = i - 2; // Offset for month start
                                            const isToday = day === 25;
                                            return (
                                                <div key={i} className={`rounded-lg p-1 border flex flex-col ${isToday ? (isDarkMode ? 'bg-slate-800 border-indigo-500/50' : 'bg-white border-indigo-500 shadow-sm') : `border-transparent ${theme.hoverBg}`}`}>
                                                    {day > 0 && day <= 31 && (
                                                        <>
                                                            <span className={`text-xs font-mono mb-1 ${isToday ? 'text-indigo-500 font-bold' : theme.subText}`}>{day}</span>
                                                            <div className="flex flex-col gap-1">
                                                                {day === 25 && <div className="h-1 w-full bg-indigo-500 rounded-full"></div>}
                                                                {day === 25 && <div className="h-1 w-2/3 bg-emerald-500 rounded-full"></div>}
                                                                {day === 26 && <div className="h-1 w-full bg-indigo-500 rounded-full"></div>}
                                                            </div>
                                                        </>
                                                    )}
                                                </div>
                                            )
                                        })}
                                    </div>
                                </div>
                            )}
                        </div>
                    </div>

                    {/* 下半部：重要郵件與摘要 */}
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-[35vh]">
                        
                        {/* 郵件列表 */}
                        <div className={`rounded-2xl border ${theme.panelBorder} ${theme.panelBg} flex flex-col overflow-hidden shadow-sm transition-colors duration-300`}>
                            <div className={`p-3 border-b ${theme.panelBorder} flex justify-between items-center ${isDarkMode ? 'bg-slate-900/80' : 'bg-white/80'} backdrop-blur`}>
                                <h3 className={`font-medium flex items-center gap-2 text-sm ${theme.textHead}`}>
                                    <Mail size={16} className="text-indigo-500" /> 
                                    重要信箱 (AI Filtered)
                                </h3>
                                <span className={`text-[10px] px-2 py-0.5 rounded border ${isDarkMode ? 'bg-indigo-900/50 text-indigo-300 border-indigo-500/30' : 'bg-indigo-50 text-indigo-600 border-indigo-200'}`}>
                                    僅顯示真人與緊急
                                </span>
                            </div>
                            <div className="flex-1 overflow-y-auto p-0">
                                {emails.filter(e => e.isImportant).map(email => (
                                    <div key={email.id} className={`p-3 border-b ${theme.divider} ${theme.cardHover} transition-colors cursor-pointer group`}>
                                        <div className="flex justify-between items-start mb-1">
                                            <span className={`text-sm font-medium ${email.read ? theme.subText : theme.textHead}`}>{email.from}</span>
                                            <span className={`text-[10px] font-mono ${theme.subText}`}>{email.date}</span>
                                        </div>
                                        <div className="text-xs text-indigo-500 mb-0.5 truncate">{email.subject}</div>
                                        <p className={`text-[11px] truncate transition-colors ${theme.subText}`}>{email.snippet}</p>
                                    </div>
                                ))}
                            </div>
                        </div>

                        {/* AI 摘要或待辦 */}
                        <div className={`rounded-2xl border ${theme.panelBorder} ${theme.panelBg} flex flex-col shadow-sm p-4 relative overflow-hidden transition-colors duration-300`}>
                            <div className="absolute top-0 right-0 p-2 opacity-10">
                                <Bot size={100} className={isDarkMode ? 'text-white' : 'text-indigo-900'} />
                            </div>
                            <h3 className={`font-medium mb-3 text-sm flex items-center gap-2 ${theme.textHead}`}>
                                <Star size={16} className="text-yellow-500" />
                                AI 每日簡報
                            </h3>
                            <div className={`space-y-3 text-sm flex-1 ${theme.subText}`}>
                                <div className="flex gap-3 items-start">
                                    <div className="mt-1 min-w-[4px] h-4 bg-indigo-500 rounded-full"></div>
                                    <p>今日共有 <span className={`${theme.textHead} font-bold`}>3</span> 個會議，下午空檔適合處理 Q4 簡報。</p>
                                </div>
                                <div className="flex gap-3 items-start">
                                    <div className="mt-1 min-w-[4px] h-4 bg-yellow-500 rounded-full"></div>
                                    <p>發現 <span className={`${theme.textHead} font-bold`}>1</span> 封來自張總監的緊急郵件，建議優先回覆。</p>
                                </div>
                                <div className="flex gap-3 items-start">
                                    <div className="mt-1 min-w-[4px] h-4 bg-emerald-500 rounded-full"></div>
                                    <p>下週二似乎沒有行程，是否要安排專案回顧？</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </>
            )}

          </div>
        </div>

        {/* 右側：AI 對話面板 */}
        <div className={`w-72 ${theme.navBg} border-l ${theme.navBorder} flex flex-col z-10 shadow-2xl transition-colors duration-300`}>
            {/* Chat Header */}
            <div className={`p-4 border-b ${theme.navBorder} ${theme.navBg}`}>
                <div className="flex items-center gap-2 text-indigo-500 font-bold text-sm">
                    <Bot size={18} />
                    Copilot
                </div>
            </div>

            {/* Messages */}
            <div className={`flex-1 overflow-y-auto p-4 space-y-4 ${theme.bg}`}>
                {chatHistory.map((msg, idx) => (
                    <div key={idx} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
                        <div className={`max-w-[90%] p-3 rounded-2xl text-xs leading-relaxed shadow-md ${
                            msg.role === 'user' 
                                ? 'bg-indigo-600 text-white rounded-br-none' 
                                : `${theme.panelBg} ${theme.text} border ${theme.panelBorder} rounded-bl-none`
                        }`}>
                            {msg.content}
                        </div>
                    </div>
                ))}
                <div ref={chatEndRef} />
            </div>

            {/* Input */}
            <div className={`p-3 ${theme.panelBg} border-t ${theme.navBorder}`}>
                <form onSubmit={handleSendMessage} className="relative">
                    <input
                        type="text"
                        value={chatInput}
                        onChange={(e) => setChatInput(e.target.value)}
                        placeholder="Ask AI to schedule..."
                        className={`w-full ${theme.inputBg} border ${theme.navBorder} rounded-lg py-2.5 pl-3 pr-10 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 transition-all text-xs ${theme.text} placeholder-slate-500`}
                    />
                    <button 
                        type="submit" 
                        disabled={!chatInput.trim()}
                        className="absolute right-1.5 top-1.5 p-1.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-md transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                    >
                        <Send size={12} />
                    </button>
                </form>
                <div className="mt-3 grid grid-cols-2 gap-2">
                    <QuickCmd onClick={() => setChatInput("切換到月視圖")} label="月視圖" theme={theme} />
                    <QuickCmd onClick={() => setChatInput("幫我新增下午會議")} label="新增會議" theme={theme} />
                </div>
            </div>
        </div>

      </main>
    </div>
  );
}

// --- 文件說明頁面 (New Feature) ---

function Documentation({ theme, isDarkMode }) {
    const sections = [
        {
            title: "智能儀表板總覽",
            icon: <LayoutGrid size={20} className="text-indigo-500" />,
            content: "這是您的第二個大腦。左側導覽列可切換總覽、行事曆與信箱。右側是 AI Copilot，隨時待命協助您新增行程或查詢資料。上方是強化的行事曆視圖，下方則自動為您整理出最重要的信件與每日摘要。"
        },
        {
            title: "AI 郵件過濾機制",
            icon: <Filter size={20} className="text-pink-500" />,
            content: "系統內建「防罐頭」演算法。它會自動分析寄件人與內容：\n• 隱藏：促銷廣告、系統通知、Netflix 等訂閱信。\n• 顯示：來自真實人類的對話、標記為「緊急」或「重要」的郵件。\n• 歷史：自動往前追溯三個月的重要紀錄，讓您不錯過任何脈絡。"
        },
        {
            title: "行事曆視圖操作",
            icon: <CalendarIcon size={20} className="text-emerald-500" />,
            content: "在儀表板上方，您可以自由切換三種模式：\n• 日 (Day)：適合詳細安排當天行程，視覺化時間塊。\n• 週 (Week)：適合查看一週的忙碌程度分佈。\n• 月 (Month)：適合宏觀規劃，查看整月的行程點狀圖。"
        },
        {
            title: "Copilot 指令大全",
            icon: <Bot size={20} className="text-blue-500" />,
            content: "您可以直接在右側對話框輸入自然語言，例如：\n• 「幫我新增明天下午兩點的會議」\n• 「刪除最近的一個行程」\n• 「切換到月視圖」\n• 「有哪些重要信件？」\n\nAI 會自動解析您的意圖並直接操作介面。"
        }
    ];

    return (
        <div className={`max-w-4xl mx-auto ${theme.text}`}>
            <div className="mb-8 text-center">
                <h2 className={`text-2xl font-bold mb-2 ${theme.textHead}`}>使用指南 & 功能說明</h2>
                <p className={theme.subText}>幫助您快速上手 Smart Workspace 的所有功能</p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {sections.map((section, idx) => (
                    <div key={idx} className={`p-6 rounded-2xl border ${theme.panelBorder} ${theme.panelBg} shadow-sm hover:shadow-md transition-shadow`}>
                        <div className="flex items-center gap-3 mb-4">
                            <div className={`p-2 rounded-lg ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`}>
                                {section.icon}
                            </div>
                            <h3 className={`font-bold ${theme.textHead}`}>{section.title}</h3>
                        </div>
                        <p className={`text-sm leading-relaxed whitespace-pre-line ${theme.subText}`}>
                            {section.content}
                        </p>
                    </div>
                ))}
            </div>

            <div className={`mt-8 p-6 rounded-2xl border border-dashed ${isDarkMode ? 'border-slate-700 bg-slate-900/50' : 'border-indigo-200 bg-indigo-50/50'}`}>
                <h4 className={`font-bold mb-2 flex items-center gap-2 ${theme.textHead}`}>
                    <Info size={18} className="text-indigo-500" />
                    小提示
                </h4>
                <ul className={`list-disc list-inside text-sm space-y-1 ${theme.subText}`}>
                    <li>點擊左下角的 <Sun className="inline w-4 h-4 mx-1" /> 圖示可以切換深色/淺色模式。</li>
                    <li>點擊行程卡片上的垃圾桶圖示可以直接刪除該行程。</li>
                    <li>AI 每日簡報會根據您的行程變動即時更新。</li>
                </ul>
            </div>
        </div>
    );
}

// --- 小元件 (Updated with Theme) ---

function NavItem({ icon, active, onClick, tooltip, theme, isDarkMode }) {
  return (
    <button 
      onClick={onClick}
      title={tooltip}
      className={`p-3 rounded-xl transition-all duration-300 ${active 
          ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-500/20' 
          : `${theme.subText} ${theme.hoverBg} hover:text-indigo-500`}`}
    >
      {React.cloneElement(icon, { size: 20 })}
    </button>
  );
}

function ViewToggle({ active, onClick, label, theme, isDarkMode }) {
    return (
        <button 
            onClick={onClick}
            className={`px-3 py-1 text-xs rounded-md transition-all ${
                active 
                ? (isDarkMode ? 'bg-slate-700 text-white shadow-sm' : 'bg-white text-indigo-600 shadow border border-gray-200 font-medium')
                : `${theme.subText} hover:${theme.text} ${theme.hoverBg}`
            }`}
        >
            {label}
        </button>
    )
}

function StatusDot({ color, animate }) {
    return (
        <div className="relative flex h-2.5 w-2.5">
            {animate && <span className={`animate-ping absolute inline-flex h-full w-full rounded-full ${color} opacity-75`}></span>}
            <span className={`relative inline-flex rounded-full h-2.5 w-2.5 ${color}`}></span>
        </div>
    )
}

function QuickCmd({ onClick, label, theme }) {
    return (
        <button onClick={onClick} className={`text-[10px] py-1.5 rounded border transition-colors ${theme.panelBg} ${theme.panelBorder} ${theme.subText} hover:text-indigo-500 hover:border-indigo-500/50`}>
            {label}
        </button>
    )
}