"use client";

import { DashboardLayout } from '@/components/layout/DashboardLayout';
import { AgencyBranding } from '@/components/layout/AgencyBranding';
import AuthGuard from '@/components/auth/AuthGuard';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import {
    HomeIcon,
    UsersIcon,
    ListBulletIcon,
    UserCircleIcon,
} from '@heroicons/react/24/outline';

const CUSTOMER_MENU_ITEMS = [
    { id: 'dashboard', label: 'Dashboard', href: '/cliente/dashboard', icon: HomeIcon },
    {
        id: 'crm',
        label: 'CRM',
        href: '#',
        icon: UsersIcon,
        subItems: [
            { label: 'Leads', href: '/cliente/leads' },
            { label: 'Listas', href: '/cliente/listas' },
        ]
    },
    { id: 'perfil', label: 'Meu Perfil', href: '/cliente/perfil', icon: UserCircleIcon },
];

interface CustomerPortalLayoutProps {
    children: React.ReactNode;
}

export default function CustomerPortalLayout({ children }: CustomerPortalLayoutProps) {
    const router = useRouter();
    const [colors, setColors] = useState<{ primary: string; secondary: string } | null>(null);

    useEffect(() => {
        // Buscar cores da agência
        fetchBranding();
    }, []);

    const fetchBranding = async () => {
        try {
            const response = await fetch('/api/tenant/branding', {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                },
            });

            if (response.ok) {
                const data = await response.json();
                if (data.primary_color) {
                    setColors({
                        primary: data.primary_color,
                        secondary: data.secondary_color || data.primary_color,
                    });
                }
            }
        } catch (error) {
            console.error('Error fetching branding:', error);
        }
    };

    return (
        <AuthGuard allowedTypes={['customer']}>
            <AgencyBranding colors={colors} />
            <DashboardLayout menuItems={CUSTOMER_MENU_ITEMS}>
                {children}
            </DashboardLayout>
        </AuthGuard>
    );
}