import { useState } from 'react';
import { ArrowLeft, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { AccountBasicTab } from './AccountBasicTab';
import { AccountPromptTab } from './AccountPromptTab';
import { AccountCapCutTab } from './AccountCapCutTab';
import { AccountReferencesTab } from './AccountReferencesTab';
import type { Account } from '@/types';

const TABS = [
  { key: 'basic', label: '基本信息' },
  { key: 'prompts', label: '提示词' },
  { key: 'capcut', label: 'CapCut' },
  { key: 'references', label: '参考图' },
] as const;

type TabKey = typeof TABS[number]['key'];

interface Props {
  account: Account;
  onSave: (data: Partial<Account>) => void;
  onDelete: () => void;
  onBack: () => void;
}

export function AccountDetail({ account, onSave, onDelete, onBack }: Props) {
  const [tab, setTab] = useState<TabKey>('basic');

  return (
    <div className="flex flex-col h-full">
      {/* Header */}
      <div className="flex items-center justify-between px-6 py-3 border-b border-zinc-200 bg-white flex-shrink-0">
        <div className="flex items-center gap-3">
          <button onClick={onBack} className="p-1 rounded hover:bg-zinc-100 text-zinc-500 hover:text-zinc-700 transition-colors">
            <ArrowLeft size={18} />
          </button>
          <h2 className="text-base font-semibold text-zinc-800">{account.name}</h2>
          <span className="text-xs text-zinc-400">{account.id}</span>
        </div>
        <Button size="sm" variant="ghost" className="text-red-500 hover:bg-red-50 hover:text-red-600" onClick={() => {
          if (confirm(`确定删除账户「${account.name}」？`)) onDelete();
        }}>
          <Trash2 size={14} className="mr-1" />删除
        </Button>
      </div>

      {/* Tabs */}
      <div className="flex gap-0 border-b border-zinc-200 px-6 bg-white flex-shrink-0">
        {TABS.map(({ key, label }) => (
          <button
            key={key}
            onClick={() => setTab(key)}
            className={`px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px
              ${tab === key ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-zinc-500 hover:text-zinc-700'}`}
          >
            {label}
          </button>
        ))}
      </div>

      {/* Content */}
      <div className="flex-1 overflow-auto p-6">
        {tab === 'basic' && <AccountBasicTab account={account} onSave={onSave} />}
        {tab === 'prompts' && <AccountPromptTab accountId={account.id} />}
        {tab === 'capcut' && <AccountCapCutTab account={account} onSave={onSave} />}
        {tab === 'references' && <AccountReferencesTab account={account} onSave={onSave} />}
      </div>
    </div>
  );
}
