import { useState, useEffect, useCallback } from 'react'
import type { DashboardData, CampaignsData } from './types';
import CampaignList from './components/campaigns/CampaignList'
import CampaignWizard from './components/campaigns/CampaignWizard'
import { toast } from "sonner"
import { cn } from "@/lib/utils"
import {
    SettingsLayout,
    SettingsHeader
} from './components/ui/settings-ui';

export default function Campaigns({ data: dashboardData }: { data: DashboardData }) {


    const [view, setView] = useState<'list' | 'create' | 'edit'>('list')
    const [prevSection, setPrevSection] = useState(dashboardData.global.section)

    if (dashboardData.global.section !== prevSection) {
        setPrevSection(dashboardData.global.section);
        const section = dashboardData.global.section;
        if (section === 'campaigns_new') {
            setView('create');
        } else if (section === 'campaigns') {
            const urlParams = new URLSearchParams(window.location.search);
            if (urlParams.get('action') !== 'edit') {
                setView('list');
            }
        }
    }
    const [data, setData] = useState<CampaignsData | null>(dashboardData?.campaignsData as unknown as CampaignsData)
    const [loading, setLoading] = useState(!dashboardData?.campaignsData)
    const [selectedCampaignId, setSelectedCampaignId] = useState<string | number | null>(null)

    const apiRestUrl = dashboardData?.global?.apiRestUrl;
    const wpRestNonce = dashboardData?.global?.wpRestNonce;

    const fetchCampaigns = useCallback(async () => {
        if (!apiRestUrl) return;

        setLoading(true)
        try {
            const res = await fetch(`${apiRestUrl}/campaigns`, {
                headers: {
                    'X-WP-Nonce': wpRestNonce
                }
            })
            const json = await res.json()
            if (json.success) {
                setData(json.data || json) // Some endpoints return data directly or wrapped
            } else {
                toast.error("Failed to load campaigns: " + (json.message || 'Unknown error'))
            }
        } catch {
            toast.error("Network error while loading campaigns.")
        } finally {
            setLoading(false)
        }
    }, [apiRestUrl, wpRestNonce, setLoading, setData])

    useEffect(() => {
        if (dashboardData?.global?.apiRestUrl && !dashboardData?.campaignsData) {
            const timer = setTimeout(() => {
                fetchCampaigns()
            }, 0);
            return () => clearTimeout(timer);
        }
    }, [dashboardData?.global?.apiRestUrl, dashboardData?.campaignsData, fetchCampaigns])

    const dStat = dashboardData?.domainStatus || window.wawpDashboardData?.domainStatus;
    const cSec = dashboardData?.global?.section || window.wawpDashboardData?.currentSection;
    if (dStat && dStat !== 'active' && cSec !== 'account') return null;



    const setViewAndUrl = (newView: 'list' | 'create' | 'edit') => {
        setView(newView)
        const section = newView === 'create' ? 'campaigns_new' : 'campaigns';
        const url = `${window.location.pathname}?page=wawp&wawp_section=${section}`;

        window.history.pushState({ section }, '', url);
        window.dispatchEvent(new CustomEvent('wawp-navigate', { detail: section }));
    }

    const handleAction = async (action: string, id: string | number | string[]) => {
        if (action === 'edit') {
            setSelectedCampaignId(id as string)
            setViewAndUrl('edit')
            return
        }

        if (action === 'delete') {
            await handleDelete(id as string[])
            return
        }

        if (action === 'rerun') {
            await handleRerun(id as string)
            return
        }

        if (action === 'pause' || action === 'resume') {
            await handleToggleStatus(id as string, action === 'pause' ? 1 : 0)
            return
        }

        if (action === 'approve') {
            await handleApproveRisky(id as string)
            return
        }
    }

    const handleToggleStatus = async (id: string | number, pauseVal: number) => {
        try {
            const res = await fetch(`${dashboardData.global.apiRestUrl}/campaigns/${id}/toggle`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-WP-Nonce': dashboardData.global.wpRestNonce
                },
                body: JSON.stringify({ pause_val: pauseVal })
            })
            const json = await res.json()
            if (json.success) {
                toast.success(pauseVal === 1 ? "Campaign paused." : "Campaign resumed!")
                fetchCampaigns()
            } else {
                toast.error(json.message || "Failed to update status.")
            }
        } catch {
            toast.error("Network error while updating status.")
        }
    }

    const handleApproveRisky = async (id: string) => {
        if (!confirm("Are you sure you want to approve this high-volume run?")) return

        try {
            const res = await fetch(`${dashboardData.global.apiRestUrl}/campaigns/${id}/approve-risky`, {
                method: 'POST',
                headers: {
                    'X-WP-Nonce': dashboardData.global.wpRestNonce
                }
            })
            const json = await res.json()
            if (json.success) {
                toast.success("Campaign approved and scheduled!")
                fetchCampaigns()
            } else {
                toast.error("Approval failed: " + (json.message || 'Unknown error'))
            }
        } catch {
            toast.error("Network error during approval.")
        }
    }

    const handleRerun = async (id: string) => {
        try {
            const res = await fetch(`${dashboardData.global.apiRestUrl}/campaigns/${id}/rerun`, {
                method: 'POST',
                headers: {
                    'X-WP-Nonce': dashboardData.global.wpRestNonce
                }
            })
            const json = await res.json()
            if (json.success) {
                toast.success("Campaign progress reset and restarted!")
                fetchCampaigns()
            } else {
                toast.error("Failed to rerun campaign: " + (json.message || 'Unknown error'))
            }
        } catch {
            toast.error("Network error during rerun.")
        }
    }

    const handleDelete = async (ids: string[]) => {
        if (!confirm("Are you sure you want to delete selected campaign(s)?")) return

        try {
            const res = await fetch(`${dashboardData.global.apiRestUrl}/campaigns`, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                    'X-WP-Nonce': dashboardData.global.wpRestNonce
                },
                body: JSON.stringify({ ids })
            })
            const json = await res.json()
            if (json.success) {
                fetchCampaigns()
                toast.success("Campaign(s) deleted successfully.")
            } else {
                toast.error(json.message || "Failed to delete campaign.")
            }
        } catch {
            toast.error("Failed to delete campaign.")
        }
    }

    const handleSave = async (campaignData: Record<string, unknown>) => {
        try {
            const response = await fetch(`${dashboardData.global.apiRestUrl}/campaigns`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-WP-Nonce': dashboardData.global.wpRestNonce
                },
                body: JSON.stringify({
                    ...campaignData,
                    id: selectedCampaignId || '0'
                })
            })
            const json = await response.json()
            if (json.success) {
                toast.success(view === 'edit' ? "Campaign updated!" : "Campaign launched!")
                fetchCampaigns()
                setViewAndUrl('list')
            } else {
                toast.error("Error saving campaign: " + (json.message || 'Unknown error'))
            }
        } catch {
            toast.error("Failed to save campaign. Please check your connection.")
        }
    }

    if (loading && !data) return null;

    const t = dashboardData?.i18n

    return (
        <SettingsLayout>
            <div className={cn("mx-auto space-y-8", view === 'list' ? "max-w-7xl" : "max-w-full")}>
                {/* Header matching Dashboard style - only on list view */}
                {view === 'list' && (
                    <SettingsHeader
                        title={t?.featCampaignTitle || 'Campaigns'}
                        description="Manage and track your automated marketing campaigns."
                    />
                )}

                {view === 'list' ? (
                    <CampaignList
                        campaigns={data?.campaigns || []}
                        stats={data?.stats || { total: 0, active: 0, recipients: 0, processed: 0, pending: 0, failed: 0 }}
                        onCreate={() => setViewAndUrl('create')}
                        onAction={handleAction}
                        icon_base_url={data?.meta?.icon_base_url || dashboardData.campaignsData?.iconBaseUrl || ''}
                    />
                ) : (
                    <CampaignWizard
                        initialData={view === 'edit' ? (data?.campaigns?.find((c: { id?: string | number }) => c.id === selectedCampaignId) as unknown as Record<string, unknown>) : undefined}
                        onSave={handleSave}
                        onCancel={() => setViewAndUrl('list')}
                        meta={{
                            roles: data?.meta?.roles || [],
                            users: data?.meta?.users || [],
                            products: data?.meta?.products || [],
                            posts: data?.meta?.posts || [],
                            email_templates: data?.meta?.email_templates || [],
                            instances: data?.meta?.instances || [],
                            woo_countries: data?.meta?.woo_countries || {},
                            templates: data?.meta?.meta_templates || [],
                            icon_base_url: data?.meta?.icon_base_url || dashboardData.campaignsData?.iconBaseUrl || '',
                            nonces: {
                                calc: data?.meta?.nonces?.calc || dashboardData.campaignsData?.nonces?.calc || '',
                                preview: data?.meta?.nonces?.preview || dashboardData.campaignsData?.nonces?.preview || ''
                            },
                            rootData: dashboardData
                        }}
                    />
                )}
            </div>
        </SettingsLayout>
    )
}