import { ActivityLogSidebar } from '@admin/components/activity-log/ActivityLogSidebar';
import { useModelActivityLog } from '@admin/components/activity-log/useModelActivityLog';
import { Form, FormField } from '@admin/components/form';
import HeadingSmall from '@admin/components/heading-small';
import { Button } from '@admin/components/ui/button';
import { Card, CardContent } from '@admin/components/ui/card';
import { Switch } from '@admin/components/ui/switch';
import AppLayout from '@admin/layouts/app-layout';
import SettingsLayout from '@admin/layouts/settings/layout';
import LetterheadEditor from '@admin/components/LetterheadEditor';
import { BreadcrumbItem } from '@admin/types';
import { yupResolver } from '@hookform/resolvers/yup';
import { Head, router, usePage } from '@inertiajs/react';
import { Activity, Save, Eye } from 'lucide-react';
import { useEffect, useState } from 'react';
import * as yup from 'yup';

// Validation schema for system settings
const schema = yup.object({
    system_name: yup.string().required('System name is required'),
    system_date_format: yup.string().required('Date format is required'),
    system_time_format: yup.string().required('Time format is required'),
    system_timezone: yup.string().required('Timezone is required'),
    system_currency: yup.string().required('Currency is required'),
    system_currency_symbol: yup.string().required('Currency symbol is required'),
    system_float_number_format: yup.string().required('Float number format is required'),
    system_language: yup.string().required('Language is required'),
});

// Skeleton Loader Components
const SkeletonField = () => (
    <div className="space-y-2">
        <div className="h-4 w-32 animate-pulse rounded bg-gray-200"></div>
        <div className="h-10 animate-pulse rounded bg-gray-200"></div>
        <div className="h-3 w-48 animate-pulse rounded bg-gray-200"></div>
    </div>
);

const SkeletonSelectField = () => (
    <div className="space-y-2">
        <div className="h-4 w-32 animate-pulse rounded bg-gray-200"></div>
        <div className="h-10 animate-pulse rounded bg-gray-200"></div>
    </div>
);

const SkeletonButton = () => <div className="h-10 w-32 animate-pulse rounded bg-gray-200"></div>;

const SkeletonHeading = () => (
    <div className="space-y-2">
        <div className="h-6 w-48 animate-pulse rounded bg-gray-200"></div>
        <div className="h-4 w-96 animate-pulse rounded bg-gray-200"></div>
    </div>
);

const Edit = () => {
    const [isLoading, setIsLoading] = useState(true);
    const activityLogCtl = useModelActivityLog();

    // Show skeleton for 1 second
    useEffect(() => {
        const timer = setTimeout(() => {
            setIsLoading(false);
        }, 500);

        return () => clearTimeout(timer);
    }, []);

    // explicitly type page props
    const { system_settings, system_config_settings, pdfLetterhead } = usePage().props as any;

    // State for letterhead HTML content
    const [headerHtml, setHeaderHtml] = useState<string>(pdfLetterhead?.headerHtml || '<div style="text-align:center; padding:20px;"><h2>{{ company_name }}</h2><p>{{ company_address }}</p></div>');
    const [footerHtml, setFooterHtml] = useState<string>(pdfLetterhead?.footerHtml || '<div style="text-align:center; padding:10px; font-size:10px;"><p>Page {{ page_number }} | © {{ year }} {{ company_name }}</p></div>');
    const [letterheadEnabled, setLetterheadEnabled] = useState<boolean>(pdfLetterhead?.enabled || false);
    const [showPreview, setShowPreview] = useState<boolean>(false);
    const defaultValues = {
        system_name: system_settings?.system_name ?? '',
        system_date_format: system_settings?.system_date_format ?? '',
        system_time_format: system_settings?.system_time_format ?? '',
        system_timezone: system_settings?.system_timezone ?? '',
        system_currency: system_settings?.system_currency ?? '',
        system_currency_symbol: system_settings?.system_currency_symbol ?? '',
        system_float_number_format: system_settings?.system_float_number_format ?? '',
        system_language: system_settings?.system_language ?? '',
    };
    const breadcrumbs: BreadcrumbItem[] = [
        {
            title: 'System settings',
            href: route('settings.system.edit'),
        },
    ];
    const handleSubmit = (data: any) => {
        router.put(route('settings.system.update'), data, {
            onStart: () => {
                setIsLoading(true);
            },
            onSuccess: () => {
                setTimeout(() => {
                    setIsLoading(false);
                }, 500);
            },
            onError: () => {
                setIsLoading(false);
            },
        });
    };
    const handleToggleChange = (moduleName: string, checked: string) => {
        console.log('🚀 ~ handleToggleChange ~ moduleName:', moduleName);
    };

    // Submit letterhead settings
    const submitLetterheadSettings = () => {
        router.post(route('settings.system.letterhead.update'), {
            enabled: letterheadEnabled,
            header_html: headerHtml,
            footer_html: footerHtml,
        }, {
            onStart: () => setIsLoading(true),
            onSuccess: () => setTimeout(() => setIsLoading(false), 500),
            onError: () => setIsLoading(false),
        });
    };
    // Removed auto-open of activity modal after save

    // Skeleton Loader
    if (isLoading) {
        return (
            <AppLayout breadcrumbs={breadcrumbs}>
                <Head title="Loading System Settings..." />

                <SettingsLayout tab={'platform'}>
                    <div className="space-y-6">
                        <Card className="rounded-lg border px-5 py-3">
                            <div className="flex w-full items-start justify-between">
                                <SkeletonHeading />
                                <div className="h-9 w-24 animate-pulse rounded bg-gray-200"></div>
                            </div>
                            <CardContent className="px-0">
                                <div className="space-y-6">
                                    <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                                        <SkeletonField />
                                        <SkeletonSelectField />
                                        <SkeletonSelectField />
                                        <SkeletonSelectField />
                                        <SkeletonSelectField />
                                        <SkeletonSelectField />
                                        <SkeletonSelectField />
                                        <SkeletonSelectField />
                                    </div>
                                    <div className="flex justify-start border-gray-200 pt-4">
                                        <SkeletonButton />
                                    </div>
                                </div>
                            </CardContent>
                        </Card>
                    </div>
                </SettingsLayout>
            </AppLayout>
        );
    }

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="System settings" />

            <SettingsLayout tab={'platform'}>
                <div className="space-y-6">
                    <Card className="rounded-lg border px-5 py-3">
                        <div className="mb-3 flex items-center justify-between border-b">
                            <HeadingSmall
                                title="System Settings"
                                description="Configure your system preferences including localization, currency, and display formats."
                            />

                            <Button
                                variant="outline"
                                size="sm"
                                onClick={() =>
                                    activityLogCtl.show({
                                        modelClass: 'Setting',
                                        title: 'System Settings Activity',
                                        action: 'system_settings_updated',
                                    })
                                }
                            >
                                <Activity className="mr-1 h-4 w-4" /> Activity
                            </Button>
                        </div>
                        <CardContent className="px-0">
                            {/* existing form */}
                            <Form
                                submitHandler={handleSubmit}
                                formClassNames="space-y-6"
                                resolver={yupResolver(schema)}
                                defaultValues={defaultValues}
                            >
                                <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                                    <FormField
                                        type="text"
                                        name="system_name"
                                        label="System Name"
                                        placeholder="Enter system name"
                                        required
                                        description="The name that will be displayed throughout the system"
                                    />
                                    <FormField
                                        type="select"
                                        name="system_date_format"
                                        label="Date Format"
                                        placeholder="Select date format"
                                        options={system_config_settings?.['date_formats'] || []}
                                        required
                                    />
                                    <FormField
                                        type="select"
                                        name="system_time_format"
                                        label="Time Format"
                                        placeholder="Select time format"
                                        options={system_config_settings?.['time_formats'] || []}
                                        required
                                    />
                                    <FormField
                                        type="select"
                                        name="system_timezone"
                                        label="Timezone"
                                        placeholder="Select timezone"
                                        options={system_config_settings?.['timezones'] || []}
                                        required
                                    />
                                    <FormField
                                        type="select"
                                        name="system_language"
                                        label="Language"
                                        placeholder="Select language"
                                        options={system_config_settings?.['languages'] || []}
                                        required
                                    />
                                    <FormField
                                        type="select"
                                        name="system_currency"
                                        label="Currency"
                                        placeholder="Select currency"
                                        options={system_config_settings?.['currencies'] || []}
                                        required
                                    />
                                    <FormField
                                        type="select"
                                        name="system_currency_symbol"
                                        label="Currency Symbol"
                                        placeholder="Select currency symbol"
                                        options={system_config_settings?.['currency_symbols'] || []}
                                        required
                                    />
                                    <FormField
                                        type="select"
                                        name="system_float_number_format"
                                        label="Float Number Format"
                                        placeholder="Select float number format"
                                        options={system_config_settings?.['float_number_formats'] || []}
                                        required
                                    />
                                </div>
                                <div className="flex justify-start border-gray-200 pt-4">
                                    <Button className="bg-success px-8 py-2 hover:bg-success/90" type="submit">
                                        <Save className="h-4 w-4" />
                                        Save Changes
                                    </Button>
                                </div>
                            </Form>
                        </CardContent>
                    </Card>

                    {/* PDF Letterhead Section */}
                    <Card className="rounded-lg border px-5 py-3">
                        <div className="flex w-full items-start justify-between">
                            <HeadingSmall
                                title="PDF Letterhead"
                                description="Configure letterhead image for PDF exports"
                            />
                        </div>
                        <CardContent className="px-0 py-4">
                            <div className="space-y-4">
                                {/* Enable/Disable Toggle */}
                                <div className="flex items-center justify-between rounded-lg border bg-muted/40 p-4">
                                    <div>
                                        <h3 className="font-semibold">Enable Letterhead</h3>
                                        <p className="text-sm text-muted-foreground">Show letterhead on PDF exports</p>
                                    </div>
                                    <Switch
                                        checked={letterheadEnabled}
                                        onCheckedChange={setLetterheadEnabled}
                                    />
                                </div>

                                {/* Header Editor */}
                                <LetterheadEditor
                                    value={headerHtml}
                                    onChange={setHeaderHtml}
                                    type="header"
                                    height="250px"
                                />

                                {/* Footer Editor */}
                                <LetterheadEditor
                                    value={footerHtml}
                                    onChange={setFooterHtml}
                                    type="footer"
                                    height="200px"
                                />

                                {/* Preview Button */}
                                <div className="flex items-center gap-2">
                                    <Button
                                        type="button"
                                        variant="outline"
                                        onClick={() => setShowPreview(!showPreview)}
                                        className="gap-2"
                                    >
                                        <Eye className="h-4 w-4" />
                                        {showPreview ? 'Hide' : 'Show'} Preview
                                    </Button>
                                </div>

                                {/* Live Preview */}
                                {showPreview && (
                                    <div className="space-y-4 rounded-lg border p-4">
                                        <h4 className="text-sm font-medium">PDF Layout Preview</h4>
                                        <div className="space-y-2 rounded border bg-white p-4 shadow-sm">
                                            {/* Header Preview */}
                                            <div className="border-b pb-2">
                                                <div className="text-xs text-muted-foreground mb-1">Header:</div>
                                                <div 
                                                    className="prose prose-sm max-w-none"
                                                    dangerouslySetInnerHTML={{ __html: headerHtml }}
                                                />
                                            </div>
                                            
                                            {/* Body Preview */}
                                            <div className="py-4">
                                                <div className="text-xs text-muted-foreground mb-2">Body Content:</div>
                                                <div className="space-y-2 text-sm text-muted-foreground">
                                                    <p>[Your export data will appear here]</p>
                                                    <p>[Tables, charts, and other content]</p>
                                                    <p>[...]</p>
                                                </div>
                                            </div>
                                            
                                            {/* Footer Preview */}
                                            <div className="border-t pt-2">
                                                <div className="text-xs text-muted-foreground mb-1">Footer:</div>
                                                <div 
                                                    className="prose prose-sm max-w-none"
                                                    dangerouslySetInnerHTML={{ __html: footerHtml }}
                                                />
                                            </div>
                                        </div>
                                        <p className="text-xs text-muted-foreground">
                                            💡 Variables like {`{{ company_name }}`} will be replaced with actual values in the PDF
                                        </p>
                                    </div>
                                )}

                                {/* Save Button */}
                                <div className="flex justify-start">
                                    <Button onClick={submitLetterheadSettings} className="gap-2">
                                        <Save className="h-4 w-4" />
                                        Save Letterhead Settings
                                    </Button>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                </div>
            </SettingsLayout>
            <ActivityLogSidebar
                open={activityLogCtl.open}
                onOpenChange={activityLogCtl.setOpen}
                modelClass={activityLogCtl.modelClass}
                modelId={activityLogCtl.modelId}
                title={activityLogCtl.title}
                action={activityLogCtl.action}
                settingKey={activityLogCtl.settingKey}
                onClearFilters={() => activityLogCtl.clearFilters?.()}
            />
        </AppLayout>
    );
};

export default Edit;