// src/components/content/pages-health/pages-health-container.tsx — assemble la vue
// santé des pages (Frame A) : KPIs + toolbar/table + drawer de détail. Client
// component ; reçoit l'overview initial (fetch RSC) et refetch sur changement de
// site actif via `fetchContentPagesOverviewAction` (wrapper "use server" — le
// cœur `getContentPagesOverviewAction` est server-only + DI, jamais appelable
// depuis le client). L'action « ouvrir » d'une ligne réutilise le détail de page
// existant de /pages (`fetchPageDetailAction` + Sheet ; Frame B/éditeur différé).
"use client";

import Link from "next/link";
import { useCallback, useEffect, useRef, useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";
import { Skeleton } from "@/components/ui/skeleton";
import type { ContentPagesOverview } from "@/lib/content/pages-overview";
import { fetchContentPagesOverviewAction } from "@/lib/content/pages-overview-actions";
import { useActiveSite } from "@/lib/keywords/site-context";
import { fetchPageDetailAction, type PageDetail } from "@/lib/pages/actions";
import { KpiStrip } from "./kpi-strip";
import { PagesHealthTable } from "./pages-health-table";

/** Slug court (pathname) d'une URL absolue, pour l'en-tête du drawer. */
function toSlug(url: string): string {
  try {
    return new URL(url).pathname || "/";
  } catch {
    return url;
  }
}

export function PagesHealthContainer({
  initialOverview,
  initialSiteId,
}: {
  initialOverview: ContentPagesOverview;
  initialSiteId: string;
}) {
  const { activeSiteId } = useActiveSite();
  // Le serveur a déjà fourni l'overview de ce site. On mémorise le site chargé
  // pour ne JAMAIS refetch au montage (un read server action au montage déclenche
  // une revalidation implicite qui course et bloque la navigation client suivante).
  const loadedSite = useRef(initialSiteId);
  const [ov, setOv] = useState<ContentPagesOverview>(initialOverview);
  const [loading, setLoading] = useState(false);

  const [detail, setDetail] = useState<PageDetail | null>(null);
  const [detailOpen, setDetailOpen] = useState(false);
  const [detailLoading, setDetailLoading] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    setOv(await fetchContentPagesOverviewAction(activeSiteId));
    setLoading(false);
  }, [activeSiteId]);

  useEffect(() => {
    // Refetch seulement quand le site change réellement — jamais au montage.
    if (activeSiteId === loadedSite.current) return;
    loadedSite.current = activeSiteId;
    void load().catch(() => setLoading(false));
  }, [activeSiteId, load]);

  const openDetail = useCallback(
    async (pageId: string) => {
      setDetailOpen(true);
      setDetailLoading(true);
      setDetail(null);
      try {
        setDetail(await fetchPageDetailAction(activeSiteId, pageId));
      } finally {
        // Toujours retirer l'état de chargement, même si l'action jette —
        // sinon le Sheet reste bloqué sur « Chargement… » indéfiniment.
        setDetailLoading(false);
      }
    },
    [activeSiteId],
  );

  if (loading) {
    return (
      <div className="space-y-3 p-4">
        <Skeleton className="h-24 w-full" />
        <Skeleton className="h-10 w-full" />
        <Skeleton className="h-80 w-full" />
      </div>
    );
  }

  // État 0-page : site jamais crawlé → message + lien vers /pages (crawl).
  if (ov.pages.length === 0) {
    return (
      <div className="flex h-72 flex-col items-center justify-center gap-2 text-center">
        <p className="font-medium">Aucune page suivie pour ce site.</p>
        <p className="max-w-md text-muted-foreground text-sm">
          Lancez un crawl depuis l'inventaire des pages pour analyser la santé
          SEO de vos contenus.
        </p>
        <Button asChild className="mt-2">
          <Link href="/pages">Aller à l'inventaire des pages</Link>
        </Button>
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-4 p-4">
      <KpiStrip kpis={ov.kpis} />
      <PagesHealthTable rows={ov.pages} onOpen={openDetail} />

      <Sheet open={detailOpen} onOpenChange={setDetailOpen}>
        <SheetContent className="w-full overflow-y-auto sm:max-w-md">
          <SheetHeader>
            <SheetTitle className="break-all">
              {detail ? toSlug(detail.page.url) : "Chargement…"}
            </SheetTitle>
            {detail ? (
              <SheetDescription className="break-all">
                {detail.page.url}
              </SheetDescription>
            ) : null}
          </SheetHeader>
          {detailLoading ? (
            <p className="px-4 text-muted-foreground text-sm">Chargement…</p>
          ) : detail ? (
            <div className="flex flex-col gap-4 px-4 pb-4">
              <dl className="grid grid-cols-1 gap-3 text-sm">
                <DetailRow label="Title">
                  {detail.page.title ?? "—"}
                  {detail.page.title ? (
                    <span className="ml-1 text-muted-foreground text-xs">
                      ({detail.page.titleLength} car.)
                    </span>
                  ) : null}
                </DetailRow>
                <DetailRow label="Méta description">
                  {detail.page.metaDescription ?? "—"}
                  {detail.page.metaDescription ? (
                    <span className="ml-1 text-muted-foreground text-xs">
                      ({detail.page.descriptionLength} car.)
                    </span>
                  ) : null}
                </DetailRow>
                <DetailRow label="H1">{detail.page.h1 ?? "—"}</DetailRow>
                <DetailRow label="Mots">{detail.page.wordCount}</DetailRow>
              </dl>

              {detail.page.issues.length > 0 ? (
                <div className="flex flex-col gap-1.5">
                  <p className="font-medium text-sm">Problèmes</p>
                  <div className="flex flex-wrap gap-1">
                    {detail.page.issues.map((code) => (
                      <Badge
                        key={code}
                        variant={
                          code === "error" || code === "noindex"
                            ? "destructive"
                            : "secondary"
                        }
                      >
                        {code}
                      </Badge>
                    ))}
                  </div>
                </div>
              ) : null}

              <div className="flex flex-col gap-1.5">
                <p className="font-medium text-sm">Mots-clés liés</p>
                {detail.keywords.length === 0 ? (
                  <p className="text-muted-foreground text-sm">
                    Aucun mot-clé lié à cette page.
                  </p>
                ) : (
                  <ul className="flex flex-col gap-1">
                    {detail.keywords.map((k) => (
                      <li
                        key={k.id}
                        className="flex items-center justify-between text-sm"
                      >
                        <span className="truncate">{k.term}</span>
                        {k.source ? (
                          <Badge variant="outline">{k.source}</Badge>
                        ) : null}
                      </li>
                    ))}
                  </ul>
                )}
              </div>

              <Button asChild variant="outline" className="mt-1">
                <Link href="/pages">Voir dans l'inventaire des pages</Link>
              </Button>
            </div>
          ) : (
            <p className="px-4 text-muted-foreground text-sm">
              Page introuvable.
            </p>
          )}
        </SheetContent>
      </Sheet>
    </div>
  );
}

function DetailRow({
  label,
  children,
}: {
  label: string;
  children: React.ReactNode;
}) {
  return (
    <div className="flex flex-col gap-0.5">
      <dt className="text-muted-foreground text-xs">{label}</dt>
      <dd className="break-words">{children}</dd>
    </div>
  );
}