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

function avg(arr) {
  const valid = arr.filter((v) => v != null && !isNaN(v));
  if (!valid.length) return null;
  return (valid.reduce((a, b) => a + b, 0) / valid.length).toFixed(2);
}

export default function EncuestaResultados() {
  const { id } = useParams();
  const [encuesta, setEncuesta] = useState(null);
  const [respuestas, setRespuestas] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    Promise.all([api.getEncuesta(id), api.getRespuestas(id)])
      .then(([e, r]) => {
        setEncuesta(e);
        setRespuestas(r);
      })
      .catch(console.error)
      .finally(() => setLoading(false));
  }, [id]);

  if (loading) return <div className="text-slate-500">Cargando resultados...</div>;
  if (!encuesta) return <div className="text-red-600">Encuesta no encontrada</div>;

  const calificaciones = respuestas.map((r) => r.datos.calificacionGeneral).filter(Boolean);
  const atenciones = respuestas.map((r) => r.datos.atencion).filter(Boolean);
  const tiempos = respuestas.map((r) => r.datos.tiempoRespuesta).filter(Boolean);

  const cumplimientoCounts = respuestas.reduce((acc, r) => {
    const v = r.datos.cumplimiento;
    if (v) acc[v] = (acc[v] || 0) + 1;
    return acc;
  }, {});

  return (
    <div className="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">Resultados — {encuesta.titulo}</h2>
        <p className="text-avante-teal text-sm">{encuesta.departamentoNombre}</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div className="card">
          <p className="text-sm text-slate-500">Total respuestas</p>
          <p className="text-3xl font-bold text-avante-navy">{respuestas.length}</p>
        </div>
        <div className="card">
          <p className="text-sm text-slate-500">Calificación general</p>
          <p className="text-3xl font-bold text-avante-teal">{avg(calificaciones) ?? '—'}</p>
        </div>
        <div className="card">
          <p className="text-sm text-slate-500">Atención al cliente</p>
          <p className="text-3xl font-bold text-avante-dark">{avg(atenciones) ?? '—'}</p>
        </div>
        <div className="card">
          <p className="text-sm text-slate-500">Tiempo de respuesta</p>
          <p className="text-3xl font-bold text-avante-slate">{avg(tiempos) ?? '—'}</p>
        </div>
      </div>

      {Object.keys(cumplimientoCounts).length > 0 && (
        <div className="card">
          <h3 className="font-semibold text-slate-800 mb-4">Cumplimiento de requisitos</h3>
          <div className="space-y-2">
            {Object.entries(cumplimientoCounts).map(([label, count]) => (
              <div key={label} className="flex items-center gap-3">
                <span className="text-sm text-slate-600 w-24">{label}</span>
                <div className="flex-1 bg-slate-100 rounded-full h-2">
                  <div
                    className="bg-avante-teal h-2 rounded-full"
                    style={{ width: `${(count / respuestas.length) * 100}%` }}
                  />
                </div>
                <span className="text-sm font-medium w-8">{count}</span>
              </div>
            ))}
          </div>
        </div>
      )}

      <div className="card overflow-hidden p-0">
        <div className="px-4 py-3 border-b border-slate-200">
          <h3 className="font-semibold text-slate-800">Respuestas individuales</h3>
        </div>
        {respuestas.length === 0 ? (
          <p className="text-slate-500 text-center py-8">Aún no hay respuestas registradas.</p>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead className="bg-slate-50">
                <tr>
                  <th className="text-left px-4 py-2 font-medium text-slate-600">Fecha</th>
                  <th className="text-left px-4 py-2 font-medium text-slate-600">Cliente</th>
                  <th className="text-left px-4 py-2 font-medium text-slate-600">Servicio</th>
                  <th className="text-center px-4 py-2 font-medium text-slate-600">Calif.</th>
                  <th className="text-left px-4 py-2 font-medium text-slate-600">Cumplimiento</th>
                  <th className="text-left px-4 py-2 font-medium text-slate-600">Comentarios</th>
                </tr>
              </thead>
              <tbody>
                {respuestas.map((r) => (
                  <tr key={r.id} className="border-t border-slate-100 hover:bg-slate-50">
                    <td className="px-4 py-2 text-slate-500">{new Date(r.creadoEn).toLocaleDateString('es')}</td>
                    <td className="px-4 py-2">{r.datos.cliente}</td>
                    <td className="px-4 py-2">{r.datos.servicio}</td>
                    <td className="px-4 py-2 text-center font-semibold text-avante-teal">
                      {r.datos.calificacionGeneral ?? '—'}
                    </td>
                    <td className="px-4 py-2">{r.datos.cumplimiento ?? '—'}</td>
                    <td className="px-4 py-2 text-slate-500 max-w-xs truncate">{r.datos.comentarios ?? '—'}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
}
