import { AlertCircle, Clock3 } from "lucide-react";
import type { AlertItem } from "@/lib/types";
import StatusPill from "@/components/StatusPill";

type AlertsListProps = {
  items: AlertItem[];
};

export default function AlertsList({ items }: AlertsListProps) {
  const overdue = items.filter((item) => item.level === "vencido").length;
  const risk = items.filter((item) => item.level === "riesgo").length;
  const total = items.length;

  return (
    <section aria-labelledby="alerts-title" className="space-y-4">
      <h2 id="alerts-title" className="text-h2 font-semibold">
        Alertas y riesgos
      </h2>
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
        <article className="rounded-xl border border-benell-stroke bg-benell-surface p-3">
          <p className="text-label text-benell-text-soft">Total alertas</p>
          <p className="text-h3 mt-1 font-semibold text-benell-text">{total}</p>
        </article>
        <article className="rounded-xl border border-benell-stroke bg-benell-surface p-3">
          <p className="text-label text-benell-text-soft">Vencidas</p>
          <p className="text-h3 mt-1 font-semibold text-benell-red">{overdue}</p>
        </article>
        <article className="rounded-xl border border-benell-stroke bg-benell-surface p-3">
          <p className="text-label text-benell-text-soft">En riesgo</p>
          <p className="text-h3 mt-1 font-semibold text-benell-amber">{risk}</p>
        </article>
      </div>
      <div className="overflow-hidden rounded-benell border border-benell-stroke bg-benell-surface">
        <ul>
          {items.map((item, index) => (
            <li key={item.id} className={index !== 0 ? "border-t border-benell-stroke" : undefined}>
              <div className="flex items-start justify-between gap-4 px-4 py-4 md:px-5">
                <div className="flex min-w-0 items-start gap-3">
                  {item.level === "vencido" ? (
                    <AlertCircle aria-hidden className="mt-1 size-5 text-benell-red" />
                  ) : (
                    <Clock3 aria-hidden className="mt-1 size-5 text-benell-amber" />
                  )}
                  <div className="min-w-0">
                    <p className="text-h3 truncate font-medium text-benell-text">{item.title}</p>
                    <p className="text-label text-benell-text-soft">
                      {item.owner} • {item.timing}
                    </p>
                  </div>
                </div>
                <StatusPill status={item.level} className="shrink-0" />
              </div>
              <div className="px-4 pb-4 md:px-5">
                <div className="h-1.5 rounded-full bg-benell-surface-muted">
                  <div
                    className={`h-1.5 rounded-full ${item.level === "vencido" ? "bg-benell-red" : "bg-benell-amber"}`}
                    style={{ width: item.level === "vencido" ? "100%" : "65%" }}
                  />
                </div>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}
