import { useState, useEffect } from 'react';
import { useGatewayStore } from '../store/gatewayStore';
import { useChatStore } from '../store/chatStore';
import { Plus, Trash2, Bot, X } from 'lucide-react';

interface CloneFormData {
  name: string;
  role: string;
  scenarios: string;
}

export function CloneManager() {
  const { clones, loadClones, createClone, deleteClone, connectionState } = useGatewayStore();
  const { agents } = useChatStore();
  const [showForm, setShowForm] = useState(false);
  const [form, setForm] = useState<CloneFormData>({ name: '', role: '', scenarios: '' });

  const connected = connectionState === 'connected';

  useEffect(() => {
    if (connected) {
      loadClones();
    }
  }, [connected]);

  const handleCreate = async () => {
    if (!form.name.trim()) return;
    await createClone({
      name: form.name,
      role: form.role || undefined,
      scenarios: form.scenarios ? form.scenarios.split(',').map(s => s.trim()) : undefined,
    });
    setForm({ name: '', role: '', scenarios: '' });
    setShowForm(false);
  };

  const handleDelete = async (id: string) => {
    if (confirm('确定删除该分身？')) {
      await deleteClone(id);
    }
  };

  // Merge gateway clones with local agents for display
  const displayClones = clones.length > 0 ? clones : agents.map(a => ({
    id: a.id,
    name: a.name,
    role: '默认助手',
    createdAt: '',
  }));

  return (
    <div className="h-full flex flex-col">
      {/* Header */}
      <div className="flex items-center justify-between px-3 py-2 border-b border-gray-200">
        <span className="text-xs font-medium text-gray-500">分身列表</span>
        <button
          onClick={() => setShowForm(true)}
          className="p-1 text-gray-400 hover:text-orange-500 rounded"
          title="创建分身"
        >
          <Plus className="w-4 h-4" />
        </button>
      </div>

      {/* Create form */}
      {showForm && (
        <div className="p-3 border-b border-gray-200 bg-orange-50 space-y-2">
          <div className="flex items-center justify-between">
            <span className="text-xs font-medium text-orange-700">新建分身</span>
            <button onClick={() => setShowForm(false)} className="text-gray-400 hover:text-gray-600">
              <X className="w-3.5 h-3.5" />
            </button>
          </div>
          <input
            type="text"
            value={form.name}
            onChange={e => setForm({ ...form, name: e.target.value })}
            placeholder="名称 (必填)"
            className="w-full text-xs border border-gray-300 rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-orange-500"
          />
          <input
            type="text"
            value={form.role}
            onChange={e => setForm({ ...form, role: e.target.value })}
            placeholder="角色 (如: 代码助手)"
            className="w-full text-xs border border-gray-300 rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-orange-500"
          />
          <input
            type="text"
            value={form.scenarios}
            onChange={e => setForm({ ...form, scenarios: e.target.value })}
            placeholder="场景标签 (逗号分隔)"
            className="w-full text-xs border border-gray-300 rounded px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-orange-500"
          />
          <button
            onClick={handleCreate}
            disabled={!form.name.trim()}
            className="w-full text-xs bg-orange-500 text-white rounded py-1.5 hover:bg-orange-600 disabled:opacity-50"
          >
            创建
          </button>
        </div>
      )}

      {/* Clone list */}
      <div className="flex-1 overflow-y-auto custom-scrollbar">
        {displayClones.map((clone) => (
          <div
            key={clone.id}
            className="group flex items-center gap-3 px-3 py-3 hover:bg-gray-100 cursor-pointer border-b border-gray-50"
          >
            <div className="w-9 h-9 bg-gradient-to-br from-orange-400 to-red-500 rounded-xl flex items-center justify-center text-white flex-shrink-0">
              <Bot className="w-4 h-4" />
            </div>
            <div className="flex-1 min-w-0">
              <div className="text-sm font-medium text-gray-900 truncate">{clone.name}</div>
              <div className="text-xs text-gray-400 truncate">{clone.role || '默认助手'}</div>
            </div>
            <button
              onClick={(e) => { e.stopPropagation(); handleDelete(clone.id); }}
              className="opacity-0 group-hover:opacity-100 p-1 text-gray-300 hover:text-red-500 transition-opacity"
              title="删除"
            >
              <Trash2 className="w-3.5 h-3.5" />
            </button>
          </div>
        ))}

        {displayClones.length === 0 && (
          <div className="text-center py-8 text-xs text-gray-400">
            <Bot className="w-8 h-8 mx-auto mb-2 opacity-30" />
            <p>暂无分身</p>
            <p className="mt-1">点击 + 创建你的第一个分身</p>
          </div>
        )}
      </div>
    </div>
  );
}
