import { useState, useEffect, useCallback } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Loader2, CreditCard, Crown, Users, Calendar, Settings, BarChart3, Mail, Palette, Shield } from "lucide-react";
import { toast } from "sonner";
import { usePro } from "@/contexts/pro-context";
import { GeneralTab } from "./components/general-tab";
import { RenewalsTab } from "./components/renewals-tab";
import { CustomerTab } from "./components/customer-tab";
import { AdminTab } from "./components/admin-tab";
import { EmailsTab } from "./components/emails-tab";
import { SubscriptionsListTab } from "./components/subscriptions-list-tab";
import { OverviewTab } from "./components/overview-tab";
import { CustomizationTab, SubscriptionCustomization, defaultSubscriptionCustomization } from "./components/customization-tab";
import { SubscriptionsUpgradeTab } from "./components/upgrade-tab";
import { FeatureHeader } from "@/components/feature-header";

interface EmailSettings {
    enabled: boolean;
    subject: string;
    heading: string;
    additionalContent: string;
    reminderDays?: number;
    reminderCount?: number;
}

interface SubscriptionsSettings {
    enabled: boolean;
    button_text: string;
    add_to_cart_text: string;
    allow_switching: boolean;
    switching_prorate: string;
    allow_early_renewal: boolean;
    early_renewal_days: number;
    customer_suspend: boolean;
    max_suspensions: number;
    customer_cancel: boolean;
    cancelled_status: string;
    failed_payment_action: string;
    retry_failed_payments: boolean;
    retry_interval_days: number;
    max_failed_payments: number;
    sync_renewals: boolean;
    sync_day: number;
    mixed_checkout: boolean;
    allow_quantity: boolean;
    // Buy Now / One-Time Purchase (PRO)
    buy_now_subscribe_label: string;
    buy_now_one_time_label: string;
    buy_now_toggle_style: string;
    buy_now_normal_bg: string;
    buy_now_normal_text: string;
    buy_now_normal_border: string;
    buy_now_hover_bg: string;
    buy_now_hover_text: string;
    buy_now_hover_border: string;
    buy_now_active_bg: string;
    buy_now_active_text: string;
    buy_now_active_border: string;
    buy_now_border_radius: number;
    // Customization settings
    customization: SubscriptionCustomization;
    // Email settings
    emails?: {
        [key: string]: EmailSettings;
    };
}

const defaultSettings: SubscriptionsSettings = {
    enabled: true,
    button_text: "Sign Up Now",
    add_to_cart_text: "Subscribe",
    allow_switching: true,
    switching_prorate: "yes",
    allow_early_renewal: true,
    early_renewal_days: 7,
    customer_suspend: true,
    max_suspensions: 3,
    customer_cancel: true,
    cancelled_status: "cancelled",
    failed_payment_action: "suspend",
    retry_failed_payments: true,
    retry_interval_days: 3,
    max_failed_payments: 3,
    sync_renewals: false,
    sync_day: 1,
    mixed_checkout: false,
    allow_quantity: false,
    buy_now_subscribe_label: "Subscribe & Save",
    buy_now_one_time_label: "Buy Once",
    buy_now_toggle_style: "pills",
    buy_now_normal_bg: "#f3f4f6",
    buy_now_normal_text: "#6b7280",
    buy_now_normal_border: "#e5e7eb",
    buy_now_hover_bg: "#e5e7eb",
    buy_now_hover_text: "#374151",
    buy_now_hover_border: "#d1d5db",
    buy_now_active_bg: "#002269",
    buy_now_active_text: "#ffffff",
    buy_now_active_border: "#002269",
    buy_now_border_radius: 8,
    customization: defaultSubscriptionCustomization,
    emails: {},
};

export function SubscriptionsSettings() {
    const { isPro } = usePro();
    const [settings, setSettings] = useState<SubscriptionsSettings>(defaultSettings);
    const [originalSettings, setOriginalSettings] = useState<SubscriptionsSettings>(defaultSettings);
    const [loading, setLoading] = useState(true);
    const [saving, setSaving] = useState(false);
    const [activeTab, setActiveTab] = useState("overview");

    // Check if there are unsaved changes
    const hasChanges = JSON.stringify(settings) !== JSON.stringify(originalSettings);

    useEffect(() => {
        // Only fetch settings if Pro user
        if (isPro) {
            fetchSettings();
        } else {
            setLoading(false);
        }
    }, [isPro]);

    const fetchSettings = async () => {
        try {
            const apiUrl = window.swiftCommerceData?.apiUrl || '/wp-json/swift-commerce/v1';
            const response = await fetch(`${apiUrl}/subscriptions/settings`, {
                headers: {
                    'X-WP-Nonce': window.swiftCommerceData?.restNonce || '',
                },
            });
            const data = await response.json();
            if (data.success) {
                const loadedSettings = {
                    ...defaultSettings,
                    ...data.settings,
                    // Deep-merge customization so new fields get defaults
                    customization: {
                        ...defaultSubscriptionCustomization,
                        ...(data.settings?.customization || {}),
                    },
                };
                setSettings(loadedSettings);
                setOriginalSettings(loadedSettings);
            }
        } catch (error) {
            console.error('Failed to fetch settings:', error);
        } finally {
            setLoading(false);
        }
    };

    const saveSettings = useCallback(async () => {
        setSaving(true);
        try {
            const apiUrl = window.swiftCommerceData?.apiUrl || '/wp-json/swift-commerce/v1';
            const response = await fetch(`${apiUrl}/subscriptions/settings`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-WP-Nonce': window.swiftCommerceData?.restNonce || '',
                },
                body: JSON.stringify(settings),
            });
            const data = await response.json();
            if (data.success) {
                setSettings(data.settings);
                setOriginalSettings(data.settings);
                toast.success("Settings saved", {
                    description: "Your subscription settings have been saved successfully."
                });
            }
        } catch (error) {
            console.error('Failed to save settings:', error);
            toast.error("Failed to save settings", {
                description: "Please try again or check your connection."
            });
        } finally {
            setSaving(false);
        }
    }, [settings]);

    const resetToDefaults = useCallback(() => {
        setSettings(defaultSettings);
    }, []);

    const handleSettingChange = (key: string, value: any) => {
        setSettings(prev => ({ ...prev, [key]: value } as SubscriptionsSettings));
    };

    const handleCustomizationChange = <K extends keyof SubscriptionCustomization>(key: K, value: SubscriptionCustomization[K]) => {
        setSettings(prev => ({ 
            ...prev, 
            customization: { ...prev.customization, [key]: value }
        }));
    };

    const resetCustomization = useCallback(() => {
        setSettings(prev => ({ ...prev, customization: defaultSubscriptionCustomization }));
    }, []);

    if (loading) {
        return (
            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
                <div className="flex items-center justify-center py-12">
                    <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
                </div>
            </div>
        );
    }

    return (
        <FeatureHeader
            icon={<CreditCard className="h-6 w-6" />}
            title="Subscriptions"
            description="Create and manage subscription products with recurring payments"
            documentationUrl="https://www.swiftcommerce.io/help/products/subscriptions/"
            enabled={settings.enabled}
            onEnabledChange={(enabled) => handleSettingChange('enabled', enabled)}
            hasChanges={hasChanges}
            isSaving={saving}
            onSave={saveSettings}
            onReset={resetToDefaults}
        >
            <Tabs value={activeTab} onValueChange={setActiveTab}>
                <TabsList>
                    <TabsTrigger value="overview" className="flex items-center gap-2">
                        <BarChart3 className="h-4 w-4" />
                        Overview
                    </TabsTrigger>
                    <TabsTrigger value="subscriptions" className="flex items-center gap-2">
                        <CreditCard className="h-4 w-4" />
                        Subscriptions
                    </TabsTrigger>
                    <TabsTrigger value="general" className="flex items-center gap-2">
                        <Settings className="h-4 w-4" />
                        General
                    </TabsTrigger>
                    <TabsTrigger value="renewals" className="flex items-center gap-2">
                        <Calendar className="h-4 w-4" />
                        Renewals
                    </TabsTrigger>
                    <TabsTrigger value="customer" className="flex items-center gap-2">
                        <Users className="h-4 w-4" />
                        Customer
                    </TabsTrigger>
                    <TabsTrigger value="admin" className="flex items-center gap-2">
                        <Shield className="h-4 w-4" />
                        Admin
                    </TabsTrigger>
                    <TabsTrigger value="customization" className="flex items-center gap-2">
                        <Palette className="h-4 w-4" />
                        Appearance
                    </TabsTrigger>
                    <TabsTrigger value="emails" className="flex items-center gap-2">
                        <Mail className="h-4 w-4" />
                        Emails
                    </TabsTrigger>
                    {!isPro && (
                        <TabsTrigger
                            value="upgrade"
                            className="gap-2 text-white hover:text-white data-[state=active]:text-white data-[state=active]:shadow-none"
                            style={{ backgroundColor: '#002269' }}
                        >
                            <Crown className="h-4 w-4" />
                            Upgrade to Pro
                        </TabsTrigger>
                    )}
                </TabsList>

                <TabsContent value="overview">
                    <OverviewTab />
                </TabsContent>

                <TabsContent value="subscriptions">
                    <SubscriptionsListTab />
                </TabsContent>

                <TabsContent value="general">
                    <GeneralTab 
                        settings={settings} 
                        onSettingChange={handleSettingChange}
                        saving={saving}
                    />
                </TabsContent>

                <TabsContent value="renewals">
                    <RenewalsTab 
                        settings={settings} 
                        onSettingChange={handleSettingChange}
                        saving={saving}
                    />
                </TabsContent>

                <TabsContent value="customer">
                    <CustomerTab 
                        settings={settings} 
                        onSettingChange={handleSettingChange}
                        saving={saving}
                    />
                </TabsContent>

                <TabsContent value="admin">
                    <AdminTab 
                        settings={settings} 
                        onSettingChange={handleSettingChange}
                        saving={saving}
                    />
                </TabsContent>

                <TabsContent value="customization">
                    <CustomizationTab 
                        settings={{
                            button_text: settings.button_text,
                            add_to_cart_text: settings.add_to_cart_text,
                            buy_now_subscribe_label: settings.buy_now_subscribe_label,
                            buy_now_one_time_label: settings.buy_now_one_time_label,
                            buy_now_toggle_style: settings.buy_now_toggle_style,
                            buy_now_normal_bg: settings.buy_now_normal_bg,
                            buy_now_normal_text: settings.buy_now_normal_text,
                            buy_now_normal_border: settings.buy_now_normal_border,
                            buy_now_hover_bg: settings.buy_now_hover_bg,
                            buy_now_hover_text: settings.buy_now_hover_text,
                            buy_now_hover_border: settings.buy_now_hover_border,
                            buy_now_active_bg: settings.buy_now_active_bg,
                            buy_now_active_text: settings.buy_now_active_text,
                            buy_now_active_border: settings.buy_now_active_border,
                            buy_now_border_radius: settings.buy_now_border_radius,
                        }}
                        customization={settings.customization}
                        onSettingChange={handleSettingChange}
                        onCustomizationChange={handleCustomizationChange}
                        resetCustomization={resetCustomization}
                        isPro={isPro}
                    />
                </TabsContent>

                <TabsContent value="emails">
                    <EmailsTab 
                        settings={settings} 
                        onSettingChange={handleSettingChange}
                        saving={saving}
                    />
                </TabsContent>

                {!isPro && (
                    <TabsContent value="upgrade">
                        <SubscriptionsUpgradeTab />
                    </TabsContent>
                )}
            </Tabs>
        </FeatureHeader>
    );
}