import { useState, useEffect, useCallback } from 'react';
import Editor from 'react-simple-code-editor';
import { highlight, languages } from 'prismjs';
import 'prismjs/components/prism-markdown';
import 'prismjs/components/prism-yaml';
import 'prismjs/themes/prism.css';
import { useAccounts } from '@/hooks/useAccounts';
import { usePrompts } from '@/hooks/usePrompts';
import { Button } from '@/components/ui/button';

const PROMPT_TYPES = [
  { type: 'storyboard', label: '分镜' },
  { type: 'image', label: '图片提示词' },
  { type: 'video', label: '视频提示词' },
] as const;

const editorStyle = {
  fontFamily: '"ui-monospace", "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace',
  fontSize: 13,
  lineHeight: 1.6,
  minHeight: '100%',
};

export function PromptEditor() {
  const { accounts } = useAccounts();
  const [selectedAccount, setSelectedAccount] = useState<string>('');
  const [selectedType, setSelectedType] = useState<string>('storyboard');
  const { content, path, loading, load, save, setContent } = usePrompts();

  useEffect(() => {
    if (accounts.length > 0 && !selectedAccount) {
      setSelectedAccount(accounts[0].id);
    }
  }, [accounts]);

  useEffect(() => {
    if (selectedAccount) {
      load(selectedAccount, selectedType);
    }
  }, [selectedAccount, selectedType]);

  const highlightCode = useCallback((code: string) => {
    try {
      return highlight(code, languages.markdown, 'markdown');
    } catch {
      return code;
    }
  }, []);

  return (
    <div className="flex h-full">
      <div className="w-48 border-r border-zinc-200 p-3 space-y-3 bg-zinc-50">
        <div>
          <label className="text-xs font-medium text-zinc-500">账户</label>
          <select
            value={selectedAccount}
            onChange={(e) => setSelectedAccount(e.target.value)}
            className="mt-1 w-full h-9 rounded-md border border-zinc-200 bg-white px-2 text-sm text-zinc-700"
          >
            {accounts.map((a) => (
              <option key={a.id} value={a.id}>{a.name}</option>
            ))}
          </select>
        </div>
        <div>
          <label className="text-xs font-medium text-zinc-500">模板</label>
          <div className="mt-1 space-y-0.5">
            {PROMPT_TYPES.map(({ type, label }) => (
              <button
                key={type}
                onClick={() => setSelectedType(type)}
                className={`w-full text-left px-2 py-1.5 rounded text-sm transition-colors ${
                  selectedType === type ? 'bg-indigo-50 text-indigo-700 font-medium' : 'text-zinc-500 hover:text-zinc-700 hover:bg-white'
                }`}
              >
                {label}
              </button>
            ))}
          </div>
        </div>
      </div>

      <div className="flex-1 flex flex-col bg-white">
        <div className="flex items-center justify-between px-4 py-2 border-b border-zinc-200">
          <span className="text-xs text-zinc-400 font-mono">{path || '选择账户和模板'}</span>
          <Button
            size="sm"
            onClick={() => save(selectedAccount, selectedType, content)}
            disabled={!selectedAccount || loading}
            className="text-xs"
          >
            {loading ? '加载中...' : '保存'}
          </Button>
        </div>
        <div className="flex-1 overflow-auto">
          <Editor
            value={content}
            onValueChange={setContent}
            highlight={highlightCode}
            padding={16}
            style={editorStyle}
            className="min-h-full bg-white"
            textareaClassName="outline-none"
          />
        </div>
      </div>
    </div>
  );
}