import { useEffect, useState } from 'react';
import { api } from '../services/api';

const NIVEL_LABELS = {
  estratetico: 'Estratégico',
  asesoria: 'Asesoría y Apoyo',
  directivo: 'Directivo',
  gerencial: 'Gerencial y Operativo',
};

const NIVEL_COLORS = {
  estratetico: 'bg-avante-navy',
  asesoria: 'bg-avante-teal',
  directivo: 'bg-avante-dark',
  gerencial: 'bg-avante-slate',
};

export default function Departamentos() {
  const [organigrama, setOrganigrama] = useState(null);
  const [niveles, setNiveles] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [form, setForm] = useState({ nombre: '', nivel: 'gerencial', descripcion: '', padreId: '' });
  const [error, setError] = useState('');
  const [saving, setSaving] = useState(false);

  const load = () => {
    setLoading(true);
    Promise.all([api.getOrganigrama(), api.getNiveles()])
      .then(([org, niv]) => {
        setOrganigrama(org);
        setNiveles(niv);
      })
      .catch(console.error)
      .finally(() => setLoading(false));
  };

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

  const handleCreate = async (e) => {
    e.preventDefault();
    setSaving(true);
    setError('');
    try {
      await api.createNodo({
        nombre: form.nombre,
        nivel: form.nivel,
        descripcion: form.descripcion || undefined,
        padreId: form.padreId || undefined,
      });
      setForm({ nombre: '', nivel: 'gerencial', descripcion: '', padreId: '' });
      setShowForm(false);
      load();
    } catch (err) {
      setError(err.message);
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async (id, nombre) => {
    if (!confirm(`¿Eliminar la unidad "${nombre}"?`)) return;
    try {
      await api.deleteNodo(id);
      load();
    } catch (err) {
      alert(err.message);
    }
  };

  if (loading) return <div className="text-slate-500">Cargando organigrama...</div>;

  const nodosPorNivel = niveles.reduce((acc, nivel) => {
    acc[nivel] = organigrama.nodos.filter((n) => n.nivel === nivel);
    return acc;
  }, {});

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between flex-wrap gap-4">
        <div>
          <h2 className="text-2xl font-bold text-slate-800">Unidades Organizacionales</h2>
          <p className="text-slate-500 mt-1">
            Organigrama Avante — {organigrama.nodos.length} unidades activas
          </p>
        </div>
        <button onClick={() => setShowForm(!showForm)} className="btn-primary">
          {showForm ? 'Cancelar' : '+ Nuevo departamento'}
        </button>
      </div>

      {showForm && (
        <form onSubmit={handleCreate} className="card space-y-4">
          <h3 className="font-semibold text-slate-800">Crear nueva unidad organizacional</h3>
          {error && (
            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">{error}</div>
          )}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="label-field">Nombre *</label>
              <input
                className="input-field"
                value={form.nombre}
                onChange={(e) => setForm({ ...form, nombre: e.target.value })}
                placeholder="GERENCIA DE ..."
                required
              />
            </div>
            <div>
              <label className="label-field">Nivel *</label>
              <select
                className="input-field"
                value={form.nivel}
                onChange={(e) => setForm({ ...form, nivel: e.target.value })}
              >
                {niveles.map((n) => (
                  <option key={n} value={n}>{NIVEL_LABELS[n] || n}</option>
                ))}
              </select>
            </div>
            <div>
              <label className="label-field">Unidad padre (opcional)</label>
              <select
                className="input-field"
                value={form.padreId}
                onChange={(e) => setForm({ ...form, padreId: e.target.value })}
              >
                <option value="">Sin padre</option>
                {organigrama.nodos.map((n) => (
                  <option key={n.id} value={n.id}>{n.nombre}</option>
                ))}
              </select>
            </div>
            <div>
              <label className="label-field">Descripción</label>
              <input
                className="input-field"
                value={form.descripcion}
                onChange={(e) => setForm({ ...form, descripcion: e.target.value })}
                placeholder="Descripción de la unidad"
              />
            </div>
          </div>
          <button type="submit" className="btn-primary" disabled={saving}>
            {saving ? 'Creando...' : 'Crear unidad'}
          </button>
        </form>
      )}

      {niveles.map((nivel) => {
        const nodos = nodosPorNivel[nivel];
        if (!nodos?.length) return null;
        const meta = organigrama.niveles[nivel];
        return (
          <section key={nivel}>
            <div className="flex items-center gap-3 mb-3">
              <div className={`w-3 h-3 rounded-full ${NIVEL_COLORS[nivel]}`} />
              <h3 className="font-semibold text-slate-800">{meta?.titulo || NIVEL_LABELS[nivel]}</h3>
              <span className="text-sm text-slate-400">({nodos.length})</span>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
              {nodos.map((n) => (
                <div key={n.id} className="card py-4 px-4">
                  <div className="flex items-start justify-between gap-2">
                    <div>
                      <p className="font-medium text-slate-800 text-sm leading-tight">{n.nombre}</p>
                      {n.descripcion && (
                        <p className="text-xs text-slate-500 mt-1">{n.descripcion}</p>
                      )}
                      {n.padreId && (
                        <p className="text-xs text-slate-400 mt-1">
                          ↳ {organigrama.nodos.find((p) => p.id === n.padreId)?.nombre}
                        </p>
                      )}
                    </div>
                    <button
                      onClick={() => handleDelete(n.id, n.nombre)}
                      className="text-red-400 hover:text-red-600 text-xs shrink-0"
                      title="Eliminar"
                    >
                      ✕
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </section>
        );
      })}
    </div>
  );
}
