'use client';

import React, { useState, useEffect, Fragment } from 'react';
import {
    PlusIcon,
    MagnifyingGlassIcon,
    FunnelIcon,
    Square3Stack3DIcon as PackageIcon,
    CurrencyDollarIcon,
    ExclamationTriangleIcon,
    TrashIcon,
    PencilSquareIcon,
    XMarkIcon,
    CheckIcon,
    TagIcon,
} from '@heroicons/react/24/outline';
import { erpApi, Product } from '@/lib/api-erp';
import { formatCurrency } from '@/lib/format';
import { useToast } from '@/components/layout/ToastContext';
import {
    PageHeader,
    StatsCard,
    DataTable,
    Input,
    Card,
    BulkActionBar,
    ConfirmDialog,
} from "@/components/ui";
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';

export default function ProductsPage() {
    const toast = useToast();
    const [products, setProducts] = useState<Product[]>([]);
    const [loading, setLoading] = useState(true);
    const [searchTerm, setSearchTerm] = useState('');
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [confirmOpen, setConfirmOpen] = useState(false);
    const [bulkConfirmOpen, setBulkConfirmOpen] = useState(false);
    const [productToDelete, setProductToDelete] = useState<string | null>(null);
    const [editingProduct, setEditingProduct] = useState<Product | null>(null);
    const [selectedIds, setSelectedIds] = useState<(string | number)[]>([]);

    const [formData, setFormData] = useState<Partial<Product>>({
        name: '',
        sku: '',
        description: '',
        price: 0,
        cost_price: 0,
        type: 'product',
        stock_quantity: 0,
        is_active: true
    });

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

    const fetchProducts = async (silent = false) => {
        try {
            if (!silent) setLoading(true);
            const data = await erpApi.getProducts();
            setProducts(data || []);
        } catch (error) {
            toast.error('Erro ao carregar', 'Não foi possível carregar os produtos');
        } finally {
            setLoading(false);
            setSelectedIds([]);
        }
    };

    const handleSave = async (e: React.FormEvent) => {
        e.preventDefault();
        try {
            if (editingProduct?.id) {
                await erpApi.updateProduct(editingProduct.id, formData);
                toast.success('Produto atualizado com sucesso!');
            } else {
                await erpApi.createProduct(formData);
                toast.success('Produto cadastrado com sucesso!');
            }
            setIsModalOpen(false);
            setEditingProduct(null);
            resetForm();
            await fetchProducts(true);
        } catch (error) {
            toast.error(editingProduct ? 'Erro ao atualizar produto' : 'Erro ao salvar produto');
        }
    };

    const handleDelete = (id: string) => {
        setProductToDelete(id);
        setConfirmOpen(true);
    };

    const handleConfirmDelete = async () => {
        if (!productToDelete) return;

        const originalProducts = [...products];
        const idToDelete = String(productToDelete);

        // Dynamic: remove instantly
        setProducts(prev => prev.filter(p => String(p.id) !== idToDelete));

        try {
            await erpApi.deleteProduct(idToDelete);
            toast.success('Exclusão completa', 'O item foi removido com sucesso.');
            setTimeout(() => fetchProducts(true), 500);
        } catch (error) {
            setProducts(originalProducts);
            toast.error('Erro ao excluir', 'Ocorreu um erro ao excluir o produto.');
        } finally {
            setConfirmOpen(false);
            setProductToDelete(null);
        }
    };

    const handleBulkDelete = async () => {
        if (selectedIds.length === 0) return;
        setBulkConfirmOpen(true);
    };

    const handleConfirmBulkDelete = async () => {
        if (selectedIds.length === 0) return;

        const originalProducts = [...products];
        const idsToDelete = selectedIds.map(String);

        // Dynamic: remove instantly
        setProducts(prev => prev.filter(p => !idsToDelete.includes(String(p.id))));
        const deletedCount = selectedIds.length;

        try {
            await Promise.all(idsToDelete.map(id => erpApi.deleteProduct(id)));
            toast.success('Exclusão completa', `${deletedCount} produtos excluídos com sucesso.`);
            setTimeout(() => fetchProducts(true), 500);
        } catch (error) {
            setProducts(originalProducts);
            toast.error('Erro ao excluir', 'Ocorreu um erro ao excluir alguns produtos.');
        } finally {
            setBulkConfirmOpen(false);
            setSelectedIds([]);
        }
    };

    const handleEdit = (product: Product) => {
        setEditingProduct(product);
        setFormData({
            name: product.name,
            sku: product.sku,
            description: product.description,
            price: Number(product.price),
            cost_price: Number(product.cost_price),
            type: product.type,
            stock_quantity: Number(product.stock_quantity),
            is_active: product.is_active
        });
        setIsModalOpen(true);
    };

    const resetForm = () => {
        setFormData({
            name: '',
            sku: '',
            description: '',
            price: 0,
            cost_price: 0,
            type: 'product',
            stock_quantity: 0,
            is_active: true
        });
    };

    const filteredProducts = products.filter(p =>
        p.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        (p.sku || '').toLowerCase().includes(searchTerm.toLowerCase())
    );

    const totalStockValue = products.reduce((sum, p) => sum + (Number(p.price) * Number(p.stock_quantity)), 0);
    const lowStockItems = products.filter(p => p.type === 'product' && p.stock_quantity < 5).length;
    const servicesCount = products.filter(p => p.type === 'service').length;

    const columns = [
        {
            header: 'Produto / SKU',
            accessor: (row: Product) => (
                <div className="flex items-center gap-3">
                    <div className={`p-2 rounded-lg ${row.type === 'product' ? 'bg-indigo-50 text-indigo-600' : 'bg-amber-50 text-amber-600'}`}>
                        {row.type === 'product' ? <PackageIcon className="w-5 h-5" /> : <TagIcon className="w-5 h-5" />}
                    </div>
                    <div className="flex flex-col">
                        <span className="font-bold text-zinc-900 dark:text-white uppercase tracking-tight">{row.name}</span>
                        <span className="text-xs text-zinc-400 font-black tracking-widest">{row.sku || 'SEM SKU'}</span>
                    </div>
                </div>
            )
        },
        {
            header: 'Tipo',
            accessor: (row: Product) => (
                <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider ${row.type === 'product' ? 'bg-indigo-100 text-indigo-700' : 'bg-amber-100 text-amber-700'}`}>
                    {row.type === 'product' ? 'Produto' : 'Serviço'}
                </span>
            )
        },
        {
            header: 'Estoque',
            accessor: (row: Product) => (
                row.type === 'product' ? (
                    <div className="flex items-center gap-2">
                        <span className={`font-black text-sm ${row.stock_quantity < 5 ? 'text-rose-500' : 'text-zinc-900 dark:text-white'}`}>
                            {row.stock_quantity}
                        </span>
                        {row.stock_quantity < 5 && (
                            <ExclamationTriangleIcon className="w-4 h-4 text-rose-500" />
                        )}
                    </div>
                ) : (
                    <span className="text-zinc-400 text-xs">N/A</span>
                )
            )
        },
        {
            header: 'Preço de Venda',
            className: 'text-right',
            accessor: (row: Product) => (
                <span className="font-black text-zinc-900 dark:text-white">
                    {formatCurrency(row.price)}
                </span>
            )
        },
        {
            header: '',
            className: 'text-right',
            accessor: (row: Product) => (
                <div className="flex justify-end gap-2">
                    <button
                        onClick={(e) => { e.stopPropagation(); handleEdit(row); }}
                        className="p-2 text-zinc-400 hover:text-brand-600 dark:hover:text-brand-400 transition-all"
                    >
                        <PencilSquareIcon className="w-5 h-5" />
                    </button>
                    <button
                        onClick={(e) => { e.stopPropagation(); handleDelete(row.id); }}
                        className="p-2 text-zinc-400 hover:text-rose-600 dark:hover:text-rose-400 transition-all"
                    >
                        <TrashIcon className="w-5 h-5" />
                    </button>
                </div>
            )
        }
    ];

    return (
        <div className="space-y-6">
            <PageHeader
                title="Produtos & Estoque"
                description="Controle seu inventário, gerencie preços e acompanhe a disponibilidade de itens."
                primaryAction={{
                    label: "Novo Item",
                    icon: <PlusIcon className="w-5 h-5" />,
                    onClick: () => {
                        setEditingProduct(null);
                        resetForm();
                        setIsModalOpen(true);
                    }
                }}
            />

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <StatsCard
                    title="Total em Estoque"
                    value={formatCurrency(totalStockValue)}
                    icon={<CurrencyDollarIcon className="w-6 h-6 text-emerald-500" />}
                />
                <StatsCard
                    title="Itens com Estoque Baixo"
                    value={lowStockItems}
                    icon={<ExclamationTriangleIcon className="w-6 h-6 text-rose-500" />}
                />
                <StatsCard
                    title="Total de Produtos"
                    value={products.filter(p => p.type === 'product').length}
                    icon={<PackageIcon className="w-6 h-6 text-indigo-500" />}
                />
                <StatsCard
                    title="Total de Serviços"
                    value={servicesCount}
                    icon={<TagIcon className="w-6 h-6 text-amber-500" />}
                />
            </div>

            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                <div className="relative w-full sm:w-96">
                    <MagnifyingGlassIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-400" />
                    <Input
                        placeholder="Buscar por nome ou SKU..."
                        className="pl-10 h-10 border-zinc-200 dark:border-zinc-800"
                        value={searchTerm}
                        onChange={(e) => setSearchTerm(e.target.value)}
                    />
                </div>
                <div className="flex gap-2 w-full sm:w-auto">
                    <button className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl text-sm font-bold text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-all">
                        <FunnelIcon className="w-4 h-4" />
                        Filtros
                    </button>
                </div>
            </div>

            <Card noPadding className="overflow-hidden">
                <DataTable
                    selectable
                    selectedIds={selectedIds}
                    onSelectionChange={setSelectedIds}
                    columns={columns}
                    data={filteredProducts}
                    isLoading={loading}
                />
            </Card>

            <Transition show={isModalOpen} as={Fragment}>
                <Dialog as="div" className="relative z-50" onClose={() => setIsModalOpen(false)}>
                    <TransitionChild
                        as={Fragment}
                        enter="ease-out duration-300"
                        enterFrom="opacity-0"
                        enterTo="opacity-100"
                        leave="ease-in duration-200"
                        leaveFrom="opacity-100"
                        leaveTo="opacity-0"
                    >
                        <div className="fixed inset-0 bg-black/40 backdrop-blur-sm" />
                    </TransitionChild>

                    <div className="fixed inset-0 overflow-y-auto">
                        <div className="flex min-h-full items-center justify-center p-4 text-center">
                            <TransitionChild
                                as={Fragment}
                                enter="ease-out duration-300"
                                enterFrom="opacity-0 scale-95 translate-y-4"
                                enterTo="opacity-100 scale-100 translate-y-0"
                                leave="ease-in duration-200"
                                leaveFrom="opacity-100 scale-100 translate-y-0"
                                leaveTo="opacity-0 scale-95 translate-y-4"
                            >
                                <DialogPanel className="w-full max-w-2xl transform overflow-hidden rounded-[32px] bg-white dark:bg-zinc-900 p-8 text-left align-middle shadow-2xl transition-all border border-gray-100 dark:border-zinc-800">
                                    <div className="flex justify-between items-center mb-8">
                                        <DialogTitle as="h3" className="text-xl font-bold text-zinc-900 dark:text-white">
                                            {editingProduct ? 'Editar Item' : 'Novo Produto/Serviço'}
                                        </DialogTitle>
                                        <button
                                            onClick={() => setIsModalOpen(false)}
                                            className="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-full transition-all"
                                        >
                                            <XMarkIcon className="w-6 h-6 text-zinc-400" />
                                        </button>
                                    </div>

                                    <form onSubmit={handleSave} className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        <div className="md:col-span-2">
                                            <div className="flex gap-4">
                                                <button
                                                    type="button"
                                                    onClick={() => setFormData({ ...formData, type: 'product' })}
                                                    className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-2xl border transition-all font-bold text-sm ${formData.type === 'product' ? 'border-indigo-500 bg-indigo-50 text-indigo-600' : 'border-zinc-200 dark:border-zinc-700 text-zinc-400'}`}
                                                >
                                                    <PackageIcon className="w-5 h-5" />
                                                    Produto
                                                </button>
                                                <button
                                                    type="button"
                                                    onClick={() => setFormData({ ...formData, type: 'service' })}
                                                    className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-2xl border transition-all font-bold text-sm ${formData.type === 'service' ? 'border-amber-500 bg-amber-50 text-amber-600' : 'border-zinc-200 dark:border-zinc-700 text-zinc-400'}`}
                                                >
                                                    <TagIcon className="w-5 h-5" />
                                                    Serviço
                                                </button>
                                            </div>
                                        </div>

                                        <div className="md:col-span-2">
                                            <Input
                                                label="Nome do Item"
                                                required
                                                placeholder="Ex: Teclado Mecânico RGB"
                                                value={formData.name}
                                                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                                                className="bg-zinc-50 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700"
                                            />
                                        </div>

                                        <Input
                                            label="SKU / Código"
                                            placeholder="Ex: PROD-001"
                                            value={formData.sku}
                                            onChange={(e) => setFormData({ ...formData, sku: e.target.value })}
                                            className="bg-zinc-50 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700"
                                        />

                                        <Input
                                            label="Estoque Inicial"
                                            type="number"
                                            disabled={formData.type === 'service'}
                                            placeholder="0"
                                            value={formData.stock_quantity}
                                            onChange={(e) => setFormData({ ...formData, stock_quantity: Number(e.target.value) })}
                                            className="bg-zinc-50 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700"
                                        />

                                        <Input
                                            label="Preço de Venda"
                                            type="number"
                                            step="0.01"
                                            required
                                            placeholder="0,00"
                                            value={formData.price}
                                            onChange={(e) => setFormData({ ...formData, price: Number(e.target.value) })}
                                            className="bg-zinc-50 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700"
                                        />

                                        <Input
                                            label="Preço de Custo"
                                            type="number"
                                            step="0.01"
                                            placeholder="0,00"
                                            value={formData.cost_price}
                                            onChange={(e) => setFormData({ ...formData, cost_price: Number(e.target.value) })}
                                            className="bg-zinc-50 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700"
                                        />

                                        <div className="md:col-span-2">
                                            <label className="block text-xs font-black text-zinc-400 uppercase tracking-widest mb-2">Descrição</label>
                                            <textarea
                                                className="w-full px-4 py-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-2xl focus:ring-2 focus:ring-brand-500/20 outline-none transition-all placeholder:text-zinc-400 text-sm h-32 resize-none"
                                                placeholder="Detalhes sobre o produto ou serviço..."
                                                value={formData.description}
                                                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                                            />
                                        </div>

                                        <div className="md:col-span-2 pt-6 flex justify-end gap-3">
                                            <button
                                                type="button"
                                                onClick={() => setIsModalOpen(false)}
                                                className="px-6 py-3 text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 font-bold transition-all"
                                            >
                                                Cancelar
                                            </button>
                                            <button
                                                type="submit"
                                                className="px-8 py-3 text-white rounded-2xl font-bold shadow-lg hover:opacity-90 transition-all flex items-center gap-2"
                                                style={{ background: 'var(--gradient)' }}
                                            >
                                                <CheckIcon className="w-5 h-5" />
                                                Salvar Item
                                            </button>
                                        </div>
                                    </form>
                                </DialogPanel>
                            </TransitionChild>
                        </div>
                    </div>
                </Dialog>
            </Transition>

            <ConfirmDialog
                isOpen={bulkConfirmOpen}
                onClose={() => setBulkConfirmOpen(false)}
                onConfirm={handleConfirmBulkDelete}
                title="Excluir Produtos Selecionados"
                message={`Tem certeza que deseja excluir os ${selectedIds.length} produtos selecionados? Esta ação não pode ser desfeita.`}
                confirmText="Excluir Tudo"
                variant="danger"
            />
            <ConfirmDialog
                isOpen={confirmOpen}
                onClose={() => {
                    setConfirmOpen(false);
                    setProductToDelete(null);
                }}
                onConfirm={handleConfirmDelete}
                title="Excluir Item"
                message="Tem certeza que deseja excluir este produto ou serviço? Esta ação não pode ser desfeita."
                confirmText="Excluir"
                cancelText="Cancelar"
                variant="danger"
            />

            <BulkActionBar
                selectedCount={selectedIds.length}
                onClearSelection={() => setSelectedIds([])}
                actions={[
                    {
                        label: "Excluir Selecionados",
                        icon: <TrashIcon className="w-5 h-5" />,
                        onClick: handleBulkDelete,
                        variant: 'danger'
                    }
                ]}
            />
        </div>
    );
}