import { Plug, Settings2 } from "@/components/ui/icons";
import { Panel, PanelHeader } from "@/components/ui/panel";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/ui/empty-state";
import { BRAND_NAME } from "@/lib/brand";
import { getOauthStatus } from "@/lib/google-oauth";
import { formatDate } from "@/lib/format";

type SearchParams = Promise<{
  google?: string;
  reason?: string;
  email?: string;
}>;

export default async function IntegrationsPage({
  searchParams,
}: {
  searchParams: SearchParams;
}) {
  const params = await searchParams;
  const status = await getOauthStatus();

  const oauthConfigured = Boolean(
    process.env.GOOGLE_OAUTH_CLIENT_ID && process.env.GOOGLE_OAUTH_CLIENT_SECRET,
  );

  return (
    <div className="space-y-6">
      {/* Notifications retour du flow OAuth */}
      {params.google === "connected" ? (
        <div className="rounded-md border border-[color:var(--color-success)]/30 bg-[color:var(--color-success)]/[0.08] px-4 py-3 text-sm text-text">
          Compte Google connecte
          {params.email ? <> : <span className="font-mono">{params.email}</span></> : null}.
        </div>
      ) : null}
      {params.google === "error" ? (
        <div className="rounded-md border border-[color:var(--color-danger)]/30 bg-[color:var(--color-danger)]/[0.08] px-4 py-3 text-sm text-text">
          La connexion Google a echoue
          {params.reason ? <> : {params.reason}</> : null}.
        </div>
      ) : null}
      {params.google === "disconnected" ? (
        <div className="rounded-md border border-border bg-stone-900/[0.03] px-4 py-3 text-sm text-text-muted">
          Compte Google deconnecte.
        </div>
      ) : null}

      {/* Bandeau explicatif */}
      <Panel className="border-accent/20 bg-accent/[0.03]">
        <div className="px-6 py-5 flex items-start gap-4">
          <span className="size-10 shrink-0 rounded-md bg-accent/15 border border-accent/40 flex items-center justify-center text-accent">
            <Settings2 className="size-5" />
          </span>
          <div className="flex-1">
            <h3 className="text-sm font-semibold text-text">
              Une seule configuration pour tous vos clients
            </h3>
            <p className="mt-1.5 text-sm text-text-muted leading-relaxed max-w-3xl">
              Tant que vous etes proprietaire ou lecteur des Search Console et
              proprietes Google Analytics de vos clients, connectez simplement
              votre compte Google ci-dessous. {BRAND_NAME} interrogera les APIs
              en votre nom, vos clients n&apos;ont rien a faire.
            </p>
          </div>
        </div>
      </Panel>

      {/* Carte Google */}
      <Panel>
        <PanelHeader
          title="Google (Search Console + Analytics 4)"
          subtitle="Mesure d'audience pour tous les sites clients"
          trailing={
            status.connected ? (
              <Badge tone="success" dot>
                Connecte
              </Badge>
            ) : (
              <Badge tone="muted">Non connecte</Badge>
            )
          }
        />

        <div className="px-6 py-5 space-y-4">
          {status.connected ? (
            <>
              <div className="text-sm">
                <div className="text-text-faint text-xxs uppercase tracking-wider">
                  Compte connecte
                </div>
                <div className="mt-1 text-text font-mono">
                  {status.email ?? "(email non renseigne)"}
                </div>
                {status.connectedAt ? (
                  <div className="mt-1 text-xs text-text-dim">
                    Depuis le {formatDate(status.connectedAt.toISOString())}
                  </div>
                ) : null}
              </div>

              <form action="/api/google/oauth/disconnect" method="POST">
                <Button type="submit" variant="ghost" size="sm">
                  Deconnecter
                </Button>
              </form>
            </>
          ) : (
            <>
              <p className="text-sm text-text-muted">
                Connectez votre compte Google pour autoriser {BRAND_NAME} a lire
                les donnees Search Console et Google Analytics des sites de vos
                clients. Acces en lecture seule, aucune ecriture.
              </p>

              {oauthConfigured ? (
                <a href="/api/google/oauth/connect">
                  <Button variant="primary" size="sm">
                    Connecter mon compte Google
                  </Button>
                </a>
              ) : (
                <div className="rounded-md border border-[color:var(--color-warning)]/30 bg-[color:var(--color-warning)]/[0.06] px-3 py-2 text-xs text-text-muted">
                  Variables d&apos;env <code className="font-mono">GOOGLE_OAUTH_CLIENT_ID</code> et{" "}
                  <code className="font-mono">GOOGLE_OAUTH_CLIENT_SECRET</code> manquantes.
                  Renseignez-les dans <code className="font-mono">.env.production</code> sur le
                  serveur pour activer la connexion.
                </div>
              )}
            </>
          )}
        </div>
      </Panel>

      {/* Catalogue futur */}
      <Panel>
        <EmptyState
          icon={Plug}
          title="Autres integrations a venir"
          description="Stripe, Cloudflare et Resend seront branches lors des prochaines etapes."
          compact
        />
      </Panel>
    </div>
  );
}