import type { DataQualitySummary } from "@dci/core";
import { AlertTriangle, Info, ShieldAlert } from "lucide-react";
import Link from "next/link";
import { cn } from "@/components/ui/cn";
import { fmtDate, fmtInt } from "@/lib/format";
import { fieldLabel } from "@/lib/field-labels";
import { routes } from "@/lib/routes";

function Cell({ label, value, note }: { label: string; value: string; note?: string }) {
  return (
    <div className="min-w-0 border-b border-hair py-2 pr-3 sm:border-b-0 sm:border-r sm:last:border-r-0">
      <div className="figure text-[18px] font-medium leading-none text-ink">{value}</div>
      <div className="label-caps mt-1">{label}</div>
      {note && <div className="text-[11px] text-ink-4">{note}</div>}
    </div>
  );
}

const SEV_ICON = { info: Info, warn: AlertTriangle, critical: ShieldAlert } as const;

/** DATA QUALITY block: sources, completeness, claims (current / unscoped / review), open flags, duplicate review. */
export function DataQualityPanel({ q, completenessNote }: { q: DataQualitySummary; completenessNote?: string }) {
  return (
    <div className="flex flex-col gap-4">
      <div className="grid grid-cols-2 gap-x-3 sm:grid-cols-6">
        <Cell label="Sources" value={fmtInt(q.sourceCount)} note={`${fmtInt(q.primarySourceCount)} primary`} />
        <Cell label="Completeness" value={`${q.completeness}%`} note={completenessNote ?? `${fmtInt(q.fieldsWithProvenance)} fields sourced`} />
        <Cell label="Claims current" value={fmtInt(q.claimsCurrent)} note={`${fmtInt(q.claimsTotal)} total`} />
        <Cell label="Not site-scoped" value={fmtInt(q.claimsUnscoped)} note="stored, never summed" />
        <Cell label="In review" value={fmtInt(q.claimsInReview)} note="sanity flags" />
        <Cell label="Last verified" value={q.lastVerified ? fmtDate(q.lastVerified) : "—"} note={q.lastVerified ? "primary source" : "no primary verification"} />
      </div>
      <div>
        <div className="mb-1.5 flex items-baseline justify-between">
          <h3 className="text-[13px] font-semibold text-ink">Open quality flags</h3>
          <span className="figure text-[11.5px] text-ink-3">{fmtInt(q.openFlags.length)}</span>
        </div>
        {q.openFlags.length === 0 && !q.pendingDuplicate ? (
          <p className="text-[12.5px] text-ink-3">No open flag. Automated sanity checks (scope, density, magnitude, 5× change) passed for every current figure.</p>
        ) : (
          <ul className="divide-y divide-hair">
            {q.pendingDuplicate && (
              <li className="flex items-start gap-2 py-2 text-[12.5px]">
                <Info className="mt-0.5 size-3.5 shrink-0 text-ink-3" aria-hidden />
                <span className="text-ink-2">A possible duplicate of this record is pending human review; figures are not merged until it is resolved.</span>
              </li>
            )}
            {q.openFlags.map((f, i) => {
              const Icon = SEV_ICON[f.severity];
              return (
                <li key={`${f.code}-${i}`} className="flex items-start gap-2 py-2 text-[12.5px]">
                  <Icon className={cn("mt-0.5 size-3.5 shrink-0", f.severity === "critical" ? "text-danger" : f.severity === "warn" ? "text-warn" : "text-ink-3")} aria-label={f.severity} />
                  <div className="min-w-0">
                    <span className="text-ink-2">{f.message}</span>
                    <div className="mt-0.5 flex flex-wrap gap-x-2 text-[11px] text-ink-4">
                      <span className="figure">{f.code}</span>
                      {f.field && <span>· {fieldLabel(f.field)}</span>}
                      <span>· {f.severity}</span>
                    </div>
                  </div>
                </li>
              );
            })}
          </ul>
        )}
        <p className="mt-2 text-[11px] text-ink-4">
          Flags are opened automatically by the sanity engines and closed by review; a critical flag keeps a figure visible but marked.{" "}
          <Link href={`${routes.methodology()}#quality`} className="underline decoration-hair-2 hover:text-ink">
            How quality is scored
          </Link>
        </p>
      </div>
    </div>
  );
}