"use client";

import { useState, useMemo } from "react";
import { Sidebar } from "@/components/dashboard/sidebar";
import { useBankingData } from "@/lib/hooks";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Plus,
  MoreVertical,
  Pencil,
  Trash2,
  RefreshCw,
  X,
  ChevronDown,
  ChevronRight,
  ChevronsUpDown,
  Search,
} from "lucide-react";
import { CategoryIcon } from "@/components/ui/category-icon";
import {
  autoCategorize,
  addCategory,
  updateCategory,
  deleteCategory,
} from "@/lib/store-db";
import type { Category } from "@/lib/types";
import { cn } from "@/lib/utils";

const categoryColors = [
  "#22c55e",
  "#3b82f6",
  "#f59e0b",
  "#ec4899",
  "#ef4444",
  "#8b5cf6",
  "#06b6d4",
  "#84cc16",
  "#f97316",
  "#6366f1",
  "#14b8a6",
  "#f43f5e",
  "#64748b",
  "#0891b2",
  "#dc2626",
];

export default function CategoriesPage() {
  const { data, isLoading, refresh } = useBankingData();
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [editingCategory, setEditingCategory] = useState<Category | null>(null);
  const [expandedParents, setExpandedParents] = useState<Set<string>>(
    new Set(),
  );
  const [formData, setFormData] = useState({
    name: "",
    color: "#22c55e",
    keywords: [] as string[],
    parentId: null as string | null,
  });
  const [newKeyword, setNewKeyword] = useState("");
  const [searchQuery, setSearchQuery] = useState("");

  // Organiser les catégories par parent
  const { parentCategories, childrenByParent, orphanCategories } =
    useMemo(() => {
      if (!data?.categories)
        return {
          parentCategories: [],
          childrenByParent: {},
          orphanCategories: [],
        };

      const parents = data.categories.filter((c) => c.parentId === null);
      const children: Record<string, Category[]> = {};
      const orphans: Category[] = [];

      // Grouper les enfants par parent
      data.categories
        .filter((c) => c.parentId !== null)
        .forEach((child) => {
          const parentExists = parents.some((p) => p.id === child.parentId);
          if (parentExists) {
            if (!children[child.parentId!]) {
              children[child.parentId!] = [];
            }
            children[child.parentId!].push(child);
          } else {
            orphans.push(child);
          }
        });

      return {
        parentCategories: parents,
        childrenByParent: children,
        orphanCategories: orphans,
      };
    }, [data?.categories]);

  // Initialiser tous les parents comme ouverts
  useState(() => {
    if (parentCategories.length > 0 && expandedParents.size === 0) {
      setExpandedParents(new Set(parentCategories.map((p) => p.id)));
    }
  });

  if (isLoading || !data) {
    return (
      <div className="flex h-screen">
        <Sidebar />
        <main className="flex-1 flex items-center justify-center">
          <RefreshCw className="w-8 h-8 animate-spin text-muted-foreground" />
        </main>
      </div>
    );
  }

  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat("fr-FR", {
      style: "currency",
      currency: "EUR",
    }).format(amount);
  };

  const getCategoryStats = (categoryId: string, includeChildren = false) => {
    let categoryIds = [categoryId];

    if (includeChildren && childrenByParent[categoryId]) {
      categoryIds = [
        ...categoryIds,
        ...childrenByParent[categoryId].map((c) => c.id),
      ];
    }

    const categoryTransactions = data.transactions.filter((t) =>
      categoryIds.includes(t.categoryId || ""),
    );
    const total = categoryTransactions.reduce(
      (sum, t) => sum + Math.abs(t.amount),
      0,
    );
    const count = categoryTransactions.length;
    return { total, count };
  };

  const toggleExpanded = (parentId: string) => {
    const newExpanded = new Set(expandedParents);
    if (newExpanded.has(parentId)) {
      newExpanded.delete(parentId);
    } else {
      newExpanded.add(parentId);
    }
    setExpandedParents(newExpanded);
  };

  const expandAll = () => {
    setExpandedParents(new Set(parentCategories.map((p) => p.id)));
  };

  const collapseAll = () => {
    setExpandedParents(new Set());
  };

  const allExpanded =
    parentCategories.length > 0 &&
    expandedParents.size === parentCategories.length;

  const handleNewCategory = (parentId: string | null = null) => {
    setEditingCategory(null);
    setFormData({ name: "", color: "#22c55e", keywords: [], parentId });
    setIsDialogOpen(true);
  };

  const handleEdit = (category: Category) => {
    setEditingCategory(category);
    setFormData({
      name: category.name,
      color: category.color,
      keywords: [...category.keywords],
      parentId: category.parentId,
    });
    setIsDialogOpen(true);
  };

  const handleSave = async () => {
    try {
      if (editingCategory) {
        await updateCategory({
          ...editingCategory,
          name: formData.name,
          color: formData.color,
          keywords: formData.keywords,
          parentId: formData.parentId,
        });
      } else {
        await addCategory({
          name: formData.name,
          color: formData.color,
          keywords: formData.keywords,
          icon: "tag",
          parentId: formData.parentId,
        });
      }
      refresh();
      setIsDialogOpen(false);
    } catch (error) {
      console.error("Error saving category:", error);
      alert("Erreur lors de la sauvegarde de la catégorie");
    }
  };

  const handleDelete = async (categoryId: string) => {
    const hasChildren = childrenByParent[categoryId]?.length > 0;
    const message = hasChildren
      ? "Cette catégorie a des sous-catégories. Supprimer quand même ?"
      : "Supprimer cette catégorie ?";

    if (!confirm(message)) return;

    try {
      await deleteCategory(categoryId);
      refresh();
    } catch (error) {
      console.error("Error deleting category:", error);
      alert("Erreur lors de la suppression de la catégorie");
    }
  };

  const addKeyword = () => {
    if (
      newKeyword.trim() &&
      !formData.keywords.includes(newKeyword.trim().toLowerCase())
    ) {
      setFormData({
        ...formData,
        keywords: [...formData.keywords, newKeyword.trim().toLowerCase()],
      });
      setNewKeyword("");
    }
  };

  const removeKeyword = (keyword: string) => {
    setFormData({
      ...formData,
      keywords: formData.keywords.filter((k) => k !== keyword),
    });
  };

  const reApplyAutoCategories = async () => {
    if (
      !confirm(
        "Recatégoriser automatiquement les transactions non catégorisées ?",
      )
    )
      return;

    try {
      const { updateTransaction } = await import("@/lib/store-db");
      const uncategorized = data.transactions.filter((t) => !t.categoryId);

      for (const transaction of uncategorized) {
        const categoryId = autoCategorize(
          transaction.description + " " + (transaction.memo || ""),
          data.categories,
        );
        if (categoryId) {
          await updateTransaction({ ...transaction, categoryId });
        }
      }
      refresh();
    } catch (error) {
      console.error("Error re-categorizing:", error);
      alert("Erreur lors de la recatégorisation");
    }
  };

  const uncategorizedCount = data.transactions.filter(
    (t) => !t.categoryId,
  ).length;

  // Composant pour une carte de catégorie enfant
  const ChildCategoryCard = ({ category }: { category: Category }) => {
    const stats = getCategoryStats(category.id);

    return (
      <div className="flex items-center justify-between py-1.5 px-2 rounded hover:bg-muted/50 transition-colors group">
        <div className="flex items-center gap-2 min-w-0 flex-1">
          <div
            className="w-5 h-5 rounded-full flex items-center justify-center shrink-0"
            style={{ backgroundColor: `${category.color}20` }}
          >
            <CategoryIcon
              icon={category.icon}
              color={category.color}
              size={12}
            />
          </div>
          <span className="text-sm truncate">{category.name}</span>
          <span className="text-sm text-muted-foreground shrink-0">
            {stats.count} opération{stats.count > 1 ? "s" : ""} •{" "}
            {formatCurrency(stats.total)}
          </span>
          {category.keywords.length > 0 && (
            <Badge
              variant="outline"
              className="text-[10px] px-1.5 py-0 h-4 shrink-0"
            >
              {category.keywords.length}
            </Badge>
          )}
        </div>

        <div className="flex items-center shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
          <Button
            variant="ghost"
            size="icon"
            className="h-6 w-6"
            onClick={() => handleEdit(category)}
          >
            <Pencil className="w-3 h-3" />
          </Button>
          <Button
            variant="ghost"
            size="icon"
            className="h-6 w-6 text-destructive hover:text-destructive"
            onClick={() => handleDelete(category.id)}
          >
            <Trash2 className="w-3 h-3" />
          </Button>
        </div>
      </div>
    );
  };

  return (
    <div className="flex h-screen bg-background">
      <Sidebar />
      <main className="flex-1 overflow-auto">
        <div className="p-6 space-y-6">
          {/* Header */}
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold text-foreground">Catégories</h1>
              <p className="text-muted-foreground">
                {parentCategories.length} catégories principales •{" "}
                {data.categories.length - parentCategories.length}{" "}
                sous-catégories
              </p>
            </div>
            <div className="flex gap-2">
              {uncategorizedCount > 0 && (
                <Button variant="outline" onClick={reApplyAutoCategories}>
                  Recatégoriser ({uncategorizedCount})
                </Button>
              )}
              <Button onClick={() => handleNewCategory(null)}>
                <Plus className="w-4 h-4 mr-2" />
                Nouvelle catégorie
              </Button>
            </div>
          </div>

          {/* Barre de recherche et contrôles */}
          <div className="flex items-center gap-3">
            <div className="relative flex-1 max-w-sm">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
              <Input
                placeholder="Rechercher une catégorie ou un mot-clé..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-9"
              />
              {searchQuery && (
                <button
                  onClick={() => setSearchQuery("")}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                >
                  <X className="w-4 h-4" />
                </button>
              )}
            </div>
            <Button
              variant="outline"
              size="sm"
              onClick={allExpanded ? collapseAll : expandAll}
            >
              <ChevronsUpDown className="w-4 h-4 mr-2" />
              {allExpanded ? "Tout replier" : "Tout déplier"}
            </Button>
          </div>

          {/* Liste des catégories par parent */}
          <div className="space-y-1">
            {parentCategories
              .filter((parent) => {
                if (!searchQuery.trim()) return true;
                const query = searchQuery.toLowerCase();
                // Afficher si le parent matche
                if (parent.name.toLowerCase().includes(query)) return true;
                if (
                  parent.keywords.some((k) => k.toLowerCase().includes(query))
                )
                  return true;
                // Ou si un enfant matche
                const children = childrenByParent[parent.id] || [];
                return children.some(
                  (c) =>
                    c.name.toLowerCase().includes(query) ||
                    c.keywords.some((k) => k.toLowerCase().includes(query)),
                );
              })
              .map((parent) => {
                const allChildren = childrenByParent[parent.id] || [];
                // Filtrer les enfants aussi si recherche active
                const children = searchQuery.trim()
                  ? allChildren.filter(
                      (c) =>
                        c.name
                          .toLowerCase()
                          .includes(searchQuery.toLowerCase()) ||
                        c.keywords.some((k) =>
                          k.toLowerCase().includes(searchQuery.toLowerCase()),
                        ) ||
                        // Garder tous les enfants si le parent matche
                        parent.name
                          .toLowerCase()
                          .includes(searchQuery.toLowerCase()),
                    )
                  : allChildren;
                const stats = getCategoryStats(parent.id, true);
                const isExpanded =
                  expandedParents.has(parent.id) ||
                  (searchQuery.trim() !== "" && children.length > 0);

                return (
                  <div key={parent.id} className="border rounded-lg bg-card">
                    <Collapsible
                      open={isExpanded}
                      onOpenChange={() => toggleExpanded(parent.id)}
                    >
                      <div className="flex items-center justify-between px-3 py-2">
                        <CollapsibleTrigger asChild>
                          <button className="flex items-center gap-2 hover:opacity-80 transition-opacity flex-1 min-w-0">
                            {isExpanded ? (
                              <ChevronDown className="w-4 h-4 text-muted-foreground shrink-0" />
                            ) : (
                              <ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
                            )}
                            <div
                              className="w-7 h-7 rounded-full flex items-center justify-center shrink-0"
                              style={{ backgroundColor: `${parent.color}20` }}
                            >
                              <CategoryIcon
                                icon={parent.icon}
                                color={parent.color}
                                size={14}
                              />
                            </div>
                            <span className="font-medium text-sm truncate">
                              {parent.name}
                            </span>
                            <span className="text-sm text-muted-foreground shrink-0">
                              {children.length} • {stats.count} opération
                              {stats.count > 1 ? "s" : ""} •{" "}
                              {formatCurrency(stats.total)}
                            </span>
                          </button>
                        </CollapsibleTrigger>

                        <div className="flex items-center gap-1 shrink-0 ml-2">
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-7 w-7"
                            onClick={(e) => {
                              e.stopPropagation();
                              handleNewCategory(parent.id);
                            }}
                          >
                            <Plus className="w-4 h-4" />
                          </Button>
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <Button
                                variant="ghost"
                                size="icon"
                                className="h-7 w-7"
                              >
                                <MoreVertical className="w-4 h-4" />
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                              <DropdownMenuItem
                                onClick={() => handleEdit(parent)}
                              >
                                <Pencil className="w-4 h-4 mr-2" />
                                Modifier
                              </DropdownMenuItem>
                              <DropdownMenuItem
                                onClick={() => handleDelete(parent.id)}
                                className="text-red-600"
                              >
                                <Trash2 className="w-4 h-4 mr-2" />
                                Supprimer
                              </DropdownMenuItem>
                            </DropdownMenuContent>
                          </DropdownMenu>
                        </div>
                      </div>

                      <CollapsibleContent>
                        {children.length > 0 ? (
                          <div className="px-3 pb-2 space-y-1 ml-6 border-l-2 border-muted ml-5">
                            {children.map((child) => (
                              <ChildCategoryCard
                                key={child.id}
                                category={child}
                              />
                            ))}
                          </div>
                        ) : (
                          <div className="px-3 pb-2 ml-11 text-xs text-muted-foreground italic">
                            Aucune sous-catégorie
                          </div>
                        )}
                      </CollapsibleContent>
                    </Collapsible>
                  </div>
                );
              })}

            {/* Catégories orphelines (sans parent valide) */}
            {orphanCategories.length > 0 && (
              <div className="border rounded-lg bg-card">
                <div className="px-3 py-2 border-b">
                  <span className="text-sm font-medium text-muted-foreground">
                    Catégories non classées ({orphanCategories.length})
                  </span>
                </div>
                <div className="p-2 space-y-1">
                  {orphanCategories.map((category) => (
                    <ChildCategoryCard key={category.id} category={category} />
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>
      </main>

      {/* Dialog de création/édition */}
      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>
              {editingCategory ? "Modifier la catégorie" : "Nouvelle catégorie"}
            </DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            {/* Catégorie parente */}
            <div className="space-y-2">
              <Label>Catégorie parente</Label>
              <Select
                value={formData.parentId || "none"}
                onValueChange={(value) =>
                  setFormData({
                    ...formData,
                    parentId: value === "none" ? null : value,
                  })
                }
              >
                <SelectTrigger>
                  <SelectValue placeholder="Aucune (catégorie principale)" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="none">
                    Aucune (catégorie principale)
                  </SelectItem>
                  {parentCategories
                    .filter((p) => p.id !== editingCategory?.id)
                    .map((parent) => (
                      <SelectItem key={parent.id} value={parent.id}>
                        <div className="flex items-center gap-2">
                          <div
                            className="w-3 h-3 rounded-full"
                            style={{ backgroundColor: parent.color }}
                          />
                          {parent.name}
                        </div>
                      </SelectItem>
                    ))}
                </SelectContent>
              </Select>
            </div>

            {/* Nom */}
            <div className="space-y-2">
              <Label>Nom</Label>
              <Input
                value={formData.name}
                onChange={(e) =>
                  setFormData({ ...formData, name: e.target.value })
                }
                placeholder="Ex: Alimentation"
              />
            </div>

            {/* Couleur */}
            <div className="space-y-2">
              <Label>Couleur</Label>
              <div className="flex flex-wrap gap-2">
                {categoryColors.map((color) => (
                  <button
                    key={color}
                    onClick={() => setFormData({ ...formData, color })}
                    className={cn(
                      "w-8 h-8 rounded-full transition-transform",
                      formData.color === color &&
                        "ring-2 ring-offset-2 ring-primary scale-110",
                    )}
                    style={{ backgroundColor: color }}
                  />
                ))}
              </div>
            </div>

            {/* Mots-clés */}
            <div className="space-y-2">
              <Label>Mots-clés pour la catégorisation automatique</Label>
              <div className="flex gap-2">
                <Input
                  value={newKeyword}
                  onChange={(e) => setNewKeyword(e.target.value)}
                  placeholder="Ajouter un mot-clé"
                  onKeyDown={(e) =>
                    e.key === "Enter" && (e.preventDefault(), addKeyword())
                  }
                />
                <Button type="button" onClick={addKeyword} size="icon">
                  <Plus className="w-4 h-4" />
                </Button>
              </div>
              <div className="flex flex-wrap gap-1 mt-2 max-h-32 overflow-y-auto">
                {formData.keywords.map((keyword) => (
                  <Badge key={keyword} variant="secondary" className="gap-1">
                    {keyword}
                    <button onClick={() => removeKeyword(keyword)}>
                      <X className="w-3 h-3" />
                    </button>
                  </Badge>
                ))}
              </div>
            </div>

            {/* Actions */}
            <div className="flex justify-end gap-2">
              <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
                Annuler
              </Button>
              <Button onClick={handleSave} disabled={!formData.name.trim()}>
                {editingCategory ? "Enregistrer" : "Créer"}
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}