import { useEffect, useState } from 'react';
import { useNavigate, useParams, Link } from 'react-router-dom';
import { api } from '../services/api';

export default function EncuestaForm() {
  const { id } = useParams();
  const navigate = useNavigate();
  const isEdit = Boolean(id);

  const [departamentos, setDepartamentos] = useState([]);
  const [plantilla, setPlantilla] = useState([]);
  const [titulo, setTitulo] = useState('');
  const [departamentoId, setDepartamentoId] = useState('');
  const [descripcion, setDescripcion] = useState('');
  const [preguntas, setPreguntas] = useState([]);
  const [loading, setLoading] = useState(isEdit);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');

  useEffect(() => {
    Promise.all([api.getDepartamentos(), api.getPlantilla()])
      .then(([deps, tmpl]) => {
        setDepartamentos(deps);
        setPlantilla(tmpl);
        if (!isEdit) setPreguntas(tmpl);
      })
      .catch(console.error);
  }, [isEdit]);

  useEffect(() => {
    if (!isEdit) return;
    api
      .getEncuesta(id)
      .then((e) => {
        setTitulo(e.titulo);
        setDepartamentoId(e.departamentoId);
        setDescripcion(e.descripcion || '');
        setPreguntas(e.preguntas);
      })
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, [id, isEdit]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSaving(true);
    setError('');
    try {
      const payload = { titulo, departamento_id: departamentoId, descripcion, preguntas };
      if (isEdit) {
        await api.updateEncuesta(id, payload);
      } else {
        await api.createEncuesta(payload);
      }
      navigate('/encuestas');
    } catch (err) {
      setError(err.message);
    } finally {
      setSaving(false);
    }
  };

  const resetPlantilla = () => setPreguntas([...plantilla]);

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

  return (
    <div className="max-w-2xl mx-auto space-y-6">
      <div>
        <Link to="/encuestas" className="text-sm text-avante-teal hover:underline">
          ← Volver a encuestas
        </Link>
        <h2 className="text-2xl font-bold text-slate-800 mt-2">
          {isEdit ? 'Editar encuesta' : 'Nueva encuesta de satisfacción'}
        </h2>
      </div>

      {error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">{error}</div>
      )}

      <form onSubmit={handleSubmit} className="card space-y-5">
        <div>
          <label className="label-field">Título *</label>
          <input
            className="input-field"
            value={titulo}
            onChange={(e) => setTitulo(e.target.value)}
            placeholder="Encuesta de Satisfacción — ..."
            required
          />
        </div>

        <div>
          <label className="label-field">Departamento *</label>
          <select
            className="input-field"
            value={departamentoId}
            onChange={(e) => setDepartamentoId(e.target.value)}
            required
            disabled={isEdit}
          >
            <option value="">Seleccione un departamento</option>
            {departamentos.map((d) => (
              <option key={d.id} value={d.id}>
                {d.nombre}
              </option>
            ))}
          </select>
        </div>

        <div>
          <label className="label-field">Descripción</label>
          <textarea
            className="input-field"
            rows={3}
            value={descripcion}
            onChange={(e) => setDescripcion(e.target.value)}
            placeholder="Descripción de la encuesta..."
          />
        </div>

        <div>
          <div className="flex items-center justify-between mb-3">
            <label className="label-field mb-0">Preguntas ({preguntas.length})</label>
            <button type="button" onClick={resetPlantilla} className="text-sm text-avante-teal hover:underline">
              Restaurar plantilla estándar
            </button>
          </div>
          <ul className="space-y-2">
            {preguntas.map((p, i) => (
              <li key={i} className="flex items-center gap-3 bg-slate-50 rounded-lg px-3 py-2 text-sm">
                <span className="text-slate-400 w-5">{i + 1}.</span>
                <span className="flex-1 text-slate-700">{p.label}</span>
                <span className="text-xs bg-slate-200 text-slate-600 px-2 py-0.5 rounded">{p.type}</span>
                {p.required && <span className="text-xs text-red-500">*</span>}
              </li>
            ))}
          </ul>
        </div>

        <div className="flex gap-3 pt-2">
          <button type="submit" className="btn-primary" disabled={saving}>
            {saving ? 'Guardando...' : isEdit ? 'Guardar cambios' : 'Crear encuesta'}
          </button>
          <Link to="/encuestas" className="btn-secondary">
            Cancelar
          </Link>
        </div>
      </form>
    </div>
  );
}
