// src/components/backlink/overview/risks-card.tsx
import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { BacklinkOverview } from "@/lib/backlink/overview";

export function RisksCard({ ov }: { ov: BacklinkOverview }) {
  const r = ov.risks;
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-sm">Risques</CardTitle>
      </CardHeader>
      <CardContent className="space-y-3 text-sm">
        <div className="flex items-center justify-between">
          <Link href="/backlink/planning" className="hover:underline">
            Toxiques
          </Link>
          <span className="tabular-nums">
            {r.toxicSite}{" "}
            <span className="text-muted-foreground">/ {r.toxicOrg} org</span>
          </span>
        </div>
        <div className="flex items-center justify-between">
          <Link href="/backlink/planning" className="hover:underline">
            Liens perdus
          </Link>
          <span className="tabular-nums">
            {r.lostSite}{" "}
            <span className="text-muted-foreground">/ {r.lostOrg} org</span>
          </span>
        </div>
        <div className="flex items-center justify-between">
          <Link href="/backlink/planning" className="hover:underline">
            À disavow
          </Link>
          <span className="tabular-nums">{r.disavowSite}</span>
        </div>
        <div className="space-y-1 border-t pt-2">
          <p className="text-muted-foreground text-xs uppercase tracking-wide">
            Footprint (domaines sur-exploités)
          </p>
          {r.footprintDomains.length === 0 ? (
            <p className="text-muted-foreground">Aucun</p>
          ) : (
            r.footprintDomains.slice(0, 5).map((d) => (
              <Link
                key={d.domainNorm}
                href="/backlink/recherche"
                className="flex items-center justify-between hover:underline"
              >
                <span className="truncate">{d.domainNorm}</span>
                <Badge variant="destructive">⚠️ {d.siteCount} sites</Badge>
              </Link>
            ))
          )}
          {r.footprintDomains.length > 5 ? (
            <p className="text-muted-foreground text-xs">
              +{r.footprintDomains.length - 5} autre(s)
            </p>
          ) : null}
        </div>
      </CardContent>
    </Card>
  );
}