"use client";

import { useState } from "react";
import { ArrowRightLeft, TrendingDown, TrendingUp } from "lucide-react";
import { WordCloud } from "@/components/charts";
import { DescriptorChip } from "@/components/DescriptorChip";
import { Badge } from "@/components/ui/badge";
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { filterReviews, getDecliningTerms, getEmergingTerms, getPeriodRange, getTopDescriptors } from "@/lib/analytics";
import { getCuvees, getMarkets, getReviews } from "@/lib/data";
import type { Market } from "@/lib/types";

export default function LexiconPage() {
  const reviews = getReviews();
  const [leftMarket, setLeftMarket] = useState<Market>("US");
  const [rightMarket, setRightMarket] = useState<Market>("JP");
  const periodReviews = filterReviews(reviews, { period: getPeriodRange("24m") });
  const globalWords = getTopDescriptors(periodReviews, 70);
  const emerging = getEmergingTerms(periodReviews, 8);
  const declining = getDecliningTerms(periodReviews, 8);
  const comparisonMarkets = getMarkets().filter((market) => market.code !== "OTHER");

  return (
    <div className="space-y-8">
      <section>
        <Badge tone="gold">Lexique de marque</Badge>
        <h1 className="mt-4 font-serif text-5xl font-semibold text-bordeaux-deep">Les mots qui restent.</h1>
        <p className="mt-3 max-w-2xl text-sm leading-relaxed text-charcoal">
          Descripteurs aromatiques, termes de structure, vocabulaire de garde et langage de marché.
        </p>
      </section>

      <Card className="bg-ivory">
        <CardHeader>
          <div>
            <CardTitle>Nuage principal</CardTitle>
            <CardDescription>Taille par fréquence. Couleur par sentiment moyen associé.</CardDescription>
          </div>
        </CardHeader>
        <WordCloud words={globalWords} height={430} />
      </Card>

      <Card className="border-l-4 border-l-gold bg-bordeaux-deep text-ivory">
        <p className="font-serif text-3xl italic leading-snug">
          “Sur les 24 derniers mois, le mot 'salinité' associé au blanc de Chevalier a progressé de 340 % dans les
          marchés anglo-saxons. Cette montée coïncide avec l'arrivée du millésime 2020 sur le marché et représente une
          opportunité de communication encore non exploitée.”
        </p>
      </Card>

      <section>
        <h2 className="mb-5 font-serif text-3xl font-semibold text-bordeaux-deep">Comparaison par vin suivi</h2>
        <div className="grid gap-4 lg:grid-cols-2">
          {getCuvees().map((cuvee) => (
            <Card key={cuvee.id}>
              <div className="mb-4 flex items-center justify-between gap-4">
                <h3 className="font-serif text-2xl font-semibold text-bordeaux-deep">{cuvee.name}</h3>
                <Badge tone={cuvee.color === "red" ? "bordeaux" : cuvee.color === "sweet" ? "gold" : "neutral"}>
                  {colorLabel(cuvee.color)}
                </Badge>
              </div>
              <WordCloud words={getTopDescriptors(periodReviews.filter((review) => review.cuveeId === cuvee.id), 28)} height={230} />
            </Card>
          ))}
        </div>
      </section>

      <Card>
        <CardHeader>
          <div>
            <CardTitle>Comparaison par marché</CardTitle>
            <CardDescription>Deux marchés côte à côte, mêmes règles de taille et de couleur.</CardDescription>
          </div>
          <ArrowRightLeft className="h-5 w-5 text-gold" strokeWidth={1.5} />
        </CardHeader>
        <div className="grid gap-4 md:grid-cols-2">
          {[
            { value: leftMarket, set: setLeftMarket },
            { value: rightMarket, set: setRightMarket }
          ].map((config, index) => (
            <div key={index} className="rounded-md border border-gold/25 bg-ivory p-4">
              <select
                value={config.value}
                onChange={(event) => config.set(event.target.value as Market)}
                className="mb-4 h-10 w-full rounded-md border border-gold/30 bg-ivory-warm px-3 text-sm"
              >
                {comparisonMarkets.map((market) => (
                  <option key={market.code} value={market.code}>
                    {market.name}
                  </option>
                ))}
              </select>
              <WordCloud words={getTopDescriptors(periodReviews.filter((review) => review.market === config.value), 34)} height={280} />
            </div>
          ))}
        </div>
      </Card>

      <div className="grid gap-6 lg:grid-cols-2">
        <Card>
          <CardHeader>
            <div>
              <CardTitle>Termes émergents</CardTitle>
              <CardDescription>Progression calculée sur deux fenêtres de douze mois.</CardDescription>
            </div>
            <TrendingUp className="h-5 w-5 text-sage" strokeWidth={1.5} />
          </CardHeader>
          <div className="space-y-3">
            {emerging.map((term) => (
              <div key={term.term} className="flex items-center justify-between rounded-md border border-gold/20 bg-ivory p-3">
                <DescriptorChip term={term.term} sentiment={0.3} />
                <span className="font-mono text-sm font-semibold text-sage">+{term.growthPct}%</span>
              </div>
            ))}
          </div>
        </Card>
        <Card>
          <CardHeader>
            <div>
              <CardTitle>Termes en déclin</CardTitle>
              <CardDescription>Ce qui sort progressivement du langage commun.</CardDescription>
            </div>
            <TrendingDown className="h-5 w-5 text-rust" strokeWidth={1.5} />
          </CardHeader>
          <div className="space-y-3">
            {declining.map((term) => (
              <div key={term.term} className="flex items-center justify-between rounded-md border border-gold/20 bg-ivory p-3">
                <DescriptorChip term={term.term} sentiment={-0.2} />
                <span className="font-mono text-sm font-semibold text-rust">{term.growthPct}%</span>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <Separator />
    </div>
  );
}

function colorLabel(color: string) {
  if (color === "red") return "rouge";
  if (color === "white") return "blanc sec";
  if (color === "rose") return "rosé";
  return "liquoreux";
}