import React, { useState, useEffect } from 'react';
import { useSearchParams, useNavigate } from 'react-router-dom';
import { SettingsLayout } from '@/routes/Settings/components/SettingsLayout';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Button } from '@/components/ui/button';
import { Mail } from 'lucide-react';
import { __ } from '@/lib/i18n';
import { useModules } from '@/hooks/useModules';
import Subscribers from './Subscribers';
import Campaigns from './Campaigns';

export default function Newsletter() {
    const [searchParams, setSearchParams] = useSearchParams();
    const [activeTab, setActiveTab] = useState('subscribers');
    const navigate = useNavigate();
    const { isEnabled } = useModules();

    // Check for tab query param
    useEffect(() => {
        const tabParam = searchParams.get('tab');
        if (tabParam && ['subscribers', 'campaigns'].includes(tabParam)) {
            setActiveTab(tabParam);
        }
    }, [searchParams]);

    // Update URL when tab changes
    const handleTabChange = (value: string) => {
        setActiveTab(value);
        setSearchParams({ tab: value });
    };

    // Show disabled state if newsletter module is off
    if (!isEnabled('newsletter')) {
        return (
            <SettingsLayout
                title={__('Newsletter')}
                description={__('Newsletter module is disabled')}
            >
                <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>
            </SettingsLayout>
        );
    }

    return (
        <SettingsLayout
            title={__('Newsletter')}
            description={__('Manage subscribers and send email campaigns')}
        >
            <Tabs value={activeTab} onValueChange={handleTabChange} className="space-y-6">
                <TabsList className="grid w-full max-w-md grid-cols-2">
                    <TabsTrigger value="subscribers">{__('Subscribers')}</TabsTrigger>
                    <TabsTrigger value="campaigns">{__('Campaigns')}</TabsTrigger>
                </TabsList>

                <TabsContent value="subscribers" className="space-y-4 mt-6">
                    <Subscribers />
                </TabsContent>

                <TabsContent value="campaigns" className="space-y-4 mt-6">
                    <Campaigns />
                </TabsContent>
            </Tabs>
        </SettingsLayout>
    );
}