"use client";

import { useState, useEffect, useMemo } from "react";
import { getSupabaseClient } from "@/lib/supabase";
import { getCompanyContext } from "@/lib/company-context";
import { Plus, Pencil, Trash2, Search, Loader2, Layers, EyeOff } from "lucide-react";
import { PricingRule } from "@/domain/pricing/getPriceSuggestion";
import { motion, AnimatePresence } from "framer-motion";
import { PageHeader } from "@/components/ui/page-header";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { usePermissoes } from "@/lib/permissoes-do-usuario";
import { CategoryFormModal } from "@/components/categories/category-form-modal";

interface Category {
  id: string;
  name: string;
  slug: string;
  pricing_rule: PricingRule;
  created_at: string;
  is_visible: boolean;
  parent_id?: string | null;
}

export default function CategoriesPage() {
  const { pode } = usePermissoes();
  const podeMexerEmCategorias = pode("categories.write");

  const [categories, setCategories] = useState<Category[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");
  
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingCategory, setEditingCategory] = useState<Category | null>(null);

  useEffect(() => {
    fetchCategories();
  }, []);

  async function fetchCategories() {
    try {
      const supabase = getSupabaseClient();
      const {
        data: { user },
      } = await supabase.auth.getUser();
      if (!user) {
        setCategories([]);
        return;
      }
      const ctx = await getCompanyContext(supabase, user);
      const tenantIds = ctx.tenantIds?.length ? ctx.tenantIds : [user.id];
      const { data, error } = await supabase
        .from('categories')
        .select('id,name,slug,pricing_rule,created_at,is_visible,parent_id')
        .in('user_id', tenantIds)
        .order('created_at', { ascending: false });

      if (error) throw error;
      setCategories(data || []);
    } catch (error) {
      console.error('Error fetching categories:', error);
    } finally {
      setLoading(false);
    }
  }

  const handleOpenModal = (category?: Category) => {
    setEditingCategory(category || null);
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
    setEditingCategory(null);
  };

  const handleDelete = async (id: string) => {
    if (!confirm("Tem certeza que deseja excluir esta categoria?")) return;

    try {
      const res = await fetch("/api/categories", {
        method: "DELETE",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ id }),
      });
      const json = (await res.json().catch(() => null)) as { error?: string } | null;
      if (!res.ok) throw new Error(json?.error || "Falha ao excluir categoria.");
      
      setCategories(prev => prev.filter(c => c.id !== id));
    } catch (error) {
      console.error('Error deleting category:', error);
      alert("Erro ao excluir categoria.");
    }
  };

  const filteredCategories = categories.filter(c => 
    c.name.toLowerCase().includes(searchTerm.toLowerCase())
  );
  const categoriesById = useMemo(
    () => new Map(categories.map((category) => [category.id, category])),
    [categories]
  );
  const getCategoryPath = (category: Category) => {
    const names: string[] = [category.name];
    const visited = new Set<string>([category.id]);
    let currentParentId = category.parent_id ?? null;
    while (currentParentId) {
      if (visited.has(currentParentId)) break;
      const parent = categoriesById.get(currentParentId);
      if (!parent) break;
      names.unshift(parent.name);
      visited.add(currentParentId);
      currentParentId = parent.parent_id ?? null;
    }
    return names.join(" / ");
  };

  return (
    <div className="space-y-6">
      <PageHeader
        eyebrow="Produtos"
        title="Categorias"
        subtitle="Organize seus produtos em grupos claros para o catálogo e o estoque."
        actions={
          !podeMexerEmCategorias ? null : (
          <Button icon={<Plus size={18} />} onClick={() => handleOpenModal()}>
            Nova categoria
          </Button>
          )
        }
      />

      <div className="max-w-md">
        <Input
          placeholder="Buscar categorias..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          icon={<Search className="h-4 w-4" />}
        />
      </div>

      {loading ? (
        <div className="ks-surface flex items-center justify-center py-16">
          <Loader2 className="w-6 h-6 animate-spin text-[var(--ks-color-primary)]" />
        </div>
      ) : filteredCategories.length === 0 ? (
        <div className="ks-surface ks-empty-state border-dashed">
          <div className="w-12 h-12 rounded-full bg-[rgba(10,192,214,0.1)] flex items-center justify-center mx-auto mb-3 text-[var(--ks-color-text-soft)]">
            <Layers size={24} />
          </div>
          <h3 className="ks-empty-state-title">Nenhuma categoria encontrada</h3>
          <p className="ks-empty-state-subtitle">
            Comece criando sua primeira categoria de produtos.
          </p>
          {podeMexerEmCategorias && (
            <Button variant="ghost" size="sm" onClick={() => handleOpenModal()}>
              Criar agora
            </Button>
          )}
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <AnimatePresence>
            {filteredCategories.map((category) => (
              <motion.div
                key={category.id}
                initial={{ opacity: 0, scale: 0.95 }}
                animate={{ opacity: 1, scale: 1 }}
                exit={{ opacity: 0, scale: 0.95 }}
                layout
                className={`ks-surface p-5 group relative ${!category.is_visible ? 'opacity-75 bg-slate-50' : ''}`}
              >
                <div className="flex justify-between items-start gap-3">
                  <div>
                    <div className="flex items-center gap-2">
                      <h3 className="text-base font-semibold text-[var(--ks-color-text-primary)]">
                        {category.name}
                      </h3>
                      {!category.is_visible && (
                        <span className="inline-flex items-center rounded-md bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600 ring-1 ring-inset ring-slate-500/10">
                          <EyeOff size={12} className="mr-1" />
                          Oculto
                        </span>
                      )}
                    </div>
                    <p className="text-sm text-[var(--ks-color-text-soft)] font-mono mt-1">
                      /{category.slug}
                    </p>
                    {category.parent_id && (
                      <p className="text-xs text-[var(--ks-color-text-soft)] mt-2">
                        {getCategoryPath(category)}
                      </p>
                    )}
                  </div>
                  <div className="flex gap-2 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity">
                    {podeMexerEmCategorias && (
                    <>
                    <button
                      onClick={() => handleOpenModal(category)}
                      className="p-2 text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-primary)] hover:bg-[rgba(244,245,255,0.9)] rounded-lg transition-colors"
                      title="Editar"
                    >
                      <Pencil size={16} />
                    </button>
                    <button
                      onClick={() => handleDelete(category.id)}
                      className="p-2 text-[var(--ks-color-text-soft)] hover:text-rose-600 hover:bg-rose-50 rounded-lg transition-colors"
                      title="Excluir"
                    >
                      <Trash2 size={16} />
                    </button>
                    </>
                    )}
                  </div>
                </div>
              </motion.div>
            ))}
          </AnimatePresence>
        </div>
      )}

      <CategoryFormModal
        open={isModalOpen}
        onClose={handleCloseModal}
        categories={categories}
        editingCategory={editingCategory}
        onSaved={async () => {
          await fetchCategories();
        }}
      />
    </div>
  );
}