"use client";

import { ExternalLink, X } from "lucide-react";
import type { Review } from "@/lib/types";
import { Button } from "@/components/ui/button";
import { CountryFlag } from "@/components/CountryFlag";
import { DescriptorChip } from "@/components/DescriptorChip";
import { SourceBadge } from "@/components/SourceBadge";
import { Separator } from "@/components/ui/separator";
import { formatDateFr } from "@/lib/constants";
import { getCuvee } from "@/lib/mock-data/cuvees";
import { sentimentToScore } from "@/lib/utils";

export function MentionDrawer({ review, onClose }: { review: Review | null; onClose: () => void }) {
  if (!review) return null;
  const cuvee = getCuvee(review.cuveeId);

  return (
    <div className="fixed inset-0 z-50 bg-charcoal/30" role="dialog" aria-modal="true">
      <button className="absolute inset-0 h-full w-full cursor-default" type="button" aria-label="Fermer" onClick={onClose} />
      <aside className="absolute right-0 top-0 h-full w-full max-w-xl overflow-y-auto border-l border-gold/30 bg-ivory p-7 shadow-vellum">
        <div className="flex items-start justify-between gap-4">
          <div>
            <p className="text-xs uppercase tracking-[0.18em] text-smoke">Avis source</p>
            <h2 className="mt-2 font-serif text-3xl font-semibold text-bordeaux-deep">{cuvee.name}</h2>
            <p className="mt-1 font-mono text-sm text-smoke">
              {review.vintage} · {formatDateFr(review.date)}
            </p>
          </div>
          <Button variant="ghost" size="icon" onClick={onClose} aria-label="Fermer le détail">
            <X className="h-5 w-5" strokeWidth={1.5} />
          </Button>
        </div>

        <div className="mt-5 flex flex-wrap items-center gap-2">
          <SourceBadge source={review.source} />
          <CountryFlag code={review.market} />
          <span className="rounded-md border border-gold/30 px-2 py-1 font-mono text-xs text-bordeaux-deep">
            Sentiment {sentimentToScore(review.sentimentScore)}/100
          </span>
          <span className="rounded-md border border-gold/30 px-2 py-1 font-mono text-xs text-bordeaux-deep">
            Note {review.rating ?? "—"}
          </span>
        </div>

        <Separator className="my-6" />

        <p className="font-serif text-2xl italic leading-snug text-bordeaux-ink">“{review.textOriginal}”</p>
        {review.textOriginal !== review.textFrench ? (
          <div className="mt-6 rounded-md border border-gold/25 bg-ivory-warm p-4">
            <p className="text-xs uppercase tracking-[0.18em] text-smoke">Traduction</p>
            <p className="mt-2 leading-relaxed">{review.textFrench}</p>
          </div>
        ) : null}

        <div className="mt-6">
          <p className="mb-3 text-xs uppercase tracking-[0.18em] text-smoke">Descripteurs extraits</p>
          <div className="flex flex-wrap gap-2">
            {review.descriptors.map((descriptor) => (
              <DescriptorChip key={descriptor} term={descriptor} sentiment={review.sentimentScore} />
            ))}
          </div>
        </div>

        <div className="mt-6">
          <p className="mb-3 text-xs uppercase tracking-[0.18em] text-smoke">Sujets</p>
          <div className="flex flex-wrap gap-2">
            {review.topics.map((topic) => (
              <DescriptorChip key={topic} term={topic} sentiment={0} />
            ))}
          </div>
        </div>

        <a
          href={review.url}
          target="_blank"
          rel="noreferrer"
          className="mt-8 inline-flex items-center gap-2 rounded-md border border-gold/40 px-4 py-2 text-sm text-bordeaux-deep hover:bg-gold/10"
        >
          Source originale
          <ExternalLink className="h-4 w-4" strokeWidth={1.5} />
        </a>
      </aside>
    </div>
  );
}