import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import apiClient from '../../api/client';
import { Save, Plus, Edit2, Trash2, X, Bot, Loader2, Users } from 'lucide-react';
import type { Provider } from '../../types';

interface WorkerIndividual {
  agent_id: string;
  agent_name: string;
  agent_type: string;
  description?: string;
  provider_title: string;
  model_id: string;
  system_prompt?: string;
  output_template?: string;
  bound_skill?: string;
  workspace?: string;
  tools?: string;
}

export function WorkerIndividualSettings() {
  const { t } = useTranslation();
  const [providers, setProviders] = useState<Provider[]>([]);
  const [workers, setWorkers] = useState<WorkerIndividual[]>([]);
  const [systemNodes, setSystemNodes] = useState<any[]>([]);
  const [availableSkills, setAvailableSkills] = useState<string[]>([]);
  const [availableTools, setAvailableTools] = useState<string[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [isEditing, setIsEditing] = useState(false);
  const [editData, setEditData] = useState<Partial<WorkerIndividual>>({});
  const [isNew, setIsNew] = useState(false);
  const [modalMessage, setModalMessage] = useState('');
  const [submitLoading, setSubmitLoading] = useState(false);

  const fetchData = async () => {
    setLoading(true);
    try {
      const [provRes, workRes, sysRes, toolsRes, skillsRes] = await Promise.all([
        apiClient.get('/api/v1/provider/list'),
        apiClient.get('/api/v1/agent/worker'),
        apiClient.get('/api/v1/agent'),
        apiClient.get('/api/v1/resource/tool'),
        apiClient.get('/api/v1/resource/skill')
      ]);
      setProviders(Object.values(provRes.data.provider_list || {}));
      setWorkers(workRes.data.workers || []);
      setAvailableTools(toolsRes.data.tools || []);
      setAvailableSkills(Object.keys(skillsRes.data.skills || {}));

      const providersList = Object.values(provRes.data.provider_list || {}) as Provider[];
      const defaultProvider = providersList.length > 0 ? providersList[0].provider_title : '';
      const sysNodesData = sysRes.data.system_nodes || [];
      const defaultSysNodes = ['regulatory_node', 'consciousness_node'];

      setSystemNodes(defaultSysNodes.map(nodeName => {
        const found = sysNodesData.find((n: any) => n.node_name === nodeName);
        return {
          agent_id: nodeName, agent_name: nodeName, agent_type: 'System Node',
          display_name: found?.display_name || '',
          provider_title: found?.provider_title || defaultProvider,
          model_id: found?.model_id || '',
          tools: found?.tools ? JSON.stringify(found.tools) : '[]',
          custom_system_prompt: found?.custom_system_prompt || '',
          is_system: true
        };
      }));
    } catch (err: any) {
      setError(t('agent.loadFailed'));
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => { fetchData(); }, []);

  const handleEdit = (worker: any) => {
    setEditData({
      ...worker,
      output_template: typeof worker.output_template === 'string' ? worker.output_template : JSON.stringify(worker.output_template || {}),
      bound_skill: typeof worker.bound_skill === 'string' ? worker.bound_skill : JSON.stringify(worker.bound_skill || {}),
      workspace: typeof worker.workspace === 'string' ? worker.workspace : JSON.stringify(worker.workspace || []),
      tools: typeof worker.tools === 'string' ? worker.tools : JSON.stringify(worker.tools || [])
    });
    setIsNew(false);
    setIsEditing(true);
    setModalMessage('');
  };

  const handleAddNew = () => {
    setEditData({ agent_name: '', agent_type: 'ordinary_individual', description: '',
      provider_title: providers.length > 0 ? providers[0].provider_title : '', model_id: '',
      system_prompt: '', output_template: '{}', bound_skill: '{}', workspace: '[]', tools: '[]' });
    setIsNew(true);
    setIsEditing(true);
    setModalMessage('');
  };

  const handleDelete = async (agent_id: string) => {
    if (!confirm(t('agent.deleteWorkerConfirm'))) return;
    try { await apiClient.delete(`/api/v1/agent/worker/${agent_id}`); fetchData(); } catch { alert(t('common.deleteFailed')); }
  };

  const handleModalSave = async (e: React.FormEvent) => {
    e.preventDefault();
    setModalMessage('');
    setSubmitLoading(true);
    try {
      if ((editData as any).is_system) {
        await apiClient.post('/api/v1/agent', {
          individual_name: editData.agent_name,
          provider_title: editData.provider_title,
          model_id: editData.model_id,
          tools: JSON.parse(editData.tools || '[]'),
          custom_system_prompt: (editData as any).custom_system_prompt || null,
          display_name: (editData as any).display_name || null
        });
      } else {
        const payload = {
          ...editData,
          output_template: JSON.parse(editData.output_template || '{}'),
          bound_skill: JSON.parse(editData.bound_skill || '{}'),
          workspace: JSON.parse(editData.workspace || '[]'),
          tools: JSON.parse(editData.tools || '[]')
        };
        if (isNew) await apiClient.post('/api/v1/agent/worker', payload);
        else await apiClient.put(`/api/v1/agent/worker/${editData.agent_id}`, payload);
      }
      setIsEditing(false);
      fetchData();
    } catch (err: any) {
      setModalMessage(err.response?.data?.detail || err.message || t('common.saveFailed'));
    } finally {
      setSubmitLoading(false);
    }
  };

  const getTypeBadge = (type: string, isSystem?: boolean) => {
    if (isSystem) return <span className="px-2 py-0.5 rounded-md text-[10px] font-bold bg-accent-light text-accent uppercase tracking-wider">{t('agent.system')}</span>;
    const colors: Record<string, string> = {
      ordinary_individual: 'bg-bg-secondary text-text-muted',
      skill_individual: 'bg-success-bg text-success',
      special_individual: 'bg-warning-bg text-warning',
    };
    return <span className={`px-2 py-0.5 rounded-md text-[10px] font-medium ${colors[type] || colors.ordinary_individual}`}>{t(`agent.type.${type}`, type.replace('_', ' '))}</span>;
  };

  return (
    <div className="max-w-5xl space-y-6">
      <div className="flex justify-between items-end">
        <div>
          <h1 className="text-lg font-bold text-text-primary">{t('agent.individual')}</h1>
          <p className="text-sm text-text-muted mt-0.5">{t('agent.individualDesc')}</p>
        </div>
        <button onClick={handleAddNew} className="flex items-center gap-2 px-4 py-2.5 bg-accent text-white rounded-xl hover:bg-accent-hover transition-all shadow-lg shadow-accent/15 text-sm font-medium">
          <Plus size={14} /> {t('agent.addWorker')}
        </button>
      </div>

      {error && <div className="text-sm text-danger bg-danger-bg border border-danger/20 rounded-xl p-3">{error}</div>}

      <div className="bg-bg-card rounded-2xl border border-border-primary shadow-sm overflow-hidden">
        {loading ? (
          <div className="flex flex-col items-center justify-center py-12 text-text-muted">
            <Loader2 size={24} className="animate-spin mb-3" />
            <span className="text-sm">{t('common.loading')}</span>
          </div>
        ) : (workers.length === 0 && systemNodes.length === 0) ? (
          <div className="flex flex-col items-center justify-center py-12 text-text-muted">
            <Users size={32} className="mb-3 opacity-40" />
            <span className="text-sm">{t('agent.noIndividuals')}</span>
          </div>
        ) : (
          <table className="w-full text-left text-sm">
            <thead>
              <tr className="bg-bg-secondary border-b border-border-primary text-text-muted text-xs uppercase tracking-wider">
                <th className="px-5 py-3 font-semibold">{t('agent.name')}</th>
                <th className="px-5 py-3 font-semibold">{t('agent.type')}</th>
                <th className="px-5 py-3 font-semibold">{t('agent.providerModel')}</th>
                <th className="px-5 py-3 font-semibold text-right">{t('common.actions')}</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-border-secondary">
              {systemNodes.map((w) => (
                <tr key={w.agent_id} className="bg-bg-secondary/50 hover:bg-bg-hover transition-colors">
                  <td className="px-5 py-3">
                    <div className="flex items-center gap-2.5">
                      <div className="w-7 h-7 rounded-lg bg-accent-light flex items-center justify-center">
                        <Bot size={14} className="text-accent" />
                      </div>
                      <div className="flex flex-col">
                        <span className="font-medium text-text-primary text-xs">{w.display_name || w.agent_name}</span>
                        {w.display_name && <span className="text-[10px] text-text-muted">{w.agent_name}</span>}
                      </div>
                    </div>
                  </td>
                  <td className="px-5 py-3">{getTypeBadge(w.agent_type, true)}</td>
                  <td className="px-5 py-3 text-xs text-text-muted">{w.provider_title} / {w.model_id}</td>
                  <td className="px-5 py-3 text-right">
                    <button onClick={() => handleEdit(w)} className="p-1.5 text-text-muted hover:text-accent hover:bg-accent-light rounded-lg transition-all"><Edit2 size={14} /></button>
                  </td>
                </tr>
              ))}
              {workers.map((w) => (
                <tr key={w.agent_id} className="hover:bg-bg-hover transition-colors">
                  <td className="px-5 py-3">
                    <div className="flex items-center gap-2.5">
                      <div className="w-7 h-7 rounded-lg bg-bg-secondary border border-border-primary flex items-center justify-center">
                        <Bot size={14} className="text-text-muted" />
                      </div>
                      <span className="font-medium text-text-primary text-xs">{w.agent_name}</span>
                    </div>
                  </td>
                  <td className="px-5 py-3">{getTypeBadge(w.agent_type)}</td>
                  <td className="px-5 py-3 text-xs text-text-muted">{w.provider_title} / {w.model_id}</td>
                  <td className="px-5 py-3 text-right">
                    <button onClick={() => handleEdit(w)} className="p-1.5 text-text-muted hover:text-accent hover:bg-accent-light rounded-lg transition-all mr-0.5"><Edit2 size={14} /></button>
                    <button onClick={() => handleDelete(w.agent_id)} className="p-1.5 text-text-muted hover:text-danger hover:bg-danger-bg rounded-lg transition-all"><Trash2 size={14} /></button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      {/* Modal */}
      {isEditing && (
        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
          <div className="bg-bg-card rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto border border-border-primary animate-fade-in-scale">
            <div className="flex justify-between items-center p-5 border-b border-border-primary sticky top-0 bg-bg-card z-10">
              <h2 className="text-base font-bold text-text-primary">{(editData as any).is_system ? t('agent.editSystemNode') : (isNew ? t('agent.createWorker') : t('agent.editWorker'))}</h2>
              <button onClick={() => setIsEditing(false)} className="p-1 text-text-muted hover:text-text-primary rounded-lg transition-colors"><X size={20} /></button>
            </div>
            <form onSubmit={handleModalSave} className="p-5 space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{(editData as any).is_system ? t('agent.displayName') : t('agent.name')}</label>
                  <input type="text" required={!(editData as any).is_system} value={(editData as any).is_system ? ((editData as any).display_name || '') : (editData.agent_name || '')} onChange={(e) => {
                    if ((editData as any).is_system) setEditData({...editData, display_name: e.target.value} as any);
                    else setEditData({...editData, agent_name: e.target.value});
                  }}
                    placeholder={(editData as any).is_system ? editData.agent_name : ''}
                    className="w-full px-3 py-2 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent" />
                </div>
                <div>
                  <label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('agent.type')}</label>
                  <select value={editData.agent_type || 'ordinary_individual'} onChange={(e) => setEditData({...editData, agent_type: e.target.value})}
                    className="w-full px-3 py-2 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent" disabled={(editData as any).is_system}>
                    <option value="ordinary_individual">{t('agent.type.ordinary_individual')}</option>
                    <option value="skill_individual">{t('agent.type.skill_individual')}</option>
                    <option value="special_individual">{t('agent.type.special_individual')}</option>
                    {(editData as any).is_system && <option value="System Node">{t('agent.system')}</option>}
                  </select>
                </div>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('agent.provider')}</label>
                  <select value={editData.provider_title || ''} onChange={(e) => setEditData({...editData, provider_title: e.target.value, model_id: ''})} required
                    className="w-full px-3 py-2 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent">
                    <option value="" disabled>{t('common.select')}</option>
                    {providers.map((p) => (<option key={p.provider_title} value={p.provider_title}>{p.provider_title}</option>))}
                  </select>
                </div>
                <div>
                  <label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('agent.model')}</label>
                  {(() => {
                    const sp = providers.find(p => p.provider_title === editData.provider_title);
                    const models = sp?.provider_models || [];
                    return (
                      <select value={editData.model_id || ''} onChange={(e) => setEditData({...editData, model_id: e.target.value})} required
                        className="w-full px-3 py-2 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent">
                        <option value="" disabled>{t('common.select')}</option>
                        {models.map(m => <option key={m} value={m}>{m}</option>)}
                      </select>
                    );
                  })()}
                </div>
              </div>
              {(editData as any).is_system && (
                <div>
                  <label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('agent.customPrompt')}</label>
                  <textarea value={(editData as any).custom_system_prompt || ''} onChange={(e) => setEditData({...editData, custom_system_prompt: e.target.value} as any)} rows={3}
                    placeholder={t('agent.customPromptPlaceholder')}
                    className="w-full px-3 py-2 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary font-mono focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent" />
                </div>
              )}
              {!(editData as any).is_system && (
                <>
                  <div>
                    <label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('agent.description')}</label>
                    <textarea value={editData.description || ''} onChange={(e) => setEditData({...editData, description: e.target.value})} rows={2}
                      className="w-full px-3 py-2 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent" />
                  </div>
                  <div>
                    <label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('agent.systemPrompt')}</label>
                    <textarea value={editData.system_prompt || ''} onChange={(e) => setEditData({...editData, system_prompt: e.target.value})} rows={3}
                      className="w-full px-3 py-2 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary font-mono focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent" />
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('agent.outputTemplate')}</label>
                      <textarea value={editData.output_template || '{}'} onChange={(e) => setEditData({...editData, output_template: e.target.value})} rows={3}
                        className="w-full px-3 py-2 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary font-mono focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent" />
                    </div>
                    <div>
                      <label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('agent.boundSkill')}</label>
                      <select value={(() => { try { return Object.keys(JSON.parse(editData.bound_skill || '{}'))[0] || ''; } catch { return ''; } })()}
                        onChange={(e) => setEditData({...editData, bound_skill: JSON.stringify(e.target.value ? { [e.target.value]: [] } : {})})}
                        className="w-full px-3 py-2 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent" disabled={editData.agent_type !== 'skill_individual'}>
                        <option value="">{t('common.none')}</option>
                        {availableSkills.map(s => <option key={s} value={s}>{s}</option>)}
                      </select>
                    </div>
                  </div>
                  <div>
                    <label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('agent.workspace')}</label>
                    <textarea value={editData.workspace || '[]'} onChange={(e) => setEditData({...editData, workspace: e.target.value})} rows={2}
                      className="w-full px-3 py-2 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary font-mono focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent" />
                  </div>
                </>
              )}
              <div>
                <label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('agent.tools')}</label>
                <div className="flex flex-wrap gap-1.5 p-3 bg-bg-input border border-border-primary rounded-xl max-h-40 overflow-y-auto">
                  {availableTools.map(tool => {
                    let currentTools: string[] = [];
                    try { currentTools = JSON.parse(editData.tools || '[]'); } catch { }
                    const isSelected = currentTools.includes(tool);
                    return (
                      <button key={tool} type="button" onClick={() => {
                        const updated = isSelected ? currentTools.filter(t => t !== tool) : [...currentTools, tool];
                        setEditData({...editData, tools: JSON.stringify(updated)});
                      }}
                        className={`px-2.5 py-1 rounded-lg text-xs font-medium transition-all ${isSelected ? 'bg-accent-light text-accent border border-accent/20' : 'bg-bg-secondary text-text-muted border border-border-primary hover:border-text-muted'}`}>
                        {tool}
                      </button>
                    );
                  })}
                  {availableTools.length === 0 && <span className="text-xs text-text-muted">{t('agent.noTools')}</span>}
                </div>
              </div>
              {modalMessage && <div className="p-3 bg-danger-bg text-danger text-sm rounded-xl border border-danger/20">{modalMessage}</div>}
              <div className="pt-3 flex justify-end gap-2 border-t border-border-primary">
                <button type="button" onClick={() => setIsEditing(false)} className="px-4 py-2 text-sm font-medium text-text-secondary hover:bg-bg-hover rounded-xl transition-colors">{t('common.cancel')}</button>
                <button type="submit" disabled={submitLoading} className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-accent rounded-xl hover:bg-accent-hover transition-colors disabled:opacity-50">
                  <Save size={14} /> {submitLoading ? t('common.saving') : t('common.save')}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}