import Link from "next/link";
import { ListChecksIcon } from "lucide-react";
import { StatusBadge, type StatusTone } from "@/components/app/status-badge";
import { Button } from "@/components/ui/button";
import { IMPORT_STATUS_LABELS, reportSummary, toImportReport } from "@/lib/imports";
import { keywordsHref } from "@/lib/keywords-scope";
import { formatTarget } from "@/lib/locales";
import { type ImportSummary } from "@/lib/integrations";

// Une ligne par cible : son dernier rapport, et le geste qui lance un import.
//
// **Plus de sélecteur de cadence** (décision utilisateur 2026-09-02) : l'import est manuel.
//
// **Plus de bouton « Importer maintenant » non plus** (correctif 2026-09-02). Il envoyait un
// déclenchement sans mode, que l'api traitait en découverte du domaine du site — un parcours
// que l'utilisateur a écarté (« on n'importe que des listes existantes »), donc un chemin qui ne
// pouvait produire que des échecs et des imports qu'il n'avait pas demandés. Il est remplacé par
// le lien vers le parcours d'import de listes, où les listes se choisissent.
//
// Ce composant est redevenu un composant serveur : il n'y a plus d'état ni de suivi de job ici,
// et le toaster global suit déjà les imports de l'organisation.
//
// Responsive : chaque cible est une carte qui empile ses éléments en dessous de `sm` et les
// aligne au-delà. Aucune table — la page ne doit jamais scroller horizontalement.

export type TargetRow = {
  id: string;
  siteId: string;
  siteName: string;
  country: string;
  language: string;
  lastImport: ImportSummary | null;
  /**
   * Date du dernier rapport, **déjà formatée par la page** (serveur). Formater ici divergerait
   * entre le rendu serveur et l'hydratation — même règle que
   * `components/keywords/import-columns.tsx` et `components/sites/columns.tsx`.
   */
  lastImportLabel: string | null;
};

/** L'état d'un import → le ton du badge partagé. Même échelle que la clé, même rendu. */
const IMPORT_STATUS_TONES: Record<string, StatusTone> = {
  queued: "pending",
  running: "pending",
  done: "success",
  failed: "error",
};

export function IntegrationTargets({ targets }: { targets: TargetRow[] }) {
  if (targets.length === 0) {
    return (
      <p className="text-muted-foreground text-sm">
        Aucune cible : créez d'abord un site et sa cible pays · langue dans Réglages → Sites.
      </p>
    );
  }
  return (
    <ul className="space-y-3">
      {targets.map((target) => (
        <li key={target.id}>
          <TargetCard target={target} />
        </li>
      ))}
    </ul>
  );
}

function TargetCard({ target }: { target: TargetRow }) {
  return (
    <div className="space-y-3 rounded-lg border p-4">
      <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-2">
        <div className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-1">
          <span className="font-medium">{target.siteName}</span>
          <span className="text-muted-foreground text-sm">{formatTarget(target)}</span>
        </div>
        <Button
          variant="outline"
          nativeButton={false}
          render={
            <Link
              href={keywordsHref(target.siteId, "imports/new", {
                target: target.id,
                source: "api",
              })}
            />
          }
        >
          <ListChecksIcon data-icon="inline-start" />
          Importer des listes
        </Button>
      </div>

      <LastImport summary={target.lastImport} createdAtLabel={target.lastImportLabel} />
    </div>
  );
}

function LastImport({
  summary,
  createdAtLabel,
}: {
  summary: ImportSummary | null;
  createdAtLabel: string | null;
}) {
  if (summary === null) {
    return <p className="text-muted-foreground text-sm">Aucun import API sur cette cible.</p>;
  }
  return (
    <div className="flex flex-wrap items-center gap-2 text-sm">
      <StatusBadge tone={IMPORT_STATUS_TONES[summary.status] ?? "neutral"}>
        {IMPORT_STATUS_LABELS[summary.status] ?? summary.status}
      </StatusBadge>
      <span className="text-muted-foreground">{createdAtLabel ?? summary.created_at}</span>
      {summary.error ? (
        <span className="text-destructive min-w-0 break-words">{summary.error}</span>
      ) : (
        <span className="text-muted-foreground min-w-0 break-words">
          {reportSummary(toImportReport(summary.report))}
        </span>
      )}
    </div>
  );
}