// src/components/settings/seranking-integration.tsx — Settings → Intégrations,
// section SE-Ranking BYO key (monétisation slice 2, Task 5). Miroir
// structurel de gsc-integrations.tsx, en plus simple (une seule mutation).
// Add-on inactif : carte pitch + CTA S'abonner (checkout Stripe, owner/admin
// seulement — canManage). Add-on actif : badge + champ clé (jamais
// pré-rempli, la valeur n'existe pas côté client) + Enregistrer/Déconnecter +
// units_left du dernier ping réussi. Erreurs serveur (saveSerankingApiKeyAction)
// restent en français brut (même convention que gsc/actions.ts) — seules les
// strings UI locales passent par next-intl.
"use client";

import { useTranslations } from "next-intl";
import { useState, useTransition } from "react";
import { toast } from "sonner";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { createSerankingByokCheckoutAction } from "@/lib/billing/pack-actions";
import {
  type SerankingIntegrationStatus,
  saveSerankingApiKeyAction,
} from "@/lib/seranking/integration-actions";

export function SerankingIntegration({
  initial,
}: {
  initial: SerankingIntegrationStatus;
}) {
  const t = useTranslations("Settings.integrations.seranking");
  const [status, setStatus] = useState(initial);
  const [key, setKey] = useState("");
  const [unitsLeft, setUnitsLeft] = useState<number | null>(initial.unitsLeft);
  const [checkoutPending, setCheckoutPending] = useState(false);
  const [pending, startTransition] = useTransition();

  async function subscribe() {
    setCheckoutPending(true);
    try {
      const res = await createSerankingByokCheckoutAction();
      if ("url" in res) {
        window.location.href = res.url;
      } else {
        toast.error(t("checkoutError"));
        setCheckoutPending(false);
      }
    } catch {
      toast.error(t("checkoutError"));
      setCheckoutPending(false);
    }
  }

  function save() {
    startTransition(async () => {
      const res = await saveSerankingApiKeyAction(key);
      if (res.ok) {
        setStatus((s) => ({ ...s, hasKey: true }));
        setUnitsLeft(res.unitsLeft);
        setKey("");
        toast.success(t("saved"));
      } else {
        toast.error(res.error);
      }
    });
  }

  function disconnect() {
    startTransition(async () => {
      const res = await saveSerankingApiKeyAction(null);
      if (res.ok) {
        setStatus((s) => ({ ...s, hasKey: false }));
        setUnitsLeft(null);
        setKey("");
        toast.success(t("disconnected"));
      } else {
        toast.error(res.error);
      }
    });
  }

  if (!status.addonActive) {
    // Pitch card visible only to owner/admin — members can't subscribe and
    // there's nothing actionable for them to see.
    if (!status.canManage) return null;
    return (
      <Card>
        <CardHeader>
          <CardTitle>{t("title")}</CardTitle>
          <CardDescription>{t("pitch")}</CardDescription>
        </CardHeader>
        <CardContent className="text-muted-foreground text-sm">
          {t("price")}
        </CardContent>
        <CardFooter>
          <Button onClick={subscribe} disabled={checkoutPending}>
            {checkoutPending ? "…" : t("subscribe")}
          </Button>
        </CardFooter>
      </Card>
    );
  }

  return (
    <Card>
      <CardHeader>
        <div className="flex flex-wrap items-center gap-3">
          <CardTitle>{t("title")}</CardTitle>
          <Badge
            variant="secondary"
            className="border-emerald-500/30 bg-emerald-500/15 text-emerald-600 dark:text-emerald-400"
          >
            {t("active")}
          </Badge>
        </div>
        <CardDescription>{t("activeDescription")}</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        {status.canManage ? (
          <div className="flex flex-col gap-1.5">
            <Label htmlFor="seranking-api-key">{t("keyLabel")}</Label>
            <Input
              id="seranking-api-key"
              type="password"
              autoComplete="off"
              placeholder={
                status.hasKey ? t("keyPlaceholderSet") : t("keyPlaceholderNew")
              }
              value={key}
              onChange={(e) => setKey(e.target.value)}
              disabled={pending}
            />
          </div>
        ) : (
          <p className="text-muted-foreground text-sm">
            {status.hasKey ? t("keyConfiguredByAdmin") : t("noKeyYet")}
          </p>
        )}
        {unitsLeft !== null ? (
          <p className="text-muted-foreground text-sm">
            {t("unitsLeft", { count: unitsLeft })}
          </p>
        ) : null}
      </CardContent>
      {status.canManage ? (
        <CardFooter className="flex flex-wrap gap-3">
          <Button onClick={save} disabled={pending || key.trim() === ""}>
            {pending ? "…" : t("save")}
          </Button>
          {status.hasKey ? (
            <Button
              variant="ghost"
              className="text-muted-foreground hover:text-destructive"
              onClick={disconnect}
              disabled={pending}
            >
              {pending ? "…" : t("disconnect")}
            </Button>
          ) : null}
        </CardFooter>
      ) : null}
    </Card>
  );
}