import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import type { Account, CapCutConfig } from '@/types';

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

const defaultCapcut: CapCutConfig = {
  effects: [],
  filter: '',
  subtitleStyle: { fontSize: 24, color: '#FFFFFF', highlightColor: '#FF6B35', bold: true, transformY: -380, inAnimation: '淡入', outAnimation: '淡出' },
  defaultBGM: '',
};

export function AccountCapCutTab({ account, onSave }: Props) {
  const capcut = account.capcut || defaultCapcut;
  const [effects, setEffects] = useState((capcut.effects || []).join(', '));
  const [filter, setFilter] = useState(capcut.filter || '');
  const [sub, setSub] = useState(capcut.subtitleStyle || {});
  const [bgm, setBgm] = useState(capcut.defaultBGM || '');
  const [saved, setSaved] = useState(false);

  const handleSave = () => {
    onSave({
      capcut: {
        ...capcut,
        effects: effects.split(',').map((s) => s.trim()).filter(Boolean),
        filter,
        subtitleStyle: sub,
        defaultBGM: bgm,
      },
    });
    setSaved(true);
    setTimeout(() => setSaved(false), 2000);
  };

  return (
    <div className="max-w-lg space-y-5">
      {/* Effects */}
      <fieldset className="space-y-2">
        <legend className="text-xs font-semibold text-zinc-600 uppercase tracking-wide">特效</legend>
        <Input value={effects} onChange={(e) => setEffects(e.target.value)}
          placeholder="特效名1, 特效名2" className="bg-zinc-50 border-zinc-200 text-xs" />
        <p className="text-[10px] text-zinc-400">多个特效用逗号分隔</p>
      </fieldset>

      {/* Filter */}
      <fieldset className="space-y-2">
        <legend className="text-xs font-semibold text-zinc-600 uppercase tracking-wide">滤镜</legend>
        <Input value={filter} onChange={(e) => setFilter(e.target.value)}
          placeholder="质感暗调:30" className="bg-zinc-50 border-zinc-200 text-xs font-mono" />
      </fieldset>

      {/* Subtitle Style */}
      <fieldset className="space-y-3">
        <legend className="text-xs font-semibold text-zinc-600 uppercase tracking-wide">字幕样式</legend>
        <div className="bg-zinc-50 rounded-lg border border-zinc-200 p-3 space-y-2">
          <div className="grid grid-cols-2 gap-2">
            <div>
              <label className="text-[10px] text-zinc-500">字号</label>
              <Input type="number" value={sub.fontSize || ''} onChange={(e) => setSub({ ...sub, fontSize: parseInt(e.target.value) || undefined })}
                className="h-8 text-xs bg-white border-zinc-200" />
            </div>
            <div>
              <label className="text-[10px] text-zinc-500">颜色</label>
              <div className="flex gap-1 items-center">
                <input type="color" value={sub.color || '#FFFFFF'} onChange={(e) => setSub({ ...sub, color: e.target.value })}
                  className="w-8 h-8 rounded border border-zinc-200 cursor-pointer" />
                <Input value={sub.color || ''} onChange={(e) => setSub({ ...sub, color: e.target.value })}
                  className="h-8 text-xs bg-white border-zinc-200 font-mono flex-1" />
              </div>
            </div>
            <div>
              <label className="text-[10px] text-zinc-500">高亮色</label>
              <div className="flex gap-1 items-center">
                <input type="color" value={sub.highlightColor || '#FF6B35'} onChange={(e) => setSub({ ...sub, highlightColor: e.target.value })}
                  className="w-8 h-8 rounded border border-zinc-200 cursor-pointer" />
                <Input value={sub.highlightColor || ''} onChange={(e) => setSub({ ...sub, highlightColor: e.target.value })}
                  className="h-8 text-xs bg-white border-zinc-200 font-mono flex-1" />
              </div>
            </div>
            <div>
              <label className="text-[10px] text-zinc-500">Y偏移</label>
              <Input type="number" value={sub.transformY || ''} onChange={(e) => setSub({ ...sub, transformY: parseInt(e.target.value) || undefined })}
                className="h-8 text-xs bg-white border-zinc-200" />
            </div>
          </div>
          <div className="grid grid-cols-2 gap-2">
            <div>
              <label className="text-[10px] text-zinc-500">入动画</label>
              <Input value={sub.inAnimation || ''} onChange={(e) => setSub({ ...sub, inAnimation: e.target.value })}
                placeholder="淡入" className="h-8 text-xs bg-white border-zinc-200" />
            </div>
            <div>
              <label className="text-[10px] text-zinc-500">出动画</label>
              <Input value={sub.outAnimation || ''} onChange={(e) => setSub({ ...sub, outAnimation: e.target.value })}
                placeholder="淡出" className="h-8 text-xs bg-white border-zinc-200" />
            </div>
          </div>
          <label className="flex items-center gap-2 text-xs text-zinc-600">
            <input type="checkbox" checked={sub.bold || false} onChange={(e) => setSub({ ...sub, bold: e.target.checked })} />
            粗体
          </label>
        </div>
      </fieldset>

      {/* BGM */}
      <fieldset className="space-y-2">
        <legend className="text-xs font-semibold text-zinc-600 uppercase tracking-wide">背景音乐</legend>
        <Input value={bgm} onChange={(e) => setBgm(e.target.value)}
          placeholder="BGM URL" className="bg-zinc-50 border-zinc-200 text-xs font-mono" />
      </fieldset>

      <Button onClick={handleSave}>
        {saved ? '已保存' : '保存 CapCut 配置'}
      </Button>
    </div>
  );
}
