import { Plus } from 'lucide-react';
import { useState } from 'react';
import { useAccounts } from '@/hooks/useAccounts';
import { AccountForm } from './AccountForm';
import { PromptEditor } from '@/components/prompts/PromptEditor';
import { Button } from '@/components/ui/button';
import { ScrollArea } from '@/components/ui/scroll-area';
import type { Account } from '@/types';

export function AccountList() {
  const { accounts, create, update, remove } = useAccounts();
  const [editing, setEditing] = useState<Account | null>(null);
  const [creating, setCreating] = useState(false);
  const [subTab, setSubTab] = useState<'info' | 'prompts'>('info');

  return (
    <div className="flex h-full">
      <ScrollArea className="w-60 border-r border-zinc-800 p-3">
        <div className="flex items-center justify-between mb-3">
          <h2 className="text-sm font-medium text-zinc-300">账户列表</h2>
          <Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => setCreating(true)}>
            <Plus size={14} />
          </Button>
        </div>
        {accounts.map((a) => (
          <button
            key={a.id}
            onClick={() => { setEditing(a); setSubTab('info'); }}
            className="w-full text-left px-3 py-2 rounded-md text-sm hover:bg-zinc-800/50 text-zinc-400 hover:text-zinc-200 transition-colors"
          >
            <div className="font-medium truncate">{a.name}</div>
            <div className="text-xs text-zinc-600">{a.imageModel} · {a.defaultFormat}</div>
          </button>
        ))}
      </ScrollArea>

      <div className="flex-1 flex flex-col">
        <div className="flex gap-0 border-b border-zinc-800 px-6">
          <button
            onClick={() => setSubTab('info')}
            className={`px-3 py-2 text-sm ${subTab === 'info' ? 'border-b-2 border-white text-white' : 'text-zinc-500'}`}
          >
            账户设置
          </button>
          <button
            onClick={() => setSubTab('prompts')}
            className={`px-3 py-2 text-sm ${subTab === 'prompts' ? 'border-b-2 border-white text-white' : 'text-zinc-500'}`}
          >
            提示词模板
          </button>
        </div>
        <div className="flex-1 overflow-hidden">
          {subTab === 'info' ? (
            (editing || creating) ? (
              <div className="p-6">
                <AccountForm
                  account={creating ? undefined : editing!}
                  onSave={(data) => {
                    if (creating) {
                      create(data).then(() => setCreating(false));
                    } else {
                      update(editing!.id, data).then(() => setEditing(null));
                    }
                  }}
                  onDelete={editing ? () => {
                    if (confirm(`确定删除账户「${editing.name}」？`)) {
                      remove(editing.id).then(() => setEditing(null));
                    }
                  } : undefined}
                  onCancel={() => { setEditing(null); setCreating(false); }}
                />
              </div>
            ) : (
              <div className="flex items-center justify-center h-full text-zinc-600 text-sm">
                选择一个账户或创建新账户
              </div>
            )
          ) : (
            <PromptEditor />
          )}
        </div>
      </div>
    </div>
  );
}
