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

const DEPT_LABELS = {
  'gerencia-de-tecnologia-de-la-informacion': 'TI',
  'gerencia-de-procura': 'Procura',
  'gerencia-de-logistica-y-transporte': 'Logística',
  'gerencia-de-sistemas-de-gestion': 'Gestión de la Calidad',
  'direccion-de-operaciones': 'Operación',
};

function StarRating({ value }) {
  if (!value) return <span className="text-slate-400">—</span>;
  return (
    <span className="text-amber-500 font-semibold">
      {'★'.repeat(Math.round(value))}
      <span className="text-slate-400">{'★'.repeat(5 - Math.round(value))}</span>
      <span className="text-slate-600 ml-1 text-sm">({value})</span>
    </span>
  );
}

export default function Dashboard() {
  const [stats, setStats] = useState([]);
  const [encuestas, setEncuestas] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    Promise.all([api.getEstadisticas(), api.getEncuestas()])
      .then(([s, e]) => {
        setStats(s);
        setEncuestas(e);
      })
      .catch(console.error)
      .finally(() => setLoading(false));
  }, []);

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

  const totalRespuestas = stats.reduce((acc, s) => acc + (s.total_respuestas || 0), 0);

  return (
    <div className="space-y-8">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold text-slate-800">Dashboard</h2>
          <p className="text-slate-500 mt-1">Resumen de encuestas de satisfacción por departamento</p>
        </div>
        <Link to="/encuestas/nueva" className="btn-primary">
          + Nueva encuesta
        </Link>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="card">
          <p className="text-sm text-slate-500">Encuestas activas</p>
          <p className="text-3xl font-bold text-avante-navy mt-1">{encuestas.length}</p>
        </div>
        <div className="card">
          <p className="text-sm text-slate-500">Total respuestas</p>
          <p className="text-3xl font-bold text-avante-teal mt-1">{totalRespuestas}</p>
        </div>
        <div className="card">
          <p className="text-sm text-slate-500">Departamentos con encuestas</p>
          <p className="text-3xl font-bold text-avante-dark mt-1">{stats.length}</p>
        </div>
      </div>

      <section>
        <h3 className="text-lg font-semibold text-slate-800 mb-4">Departamentos principales</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {stats.map((s) => (
            <div key={s.departamento_id} className="card hover:shadow-md transition-shadow">
              <div className="flex items-start justify-between">
                <div>
                  {DEPT_LABELS[s.departamento_id] && (
                    <span className="inline-block bg-avante-teal/10 text-avante-teal text-xs font-semibold px-2 py-0.5 rounded mb-2">
                      {DEPT_LABELS[s.departamento_id]}
                    </span>
                  )}
                  <h4 className="font-semibold text-slate-800 text-sm leading-tight">{s.departamento_nombre}</h4>
                </div>
              </div>
              <div className="mt-4 space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-slate-500">Encuestas</span>
                  <span className="font-medium">{s.total_encuestas}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-500">Respuestas</span>
                  <span className="font-medium">{s.total_respuestas}</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-slate-500">Promedio</span>
                  <StarRating value={s.promedio_calificacion} />
                </div>
              </div>
              <div className="mt-4 flex gap-2">
                <Link
                  to={`/encuestas?departamento=${s.departamento_id}`}
                  className="text-sm text-avante-teal hover:underline"
                >
                  Ver encuestas
                </Link>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section>
        <h3 className="text-lg font-semibold text-slate-800 mb-4">Encuestas recientes</h3>
        <div className="card overflow-hidden p-0">
          <table className="w-full text-sm">
            <thead className="bg-slate-50 border-b border-slate-200">
              <tr>
                <th className="text-left px-4 py-3 font-medium text-slate-600">Título</th>
                <th className="text-left px-4 py-3 font-medium text-slate-600">Departamento</th>
                <th className="text-right px-4 py-3 font-medium text-slate-600">Acciones</th>
              </tr>
            </thead>
            <tbody>
              {encuestas.slice(0, 8).map((e) => (
                <tr key={e.id} className="border-b border-slate-100 hover:bg-slate-50">
                  <td className="px-4 py-3 font-medium text-slate-800">{e.titulo}</td>
                  <td className="px-4 py-3 text-slate-600">{e.departamentoNombre}</td>
                  <td className="px-4 py-3 text-right space-x-3">
                    <Link to={`/encuestas/${e.id}/responder`} className="text-avante-teal hover:underline">
                      Responder
                    </Link>
                    <Link to={`/encuestas/${e.id}/resultados`} className="text-slate-500 hover:underline">
                      Resultados
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>
    </div>
  );
}
