import Link from "next/link";
import { ArrowRight, BookOpen, Globe2, MessageSquareQuote } from "lucide-react";
import { Citation } from "@/components/Citation";
import { KpiCard } from "@/components/KpiCard";
import { WorldChoropleth } from "@/components/WorldChoropleth";
import { ChartFrame, SourceAreaChart } from "@/components/charts";
import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { getHomeKpis, getMarketStats, getMonthlySourceSeries } from "@/lib/analytics";
import { formatMonthYearFr } from "@/lib/constants";
import { getReviews } from "@/lib/data";
import { sentimentToScore } from "@/lib/utils";

export default function DashboardPage() {
  const allReviews = getReviews();
  const kpis = getHomeKpis();
  const marketStats = getMarketStats(kpis.reviews);
  const sourceSeries = getMonthlySourceSeries(allReviews, 12);
  const month = formatMonthYearFr("2026-05-26");

  return (
    <div className="space-y-8">
      <section className="grid gap-8 lg:grid-cols-[1fr_330px] lg:items-end">
        <div>
          <Badge tone="gold">L'observatoire mondial de la perception de vos vins.</Badge>
          <h1 className="mt-5 max-w-4xl font-serif text-5xl font-semibold leading-tight text-bordeaux-deep md:text-6xl">
            Domaine de Chevalier — Lecture mondiale, {month}
          </h1>
          <p className="mt-5 max-w-2xl text-lg leading-relaxed text-charcoal">
            {kpis.mentions} mentions analysées sur {kpis.marketCount} marchés et {kpis.sourceCount} sources pendant les
            90 derniers jours.
          </p>
        </div>
        <Card className="bg-ivory">
          <p className="text-xs uppercase tracking-[0.18em] text-smoke">Contexte suivi</p>
          <p className="mt-4 text-sm leading-relaxed text-charcoal">
            Domaine de Chevalier, Domaine de la Solitude, Lespault-Martillac, Château Guiraud, Clos des Lunes, Château
            Suau, Château Soubian et Château Poumey. Lecture publique de Vivino, CellarTracker, presse spécialisée,
            forums, e-commerce et Reddit.
          </p>
        </Card>
      </section>

      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <KpiCard label="Mentions totales" value={kpis.mentions} delta={kpis.mentionsDelta} detail="vs période précédente" />
        <KpiCard label="Sentiment moyen" value={`${kpis.sentimentScore}/100`} delta={kpis.sentimentDelta} detail="en progression sur 6 mois" tone="sage" />
        <KpiCard label="Marché le plus actif" value={kpis.topMarket.shortName} detail={`${kpis.topMarket.mentions} mentions`} />
        <KpiCard label="Cuvée la plus discutée" value={kpis.topCuvee.mentions} detail={kpis.topCuvee.name} />
      </section>

      <Citation
        quote="Le 2019 du Chevalier rouge possède cette tension graphitée qui rappelle les grandes années de Pessac : un vin de patience, d'os et de cendre, qui n'a jamais cherché à plaire trop vite."
        attribution="La Revue du Vin de France, mars 2026"
        action="Voir 4 autres"
      />

      <section className="grid gap-6 xl:grid-cols-[1.25fr_0.75fr]">
        <Card className="bg-ivory">
          <div className="mb-5 flex items-center justify-between gap-4">
            <div>
              <h2 className="font-serif text-3xl font-semibold text-bordeaux-deep">Carte mondiale des échos</h2>
              <p className="mt-1 text-sm text-smoke">Volume de mentions et sentiment moyen par marché.</p>
            </div>
            <Globe2 className="h-6 w-6 text-gold" strokeWidth={1.5} />
          </div>
          <WorldChoropleth data={marketStats.map((market) => ({ code: market.code, mentions: market.mentions, sentiment: market.sentiment }))} />
        </Card>

        <Card>
          <h2 className="font-serif text-3xl font-semibold text-bordeaux-deep">Marchés en tête</h2>
          <div className="mt-5 space-y-4">
            {marketStats.slice(0, 7).map((market) => (
              <Link key={market.code} href={`/markets/${market.code}`} className="block rounded-md border border-gold/20 bg-ivory p-4 hover:bg-parchment/60">
                <div className="flex items-center justify-between gap-4">
                  <div>
                    <p className="font-medium">{market.name}</p>
                    <p className="mt-1 text-xs text-smoke">{market.topCuvee}</p>
                  </div>
                  <div className="text-right">
                    <p className="font-mono text-sm font-semibold text-bordeaux-deep">{market.mentions}</p>
                    <p className="text-xs text-smoke">{sentimentToScore(market.sentiment)}/100</p>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </Card>
      </section>

      <ChartFrame title="Évolution sur 12 mois par source">
        <SourceAreaChart data={sourceSeries} />
      </ChartFrame>

      <section>
        <div className="mb-4 flex items-center gap-3">
          <BookOpen className="h-5 w-5 text-gold" strokeWidth={1.5} />
          <h2 className="font-serif text-3xl font-semibold text-bordeaux-deep">À noter cette semaine</h2>
        </div>
        <div className="grid gap-4 md:grid-cols-3">
          {[
            {
              title: "Le blanc s'installe au Japon",
              text: "Les citations japonaises sur le blanc 2020 dépassent le rouge en sentiment. Le vocabulaire se concentre sur salinité, tension et pureté."
            },
            {
              title: "L'Esprit gagne en lisibilité",
              text: "Le terme rapport qualité-prix progresse fortement en France et en Belgique, sans détériorer le sentiment de marque."
            },
            {
              title: "Signal allemand à vérifier",
              text: "Les avis Hawesko sur le rouge 2017 forment une poche négative courte et concentrée. Le vocabulaire suggère un sujet de stockage."
            }
          ].map((signal) => (
            <Card key={signal.title} className="bg-ivory">
              <MessageSquareQuote className="h-5 w-5 text-gold" strokeWidth={1.5} />
              <h3 className="mt-4 font-serif text-2xl font-semibold text-bordeaux-deep">{signal.title}</h3>
              <Separator className="my-4" />
              <p className="text-sm leading-relaxed text-charcoal">{signal.text}</p>
              <Link href="/signals" className="mt-5 inline-flex items-center gap-2 text-sm font-medium text-bordeaux-deep">
                Lire le signal
                <ArrowRight className="h-4 w-4" strokeWidth={1.5} />
              </Link>
            </Card>
          ))}
        </div>
      </section>
    </div>
  );
}