import { useState, useEffect } from 'react';
import apiClient from '../../api/client';
import { Save, Plus, Edit2, Trash2, X } 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; // Change to string for the form state
  bound_skill?: string;     // Change to string for the form state
  workspace?: string;       // Change to string for the form state
}

export function WorkerIndividualSettings() {
  const [providers, setProviders] = useState<Provider[]>([]);
  const [workers, setWorkers] = useState<WorkerIndividual[]>([]);
  const [systemNodes, setSystemNodes] = useState<any[]>([]);
  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 fetchData = async () => {
    setLoading(true);
    try {
      const [provRes, workRes, sysRes] = await Promise.all([
        apiClient.get('/api/v1/provider/list'),
        apiClient.get('/api/v1/agent/worker'),
        apiClient.get('/api/v1/agent')
      ]);
      setProviders(Object.values(provRes.data.provider_list || {}));
      setWorkers(workRes.data.workers || []);

      const sysNodesData = sysRes.data.system_nodes || [];
      const defaultSysNodes = ['supervisory_node', 'consciousness_node', 'control_node'];

      const formattedSysNodes = defaultSysNodes.map(nodeName => {
        const found = sysNodesData.find((n: any) => n.node_name === nodeName);
        return {
          agent_id: nodeName,
          agent_name: nodeName,
          agent_type: 'System Node',
          provider_title: found ? found.provider_title : 'Not Configured',
          model_id: found ? found.model_id : 'Not Configured',
          is_system: true
        };
      });
      setSystemNodes(formattedSysNodes);
    } catch (err: any) {
      console.error(err);
      setError('Failed to load data');
    } finally {
      setLoading(false);
    }
  };

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

  const handleEdit = (worker: any) => { // Accept the backend object which might have objects instead of strings
    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 || [])
    });
    setIsNew(false);
    setIsEditing(true);
    setModalMessage('');
  };

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

  const handleDelete = async (agent_id: string) => {
    if (!confirm('Are you sure you want to delete this agent?')) return;
    try {
      await apiClient.delete(`/api/v1/agent/worker/${agent_id}`);
      fetchData();
    } catch (err: any) {
      console.error(err);
      alert('Failed to delete agent');
    }
  };

  const handleModalSave = async (e: React.FormEvent) => {
    e.preventDefault();
    setModalMessage('');
    try {
      if ((editData as any).is_system) {
        const payload = {
          individual_name: editData.agent_name,
          provider_title: editData.provider_title,
          model_id: editData.model_id
        };
        await apiClient.post('/api/v1/agent', payload);
      } else {
        const payload = {
          ...editData,
          output_template: JSON.parse(editData.output_template || '{}'),
          bound_skill: JSON.parse(editData.bound_skill || '{}'),
          workspace: JSON.parse(editData.workspace || '[]')
        };

        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) {
      console.error(err);
      setModalMessage(err.response?.data?.detail || err.message || 'Failed to save');
    }
  };

  return (
    <div className="max-w-5xl space-y-6 relative">
      <div className="mb-8 flex justify-between items-end">
        <div>
          <h1 className="text-2xl font-bold text-slate-800">Individual</h1>
          <p className="text-slate-500 mt-1">Manage all system nodes and custom workers.</p>
        </div>
        <button
          onClick={handleAddNew}
          className="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
        >
          <Plus size={16} className="mr-2" />
          Add Worker
        </button>
      </div>

      {error && <div className="text-red-600">{error}</div>}

      <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <div className="p-0">
          {loading ? (
            <div className="p-6 text-slate-500">Loading...</div>
          ) : (workers.length === 0 && systemNodes.length === 0) ? (
            <div className="p-6 text-slate-500">No individuals found.</div>
          ) : (
            <table className="w-full text-left border-collapse">
              <thead>
                <tr className="bg-slate-50 border-b border-slate-200 text-slate-600 text-sm">
                  <th className="p-4 font-semibold">Name</th>
                  <th className="p-4 font-semibold">Type</th>
                  <th className="p-4 font-semibold">Provider / Model ID</th>
                  <th className="p-4 font-semibold text-right">Actions</th>
                </tr>
              </thead>
              <tbody>
                {systemNodes.map((w) => (
                  <tr key={w.agent_id} className="border-b border-slate-100 bg-slate-50 hover:bg-slate-100 transition-colors">
                    <td className="p-4 font-medium text-slate-800">{w.agent_name}</td>
                    <td className="p-4 text-slate-600">
                      <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">{w.agent_type}</span>
                    </td>
                    <td className="p-4 text-slate-600 text-sm">
                      {w.provider_title} <span className="text-slate-400">/</span> {w.model_id}
                    </td>
                    <td className="p-4 text-right space-x-2">
                      <button onClick={() => handleEdit(w)} className="p-2 text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors" title="Edit">
                        <Edit2 size={16} />
                      </button>
                    </td>
                  </tr>
                ))}
                {workers.map((w) => (
                  <tr key={w.agent_id} className="border-b border-slate-100 hover:bg-slate-50 transition-colors">
                    <td className="p-4 font-medium text-slate-800">{w.agent_name}</td>
                    <td className="p-4 text-slate-600">
                      <span className="px-2 py-1 bg-slate-100 rounded text-xs">{w.agent_type}</span>
                    </td>
                    <td className="p-4 text-slate-600 text-sm">
                      {w.provider_title} <span className="text-slate-400">/</span> {w.model_id}
                    </td>
                    <td className="p-4 text-right space-x-2">
                      <button onClick={() => handleEdit(w)} className="p-2 text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors" title="Edit">
                        <Edit2 size={16} />
                      </button>
                      <button onClick={() => handleDelete(w.agent_id)} className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="Delete">
                        <Trash2 size={16} />
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>

      {/* Edit/Create Modal */}
      {isEditing && (
        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center p-6 border-b border-slate-100 sticky top-0 bg-white z-10">
              <h2 className="text-xl font-bold text-slate-800">
                {(editData as any).is_system ? 'Edit System Node' : (isNew ? 'Create Worker' : 'Edit Worker')}
              </h2>
              <button onClick={() => setIsEditing(false)} className="text-slate-400 hover:text-slate-600">
                <X size={24} />
              </button>
            </div>

            <form onSubmit={handleModalSave} className="p-6 space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Agent Name</label>
                  <input
                    type="text"
                    required
                    value={editData.agent_name || ''}
                    onChange={(e) => setEditData({...editData, agent_name: e.target.value})}
                    className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500"
                    disabled={(editData as any).is_system}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Agent Type</label>
                  <select
                    value={editData.agent_type || 'OrdinaryIndividual'}
                    onChange={(e) => setEditData({...editData, agent_type: e.target.value})}
                    className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500"
                    disabled={(editData as any).is_system}
                  >
                    <option value="OrdinaryIndividual">Ordinary Individual</option>
                    <option value="SkillIndividual">Skill Individual</option>
                    <option value="SpecialIndividual">Special Individual</option>
                    {(editData as any).is_system && (
                      <option value="System Node">System Node</option>
                    )}
                  </select>
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Provider Title</label>
                  <select
                    value={editData.provider_title || ''}
                    onChange={(e) => setEditData({...editData, provider_title: e.target.value, model_id: ''})}
                    required
                    className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500"
                  >
                    <option value="" disabled>Select Provider</option>
                    {providers.map((p) => (
                      <option key={p.provider_title} value={p.provider_title}>{p.provider_title}</option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Model ID</label>
                  {(() => {
                    const selectedProvider = providers.find(p => p.provider_title === editData.provider_title);
                    const models = selectedProvider?.provider_models || [];
                    return (
                      <select
                        value={editData.model_id || ''}
                        onChange={(e) => setEditData({...editData, model_id: e.target.value})}
                        required
                        className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500"
                      >
                        <option value="" disabled>Select a model</option>
                        {models.map(m => <option key={m} value={m}>{m}</option>)}
                      </select>
                    );
                  })()}
                </div>
              </div>

              {!(editData as any).is_system && (
                <>
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">Description</label>
                    <textarea
                      value={editData.description || ''}
                      onChange={(e) => setEditData({...editData, description: e.target.value})}
                      rows={2}
                      className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">System Prompt</label>
                    <textarea
                      value={editData.system_prompt || ''}
                      onChange={(e) => setEditData({...editData, system_prompt: e.target.value})}
                      rows={3}
                      className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 font-mono text-sm"
                    />
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium text-slate-700 mb-1">Output Template (JSON)</label>
                      <textarea
                        value={editData.output_template || '{}'}
                        onChange={(e) => setEditData({...editData, output_template: e.target.value})}
                        rows={3}
                        className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 font-mono text-sm"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-slate-700 mb-1">Bound Skill (JSON)</label>
                      <textarea
                        value={editData.bound_skill || '{}'}
                        onChange={(e) => setEditData({...editData, bound_skill: e.target.value})}
                        rows={3}
                        className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 font-mono text-sm"
                      />
                    </div>
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">Workspace (JSON Array)</label>
                    <textarea
                      value={editData.workspace || '[]'}
                      onChange={(e) => setEditData({...editData, workspace: e.target.value})}
                      rows={2}
                      className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 font-mono text-sm"
                    />
                  </div>
                </>
              )}

              {modalMessage && (
                <div className="p-3 bg-red-50 text-red-700 text-sm rounded-lg">
                  {modalMessage}
                </div>
              )}

              <div className="pt-4 flex justify-end space-x-3 border-t border-slate-100">
                <button
                  type="button"
                  onClick={() => setIsEditing(false)}
                  className="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg transition-colors"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
                >
                  <Save size={16} className="mr-2" />
                  Save Worker
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}