import { Award, Check } from "lucide-react";
import { CompetitorScatter, ShareOfVoiceChart } from "@/components/charts";
import { EditorialBlock } from "@/components/EditorialBlock";
import { Badge } from "@/components/ui/badge";
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { getCompetitorRows, getShareOfVoiceRows } from "@/lib/analytics";

const columns = [
  { key: "sentiment", label: "Sentiment moyen" },
  { key: "mentions", label: "Mentions/mois" },
  { key: "uniqueDescriptors", label: "Descripteurs uniques" },
  { key: "usPresence", label: "Présence US" },
  { key: "asiaPresence", label: "Présence Asie" },
  { key: "sommelierScore", label: "Score sommeliers" },
  { key: "consumerScore", label: "Score consumers" }
] as const;

export default function CompetitivePage() {
  const rows = getCompetitorRows();
  const shareRows = getShareOfVoiceRows();

  return (
    <div className="space-y-8">
      <section>
        <Badge tone="gold">Positionnement concurrentiel</Badge>
        <h1 className="mt-4 font-serif text-5xl font-semibold text-bordeaux-deep">Concurrence</h1>
        <p className="mt-3 max-w-2xl text-sm leading-relaxed text-charcoal">
          Domaine de Chevalier face aux maisons perçues comme comparables en Pessac-Léognan.
        </p>
      </section>

      <Card>
        <CardHeader>
          <div>
            <CardTitle>Map de positionnement</CardTitle>
            <CardDescription>Axes par défaut : sentiment moyen × volume de mentions.</CardDescription>
          </div>
        </CardHeader>
        <CompetitorScatter data={rows} />
      </Card>

      <Card className="bg-bordeaux-deep text-ivory">
        <div className="flex gap-4">
          <Award className="mt-1 h-6 w-6 shrink-0 text-gold-pale" strokeWidth={1.5} />
          <p className="font-serif text-3xl italic leading-snug">
            “Domaine de Chevalier est le seul des cinq premiers crus de Pessac-Léognan dont le sentiment moyen sur
            Vivino reste supérieur sur la cuvée blanche que sur la cuvée rouge. Une singularité commerciale à valoriser
            dans la narrative de marque.”
          </p>
        </div>
      </Card>

      <Card>
        <CardHeader>
          <div>
            <CardTitle>Tableau comparatif</CardTitle>
            <CardDescription>La cellule dorée indique le leader de colonne.</CardDescription>
          </div>
        </CardHeader>
        <div className="overflow-x-auto">
          <table className="w-full min-w-[960px] text-sm">
            <thead>
              <tr className="border-b border-gold/25 text-left text-xs uppercase tracking-[0.14em] text-smoke">
                <th className="py-3">Domaine</th>
                {columns.map((column) => (
                  <th key={column.key} className="py-3">{column.label}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((row) => (
                <tr key={row.id} className="border-b border-gold/15">
                  <td className="py-3 font-medium text-bordeaux-deep">{row.name}</td>
                  {columns.map((column) => {
                    const max = Math.max(...rows.map((candidate) => Number(candidate[column.key])));
                    const value = Number(row[column.key]);
                    return (
                      <td key={column.key} className="py-3">
                        <span className={`inline-flex items-center gap-1 rounded-md px-2 py-1 font-mono ${value === max ? "bg-gold/20 text-bordeaux-deep" : "text-charcoal"}`}>
                          {value === max ? <Check className="h-3.5 w-3.5 text-gold" strokeWidth={1.5} /> : null}
                          {value}
                        </span>
                      </td>
                    );
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>

      <Card>
        <CardHeader>
          <div>
            <CardTitle>Share of voice par marché</CardTitle>
            <CardDescription>Segments par domaine, volume relatif dans la catégorie.</CardDescription>
          </div>
        </CardHeader>
        <ShareOfVoiceChart data={shareRows} />
      </Card>

      <EditorialBlock>
        <p>
          Sur les 90 derniers jours, Domaine de Chevalier domine le sentiment positif sur le marché japonais avec un
          avantage de 12 points sur Haut-Bailly, mais perd du terrain en volume aux États-Unis, où Smith Haut Lafitte
          concentre 38 % des mentions de la catégorie.
        </p>
        <p>
          La position n'est pas celle du bruit. Elle est celle de la précision. Le blanc crée une singularité exploitable,
          particulièrement auprès des collectionneurs asiatiques et des sommeliers anglo-saxons.
        </p>
        <p>
          La priorité commerciale : défendre moins de messages, mais les répéter plus clairement dans les marchés où le
          signal existe déjà.
        </p>
      </EditorialBlock>
    </div>
  );
}