"use client";

import { useMemo, useState } from "react";
import { SlidersHorizontal } from "lucide-react";
import { DescriptorSparkline, SentimentLineChart } from "@/components/charts";
import { CuveeSelector } from "@/components/CuveeSelector";
import { ExportMenu } from "@/components/ExportMenu";
import { MarketSelector } from "@/components/MarketSelector";
import { MentionDrawer } from "@/components/MentionDrawer";
import { MentionItem } from "@/components/MentionItem";
import { SentimentBar } from "@/components/SentimentBar";
import { SourceBadge } from "@/components/SourceBadge";
import { Button } from "@/components/ui/button";
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { filterReviews, getPeriodRange, getSentimentTimeline, getTopDescriptors } from "@/lib/analytics";
import { getReviews, getSources } from "@/lib/data";
import type { Market, Review, Source } from "@/lib/types";
import { sentimentToScore } from "@/lib/utils";

const authorTypes: Review["authorType"][] = ["consumer", "sommelier", "critic", "collector"];

export default function PerceptionPage() {
  const [selectedCuvees, setSelectedCuvees] = useState<string[]>(["chevalier-rouge", "chevalier-blanc"]);
  const [selectedMarkets, setSelectedMarkets] = useState<Market[]>([]);
  const [selectedSources, setSelectedSources] = useState<Source[]>([]);
  const [selectedAuthors, setSelectedAuthors] = useState<Review["authorType"][]>([]);
  const [vintageFrom, setVintageFrom] = useState(2015);
  const [vintageTo, setVintageTo] = useState(2023);
  const [showAllDescriptors, setShowAllDescriptors] = useState(false);
  const [sortBy, setSortBy] = useState<"count" | "sentiment">("count");
  const [page, setPage] = useState(1);
  const [activeReview, setActiveReview] = useState<Review | null>(null);

  const reviews = getReviews();
  const filtered = useMemo(() => {
    return filterReviews(reviews, {
      cuveeIds: selectedCuvees,
      markets: selectedMarkets,
      sources: selectedSources,
      authorTypes: selectedAuthors,
      vintageRange: [Math.min(vintageFrom, vintageTo), Math.max(vintageFrom, vintageTo)],
      period: getPeriodRange("24m")
    });
  }, [reviews, selectedCuvees, selectedMarkets, selectedSources, selectedAuthors, vintageFrom, vintageTo]);

  const descriptors = useMemo(() => {
    const limit = showAllDescriptors ? 80 : 20;
    return getTopDescriptors(filtered, limit).sort((a, b) => (sortBy === "count" ? b.count - a.count : b.sentiment - a.sentiment));
  }, [filtered, showAllDescriptors, sortBy]);

  const paged = filtered.slice((page - 1) * 20, page * 20);
  const totalPages = Math.max(1, Math.ceil(filtered.length / 20));

  function toggleArray<T>(value: T, values: T[], setter: (next: T[]) => void) {
    setter(values.includes(value) ? values.filter((item) => item !== value) : [...values, value]);
    setPage(1);
  }

  return (
    <div className="space-y-6">
      <section className="flex flex-wrap items-end justify-between gap-4">
        <div>
          <p className="text-xs uppercase tracking-[0.18em] text-smoke">Drill-down</p>
          <h1 className="mt-2 font-serif text-5xl font-semibold text-bordeaux-deep">Perception détaillée</h1>
          <p className="mt-3 max-w-2xl text-sm leading-relaxed text-charcoal">
            Lecture filtrable des avis, citations, descripteurs et signaux de sentiment sur 24 mois.
          </p>
        </div>
        <ExportMenu rows={filtered.slice(0, 200).map((review) => ({ id: review.id, date: review.date, source: review.source, market: review.market, cuvee: review.cuveeId, vintage: review.vintage, sentiment: review.sentimentScore, text: review.textFrench }))} />
      </section>

      <Card className="sticky top-20 z-10 bg-ivory">
        <div className="mb-4 flex items-center gap-2">
          <SlidersHorizontal className="h-5 w-5 text-gold" strokeWidth={1.5} />
          <h2 className="font-serif text-2xl font-semibold text-bordeaux-deep">Filtres</h2>
        </div>
        <div className="grid gap-5 xl:grid-cols-[1.2fr_1fr]">
          <div>
            <p className="mb-2 text-xs uppercase tracking-[0.16em] text-smoke">Cuvée</p>
            <CuveeSelector selectedIds={selectedCuvees} onToggle={(cuveeId) => toggleArray(cuveeId, selectedCuvees, setSelectedCuvees)} />
            <p className="mt-2 text-xs text-smoke">Ouvrez un domaine pour sélectionner ses références.</p>
          </div>
          <div>
            <p className="mb-2 text-xs uppercase tracking-[0.16em] text-smoke">Marché</p>
            <MarketSelector selected={selectedMarkets} onToggle={(market) => toggleArray(market, selectedMarkets, setSelectedMarkets)} />
          </div>
        </div>
        <Separator className="my-5" />
        <div className="grid gap-5 xl:grid-cols-[1fr_1fr_1fr]">
          <div>
            <p className="mb-2 text-xs uppercase tracking-[0.16em] text-smoke">Source</p>
            <div className="flex flex-wrap gap-2">
              {getSources().slice(0, 9).map((source) => (
                <button key={source} type="button" onClick={() => toggleArray(source, selectedSources, setSelectedSources)}>
                  <SourceBadge source={source} />
                </button>
              ))}
            </div>
          </div>
          <div>
            <p className="mb-2 text-xs uppercase tracking-[0.16em] text-smoke">Millésime</p>
            <div className="flex items-center gap-4">
              <input className="accent-bordeaux-deep" type="range" min={2010} max={2024} value={vintageFrom} onChange={(event) => setVintageFrom(Number(event.target.value))} />
              <input className="accent-bordeaux-deep" type="range" min={2010} max={2024} value={vintageTo} onChange={(event) => setVintageTo(Number(event.target.value))} />
              <span className="font-mono text-sm text-smoke">{Math.min(vintageFrom, vintageTo)}–{Math.max(vintageFrom, vintageTo)}</span>
            </div>
          </div>
          <div>
            <p className="mb-2 text-xs uppercase tracking-[0.16em] text-smoke">Auteur</p>
            <div className="flex flex-wrap gap-2">
              {authorTypes.map((type) => (
                <button
                  key={type}
                  type="button"
                  onClick={() => toggleArray(type, selectedAuthors, setSelectedAuthors)}
                  className={`rounded-md border px-3 py-2 text-xs capitalize transition-colors ${
                    selectedAuthors.includes(type)
                      ? "border-bordeaux-deep bg-bordeaux-deep text-ivory"
                      : "border-gold/30 bg-ivory-warm hover:bg-gold/10"
                  }`}
                >
                  {type}
                </button>
              ))}
            </div>
          </div>
        </div>
      </Card>

      <div className="grid gap-6 xl:grid-cols-[0.85fr_1.15fr]">
        <Card>
          <CardHeader>
            <div>
              <CardTitle>Distribution du sentiment</CardTitle>
              <CardDescription>{filtered.length} avis dans la sélection.</CardDescription>
            </div>
          </CardHeader>
          <SentimentBar reviews={filtered} showCounts />
        </Card>
        <Card>
          <CardHeader>
            <div>
              <CardTitle>Évolution du sentiment</CardTitle>
              <CardDescription>Granularité mensuelle sur la période disponible.</CardDescription>
            </div>
          </CardHeader>
          <SentimentLineChart data={getSentimentTimeline(filtered, 12)} />
        </Card>
      </div>

      <Card>
        <CardHeader>
          <div>
            <CardTitle>Top descripteurs</CardTitle>
            <CardDescription>Occurrences, sentiment moyen associé et micro-évolution.</CardDescription>
          </div>
          <div className="flex gap-2">
            <Button variant={sortBy === "count" ? "primary" : "secondary"} size="sm" onClick={() => setSortBy("count")}>Occurrences</Button>
            <Button variant={sortBy === "sentiment" ? "primary" : "secondary"} size="sm" onClick={() => setSortBy("sentiment")}>Sentiment</Button>
          </div>
        </CardHeader>
        <div className="overflow-x-auto">
          <table className="w-full border-collapse text-sm">
            <thead>
              <tr className="border-b border-gold/25 text-left text-xs uppercase tracking-[0.14em] text-smoke">
                <th className="py-3">Terme</th>
                <th className="py-3">Occurrences</th>
                <th className="py-3">Sentiment</th>
                <th className="py-3">Évolution</th>
              </tr>
            </thead>
            <tbody>
              {descriptors.map((descriptor) => (
                <tr key={descriptor.term} className="border-b border-gold/15">
                  <td className="py-3 font-medium text-bordeaux-deep">{descriptor.term}</td>
                  <td className="py-3 font-mono font-tabular">{descriptor.count}</td>
                  <td className="py-3 font-mono font-tabular">{sentimentToScore(descriptor.sentiment)}/100</td>
                  <td className="py-3"><DescriptorSparkline values={descriptor.sparkline} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <Button className="mt-5" variant="secondary" onClick={() => setShowAllDescriptors((value) => !value)}>
          {showAllDescriptors ? "Réduire" : "Voir tout"}
        </Button>
      </Card>

      <Card>
        <CardHeader>
          <div>
            <CardTitle>Liste des avis</CardTitle>
            <CardDescription>Page {page} sur {totalPages}. Aperçu en trois lignes, détail au clic.</CardDescription>
          </div>
        </CardHeader>
        <div className="grid gap-3">
          {paged.map((review) => (
            <MentionItem key={review.id} review={review} onOpen={setActiveReview} />
          ))}
        </div>
        <div className="mt-5 flex justify-between gap-3">
          <Button variant="secondary" disabled={page === 1} onClick={() => setPage((value) => Math.max(1, value - 1))}>Précédent</Button>
          <span className="self-center font-mono text-sm text-smoke">{filtered.length} avis</span>
          <Button variant="secondary" disabled={page === totalPages} onClick={() => setPage((value) => Math.min(totalPages, value + 1))}>Suivant</Button>
        </div>
      </Card>

      <MentionDrawer review={activeReview} onClose={() => setActiveReview(null)} />
    </div>
  );
}