import { notFound } from "next/navigation";
import { CountryFlag } from "@/components/CountryFlag";
import { DescriptorChip } from "@/components/DescriptorChip";
import { EditorialBlock } from "@/components/EditorialBlock";
import { MarketRadarChart } from "@/components/charts";
import { Badge } from "@/components/ui/badge";
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { filterReviews, getCompetitorRows, getMarketRadar, getTopDescriptors } from "@/lib/analytics";
import { getMarkets, getReviews } from "@/lib/data";
import { sourceLabels } from "@/lib/labels";
import { getMarketMetadata } from "@/lib/mock-data/markets-metadata";
import type { Market } from "@/lib/types";
import { sentimentToScore } from "@/lib/utils";

type PageProps = {
  params: { code: Market };
};

export function generateStaticParams() {
  return getMarkets()
    .filter((market) => market.code !== "OTHER")
    .map((market) => ({ code: market.code }));
}

export default function MarketDetailPage({ params }: PageProps) {
  const metadata = getMarkets().find((market) => market.code === params.code);
  if (!metadata || metadata.code === "OTHER") notFound();

  const marketReviews = filterReviews(getReviews(), { markets: [params.code] });
  const descriptors = getTopDescriptors(marketReviews, 5);
  const quotes = marketReviews
    .filter((review) => review.sentiment === "positive")
    .sort((a, b) => (b.rating ?? 0) - (a.rating ?? 0))
    .slice(0, 3);
  const competitorRows = getCompetitorRows(params.code);
  const influencers = [
    "Kenji Hatanaka, sommelier",
    "Mayfair Bordeaux Circle",
    "Claire Morton, critique",
    "Cellar 47",
    "Adrien continuity note"
  ];

  return (
    <div className="space-y-8">
      <section className="flex flex-wrap items-end justify-between gap-5">
        <div>
          <div className="flex items-center gap-3">
            <CountryFlag code={metadata.code} className="h-9 min-w-12" />
            <Badge tone="gold">{metadata.region}</Badge>
          </div>
          <h1 className="mt-4 font-serif text-5xl font-semibold text-bordeaux-deep">{metadata.name}</h1>
          <p className="mt-3 text-sm leading-relaxed text-charcoal">
            {marketReviews.length} mentions publiques. Sentiment moyen {sentimentToScore(marketReviews.reduce((sum, review) => sum + review.sentimentScore, 0) / Math.max(1, marketReviews.length))}/100.
          </p>
        </div>
      </section>

      <div className="grid gap-6 xl:grid-cols-[0.9fr_1.1fr]">
        <Card>
          <CardHeader>
            <div>
              <CardTitle>Profil de perception</CardTitle>
              <CardDescription>Comparé à la moyenne globale du domaine.</CardDescription>
            </div>
          </CardHeader>
          <MarketRadarChart data={getMarketRadar(params.code)} />
        </Card>

        <Card>
          <CardHeader>
            <div>
              <CardTitle>Descripteurs spécifiques</CardTitle>
              <CardDescription>Ce que ce marché formule plus nettement que les autres.</CardDescription>
            </div>
          </CardHeader>
          <div className="grid gap-3">
            {descriptors.map((descriptor, index) => (
              <div key={descriptor.term} className="flex items-center justify-between rounded-md border border-gold/20 bg-ivory p-4">
                <div className="flex items-center gap-3">
                  <span className="font-mono text-sm text-smoke">0{index + 1}</span>
                  <DescriptorChip term={descriptor.term} sentiment={descriptor.sentiment} />
                </div>
                <span className="font-mono text-sm text-bordeaux-deep">{descriptor.count} occurrences</span>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <section className="grid gap-4 lg:grid-cols-3">
        {quotes.map((review) => (
          <Card key={review.id} className="bg-ivory">
            <p className="font-serif text-2xl italic leading-snug text-bordeaux-ink">“{review.textFrench}”</p>
            <Separator className="my-4" />
            <p className="text-xs text-smoke">
              {sourceLabels[review.source]} · {getMarketMetadata(review.market).name} · {review.date}
            </p>
          </Card>
        ))}
      </section>

      <Card>
        <CardHeader>
          <div>
            <CardTitle>Comparaison concurrentielle</CardTitle>
            <CardDescription>Sentiment moyen sur ce marché, base mockée pour démonstration.</CardDescription>
          </div>
        </CardHeader>
        <div className="overflow-x-auto">
          <table className="w-full 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>
                <th className="py-3">Sentiment</th>
                <th className="py-3">Mentions</th>
                <th className="py-3">Sommeliers</th>
                <th className="py-3">Consumers</th>
              </tr>
            </thead>
            <tbody>
              {competitorRows.map((row) => (
                <tr key={row.id} className="border-b border-gold/15">
                  <td className="py-3 font-medium text-bordeaux-deep">{row.name}</td>
                  <td className="py-3 font-mono">{row.sentiment}/100</td>
                  <td className="py-3 font-mono">{row.mentions}</td>
                  <td className="py-3 font-mono">{row.sommelierScore}</td>
                  <td className="py-3 font-mono">{row.consumerScore}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>

      <div className="grid gap-6 xl:grid-cols-[0.75fr_1.25fr]">
        <Card>
          <CardHeader>
            <div>
              <CardTitle>Influenceurs identifiés</CardTitle>
              <CardDescription>Prises de position dominantes, noms mockés.</CardDescription>
            </div>
          </CardHeader>
          <div className="space-y-3">
            {influencers.map((name) => (
              <div key={name} className="rounded-md border border-gold/20 bg-ivory p-4">
                <p className="font-medium text-bordeaux-deep">{name}</p>
                <p className="mt-1 text-xs text-smoke">Position dominante : Chevalier lu comme classique, précis, construit pour la garde.</p>
              </div>
            ))}
          </div>
        </Card>

        <EditorialBlock>
          <p>
            Sur {metadata.name}, Chevalier gagne lorsque la conversation porte sur la précision, la garde et la longueur.
            Le volume reste inférieur aux domaines plus visibles, mais la qualité de signal est élevée.
          </p>
          <p>
            La recommandation est simple : ne pas élargir le discours. Le marché reconnaît déjà une signature. Il faut la
            rendre plus facile à citer.
          </p>
        </EditorialBlock>
      </div>
    </div>
  );
}