import Link from "next/link";
import { DatabaseIcon, PlugZapIcon, UploadIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";
import { loadApiSourceAccess } from "@/lib/import-source";
import { keywordsHref } from "@/lib/keywords-scope";

// L'état vide d'une cible : deux chemins pour la remplir, et une ligne qui dit **de quelle
// cible** il s'agit — le réservoir est par cible, un « c'est vide » sans nom de pays ne dit
// pas où regarder.
//
// La seconde action dépend de ce qui est branché (correction 2026-09-02) : elle proposait
// « Brancher l'API KWFinder » même quand la clé était connectée et vérifiée, c'est-à-dire un
// bouton qui envoyait faire un branchement déjà fait. Clé connectée = « Importer depuis
// KWFinder », qui ouvre la branche API du wizard **sur la cible courante**.
//
// Composant serveur asynchrone, et l'appel n'est fait qu'ici : la lecture des intégrations ne
// coûte rien sur le chemin nominal du réservoir, qui ne rend pas cet état.

export async function KeywordsEmpty({
  siteId,
  targetId,
  siteName,
  targetLabel,
}: {
  siteId: string;
  targetId: string;
  siteName: string;
  targetLabel: string;
}) {
  const { ready } = await loadApiSourceAccess();

  return (
    <Empty className="border-border border">
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <DatabaseIcon />
        </EmptyMedia>
        <EmptyTitle>Réservoir vide</EmptyTitle>
        <EmptyDescription>
          {siteName} · {targetLabel}
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <div className="flex flex-wrap items-center justify-center gap-2">
          <Button
            nativeButton={false}
            render={
              <Link
                href={keywordsHref(siteId, "imports/new", { target: targetId, source: "csv" })}
              />
            }
          >
            <UploadIcon data-icon="inline-start" />
            Importer des CSV
          </Button>
          <Button
            variant="outline"
            nativeButton={false}
            render={
              ready ? (
                <Link
                  href={keywordsHref(siteId, "imports/new", { target: targetId, source: "api" })}
                />
              ) : (
                <Link href="/settings/integrations" />
              )
            }
          >
            <PlugZapIcon data-icon="inline-start" />
            {ready ? "Importer depuis KWFinder" : "Brancher l'API KWFinder"}
          </Button>
        </div>
      </EmptyContent>
    </Empty>
  );
}