import Link from "next/link";
import { FileSpreadsheetIcon, PlugZapIcon, SettingsIcon } from "lucide-react";
import { StatusBadge } from "@/components/app/status-badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@/components/ui/item";
import { keywordsHref } from "@/lib/keywords-scope";

// Étape 1 du parcours d'import : **d'où viennent les mots-clés**.
//
// Composant serveur, et des liens plutôt qu'un état : le choix de source vit dans l'URL
// (`?source=csv` / `?source=api`), donc une étape se partage, se met en favori et survit à un
// rechargement. Rien d'interactif ici — le `"use client"` commence à l'étape suivante.
//
// **La tuile API n'est jamais masquée.** Sans clé branchée elle est montrée inerte, avec le mot
// « Non connectée » et le chemin pour la brancher : cacher la voie ferait croire qu'elle
// n'existe pas.

export function ImportSourceTiles({
  siteId,
  targetId,
  apiReady,
}: {
  siteId: string;
  targetId: string;
  /** Une intégration KWFinder existe et a répondu. */
  apiReady: boolean;
}) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Source</CardTitle>
        <CardDescription>D'où viennent les mots-clés.</CardDescription>
      </CardHeader>
      <CardContent>
        {/* Deux colonnes au-delà de `sm`, empilées en dessous : les tuiles ne débordent
            jamais, elles se replient (règle responsive). */}
        <div className="grid gap-3 sm:grid-cols-2">
          <Item
            variant="outline"
            className="h-full items-start"
            //  `Item` rend un `div` par défaut : `render` lui substitue le `Link`, et il n'y a
            //  pas de `nativeButton` à désarmer ici — ce piège-là est celui de `Button`.
            render={
              <Link
                href={keywordsHref(siteId, "imports/new", { target: targetId, source: "csv" })}
              />
            }
          >
            <ItemMedia variant="icon">
              <FileSpreadsheetIcon />
            </ItemMedia>
            <ItemContent>
              <ItemTitle>Fichiers CSV</ItemTitle>
              <ItemDescription>KWFinder, Semrush, SE Ranking, export générique.</ItemDescription>
            </ItemContent>
          </Item>

          {apiReady ? (
            <Item
              variant="outline"
              className="h-full items-start"
              render={
                <Link
                  href={keywordsHref(siteId, "imports/new", { target: targetId, source: "api" })}
                />
              }
            >
              <ItemMedia variant="icon">
                <PlugZapIcon />
              </ItemMedia>
              <ItemContent>
                <ItemTitle>API KWFinder</ItemTitle>
                <ItemDescription>
                  Découverte d'un domaine, ou enrichissement d'une liste.
                </ItemDescription>
              </ItemContent>
            </Item>
          ) : (
            <Item variant="outline" className="h-full items-start opacity-60" aria-disabled>
              <ItemMedia variant="icon">
                <PlugZapIcon />
              </ItemMedia>
              <ItemContent>
                <ItemTitle>API KWFinder</ItemTitle>
                <ItemDescription className="flex flex-wrap items-center gap-2">
                  {/* Le mot est écrit : la couleur du badge ne porte jamais l'information
                      seule. */}
                  <StatusBadge tone="pending">Non connectée</StatusBadge>
                </ItemDescription>
                <Button
                  variant="outline"
                  size="sm"
                  className="mt-1 w-fit"
                  nativeButton={false}
                  render={<Link href="/settings/integrations" />}
                >
                  <SettingsIcon data-icon="inline-start" />
                  Brancher la clé
                </Button>
              </ItemContent>
            </Item>
          )}
        </div>
      </CardContent>
    </Card>
  );
}