// src/components/content/online/online-table.tsx
import { Badge } from "@/components/ui/badge";
import { Flag } from "@/components/ui/flag";
import type { OnlineRow } from "@/lib/content/online";
import { gscPageMismatch } from "@/lib/content/online";

// Rendered inside the design ToolbarPanel (ELEVA-89) — the panel owns the
// chrome, this stays a plain table; columns and the mismatch badge untouched.
export function OnlineTable({ rows }: { rows: OnlineRow[] }) {
  return (
    <table className="w-full text-sm">
      <thead>
        <tr className="text-left text-muted-foreground text-xs">
          <th className="pb-2 font-medium">Titre</th>
          <th className="pb-2 font-medium">URL</th>
          <th className="pb-2 font-medium">Mot-clé</th>
          <th className="pb-2 text-right font-medium">Pos.</th>
          <th className="pb-2 text-right font-medium">Clics</th>
          <th className="pb-2 text-right font-medium">Impr.</th>
          <th className="pb-2 text-right font-medium">CTR</th>
        </tr>
      </thead>
      <tbody>
        {rows.map((r) => (
          <tr key={r.id} className="border-border/50 border-t">
            <td className="py-1.5 pr-2">{r.title}</td>
            <td className="py-1.5 pr-2">
              <span className="inline-flex items-center gap-1.5">
                {r.url ? (
                  <a
                    href={r.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="max-w-[14rem] truncate text-primary hover:underline"
                  >
                    {r.url}
                  </a>
                ) : (
                  <span className="text-muted-foreground">—</span>
                )}
                {gscPageMismatch(r.url, r.gscPage) ? (
                  <Badge variant="outline" title={r.gscPage ?? undefined}>
                    ⚠️ autre page ranke
                  </Badge>
                ) : null}
              </span>
            </td>
            <td className="py-1.5 pr-2">
              {r.keywordTerm ? (
                <span className="inline-flex items-center gap-1">
                  <Flag code={r.keywordCountry ?? ""} />
                  <span className="max-w-[10rem] truncate">
                    {r.keywordTerm}
                  </span>
                </span>
              ) : (
                <span className="text-muted-foreground">—</span>
              )}
            </td>
            <td className="py-1.5 text-right tabular-nums">
              {r.position != null ? r.position.toFixed(1) : "—"}
            </td>
            <td className="py-1.5 text-right tabular-nums">
              {r.clicks.toLocaleString("fr-FR")}
            </td>
            <td className="py-1.5 text-right tabular-nums">
              {r.impressions.toLocaleString("fr-FR")}
            </td>
            <td className="py-1.5 text-right tabular-nums">
              {r.ctr != null ? `${(r.ctr * 100).toFixed(1)}%` : "—"}
            </td>
          </tr>
        ))}
        {rows.length === 0 ? (
          <tr className="border-border/50 border-t">
            <td colSpan={7} className="py-6 text-center text-muted-foreground">
              Aucun résultat.
            </td>
          </tr>
        ) : null}
      </tbody>
    </table>
  );
}