// src/components/keywords/overview/gsc-performance-hero.tsx
import { Card, CardContent } from "@/components/ui/card";
import type { KeywordOverview } from "@/lib/keywords/overview";
import { PositionDistribution } from "./position-distribution";

function Stat({ value, label }: { value: string; label: string }) {
  return (
    <div>
      <div className="font-semibold text-xl tabular-nums">{value}</div>
      <div className="text-muted-foreground text-xs">{label}</div>
    </div>
  );
}

export function GscPerformanceHero({ ov }: { ov: KeywordOverview }) {
  return (
    <Card>
      <CardContent className="space-y-4 p-5">
        <div className="flex items-center justify-between">
          <h2 className="font-semibold text-sm">Performance GSC · 28 jours</h2>
          <span className="text-muted-foreground text-xs">
            {ov.totalKeywords} mots-clés
          </span>
        </div>
        {ov.positioned === 0 ? (
          <p className="text-muted-foreground text-sm">
            Aucune donnée GSC. Synchronise Google Search Console depuis
            Recherche ou « Importer depuis GSC » pour voir ta performance.
          </p>
        ) : (
          <>
            <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
              <Stat
                value={`${ov.positioned} (${ov.positionedPct}%)`}
                label="Positionnés"
              />
              <Stat
                value={ov.avgPosition?.toFixed(1) ?? "—"}
                label="Position moyenne"
              />
              <Stat
                value={ov.totalClicks.toLocaleString("fr-FR")}
                label="Clics"
              />
              <Stat
                value={
                  ov.avgCtr != null ? `${(ov.avgCtr * 100).toFixed(1)}%` : "—"
                }
                label="CTR moyen"
              />
            </div>
            <PositionDistribution dist={ov.positionDistribution} />
          </>
        )}
      </CardContent>
    </Card>
  );
}