"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>
  )
}