import { useState, useMemo, useEffect } from "react";
import { useLocalAuth } from "@/contexts/LocalAuthContext";
import { toast } from "sonner";
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,
  Trash2,
  AlertTriangle,
} from "lucide-react";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { cn } from "@/lib/utils";
import { format } from "date-fns";
import { fr } from "date-fns/locale";

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

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;
  iaRelevant: boolean | null;
  iaClassifiedBy: "ia" | "rules" | null;
  iaReason: string | null;
  iaResume: string | null;
}

const TYPE_LABELS: Record<TypeVeille, string> = {
  reglementaire: "Réglementaire",
  concurrentielle: "Concurrentielle",
  technologique: "Technologique",
  informationnelle: "Informationnelle",
};

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",
  informationnelle: "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",
  informationnelle: "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",
  informationnelle: "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.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é IA ou résumé brut */}
          {(item.iaResume || 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>
                {item.iaResume && (
                  <span className="text-[10px] px-1.5 py-0.5 rounded bg-violet-50 text-violet-600 border border-violet-200 font-medium">Généré par l'IA</span>
                )}
              </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.iaResume || 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 { user } = useLocalAuth();
  const isAdmin = user?.role === "admin";
  const utils = trpc.useUtils();

  // Marquage lu/non lu
  const [readIds, setReadIds] = useState<Set<number>>(new Set());
  const markAsReadMutation = trpc.veille.markAsRead.useMutation({
    onSuccess: (_, vars) => {
      setReadIds((prev) => { const next = new Set(prev); next.add(vars.articleId); return next; });
    },
  });
  const markAllAsReadMutation = trpc.veille.markAllAsRead.useMutation({
    onSuccess: () => {
      utils.veille.unreadCount.invalidate();
    },
  });
  const unreadCountQuery = trpc.veille.unreadCount.useQuery();
  const unreadCount = unreadCountQuery.data?.count ?? 0;

  const purgeMutation = trpc.veille.purge.useMutation({
    onSuccess: (data) => {
      toast.success(`Purge effectuée — ${data.deleted} entrée(s) supprimée(s)`);
      utils.veille.list.invalidate();
      utils.veille.filters.invalidate();
    },
    onError: (err) => {
      toast.error(`Erreur lors de la purge : ${err.message}`);
    },
  });
  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);
    // Marquer comme lu automatiquement à l'ouverture du détail
    if (!readIds.has(item.id)) {
      markAsReadMutation.mutate({ articleId: item.id });
    }
  };

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

  const filterOptions = [
    { 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>
          {unreadCount > 0 && (
            <span className="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full bg-primary text-primary-foreground text-[11px] font-bold">{unreadCount}</span>
          )}
          </div>
          <p className="text-muted-foreground text-sm">
            Suivi réglementaire, concurrentiel, technologique et informationnel
          </p>
        </div>
        <div className="flex items-center gap-2">
          {unreadCount > 0 && (
            <Button variant="outline" size="sm" onClick={() => markAllAsReadMutation.mutate()} disabled={markAllAsReadMutation.isPending} className="gap-2 text-muted-foreground">
              <Eye size={15} />
              Tout marquer comme lu
            </Button>
          )}
          <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>
          {isAdmin && (
            <>
            <AlertDialog>
              <AlertDialogTrigger asChild>
                <Button variant="outline" size="sm" className="gap-2 border-destructive/50 text-destructive hover:bg-destructive hover:text-destructive-foreground ml-2">
                  <Trash2 size={15} />
                  Purger les données
                </Button>
              </AlertDialogTrigger>
              <AlertDialogContent>
                <AlertDialogHeader>
                  <AlertDialogTitle className="flex items-center gap-2">
                    <AlertTriangle size={20} className="text-destructive" />
                    Purger toutes les données de veille
                  </AlertDialogTitle>
                  <AlertDialogDescription asChild>
                    <div className="space-y-2">
                      <p>Cette action va <strong>supprimer définitivement</strong> toutes les entrées de la veille stratégique (réglementaire, concurrentielle, technologique et générale).</p>
                      <p className="text-destructive font-medium">Cette opération est irréversible. Les données ne pourront pas être récupérées.</p>
                    </div>
                  </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                  <AlertDialogCancel>Annuler</AlertDialogCancel>
                  <AlertDialogAction
                    className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                    onClick={() => purgeMutation.mutate()}
                    disabled={purgeMutation.isPending}
                  >
                    {purgeMutation.isPending ? "Purge en cours..." : "Oui, purger toutes les données"}
                  </AlertDialogAction>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialog>
            </>
          )}
        </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} readIds={readIds} />
      ) : (
        <VeilleGridView items={items} onDetail={openDetail} readIds={readIds} />
      )}

      {/* 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, readIds }: { items: VeilleItem[]; onDetail: (item: VeilleItem) => void; readIds: Set<number> }) {
  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-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", !readIds.has(item.id) && "bg-blue-50/30")}>
                <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 flex items-start gap-2">
                    {!readIds.has(item.id) && (
                      <span className="mt-1.5 w-2 h-2 rounded-full bg-primary flex-shrink-0" title="Non lu" />
                    )}
                    <div>
                      <p className={cn("font-medium line-clamp-2 leading-snug", readIds.has(item.id) ? "text-muted-foreground" : "text-foreground")}>{item.titre}</p>
                      {(item.iaResume || item.resume) && <p className="text-xs text-muted-foreground mt-1 line-clamp-2">{item.iaResume || item.resume}</p>}
                    </div>
                  </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.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, readIds }: { items: VeilleItem[]; onDetail: (item: VeilleItem) => void; readIds: Set<number> }) {
  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] || "", !readIds.has(item.id) && "ring-1 ring-primary/20")}>
          <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>
            <div className="flex items-start gap-1.5 mt-2">
              {!readIds.has(item.id) && <span className="mt-1 w-2 h-2 rounded-full bg-primary flex-shrink-0" title="Non lu" />}
              <h3 className={cn("font-semibold text-sm leading-snug line-clamp-3", readIds.has(item.id) ? "text-muted-foreground" : "text-foreground")}>{item.titre}</h3>
            </div>
          </CardHeader>
          <CardContent className="px-4 pb-4 space-y-2">
            {(item.iaResume || item.resume) && <p className="text-xs text-muted-foreground line-clamp-3 leading-relaxed">{item.iaResume || item.resume}</p>}
            <div className="flex flex-wrap gap-1.5 pt-1">
                {item.territoire && (
                <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-teal-50 text-teal-700 border border-teal-200">
                  <MapPin size={10} />{item.territoire}
                </span>
              )}
              {item.niveau && (
                <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-violet-50 text-violet-700 border border-violet-200">
                  <Layers size={10} />{item.niveau}
                </span>
              )}
            </div>
            {item.datePublication && (
              <div className="flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-orange-50 text-orange-700 border border-orange-200 mt-1 w-fit">
                <Calendar size={10} />
                {formatDate(item.datePublication)}
              </div>
            )}
          </CardContent>
        </Card>
      ))}
    </div>
  );
}