import React, { useState, useEffect } from 'react';
import { MessageSquare, BarChart2, Send, RefreshCw, Settings as SettingsIcon, AlertCircle } from 'lucide-react';
import CommentList from './sidebar/components/CommentList';
import Analytics from './sidebar/components/Analytics';
import ReplyGenerator from './sidebar/components/ReplyGenerator';
import Settings from './sidebar/components/Settings';
import { Comment } from './types';
import mockComments from './mockData';

function App() {
  const [activeTab, setActiveTab] = useState<'comments' | 'analytics' | 'reply' | 'settings'>('comments');
  const [comments, setComments] = useState<Comment[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [selectedComment, setSelectedComment] = useState<Comment | null>(null);
  const [mockDelay, setMockDelay] = useState<number>(1000);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    // Simulate loading comments with a delay
    setError(null);
    const timer = setTimeout(() => {
      try {
        setComments(mockComments);
        setIsLoading(false);
      } catch (err) {
        setError('Error loading comments: ' + (err instanceof Error ? err.message : String(err)));
        setIsLoading(false);
      }
    }, mockDelay);

    return () => clearTimeout(timer);
  }, [mockDelay]);

  const refreshComments = () => {
    setIsLoading(true);
    setError(null);
    setTimeout(() => {
      try {
        setComments(mockComments);
        setIsLoading(false);
      } catch (err) {
        setError('Error refreshing comments: ' + (err instanceof Error ? err.message : String(err)));
        setIsLoading(false);
      }
    }, mockDelay);
  };

  const handleSelectComment = (comment: Comment) => {
    setSelectedComment(comment);
    setActiveTab('reply');
  };

  return (
    <div className="flex flex-col min-h-screen bg-gray-100">
      <header className="bg-blue-600 text-white p-4">
        <div className="container mx-auto flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
          <h1 className="text-2xl font-bold">社群留言助手 - 開發模式</h1>
          <div className="flex items-center space-x-4">
            <div className="flex items-center">
              <span className="text-sm mr-2">模擬延遲:</span>
              <select 
                value={mockDelay} 
                onChange={(e) => setMockDelay(Number(e.target.value))}
                className="bg-blue-700 text-white rounded px-2 py-1 text-sm"
              >
                <option value="0">無延遲</option>
                <option value="500">0.5 秒</option>
                <option value="1000">1 秒</option>
                <option value="2000">2 秒</option>
              </select>
            </div>
            <button 
              onClick={refreshComments}
              className="p-2 bg-blue-700 rounded-full text-white hover:bg-blue-800 transition-colors"
              title="重新載入留言"
            >
              <RefreshCw size={16} />
            </button>
          </div>
        </div>
      </header>

      {error && (
        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mx-auto mt-4 container" role="alert">
          <div className="flex items-center">
            <AlertCircle className="mr-2" size={20} />
            <span className="block sm:inline">{error}</span>
          </div>
        </div>
      )}

      <main className="flex-1 container mx-auto p-4 flex flex-col md:flex-row gap-4">
        {/* Sidebar Preview */}
        <div className="w-full md:w-80 bg-white rounded-lg shadow-lg overflow-hidden flex flex-col h-[600px] border border-gray-200">
          {/* Header */}
          <div className="bg-blue-600 text-white p-4 shadow-md">
            <h2 className="text-xl font-bold flex items-center">
              <MessageSquare className="mr-2" size={20} />
              社群留言助手
            </h2>
            <p className="text-sm opacity-80">自動捕獲留言並產生回覆建議</p>
          </div>

          {/* Content */}
          <div className="flex-1 overflow-auto p-4">
            {activeTab === 'comments' && (
              <CommentList 
                comments={comments} 
                isLoading={isLoading} 
                onSelectComment={handleSelectComment}
              />
            )}
            {activeTab === 'analytics' && (
              <Analytics comments={comments} />
            )}
            {activeTab === 'reply' && (
              <ReplyGenerator 
                comment={selectedComment} 
                onBack={() => setActiveTab('comments')} 
              />
            )}
            {activeTab === 'settings' && (
              <Settings />
            )}
          </div>

          {/* Navigation */}
          <nav className="bg-white border-t border-gray-200 p-2">
            <div className="flex justify-around">
              <button 
                onClick={() => setActiveTab('comments')}
                className={`flex flex-col items-center p-2 rounded-md ${activeTab === 'comments' ? 'text-blue-600' : 'text-gray-600'}`}
              >
                <MessageSquare size={20} />
                <span className="text-xs mt-1">留言</span>
              </button>
              <button 
                onClick={() => setActiveTab('analytics')}
                className={`flex flex-col items-center p-2 rounded-md ${activeTab === 'analytics' ? 'text-blue-600' : 'text-gray-600'}`}
              >
                <BarChart2 size={20} />
                <span className="text-xs mt-1">數據</span>
              </button>
              <button 
                onClick={() => setActiveTab('reply')}
                className={`flex flex-col items-center p-2 rounded-md ${activeTab === 'reply' ? 'text-blue-600' : 'text-gray-600'}`}
              >
                <Send size={20} />
                <span className="text-xs mt-1">回覆</span>
              </button>
              <button 
                onClick={() => setActiveTab('settings')}
                className={`flex flex-col items-center p-2 rounded-md ${activeTab === 'settings' ? 'text-blue-600' : 'text-gray-600'}`}
              >
                <SettingsIcon size={20} />
                <span className="text-xs mt-1">設置</span>
              </button>
            </div>
          </nav>
        </div>

        {/* Development Info */}
        <div className="flex-1">
          <div className="bg-white rounded-lg shadow-lg p-6">
            <h2 className="text-xl font-bold mb-4">開發資訊</h2>
            
            <div className="mb-6">
              <h3 className="text-lg font-semibold mb-2">當前狀態</h3>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div className="bg-gray-50 p-3 rounded border border-gray-200">
                  <p className="text-sm font-medium text-gray-700">當前頁面</p>
                  <p className="text-lg">{activeTab}</p>
                </div>
                <div className="bg-gray-50 p-3 rounded border border-gray-200">
                  <p className="text-sm font-medium text-gray-700">留言數量</p>
                  <p className="text-lg">{comments.length}</p>
                </div>
                <div className="bg-gray-50 p-3 rounded border border-gray-200">
                  <p className="text-sm font-medium text-gray-700">載入狀態</p>
                  <p className="text-lg">{isLoading ? '載入中' : '已載入'}</p>
                </div>
                <div className="bg-gray-50 p-3 rounded border border-gray-200">
                  <p className="text-sm font-medium text-gray-700">選中的留言</p>
                  <p className="text-lg">{selectedComment ? `ID: ${selectedComment.id}` : '無'}</p>
                </div>
              </div>
            </div>

            <div className="mb-6">
              <h3 className="text-lg font-semibold mb-2">開發指南</h3>
              <div className="bg-blue-50 p-4 rounded border border-blue-200">
                <p className="mb-2">這是一個開發環境，用於測試 Chrome 擴展的功能。</p>
                <ul className="list-disc pl-5 space-y-1 text-sm">
                  <li>左側顯示的是擴展的側邊欄界面預覽</li>
                  <li>可以調整模擬延遲來測試不同的載入狀態</li>
                  <li>點擊刷新按鈕可以重新載入模擬數據</li>
                  <li>所有功能都使用模擬數據，不會實際抓取網頁留言</li>
                </ul>
              </div>
            </div>

            <div>
              <h3 className="text-lg font-semibold mb-2">構建與測試</h3>
              <div className="bg-gray-50 p-4 rounded border border-gray-200 space-y-3">
                <div>
                  <p className="font-medium">構建擴展：</p>
                  <code className="bg-gray-100 px-2 py-1 rounded text-sm">npm run build</code>
                </div>
                <div>
                  <p className="font-medium">載入擴展：</p>
                  <ol className="list-decimal pl-5 text-sm space-y-1">
                    <li>打開 Chrome 瀏覽器，進入擴展管理頁面 (chrome://extensions/)</li>
                    <li>開啟開發者模式</li>
                    <li>點擊「載入已解壓的擴展」</li>
                    <li>選擇項目的 dist 目錄</li>
                  </ol>
                </div>
                <div>
                  <p className="font-medium">測試擴展：</p>
                  <ol className="list-decimal pl-5 text-sm space-y-1">
                    <li>在任意網頁點擊擴展圖標</li>
                    <li>側邊欄將會打開，顯示留言助手界面</li>
                    <li>如果沒有自動打開，可以右鍵點擊擴展圖標，選擇「打開側邊欄」</li>
                  </ol>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>

      <footer className="bg-gray-800 text-white p-4 text-center">
        <p>社群留言助手 - 開發模式 © 2025</p>
      </footer>
    </div>
  );
}

export default App;