// src/components/flight-check/overview.tsx — cross-site audit overview.
// One card per site of the active org: score ring, pass/fail/warn counts and
// the last-audit date. Read server-side, so this is a plain presentational list.

import { relativeFr } from "@/components/keywords/keyword-modal-utils";
import { RingGauge, scoreColor } from "@/components/ui/ring-gauge";
import type { OrgAuditOverviewRow } from "@/lib/spec/audit/actions";

function Count({
  n,
  label,
  className,
}: {
  n: number;
  label: string;
  className: string;
}) {
  return (
    <span className="inline-flex items-baseline gap-1">
      <span className={`font-semibold tabular-nums ${className}`}>{n}</span>
      <span className="text-muted-foreground text-xs">{label}</span>
    </span>
  );
}

export function Overview({ rows }: { rows: OrgAuditOverviewRow[] }) {
  if (rows.length === 0) {
    return (
      <p className="text-muted-foreground text-sm">
        Aucun site dans cette organisation.
      </p>
    );
  }

  return (
    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
      {rows.map((row) => {
        const audited = row.score != null;
        const ranAt = relativeFr(row.ranAt);
        return (
          <div
            key={row.siteId}
            className="flex items-center gap-3 rounded-lg border bg-card p-3"
          >
            {audited ? (
              <RingGauge
                fraction={(row.score ?? 0) / 100}
                label={String(row.score)}
                color={scoreColor(1 - (row.score ?? 0) / 100)}
                size={44}
                stroke={4}
                title={`Score ${row.score}/100`}
              />
            ) : (
              <span
                className="text-muted-foreground inline-flex size-11 shrink-0 items-center justify-center rounded-full border text-sm"
                title="Jamais audité"
              >
                —
              </span>
            )}
            <div className="min-w-0 flex-1">
              <div className="truncate font-medium" title={row.name}>
                {row.name}
              </div>
              {audited ? (
                <>
                  <div className="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-0.5">
                    <Count
                      n={row.pass}
                      label="pass"
                      className="text-green-600 dark:text-green-400"
                    />
                    <Count
                      n={row.fail}
                      label="fail"
                      className="text-red-600 dark:text-red-400"
                    />
                    <Count
                      n={row.warn}
                      label="warn"
                      className="text-amber-600 dark:text-amber-400"
                    />
                  </div>
                  {ranAt ? (
                    <div className="text-muted-foreground mt-0.5 text-xs">
                      Audité {ranAt}
                    </div>
                  ) : null}
                </>
              ) : (
                <div className="text-muted-foreground mt-0.5 text-xs">
                  {row.url ? "Jamais audité" : "Pas d'URL configurée"}
                </div>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
}