import Link from "next/link";
import { ArrowRight, Globe2 } from "lucide-react";
import { CountryFlag } from "@/components/CountryFlag";
import { WorldChoropleth } from "@/components/WorldChoropleth";
import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import { getMarketStats } from "@/lib/analytics";
import { getReviews } from "@/lib/data";
import { sentimentToScore } from "@/lib/utils";

export default function MarketsPage() {
  const stats = getMarketStats(getReviews());

  return (
    <div className="space-y-8">
      <section>
        <Badge tone="gold">Cartographie</Badge>
        <h1 className="mt-4 font-serif text-5xl font-semibold text-bordeaux-deep">Marchés</h1>
        <p className="mt-3 max-w-2xl text-sm leading-relaxed text-charcoal">
          Lecture géographique des mentions publiques, avec drill-down par pays.
        </p>
      </section>

      <section className="grid gap-6 xl:grid-cols-[1.4fr_0.6fr]">
        <Card className="bg-ivory">
          <div className="mb-5 flex items-center justify-between">
            <h2 className="font-serif text-3xl font-semibold text-bordeaux-deep">Carte des volumes</h2>
            <Globe2 className="h-6 w-6 text-gold" strokeWidth={1.5} />
          </div>
          <WorldChoropleth data={stats.map((market) => ({ code: market.code, mentions: market.mentions, sentiment: market.sentiment }))} height={500} />
        </Card>

        <Card className="max-h-[650px] overflow-y-auto scrollbar-thin">
          <h2 className="font-serif text-3xl font-semibold text-bordeaux-deep">Classement</h2>
          <div className="mt-5 space-y-3">
            {stats.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-3">
                  <div className="flex items-center gap-3">
                    <CountryFlag code={market.code} />
                    <div>
                      <p className="font-medium text-bordeaux-deep">{market.name}</p>
                      <p className="text-xs text-smoke">{market.topCuvee}</p>
                    </div>
                  </div>
                  <ArrowRight className="h-4 w-4 text-gold" strokeWidth={1.5} />
                </div>
                <div className="mt-4 grid grid-cols-2 gap-3 text-xs">
                  <div>
                    <p className="text-smoke">Mentions</p>
                    <p className="font-mono text-base text-bordeaux-deep">{market.mentions}</p>
                  </div>
                  <div>
                    <p className="text-smoke">Sentiment</p>
                    <p className="font-mono text-base text-bordeaux-deep">{sentimentToScore(market.sentiment)}/100</p>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </Card>
      </section>
    </div>
  );
}