import React from 'react';
import { useNavigate, useLocation, Outlet, Link } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Users, Link as LinkIcon, DollarSign, Activity } from 'lucide-react';
import { __ } from '@/lib/i18n';
import { useModules } from '@/hooks/useModules';
import { cn } from '@/lib/utils';
import { DocLink } from '@/components/DocLink';

export default function AffiliatesLayout() {
    const navigate = useNavigate();
    const location = useLocation();
    const { isEnabled } = useModules();

    // Show disabled state if affiliate module is off
    if (!isEnabled('affiliate')) {
        return (
            <div className="w-full space-y-6">
                <div>
                    <div className="flex items-center">
                        <h1 className="text-2xl font-bold tracking-tight">{__('Affiliate Program')}</h1>
                        <DocLink />
                    </div>
                    <p className="text-muted-foreground mt-2">{__('Affiliate module is disabled')}</p>
                </div>
                <div className="bg-yellow-50 dark:bg-yellow-950/20 border border-yellow-200 dark:border-yellow-900 rounded-lg p-6 text-center">
                    <Users className="h-12 w-12 text-yellow-600 mx-auto mb-3" />
                    <h3 className="font-semibold text-lg mb-2">{__('Affiliate Module Disabled')}</h3>
                    <p className="text-sm text-muted-foreground mb-4">
                        {__('The affiliate module is currently disabled. Enable it in Settings > Modules to use this feature.')}
                    </p>
                    <Button onClick={() => navigate('/settings/modules')}>
                        {__('Go to Module Settings')}
                    </Button>
                </div>
            </div>
        );
    }

    const navItems = [
        {
            id: 'list',
            label: __('All Affiliates'),
            icon: Users,
            path: '/marketing/affiliates/list',
            isActive: (path: string) => path.includes('/list')
        },
        {
            id: 'referrals',
            label: __('Referrals'),
            icon: LinkIcon,
            path: '/marketing/affiliates/referrals',
            isActive: (path: string) => path.includes('/referrals')
        },
        {
            id: 'payouts',
            label: __('Payouts'),
            icon: DollarSign,
            path: '/marketing/affiliates/payouts',
            isActive: (path: string) => path.includes('/payouts')
        }
    ];

    return (
        <div className="w-full space-y-6">
            <div>
                <div className="flex items-center">
                    <h1 className="text-2xl font-bold tracking-tight">{__('Affiliate Program')}</h1>
                    <DocLink />
                </div>
                <p className="text-muted-foreground mt-2">{__('Manage affiliates, track referrals, and process payouts')}</p>
            </div>

            <div className="flex flex-col lg:flex-row gap-6">
                {/* Sidebar Navigation */}
                <div className="w-full lg:w-56 flex-shrink-0 space-y-4">
                    <nav className="space-y-1">
                        {navItems.map((item) => {
                            const Icon = item.icon;
                            const active = item.isActive(location.pathname);
                            return (
                                <Link
                                    key={item.id}
                                    to={item.path}
                                    className={cn(
                                        'w-full text-left px-4 py-2.5 rounded-md text-sm font-medium transition-colors flex items-center gap-3',
                                        'outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
                                        active
                                            ? 'bg-primary text-primary-foreground hover:bg-primary/90'
                                            : 'text-muted-foreground hover:bg-muted hover:text-foreground active:bg-muted active:text-foreground focus:bg-muted focus:text-foreground'
                                    )}
                                >
                                    <Icon className="w-4 h-4" />
                                    {item.label}
                                </Link>
                            );
                        })}
                    </nav>
                </div>

                {/* Content Area */}
                <div className="flex-1 min-w-0">
                    <Outlet />
                </div>
            </div>
        </div>
    );
}
