"use client";
// Panneau source : extrait exact, contexte voisin, métadonnées du document.
import { useEffect, useState } from "react";
import { FileText, X } from "lucide-react";
import { Badge, Skeleton } from "@/components/ui";

export type Citation = {
  tag: string;
  index: number;
  courseCode: string | null;
  docTitle: string;
  filename: string;
  refLabel: string;
  title: string;
  excerpt: string;
  chunkId: number;
};

type SourceDetail = {
  source: {
    ref_label: string; title: string; display_content: string; section_title: string;
    doc_title: string; filename: string; course_code: string | null; ingested_at: string | null; week: number | null;
  };
  neighbors: { id: number; ref_number: number; title: string; preview: string }[];
};

export function CitationPanel({ citation, onClose }: { citation: Citation | null; onClose: () => void }) {
  const [detail, setDetail] = useState<SourceDetail | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!citation) return;
    setDetail(null);
    setLoading(true);
    fetch(`/api/citations/${citation.chunkId}`)
      .then((r) => (r.ok ? r.json() : null))
      .then((d) => setDetail(d))
      .finally(() => setLoading(false));
  }, [citation]);

  if (!citation) return null;
  return (
    <div className="fixed inset-0 z-50 flex justify-end" role="dialog" aria-modal="true" aria-label="Source de la citation">
      <div className="absolute inset-0 bg-black/35 animate-fade-in" onClick={onClose} />
      <aside className="relative w-full sm:w-[430px] h-full bg-card border-l border-app shadow-2xl overflow-y-auto animate-fade-in">
        <div className="sticky top-0 bg-card border-b border-app px-5 py-3.5 flex items-center justify-between gap-3 z-10">
          <div className="flex items-center gap-2 min-w-0">
            <span className="citation-chip shrink-0">{citation.tag}</span>
            <h2 className="font-semibold text-sm text-fg truncate">{citation.refLabel || citation.docTitle}</h2>
          </div>
          <button onClick={onClose} aria-label="Fermer" className="p-1.5 rounded-md text-muted hover:text-fg shrink-0">
            <X size={17} />
          </button>
        </div>
        <div className="p-5 space-y-4">
          <div className="flex flex-wrap gap-1.5">
            {citation.courseCode && <Badge tone="brand">{citation.courseCode}</Badge>}
            <Badge tone="neutral"><FileText size={11} /> {citation.filename}</Badge>
            {detail?.source.week != null && <Badge tone="gold">Semaine {detail.source.week}</Badge>}
          </div>
          {loading ? (
            <div className="space-y-2.5">
              <Skeleton className="h-4 w-3/4" />
              <Skeleton className="h-4 w-full" />
              <Skeleton className="h-4 w-full" />
              <Skeleton className="h-4 w-2/3" />
            </div>
          ) : detail ? (
            <>
              {detail.source.section_title && (
                <p className="text-[12px] text-muted font-medium uppercase tracking-wide">{detail.source.section_title}</p>
              )}
              <h3 className="font-semibold text-fg -mt-2">{detail.source.title}</h3>
              <div className="bg-surface-1 dark:bg-brand-950/50 border border-app rounded-xl p-4 text-sm text-fg whitespace-pre-wrap leading-relaxed max-h-96 overflow-y-auto">
                {detail.source.display_content}
              </div>
              {detail.neighbors.length > 0 && (
                <div>
                  <p className="text-[12px] font-semibold text-muted uppercase tracking-wide mb-2">Diapositives voisines</p>
                  <div className="space-y-2">
                    {detail.neighbors.map((n) => (
                      <div key={n.id} className="border border-app rounded-lg p-3">
                        <p className="text-[12px] font-medium text-fg">Diapositive {n.ref_number} — {n.title}</p>
                        <p className="text-[12px] text-muted mt-1 line-clamp-3 whitespace-pre-wrap">{n.preview}</p>
                      </div>
                    ))}
                  </div>
                </div>
              )}
              {detail.source.ingested_at && (
                <p className="text-[11px] text-muted">Indexé le {new Date(detail.source.ingested_at + "Z").toLocaleDateString("fr-CA")}</p>
              )}
            </>
          ) : (
            <div className="text-sm text-muted bg-surface-1 dark:bg-brand-950/50 rounded-xl p-4">
              <p className="font-medium text-fg mb-1">Extrait cité :</p>
              <p className="whitespace-pre-wrap">{citation.excerpt}</p>
            </div>
          )}
        </div>
      </aside>
    </div>
  );
}