import React, { useState } from 'react';
import { useNavigate, useLocation, Outlet, Link } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Mail, Users, Send } from 'lucide-react';
import { __ } from '@/lib/i18n';
import { useModules } from '@/hooks/useModules';
import { cn } from '@/lib/utils'; // Assuming cn exists, widely used in ShadCN

import { DocLink } from '@/components/DocLink';

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

    // Show disabled state if newsletter module is off
    if (!isEnabled('newsletter')) {
        return (
            <div className="w-full space-y-6">
                <div>
                    <div className="flex items-center">
                        <h1 className="text-2xl font-bold tracking-tight">{__('Newsletter')}</h1>
                        <DocLink />
                    </div>
                    <p className="text-muted-foreground mt-2">{__('Newsletter 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">
                    <Mail className="h-12 w-12 text-yellow-600 mx-auto mb-3" />
                    <h3 className="font-semibold text-lg mb-2">{__('Newsletter Module Disabled')}</h3>
                    <p className="text-sm text-muted-foreground mb-4">
                        {__('The newsletter 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: 'subscribers',
            label: __('Subscribers'),
            icon: Users,
            path: '/marketing/newsletter/subscribers',
            isActive: (path: string) => path.includes('/subscribers')
        },
        {
            id: 'campaigns',
            label: __('Campaigns'),
            icon: Send,
            path: '/marketing/newsletter/campaigns',
            isActive: (path: string) => path.includes('/campaigns')
        }
    ];

    return (
        <div className="w-full space-y-6">
            <div>
                <div className="flex items-center">
                    <h1 className="text-2xl font-bold tracking-tight">{__('Newsletter')}</h1>
                    <DocLink />
                </div>
                <p className="text-muted-foreground mt-2">{__('Manage subscribers and send email campaigns')}</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',
                                        // Focus styles matching ShadCN buttons (ring only on keyboard focus)
                                        '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 className="pt-4 border-t">
                        <Button
                            className="w-full justify-start"
                            variant="outline"
                            onClick={() => navigate('/marketing/newsletter/campaigns/new')}
                        >
                            <span className="mr-2">+</span>
                            {__('New Campaign')}
                        </Button>
                    </div>
                </div>

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