'use client';

import React, { useState, useEffect, Fragment } from 'react';
import {
    PlusIcon,
    MagnifyingGlassIcon,
    FunnelIcon,
    ShoppingBagIcon,
    CalendarIcon,
    CurrencyDollarIcon,
    UserIcon,
    CheckCircleIcon,
    ClockIcon,
    XMarkIcon,
    EyeIcon,
    TrashIcon,
    ExclamationTriangleIcon
} from '@heroicons/react/24/outline';
import { ConfirmDialog } from "@/components/ui";
import { erpApi, Order, Entity } from '@/lib/api-erp';
import { formatCurrency } from '@/lib/format';
import { useToast } from '@/components/layout/ToastContext';
import {
    PageHeader,
    StatsCard,
    DataTable,
    Input,
    Card,
    BulkActionBar,
} from "@/components/ui";
import { format } from 'date-fns';

export default function OrdersPage() {
    const toast = useToast();
    const [orders, setOrders] = useState<Order[]>([]);
    const [entities, setEntities] = useState<Entity[]>([]);
    const [loading, setLoading] = useState(true);
    const [searchTerm, setSearchTerm] = useState('');
    const [selectedIds, setSelectedIds] = useState<(string | number)[]>([]);
    const [confirmOpen, setConfirmOpen] = useState(false);
    const [bulkConfirmOpen, setBulkConfirmOpen] = useState(false);
    const [orderToDelete, setOrderToDelete] = useState<string | null>(null);

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

    const fetchData = async (silent = false) => {
        try {
            if (!silent) setLoading(true);
            const [ordersData, entitiesData] = await Promise.all([
                erpApi.getOrders(),
                erpApi.getEntities()
            ]);
            setOrders(ordersData || []);
            setEntities(entitiesData || []);
        } catch (error) {
            toast.error('Erro ao carregar', 'Não foi possível carregar os pedidos');
        } finally {
            setLoading(false);
            setSelectedIds([]);
        }
    };

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

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

        const originalOrders = [...orders];
        const idsToDelete = selectedIds.map(String);

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

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

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

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

        const originalOrders = [...orders];
        const idToDelete = String(orderToDelete);

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

        try {
            await erpApi.deleteOrder(idToDelete);
            toast.success('Exclusão completa', 'O pedido foi removido com sucesso.');
            setTimeout(() => fetchData(true), 500);
        } catch (error) {
            setOrders(originalOrders);
            toast.error('Erro ao excluir', 'Ocorreu um erro ao excluir o pedido.');
        } finally {
            setConfirmOpen(false);
            setOrderToDelete(null);
        }
    };

    const filteredOrders = orders.filter(o => {
        const entityName = entities.find(e => e.id === o.entity_id)?.name || '';
        const searchStr = searchTerm.toLowerCase();
        return String(o.id).toLowerCase().includes(searchStr) ||
            entityName.toLowerCase().includes(searchStr);
    });

    const totalRevenue = orders.filter(o => o.status !== 'cancelled').reduce((sum, o) => sum + Number(o.total_amount), 0);
    const pendingOrders = orders.filter(o => o.status === 'confirmed').length;
    const completedOrders = orders.filter(o => o.status === 'completed').length;

    const columns = [
        {
            header: 'Pedido / Data',
            accessor: (row: Order) => (
                <div className="flex flex-col">
                    <span className="font-bold text-zinc-900 dark:text-white uppercase text-xs">#{row.id.slice(0, 8)}</span>
                    <div className="flex items-center gap-1 text-[10px] text-zinc-400 font-bold">
                        <CalendarIcon className="w-3 h-3" />
                        {row.created_at ? format(new Date(row.created_at), 'dd/MM/yyyy HH:mm') : '-'}
                    </div>
                </div>
            )
        },
        {
            header: 'Cliente',
            accessor: (row: Order) => (
                <div className="flex items-center gap-2">
                    <div className="p-1.5 rounded-lg bg-zinc-100 dark:bg-zinc-800 text-zinc-500">
                        <UserIcon className="w-4 h-4" />
                    </div>
                    <span className="text-sm font-semibold text-zinc-900 dark:text-white">
                        {entities.find(e => e.id === row.entity_id)?.name || 'Consumidor Final'}
                    </span>
                </div>
            )
        },
        {
            header: 'Status',
            accessor: (row: Order) => {
                const colors = {
                    draft: 'bg-zinc-100 text-zinc-700',
                    confirmed: 'bg-blue-100 text-blue-700',
                    completed: 'bg-emerald-100 text-emerald-700',
                    cancelled: 'bg-rose-100 text-rose-700'
                };
                const labels = {
                    draft: 'Rascunho',
                    confirmed: 'Confirmado',
                    completed: 'Concluído',
                    cancelled: 'Cancelado'
                };
                return (
                    <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-black uppercase tracking-wider ${colors[row.status as keyof typeof colors]}`}>
                        {labels[row.status as keyof typeof labels]}
                    </span>
                );
            }
        },
        {
            header: 'Total',
            className: 'text-right',
            accessor: (row: Order) => (
                <span className="font-black text-zinc-900 dark:text-white">
                    {formatCurrency(row.total_amount)}
                </span>
            )
        },
        {
            header: '',
            className: 'text-right',
            accessor: (row: Order) => (
                <div className="flex justify-end gap-2">
                    <button className="p-2 text-zinc-400 hover:text-brand-600 dark:hover:text-brand-400">
                        <EyeIcon 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="Pedidos & Vendas"
                description="Acompanhe suas vendas, gerencie orçamentos e controle o fluxo de pedidos."
                primaryAction={{
                    label: "Novo Pedido",
                    icon: <PlusIcon className="w-5 h-5" />,
                    onClick: () => toast.error('Funcionalidade em desenvolvimento')
                }}
            />

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <StatsCard
                    title="Receita de Vendas"
                    value={formatCurrency(totalRevenue)}
                    icon={<CurrencyDollarIcon className="w-6 h-6 text-emerald-500" />}
                />
                <StatsCard
                    title="Pedidos Pendentes"
                    value={pendingOrders}
                    icon={<ClockIcon className="w-6 h-6 text-blue-500" />}
                />
                <StatsCard
                    title="Pedidos Concluídos"
                    value={completedOrders}
                    icon={<CheckCircleIcon className="w-6 h-6 text-emerald-500" />}
                />
                <StatsCard
                    title="Total de Pedidos"
                    value={orders.length}
                    icon={<ShoppingBagIcon className="w-6 h-6 text-indigo-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 cliente ou ID do pedido..."
                        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
                    isLoading={loading}
                    selectedIds={selectedIds}
                    onSelectionChange={setSelectedIds}
                    columns={columns}
                    data={filteredOrders}
                />
            </Card>

            <ConfirmDialog
                isOpen={bulkConfirmOpen}
                onClose={() => setBulkConfirmOpen(false)}
                onConfirm={handleConfirmBulkDelete}
                title="Excluir Pedidos Selecionados"
                message={`Tem certeza que deseja excluir os ${selectedIds.length} pedidos selecionados? Esta ação não pode ser desfeita.`}
                confirmText="Excluir Tudo"
                variant="danger"
            />

            <ConfirmDialog
                isOpen={confirmOpen}
                onClose={() => {
                    setConfirmOpen(false);
                    setOrderToDelete(null);
                }}
                onConfirm={handleConfirmDelete}
                title="Excluir Pedido"
                message="Tem certeza que deseja excluir este pedido? 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>
    );
}