'use client';

import { DashboardLayout } from '@/components/layout/DashboardLayout';
import { AgencyBranding } from '@/components/layout/AgencyBranding';
import AuthGuard from '@/components/auth/AuthGuard';
import { CRMFilterProvider } from '@/contexts/CRMFilterContext';
import { useState, useEffect } from 'react';
import { getUser } from '@/lib/auth';
import {
    HomeIcon,
    RocketLaunchIcon,
    UserPlusIcon,
    RectangleStackIcon,
    UsersIcon,
    MegaphoneIcon,
    BanknotesIcon,
    CubeIcon,
    ShoppingCartIcon,
    ArrowDownCircleIcon,
    ChartBarIcon,
    WalletIcon,
    UserGroupIcon,
    ArchiveBoxIcon,
    AdjustmentsHorizontalIcon,
    ArrowTrendingUpIcon,
    ArrowTrendingDownIcon,
    DocumentTextIcon,
    ShoppingBagIcon
} from '@heroicons/react/24/outline';

const AGENCY_MENU_ITEMS = [
    { id: 'dashboard', label: 'Dashboard', href: '/dashboard', icon: HomeIcon },
    {
        id: 'documentos',
        label: 'Documentos',
        href: '/documentos',
        icon: DocumentTextIcon,
        requiredSolution: 'documentos'
    },
    {
        id: 'crm',
        label: 'CRM',
        href: '/crm',
        icon: RocketLaunchIcon,
        requiredSolution: 'crm',
        subItems: [
            { label: 'Visão Geral', href: '/crm', icon: HomeIcon },
            { label: 'Funis de Vendas', href: '/crm/funis', icon: RectangleStackIcon },
            { label: 'Clientes', href: '/crm/clientes', icon: UsersIcon },
            { label: 'Campanhas', href: '/crm/campanhas', icon: MegaphoneIcon },
            { label: 'Leads', href: '/crm/leads', icon: UserPlusIcon },
        ]
    },
    {
        id: 'erp',
        label: 'ERP',
        href: '/erp',
        icon: BanknotesIcon,
        requiredSolution: 'erp',
        subItems: [
            { label: 'Visão Geral', href: '/erp', icon: ChartBarIcon },
            { label: 'Produtos e Estoque', href: '/erp/estoque', icon: ArchiveBoxIcon },
            { label: 'Pedidos e Vendas', href: '/erp/pedidos', icon: ShoppingBagIcon },
            { label: 'Caixa', href: '/erp/caixa', icon: WalletIcon },
            { label: 'Contas a Receber', href: '/erp/receber', icon: ArrowTrendingUpIcon },
            { label: 'Contas a Pagar', href: '/erp/pagar', icon: ArrowTrendingDownIcon },
        ]
    },
];

interface AgencyLayoutClientProps {
    children: React.ReactNode;
    colors?: {
        primary: string;
        secondary: string;
    } | null;
}

export function AgencyLayoutClient({ children, colors }: AgencyLayoutClientProps) {
    const [filteredMenuItems, setFilteredMenuItems] = useState(AGENCY_MENU_ITEMS);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchTenantSolutions = async () => {
            try {
                console.log('🔍 Buscando soluções do tenant...');
                const response = await fetch('/api/tenant/solutions', {
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    },
                });

                console.log('📡 Response status:', response.status);

                if (response.ok) {
                    const data = await response.json();
                    console.log('📦 Dados recebidos:', data);
                    const solutions = data.solutions || [];
                    console.log('✅ Soluções:', solutions);

                    // Mapear slugs de solutions para IDs de menu
                    const solutionSlugs = solutions.map((s: any) => s.slug.toLowerCase());
                    console.log('🏷️ Slugs das soluções:', solutionSlugs);

                    // Sempre mostrar dashboard + soluções disponíveis
                    // Segurança Máxima: ERP só para ADMIN_AGENCIA
                    const user = getUser();
                    const filtered = AGENCY_MENU_ITEMS.filter(item => {
                        if (item.id === 'dashboard') return true;

                        // ERP restrito a administradores da agência
                        if (item.id === 'erp' && user?.role !== 'ADMIN_AGENCIA') {
                            return false;
                        }

                        const requiredSolution = (item as any).requiredSolution;
                        const hasSolution = solutionSlugs.includes((requiredSolution || item.id).toLowerCase());

                        // Temporariamente forçar a exibição de Documentos para debug
                        if (item.id === 'documentos') return true;

                        return hasSolution;
                    });

                    console.log('📋 Menu filtrado:', filtered.map(i => i.id));
                    setFilteredMenuItems(filtered);
                } else {
                    console.error('❌ Erro na resposta:', response.status);
                    // Em caso de erro, mostrar todos (fallback)
                    setFilteredMenuItems(AGENCY_MENU_ITEMS);
                }
            } catch (error) {
                console.error('❌ Error fetching solutions:', error);
                // Em caso de erro, mostrar todos (fallback)
                setFilteredMenuItems(AGENCY_MENU_ITEMS);
            } finally {
                setLoading(false);
            }
        };

        fetchTenantSolutions();
    }, []);

    return (
        <AuthGuard allowedTypes={['agency_user']}>
            <CRMFilterProvider>
                <AgencyBranding colors={colors} />
                <DashboardLayout menuItems={loading ? [AGENCY_MENU_ITEMS[0]] : filteredMenuItems}>
                    {children}
                </DashboardLayout>
            </CRMFilterProvider>
        </AuthGuard>
    );
}