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

export default function EncuestasList() {
  const [searchParams] = useSearchParams();
  const deptFilter = searchParams.get('departamento');
  const [encuestas, setEncuestas] = useState([]);
  const [departamentos, setDepartamentos] = useState([]);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState(deptFilter || '');

  useEffect(() => {
    api.getDepartamentos().then(setDepartamentos).catch(console.error);
  }, []);

  useEffect(() => {
    setLoading(true);
    api
      .getEncuestas(filter || undefined)
      .then(setEncuestas)
      .catch(console.error)
      .finally(() => setLoading(false));
  }, [filter]);

  useEffect(() => {
    if (deptFilter) setFilter(deptFilter);
  }, [deptFilter]);

  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">Encuestas</h2>
          <p className="text-slate-500 mt-1">Gestión de encuestas de satisfacción por departamento</p>
        </div>
        <Link to="/encuestas/nueva" className="btn-primary">
          + Nueva encuesta
        </Link>
      </div>

      <div className="flex items-center gap-3">
        <label className="text-sm text-slate-600">Filtrar por departamento:</label>
        <select
          className="input-field max-w-xs"
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
        >
          <option value="">Todos los departamentos</option>
          {departamentos.map((d) => (
            <option key={d.id} value={d.id}>
              {d.nombre}
            </option>
          ))}
        </select>
      </div>

      {loading ? (
        <div className="text-slate-500">Cargando encuestas...</div>
      ) : encuestas.length === 0 ? (
        <div className="card text-center py-12">
          <p className="text-slate-500">No hay encuestas para este filtro.</p>
          <Link to="/encuestas/nueva" className="btn-primary mt-4 inline-block">
            Crear primera encuesta
          </Link>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {encuestas.map((e) => (
            <div key={e.id} className="card">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <h3 className="font-semibold text-slate-800">{e.titulo}</h3>
                  <p className="text-sm text-avante-teal mt-1">{e.departamentoNombre}</p>
                  {e.descripcion && <p className="text-sm text-slate-500 mt-2">{e.descripcion}</p>}
                  <p className="text-xs text-slate-400 mt-2">{e.preguntas?.length} preguntas</p>
                </div>
                <span className={`text-xs px-2 py-1 rounded-full ${e.activa ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-500'}`}>
                  {e.activa ? 'Activa' : 'Inactiva'}
                </span>
              </div>
              <div className="mt-4 flex flex-wrap gap-2">
                <Link to={`/encuestas/${e.id}/responder`} className="btn-primary text-sm py-1.5">
                  Responder
                </Link>
                <Link to={`/encuestas/${e.id}/resultados`} className="btn-secondary text-sm py-1.5">
                  Resultados
                </Link>
                <Link to={`/encuestas/${e.id}/editar`} className="btn-secondary text-sm py-1.5">
                  Editar
                </Link>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
