// src/components/backlink/research/source-detail-sheet.tsx
"use client";

import { Badge } from "@/components/ui/badge";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";
import type { ResearchRow } from "@/lib/backlink/research";
import type { BacklinkStatus } from "@/lib/db/domain-schema";
import { DrBadge } from "../dr-badge";
import { EffortBadge, KindBadge, LinkTypeBadge } from "../source-badges";

const STATUS_VARIANT: Record<
  BacklinkStatus,
  "secondary" | "default" | "outline"
> = {
  prospect: "secondary",
  planned: "default",
  in_progress: "default",
  live: "outline",
  lost: "outline",
};

/** Détail d'une source : score décomposé, badges, footprint, statut courant. */
export function SourceDetailSheet({
  row,
  siteLanguage,
  onOpenChange,
}: {
  row: ResearchRow | null;
  siteLanguage: string;
  onOpenChange: (v: boolean) => void;
}) {
  return (
    <Sheet open={row !== null} onOpenChange={onOpenChange}>
      <SheetContent className="flex flex-col gap-4">
        {row ? (
          <>
            <SheetHeader>
              <SheetTitle>{row.platform}</SheetTitle>
              <SheetDescription className="break-all">
                {row.url}
              </SheetDescription>
            </SheetHeader>

            <div className="mx-4 rounded-md border p-3">
              <p className="font-semibold text-2xl tabular-nums">
                Score {row.score.toFixed(1)}
              </p>
              <p className="mt-1 text-muted-foreground text-xs">
                langue {row.language}{" "}
                {row.language === siteLanguage ? "=" : "≠"} {siteLanguage} → ×
                {row.language === siteLanguage ? "1" : "0.3"} · force{" "}
                {row.dr ?? row.da ?? 0}{" "}
                {row.dr != null ? "(DR)" : row.da != null ? "(DA)" : ""}
              </p>
            </div>

            <div className="flex flex-wrap items-center gap-2 px-4">
              <DrBadge value={row.dr ?? row.da} />
              <KindBadge kind={row.kind} />
              <EffortBadge value={row.effort} />
              <LinkTypeBadge value={row.linkType} />
              <Badge variant="outline" className="uppercase">
                {row.language}
              </Badge>
            </div>

            <div className="flex flex-wrap items-center gap-2 px-4 text-sm">
              <span>Référence {row.footprint} site(s) de l'org</span>
              {row.alert ? (
                <Badge variant="destructive">⚠️ {row.footprint} sites</Badge>
              ) : null}
            </div>

            <div className="px-4 text-sm">
              {row.targetedByCurrent && row.currentStatus ? (
                <Badge variant={STATUS_VARIANT[row.currentStatus]}>
                  {row.currentStatus}
                </Badge>
              ) : (
                <span className="text-muted-foreground">
                  Pas encore ciblé pour ce site
                </span>
              )}
            </div>
          </>
        ) : null}
      </SheetContent>
    </Sheet>
  );
}