import { useState, useMemo } from "react";
import { trpc } from "@/lib/trpc";
import { FilterBar } from "@/components/FilterBar";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  LayoutGrid,
  List,
  ExternalLink,
  Calendar,
  MapPin,
  Tag,
  Layers,
  FileSearch,
  Loader2,
  ChevronLeft,
  ChevronRight,
  Eye,
  Globe,
  BookOpen,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { format } from "date-fns";
import { fr } from "date-fns/locale";

type TypeVeille = "reglementaire" | "concurrentielle" | "technologique" | "generale";

interface VeilleItem {
  id: number;
  titre: string;
  typeVeille: string;
  categorie: string | null;
  niveau: string | null;
  territoire: string | null;
  resume: string | null;
  source: string | null;
  passage: string | null;
  lien: string | null;
  datePublication: Date | null;
  importedAt: Date;
}

const TYPE_LABELS: Record<TypeVeille, string> = {
  reglementaire: "Réglementaire",
  concurrentielle: "Concurrentielle",
  technologique: "Technologique",
  generale: "Générale",
};

const TYPE_COLORS: Record<string, string> = {
  reglementaire: "bg-blue-100 text-blue-800 border-blue-200",
  concurrentielle: "bg-purple-100 text-purple-800 border-purple-200",
  technologique: "bg-emerald-100 text-emerald-800 border-emerald-200",
  generale: "bg-amber-100 text-amber-800 border-amber-200",
};

const TYPE_ACCENT: Record<string, string> = {
  reglementaire: "border-l-blue-500",
  concurrentielle: "border-l-purple-500",
  technologique: "border-l-emerald-500",
  generale: "border-l-amber-500",
};

const TYPE_HEADER_BG: Record<string, string> = {
  reglementaire: "from-blue-50 to-blue-100/30 border-blue-200",
  concurrentielle: "from-purple-50 to-purple-100/30 border-purple-200",
  technologique: "from-emerald-50 to-emerald-100/30 border-emerald-200",
  generale: "from-amber-50 to-amber-100/30 border-amber-200",
};

const PAGE_SIZE = 24;

function formatDate(d: Date | null | undefined): string | null {
  if (!d) return null;
  try { return format(new Date(d), "d MMMM yyyy", { locale: fr }); }
  catch { return null; }
}

// ─── Boîte de dialogue Détail ─────────────────────────────────────────────────

function VeilleDetailDialog({
  item,
  open,
  onClose,
}: {
  item: VeilleItem | null;
  open: boolean;
  onClose: () => void;
}) {
  if (!item) return null;

  const typeKey = item.typeVeille as TypeVeille;
  const headerBg = TYPE_HEADER_BG[typeKey] || "from-muted to-muted/30 border-border";

  return (
    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
      <DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto p-0">
        {/* En-tête coloré */}
        <div className={cn("bg-gradient-to-br border-b px-6 py-5", headerBg)}>
          <DialogHeader>
            <div className="flex items-start gap-3">
              <Badge
                variant="outline"
                className={cn("text-xs flex-shrink-0 mt-0.5", TYPE_COLORS[typeKey])}
              >
                {TYPE_LABELS[typeKey] || item.typeVeille}
              </Badge>
              {item.datePublication && (
                <span className="text-xs text-muted-foreground flex items-center gap-1 mt-0.5 ml-auto">
                  <Calendar size={11} />
                  {formatDate(item.datePublication)}
                </span>
              )}
            </div>
            <DialogTitle className="text-lg font-bold text-foreground leading-snug mt-2 pr-6">
              {item.titre}
            </DialogTitle>
          </DialogHeader>
        </div>

        {/* Corps */}
        <div className="px-6 py-5 space-y-5">

          {/* Métadonnées en grille */}
          <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
            {item.categorie && (
              <div className="flex items-start gap-2 p-3 rounded-lg bg-muted/40 border border-border/50">
                <Tag size={14} className="text-muted-foreground mt-0.5 shrink-0" />
                <div>
                  <p className="text-[10px] uppercase tracking-wide text-muted-foreground font-medium">Catégorie</p>
                  <p className="text-sm font-medium text-foreground">{item.categorie}</p>
                </div>
              </div>
            )}
            {item.niveau && (
              <div className="flex items-start gap-2 p-3 rounded-lg bg-violet-50 border border-violet-200">
                <Layers size={14} className="text-violet-500 mt-0.5 shrink-0" />
                <div>
                  <p className="text-[10px] uppercase tracking-wide text-violet-400 font-medium">Niveau</p>
                  <p className="text-sm font-medium text-violet-800">{item.niveau}</p>
                </div>
              </div>
            )}
            {item.territoire && (
              <div className="flex items-start gap-2 p-3 rounded-lg bg-teal-50 border border-teal-200">
                <MapPin size={14} className="text-teal-500 mt-0.5 shrink-0" />
                <div>
                  <p className="text-[10px] uppercase tracking-wide text-teal-400 font-medium">Territoire</p>
                  <p className="text-sm font-medium text-teal-800">{item.territoire}</p>
                </div>
              </div>
            )}
            {item.source && (
              <div className="flex items-start gap-2 p-3 rounded-lg bg-orange-50 border border-orange-200">
                <Globe size={14} className="text-orange-500 mt-0.5 shrink-0" />
                <div>
                  <p className="text-[10px] uppercase tracking-wide text-orange-400 font-medium">Source</p>
                  <p className="text-sm font-medium text-orange-800">{item.source}</p>
                </div>
              </div>
            )}
            {item.passage && (
              <div className="flex items-start gap-2 p-3 rounded-lg bg-muted/40 border border-border/50 col-span-2">
                <Calendar size={14} className="text-muted-foreground mt-0.5 shrink-0" />
                <div>
                  <p className="text-[10px] uppercase tracking-wide text-muted-foreground font-medium">Passage en vigueur</p>
                  <p className="text-sm font-medium text-foreground">{item.passage}</p>
                </div>
              </div>
            )}
          </div>

          {/* Résumé complet */}
          {item.resume && (
            <div className="space-y-2">
              <div className="flex items-center gap-2">
                <BookOpen size={14} className="text-primary" />
                <h3 className="text-sm font-semibold text-foreground">Résumé</h3>
              </div>
              <div className="p-4 rounded-lg bg-muted/20 border border-border/50">
                <p className="text-sm text-foreground leading-relaxed whitespace-pre-wrap">{item.resume}</p>
              </div>
            </div>
          )}

          {/* Lien externe */}
          {item.lien && (
            <div className="pt-1 border-t border-border/50">
              <a
                href={item.lien}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 text-sm font-medium text-primary hover:text-primary/80 transition-colors group"
              >
                <ExternalLink size={14} className="group-hover:translate-x-0.5 transition-transform" />
                Accéder à la source originale
              </a>
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}

// ─── Composant principal ──────────────────────────────────────────────────────

export default function VeilleDashboard() {
  const [viewMode, setViewMode] = useState<"list" | "grid">("list");
  const [activeTab, setActiveTab] = useState<TypeVeille | "all">("all");
  const [page, setPage] = useState(1);
  const [filterValues, setFilterValues] = useState<Record<string, string>>({});
  const [selectedItem, setSelectedItem] = useState<VeilleItem | null>(null);
  const [dialogOpen, setDialogOpen] = useState(false);

  const filtersQuery = trpc.veille.filters.useQuery();

  const queryInput = useMemo(() => ({
    typeVeille: activeTab !== "all" ? activeTab : undefined,
    categorie: filterValues.categorie || undefined,
    niveau: filterValues.niveau || undefined,
    territoire: filterValues.territoire || undefined,
    search: filterValues.search || undefined,
    dateFrom: filterValues.dateFrom ? new Date(filterValues.dateFrom) : undefined,
    dateTo: filterValues.dateTo ? new Date(filterValues.dateTo) : undefined,
    page,
    pageSize: PAGE_SIZE,
  }), [activeTab, filterValues, page]);

  const itemsQuery = trpc.veille.list.useQuery(queryInput);

  const handleFilterChange = (key: string, value: string) => {
    setFilterValues((prev) => ({ ...prev, [key]: value }));
    setPage(1);
  };

  const handleReset = () => {
    setFilterValues({});
    setPage(1);
  };

  const openDetail = (item: VeilleItem) => {
    setSelectedItem(item);
    setDialogOpen(true);
  };

  const items = (itemsQuery.data?.items ?? []) as VeilleItem[];
  const total = itemsQuery.data?.total ?? 0;
  const totalPages = Math.ceil(total / PAGE_SIZE);

  const filterOptions = [
    { key: "categorie", label: "Catégorie", options: filtersQuery.data?.categories ?? [] },
    { key: "niveau", label: "Niveau", options: filtersQuery.data?.niveaux ?? [] },
    { key: "territoire", label: "Territoire", options: filtersQuery.data?.territoires ?? [] },
    { key: "dateFrom", label: "Date depuis", type: "date" as const },
    { key: "dateTo", label: "Date jusqu'à", type: "date" as const },
  ];

  return (
    <div className="p-6 space-y-6 animate-fade-up">
      {/* En-tête */}
      <div className="flex items-start justify-between gap-4 flex-wrap">
        <div>
          <div className="flex items-center gap-2 mb-1">
            <FileSearch size={22} className="text-primary" />
            <h1 className="text-2xl font-bold text-foreground">Veille Stratégique</h1>
          </div>
          <p className="text-muted-foreground text-sm">
            Suivi réglementaire, concurrentiel, technologique et général
          </p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant={viewMode === "list" ? "default" : "outline"} size="sm" onClick={() => setViewMode("list")} className="gap-2">
            <List size={15} />Liste
          </Button>
          <Button variant={viewMode === "grid" ? "default" : "outline"} size="sm" onClick={() => setViewMode("grid")} className="gap-2">
            <LayoutGrid size={15} />Vignettes
          </Button>
        </div>
      </div>

      {/* Onglets */}
      <Tabs value={activeTab} onValueChange={(v) => { setActiveTab(v as TypeVeille | "all"); setPage(1); }}>
        <TabsList className="bg-muted/50">
          <TabsTrigger value="all">Tous</TabsTrigger>
          {(Object.keys(TYPE_LABELS) as TypeVeille[]).map((t) => (
            <TabsTrigger key={t} value={t}>{TYPE_LABELS[t]}</TabsTrigger>
          ))}
        </TabsList>
      </Tabs>

      {/* Filtres */}
      <FilterBar
        filters={filterOptions}
        values={filterValues}
        onChange={handleFilterChange}
        onReset={handleReset}
        searchPlaceholder="Rechercher dans les titres et résumés…"
        totalCount={total}
      />

      {/* Contenu */}
      {itemsQuery.isLoading ? (
        <div className="flex items-center justify-center py-24">
          <Loader2 size={32} className="animate-spin text-primary" />
        </div>
      ) : items.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-24 text-center">
          <FileSearch size={48} className="text-muted-foreground/30 mb-4" />
          <p className="text-muted-foreground font-medium">Aucun résultat trouvé</p>
          <p className="text-muted-foreground/60 text-sm mt-1">Modifiez vos filtres ou importez des données</p>
        </div>
      ) : viewMode === "list" ? (
        <VeilleListView items={items} onDetail={openDetail} />
      ) : (
        <VeilleGridView items={items} onDetail={openDetail} />
      )}

      {/* Pagination */}
      {totalPages > 1 && (
        <div className="flex items-center justify-center gap-2 pt-2">
          <Button variant="outline" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page === 1}>
            <ChevronLeft size={14} />
          </Button>
          <span className="text-sm text-muted-foreground px-2">Page {page} / {totalPages}</span>
          <Button variant="outline" size="sm" onClick={() => setPage((p) => Math.min(totalPages, p + 1))} disabled={page === totalPages}>
            <ChevronRight size={14} />
          </Button>
        </div>
      )}

      {/* Boîte de dialogue détail */}
      <VeilleDetailDialog
        item={selectedItem}
        open={dialogOpen}
        onClose={() => setDialogOpen(false)}
      />
    </div>
  );
}

// ─── Vue Liste ────────────────────────────────────────────────────────────────

function VeilleListView({ items, onDetail }: { items: VeilleItem[]; onDetail: (item: VeilleItem) => void }) {
  return (
    <div className="rounded-xl border border-border overflow-hidden shadow-sm">
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="bg-muted/50 border-b border-border">
              <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-8">#</th>
              <th className="text-left px-4 py-3 font-semibold text-muted-foreground">Titre</th>
              <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-32">Type</th>
              <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-28">Catégorie</th>
              <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-24">Niveau</th>
              <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-36">Territoire</th>
              <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-28">Date</th>
              <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-20">Actions</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-border">
            {items.map((item, idx) => (
              <tr key={item.id} className={cn("hover:bg-muted/30 transition-colors border-l-4", TYPE_ACCENT[item.typeVeille] || "border-l-transparent")}>
                <td className="px-4 py-3 text-muted-foreground/50 text-xs">{idx + 1}</td>
                <td className="px-4 py-3">
                  <div className="max-w-md">
                    <p className="font-medium text-foreground line-clamp-2 leading-snug">{item.titre}</p>
                    {item.resume && <p className="text-xs text-muted-foreground mt-1 line-clamp-2">{item.resume}</p>}
                  </div>
                </td>
                <td className="px-4 py-3">
                  <Badge variant="outline" className={cn("text-xs", TYPE_COLORS[item.typeVeille])}>
                    {TYPE_LABELS[item.typeVeille as TypeVeille] || item.typeVeille}
                  </Badge>
                </td>
                <td className="px-4 py-3 text-muted-foreground text-xs">{item.categorie || "—"}</td>
                <td className="px-4 py-3 text-muted-foreground text-xs">{item.niveau || "—"}</td>
                <td className="px-4 py-3 text-muted-foreground text-xs">{item.territoire || "—"}</td>
                <td className="px-4 py-3 text-muted-foreground text-xs whitespace-nowrap">{formatDate(item.datePublication) || "—"}</td>
                <td className="px-4 py-3">
                  <div className="flex items-center gap-1.5">
                    {/* Bouton Détail — bleu */}
                    <button
                      onClick={() => onDetail(item)}
                      className="inline-flex items-center justify-center w-7 h-7 rounded-md bg-blue-50 text-blue-600 hover:bg-blue-100 hover:text-blue-700 transition-colors border border-blue-200"
                      title="Voir le détail complet"
                    >
                      <Eye size={13} />
                    </button>
                    {/* Bouton Lien externe — vert */}
                    {item.lien && (
                      <a
                        href={item.lien}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="inline-flex items-center justify-center w-7 h-7 rounded-md bg-emerald-50 text-emerald-600 hover:bg-emerald-100 hover:text-emerald-700 transition-colors border border-emerald-200"
                        title="Ouvrir la source"
                      >
                        <ExternalLink size={13} />
                      </a>
                    )}
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ─── Vue Vignettes ────────────────────────────────────────────────────────────

function VeilleGridView({ items, onDetail }: { items: VeilleItem[]; onDetail: (item: VeilleItem) => void }) {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
      {items.map((item) => (
        <Card key={item.id} className={cn("group hover:shadow-md transition-all duration-200 border-border overflow-hidden border-l-4", TYPE_ACCENT[item.typeVeille] || "")}>
          <CardHeader className="pb-2 pt-4 px-4">
            <div className="flex items-start justify-between gap-2">
              <Badge variant="outline" className={cn("text-xs flex-shrink-0", TYPE_COLORS[item.typeVeille])}>
                {TYPE_LABELS[item.typeVeille as TypeVeille] || item.typeVeille}
              </Badge>
              <div className="flex items-center gap-1.5 flex-shrink-0">
                {/* Bouton Détail */}
                <button
                  onClick={() => onDetail(item)}
                  className="text-muted-foreground hover:text-primary transition-colors"
                  title="Voir le détail complet"
                >
                  <Eye size={14} />
                </button>
                {item.lien && (
                  <a href={item.lien} target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-accent transition-colors">
                    <ExternalLink size={14} />
                  </a>
                )}
              </div>
            </div>
            <h3 className="font-semibold text-sm text-foreground leading-snug line-clamp-3 mt-2">{item.titre}</h3>
          </CardHeader>
          <CardContent className="px-4 pb-4 space-y-2">
            {item.resume && <p className="text-xs text-muted-foreground line-clamp-3 leading-relaxed">{item.resume}</p>}
            <div className="flex flex-wrap gap-1.5 pt-1">
              {item.categorie && <span className="inline-flex items-center gap-1 text-xs text-muted-foreground"><Tag size={10} />{item.categorie}</span>}
              {item.territoire && <span className="inline-flex items-center gap-1 text-xs text-muted-foreground"><MapPin size={10} />{item.territoire}</span>}
              {item.niveau && <span className="inline-flex items-center gap-1 text-xs text-muted-foreground"><Layers size={10} />{item.niveau}</span>}
            </div>
            {item.datePublication && (
              <div className="flex items-center gap-1 text-xs text-muted-foreground/70 pt-1 border-t border-border/50">
                <Calendar size={10} />
                {formatDate(item.datePublication)}
              </div>
            )}
          </CardContent>
        </Card>
      ))}
    </div>
  );
}