import EmptyState from "@/components/EmptyState";
import { initiatives } from "@/lib/mock";
import StatusPill from "@/components/StatusPill";

const statusOrder = ["en_ruta", "riesgo", "vencido", "completado"] as const;

export default function InitiativesPage() {
  return (
    <div className="space-y-7">
      <header>
        <h1 className="text-display">Iniciativas</h1>
        <p className="text-body-lg text-benell-text-soft">Seguimiento semanal por estatus y fecha compromiso</p>
      </header>

      <section className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
        {statusOrder.map((status) => {
          const list = initiatives.filter((initiative) => initiative.status === status);

          return (
            <article key={status} className="rounded-benell border border-benell-stroke bg-benell-surface p-4">
              <div className="mb-3 flex items-center justify-between">
                <StatusPill status={status} />
                <span className="text-label rounded-pill bg-benell-surface-muted px-2 py-1 font-semibold">{list.length}</span>
              </div>
              <ul className="space-y-3">
                {list.map((initiative) => (
                  <li key={initiative.id} className="rounded-xl border border-benell-stroke bg-white p-3">
                    <p className="text-h3 break-words font-semibold">{initiative.title}</p>
                    <p className="text-body text-benell-text-soft">
                      {initiative.owner} · {initiative.dueDate}
                    </p>
                    <p className="text-label mt-2 text-benell-text-soft text-tabular">Avance: {initiative.progress}%</p>
                  </li>
                ))}
              </ul>
            </article>
          );
        })}
      </section>

      <EmptyState
        title="Módulo de riesgos cruzados"
        description="Próximamente se habilitará la vista de dependencias e impactos entre iniciativas."
      />
    </div>
  );
}
