// src/components/content/stats/stats-detail-sheet.tsx
"use client";

import Link from "next/link";
import { sparklinePath } from "@/components/keywords/sparkline";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";
import type { PageStatRow } from "@/lib/content/stats";

/** Variation % vs période précédente — null quand prev manquant ou nul. */
function deltaPct(cur: number | null, prev: number | null): number | null {
  if (cur == null || prev == null || prev === 0) return null;
  return ((cur - prev) / prev) * 100;
}

/** Delta signé + 1 décimale, vert/rouge (inversé pour la position). */
function Delta({
  cur,
  prev,
  invert,
}: {
  cur: number | null;
  prev: number | null;
  invert?: boolean;
}) {
  const d = deltaPct(cur, prev);
  if (d == null) return <span className="text-muted-foreground">—</span>;
  const improving = invert ? d < 0 : d > 0;
  const cls =
    d === 0
      ? "text-muted-foreground"
      : improving
        ? "text-emerald-600"
        : "text-red-600";
  return (
    <span className={cls}>
      {d > 0 ? "+" : ""}
      {d.toFixed(1)} %
    </span>
  );
}

function pathnameOf(url: string): string {
  try {
    return new URL(url).pathname;
  } catch {
    return url;
  }
}

export function StatsDetailSheet({
  row,
  period,
  onOpenChange,
}: {
  row: PageStatRow | null;
  /** 7|28|90 — libellé de la période. */
  period: number;
  onOpenChange: (v: boolean) => void;
}) {
  const hasClicks = row?.spark.some((v) => v > 0);

  return (
    <Sheet open={row !== null} onOpenChange={onOpenChange}>
      <SheetContent className="flex flex-col gap-4">
        {row ? (
          <>
            <SheetHeader>
              <SheetTitle className="break-all">
                {pathnameOf(row.page)}
              </SheetTitle>
              <SheetDescription className="break-all text-muted-foreground">
                {row.page}
              </SheetDescription>
              {row.contentTitle != null ? (
                <Badge variant="secondary" className="max-w-full">
                  <span className="truncate">{row.contentTitle}</span>
                </Badge>
              ) : null}
            </SheetHeader>

            <div className="px-4">
              {hasClicks ? (
                <div className="text-primary">
                  <svg
                    viewBox="0 0 320 80"
                    className="w-full"
                    role="img"
                    aria-label="Clics par jour sur la période"
                  >
                    <path
                      d={sparklinePath(row.spark, 320, 80)}
                      fill="none"
                      stroke="currentColor"
                      strokeWidth={1.5}
                    />
                  </svg>
                  <div className="flex justify-between text-xs text-muted-foreground">
                    <span>il y a {period} j</span>
                    <span>hier</span>
                  </div>
                </div>
              ) : (
                <p className="text-sm text-muted-foreground">
                  Pas de clics sur la période.
                </p>
              )}
            </div>

            <dl className="grid grid-cols-2 gap-3 px-4 text-sm">
              <div>
                <dt className="text-muted-foreground">Clics</dt>
                <dd>
                  {row.clicks.toLocaleString("fr-FR")}{" "}
                  <Delta cur={row.clicks} prev={row.prevClicks} />
                </dd>
              </div>
              <div>
                <dt className="text-muted-foreground">Impressions</dt>
                <dd>
                  {row.impressions.toLocaleString("fr-FR")}{" "}
                  <Delta cur={row.impressions} prev={row.prevImpressions} />
                </dd>
              </div>
              <div>
                <dt className="text-muted-foreground">CTR</dt>
                <dd>
                  {row.ctr != null ? `${(row.ctr * 100).toFixed(1)} %` : "—"}
                </dd>
              </div>
              <div>
                <dt className="text-muted-foreground">Position</dt>
                <dd>
                  {row.position?.toFixed(1) ?? "—"}{" "}
                  <Delta cur={row.position} prev={row.prevPosition} invert />
                </dd>
              </div>
            </dl>

            {row.contentItemId != null ? (
              <SheetFooter>
                <Button asChild variant="outline" className="w-full">
                  <Link href="/content/planning">Voir dans Planning</Link>
                </Button>
              </SheetFooter>
            ) : null}
          </>
        ) : null}
      </SheetContent>
    </Sheet>
  );
}