import { useState } from 'react';
import {
  Settings as SettingsIcon,
  BarChart3,
  Bot,
  Puzzle,
  Blocks,
  MessageSquare,
  FolderOpen,
  Shield,
  MessageCircle,
  Info,
  ArrowLeft,
} from 'lucide-react';
import { General } from './General';
import { UsageStats } from './UsageStats';
import { ModelsAPI } from './ModelsAPI';
import { MCPServices } from './MCPServices';
import { Skills } from './Skills';
import { IMChannels } from './IMChannels';
import { Workspace } from './Workspace';
import { Privacy } from './Privacy';
import { About } from './About';

interface SettingsLayoutProps {
  onBack: () => void;
}

type SettingsPage =
  | 'general'
  | 'usage'
  | 'models'
  | 'mcp'
  | 'skills'
  | 'im'
  | 'workspace'
  | 'privacy'
  | 'feedback'
  | 'about';

const menuItems: { id: SettingsPage; label: string; icon: React.ReactNode }[] = [
  { id: 'general', label: '通用', icon: <SettingsIcon className="w-4 h-4" /> },
  { id: 'usage', label: '用量统计', icon: <BarChart3 className="w-4 h-4" /> },
  { id: 'models', label: '模型与 API', icon: <Bot className="w-4 h-4" /> },
  { id: 'mcp', label: 'MCP 服务', icon: <Puzzle className="w-4 h-4" /> },
  { id: 'skills', label: '技能', icon: <Blocks className="w-4 h-4" /> },
  { id: 'im', label: 'IM 频道', icon: <MessageSquare className="w-4 h-4" /> },
  { id: 'workspace', label: '工作区', icon: <FolderOpen className="w-4 h-4" /> },
  { id: 'privacy', label: '数据与隐私', icon: <Shield className="w-4 h-4" /> },
  { id: 'feedback', label: '提交反馈', icon: <MessageCircle className="w-4 h-4" /> },
  { id: 'about', label: '关于', icon: <Info className="w-4 h-4" /> },
];

export function SettingsLayout({ onBack }: SettingsLayoutProps) {
  const [activePage, setActivePage] = useState<SettingsPage>('general');

  const renderPage = () => {
    switch (activePage) {
      case 'general': return <General />;
      case 'usage': return <UsageStats />;
      case 'models': return <ModelsAPI />;
      case 'mcp': return <MCPServices />;
      case 'skills': return <Skills />;
      case 'im': return <IMChannels />;
      case 'workspace': return <Workspace />;
      case 'privacy': return <Privacy />;
      case 'feedback': return <Feedback />;
      case 'about': return <About />;
      default: return <General />;
    }
  };

  return (
    <div className="h-screen flex bg-white">
      {/* Left navigation */}
      <aside className="w-56 bg-gray-50 border-r border-gray-200 flex flex-col flex-shrink-0">
        <button
          onClick={onBack}
          className="flex items-center gap-2 px-4 py-3 text-sm text-gray-500 hover:text-gray-700 border-b border-gray-200"
        >
          <ArrowLeft className="w-4 h-4" />
          返回应用
        </button>

        <nav className="flex-1 py-2">
          {menuItems.map((item) => (
            <button
              key={item.id}
              onClick={() => setActivePage(item.id)}
              className={`w-full flex items-center gap-3 px-4 py-2.5 text-sm transition-colors ${
                activePage === item.id
                  ? 'bg-orange-50 text-orange-600 font-medium'
                  : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
              }`}
            >
              {item.icon}
              {item.label}
            </button>
          ))}
        </nav>
      </aside>

      {/* Main content */}
      <main className="flex-1 overflow-y-auto">
        <div className="max-w-2xl mx-auto px-8 py-8">
          {renderPage()}
        </div>
      </main>
    </div>
  );
}

// Simple feedback page (inline)
function Feedback() {
  const [text, setText] = useState('');
  return (
    <div>
      <h1 className="text-2xl font-bold text-gray-900 mb-2">提交反馈</h1>
      <p className="text-sm text-gray-500 mb-6">请描述你遇到的问题或建议。默认会附带本地日志，便于快速定位问题。</p>
      <textarea
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="请尽量详细描述复现步骤、期望结果和实际结果"
        className="w-full h-40 border border-gray-300 rounded-lg p-3 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"
      />
      <button
        disabled={!text.trim()}
        className="mt-4 px-6 py-2 bg-orange-500 text-white text-sm rounded-lg hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        提交
      </button>
    </div>
  );
}
