"use client";

import { AttachBadge } from "@/components/keywords/attach-badge";
import { IntentBadge } from "@/components/keywords/intent-badge";
import type { KeywordTableRow } from "@/components/keywords/keyword-columns";
import { KdBar } from "@/components/keywords/kd-bar";
import { LabeledFigure, MetricCellView } from "@/components/keywords/metric-cell";
import { Card, CardContent, CardHeader } from "@/components/ui/card";

// Le réservoir sous 640 px : **une carte par mot-clé**, pas une table réduite.
//
// La règle du projet interdit à la fenêtre de scroller horizontalement, et huit colonnes ne
// tiennent pas sur 375 px — les replier dans un cadre à défilement rendrait la lecture
// impossible plutôt qu'étroite. Chaque carte porte donc ce qui se lit d'un coup d'œil :
// l'intitulé, son intention, les trois chiffres avec leur pastille de provenance, et le
// statut d'attache. Tout le reste — les autres sources, les listes, les tags, les gestes —
// est à un tap, dans le panneau de détail.
//
// La sélection multiple reste à la table : cocher cinquante lignes est un geste de bureau.

export function KeywordCards({
  rows,
  emptyMessage,
  onOpen,
}: {
  rows: KeywordTableRow[];
  emptyMessage: string;
  onOpen: (row: KeywordTableRow) => void;
}) {
  if (rows.length === 0) {
    return (
      <p className="border-border text-muted-foreground rounded-lg border p-6 text-center text-sm">
        {emptyMessage}
      </p>
    );
  }

  return (
    <ul className="flex min-w-0 flex-col gap-2">
      {rows.map((row) => {
        const intent = row.intent.values[0]?.text ?? null;
        return (
          <li key={row.id} className="min-w-0">
            <Card size="sm" className="gap-2">
              <CardHeader className="flex flex-wrap items-center gap-2">
                <button
                  type="button"
                  className="hover:text-primary min-w-0 flex-1 truncate text-left font-medium"
                  onClick={() => onOpen(row)}
                >
                  {row.keyword}
                </button>
                {intent === null ? null : <IntentBadge value={intent} />}
              </CardHeader>
              <CardContent className="flex flex-col gap-2">
                <div className="grid grid-cols-3 gap-2">
                  <LabeledFigure label="Volume">
                    <MetricCellView cell={row.volume} label="Volume" align="left" />
                  </LabeledFigure>
                  <LabeledFigure label="KD">
                    <MetricCellView
                      cell={row.kd}
                      label="KD"
                      align="left"
                      renderValue={(value) => <KdBar value={value} />}
                    />
                  </LabeledFigure>
                  <LabeledFigure label="CPC">
                    <MetricCellView cell={row.cpc} label="CPC" align="left" />
                  </LabeledFigure>
                </div>
                <div className="flex flex-wrap items-center gap-2">
                  <AttachBadge status={row.attachStatus} />
                  <span className="text-muted-foreground num text-xs">{row.lastUpdatedLabel}</span>
                </div>
              </CardContent>
            </Card>
          </li>
        );
      })}
    </ul>
  );
}