import { ActivityLogSidebar } from '@/components/activity-log/ActivityLogSidebar';
import { useModelActivityLog } from '@/components/activity-log/useModelActivityLog';
import Form from '@/components/form/Form';
import HeadingSmall from '@/components/heading-small';
import { ModuleSettingsConfirmationModal } from '@/components/settings/ModuleSettingsConfirmationModal';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Switch } from '@/components/ui/switch';
import AppLayout from '@/layouts/app-layout';
import { cn } from '@/lib/utils';
import { Head, router } from '@inertiajs/react';
import { Activity, Save, Component, Layers } from 'lucide-react';
import { ReactNode, useEffect, useState } from 'react';
import { useFormContext } from 'react-hook-form';

interface Module {
    id: number;
    name: string;
    status: boolean;
    is_required: boolean;
}

interface App {
    id: number;
    name: string;
    slug: string;
    status: boolean;
    type: string;
    modules: Module[];
}

interface Props {
    apps: App[];
}

// Skeleton Loader Components
const SkeletonModuleCard = () => (
    <Card className="animate-pulse overflow-hidden rounded-lg border bg-card p-0">
        <div className="flex items-center justify-between bg-muted/40 p-3">
            <div className="h-5 w-32 rounded bg-gray-200"></div>
            <div className="flex items-center gap-2">
                <div className="h-4 w-16 rounded bg-gray-200"></div>
                <div className="h-4 w-4 rounded bg-gray-200"></div>
            </div>
        </div>
        <div className="grid grid-cols-2 gap-3 px-3 pb-1">
            {[...Array(2)].map((_, index) => (
                <div key={index} className="flex items-center gap-2 rounded-md py-2">
                    <div className="h-4 w-4 rounded bg-gray-200"></div>
                    <div className="flex-1">
                        <div className="mb-1 h-4 w-20 rounded bg-gray-200"></div>
                        <div className="h-3 w-16 rounded bg-gray-200"></div>
                    </div>
                </div>
            ))}
        </div>
    </Card>
);

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 SkeletonButton = () => <div className="h-9 w-24 animate-pulse rounded bg-gray-200"></div>;

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

// Module Card Component
const ModuleCard = ({ module, appIsActive }: { module: Module; appIsActive: boolean }) => {
    const { watch, setValue } = useFormContext();
    const isRequired = module.is_required;
    const moduleStatus = isRequired ? true : watch(`modules.${module.id}.status`);

    return (
        <Card
            key={module.id}
            className={cn(
                "overflow-hidden border transition-all",
                !appIsActive && "opacity-50 bg-muted/30",
                appIsActive && "hover:border-foreground/20"
            )}
        >
            <div className="flex items-center justify-between p-3">
                <div className="flex items-center gap-2">
                    <Component className="h-4 w-4 text-muted-foreground" />
                    <h3 className="font-medium text-sm">{module.name}</h3>
                </div>
                {!isRequired ? (
                    <Switch
                        checked={!!moduleStatus}
                        disabled={!appIsActive}
                        onCheckedChange={(val) =>
                            setValue(`modules.${module.id}.status`, val)
                        }
                    />
                ) : (
                    <span className="text-xs text-muted-foreground px-2 py-1 bg-primary/10 rounded">
                        Required
                    </span>
                )}
            </div>
        </Card>
    );
};

// Apps and Modules Content Component
const AppsModulesContent = ({ apps }: { apps: App[] }) => {
    const { watch, setValue } = useFormContext();

    return (
        <div className="space-y-8">
            {apps.map((app) => {
                const isDefaultType = app.type === "default";
                const appIsActive = isDefaultType ? true : watch(`apps.${app.id}.status`);

                return (
                    <div key={app.id} className="space-y-3">
                        {/* App Header with Switch */}
                        <div className="flex items-center justify-between border-l-2 border-l-primary pl-3 py-2 bg-muted/20 rounded-r-md pr-3">
                            <div className="flex items-center gap-2">
                                <Layers className="h-5 w-5 text-muted-foreground" />
                                <h3 className="font-semibold text-base">{app.name}</h3>
                                <span className="text-xs text-muted-foreground">
                                    ({app.modules.length} modules)
                                </span>
                            </div>
                            {!isDefaultType ? (
                                <Switch
                                    checked={!!appIsActive}
                                    onCheckedChange={(val) => {
                                        setValue(`apps.${app.id}.status`, val);
                                        // Update all non-required modules when app is toggled
                                        app.modules.forEach((module: Module) => {
                                            if (!module.is_required) {
                                                setValue(`modules.${module.id}.status`, val);
                                            }
                                        });
                                    }}
                                />
                            ) : (
                                <span className="text-xs text-muted-foreground px-2 py-1 bg-primary/10 rounded">
                                    System Required
                                </span>
                            )}
                        </div>

                        {/* Modules Grid */}
                        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
                            {app.modules.map((module: Module) => (
                                <ModuleCard
                                    key={module.id}
                                    module={{
                                        ...module,
                                        name: app.slug === 'platform' ? 'Platform' : module.name
                                    }}
                                    appIsActive={!!appIsActive}
                                />
                            ))}
                        </div>
                    </div>
                );
            })}
        </div>
    );
};

// Main Index Component
export default function Index({ apps }: Props) {
    const [isLoading, setIsLoading] = useState(true);
    const [showConfirmModal, setShowConfirmModal] = useState(false);
    const [pendingFormData, setPendingFormData] = useState<any>(null);
    const activityLogCtl = useModelActivityLog();

    // Show skeleton for 1 second
    useEffect(() => {
        const timer = setTimeout(() => setIsLoading(false), 1000);
        return () => clearTimeout(timer);
    }, []);

    // Flatten all modules from all apps for form default values
    const allModules = apps.flatMap(app => app.modules);

    // Default values for react-hook-form
    const defaultValues = {
        apps: apps.reduce((acc: Record<string, any>, app: App) => {
            acc[app.id] = { status: app.status };
            return acc;
        }, {}),
        modules: allModules.reduce((acc: Record<string, any>, mod: Module) => {
            acc[mod.id] = { status: mod.status };
            return acc;
        }, {}),
    };

    // Submit handler - show confirmation modal first
    const submitHandler = async (formData: any) => {
        setPendingFormData(formData);
        setShowConfirmModal(true);
    };

    // Actual submit after confirmation
    const handleConfirmedSubmit = (reason: string, attachments: File[]) => {
        if (!pendingFormData) return;

        const appsPayload = Object.entries(pendingFormData.apps).map(([id, app]: any) => ({
            id: Number(id),
            status: !!app.status,
        }));

        const modulesPayload = Object.entries(pendingFormData.modules).map(([id, module]: any) => ({
            id: Number(id),
            status: !!module.status,
        }));

        // Create FormData to handle file uploads
        const formData = new FormData();
        formData.append('apps', JSON.stringify(appsPayload));
        formData.append('modules', JSON.stringify(modulesPayload));
        formData.append('reason', reason);

        // Append attachments
        attachments.forEach((file, index) => {
            formData.append(`attachments[${index}]`, file);
        });

        console.log('Submitting apps:', appsPayload);
        console.log('Submitting modules:', modulesPayload);
        console.log('Reason:', reason);
        console.log('Attachments:', attachments);

        router.post(route('developer.modules.update'), formData, {
            forceFormData: true,
            onStart: () => setIsLoading(true),
            onSuccess: () => {
                console.log('Settings updated successfully');
                setShowConfirmModal(false);
                setPendingFormData(null);
                setTimeout(() => setIsLoading(false), 500);
            },
            onError: (errors) => {
                console.error('Error updating settings:', errors);
                setIsLoading(false);
            },
        });
    };

    // Skeleton Loader
    if (isLoading) {
        return (
            <>
                <Head title="Loading Module Settings..." />
                <div className="space-y-6">
                    <Card className="rounded-lg border px-5 py-3">
                        <div className="flex w-full items-start justify-between">
                            <SkeletonHeading />
                            <SkeletonButton />
                        </div>
                        <CardContent className="px-0 py-4">
                            <div className="grid gap-4 lg:grid-cols-3">
                                {[...Array(3)].map((_, index) => (
                                    <SkeletonModuleCard key={index} />
                                ))}
                            </div>
                            <div className="mt-6 flex justify-start">
                                <SkeletonSubmitButton />
                            </div>
                        </CardContent>
                    </Card>
                </div>
            </>
        );
    }

    return (
        <>
            <Head title="Module Settings" />
            <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="Module Settings"
                            description="Customize which modules are available in your application"
                        />

                        <Button
                            variant="outline"
                            size="sm"
                            onClick={() =>
                                activityLogCtl.show({
                                    modelClass: 'Setting',
                                    title: 'App Modules Activity',
                                    action: 'app_modules_updated',
                                })
                            }
                        >
                            <Activity className="mr-1 h-4 w-4" /> Activity
                        </Button>
                    </div>
                    <CardContent className="px-0 py-4">
                        <Form defaultValues={defaultValues} submitHandler={submitHandler}>
                            <AppsModulesContent apps={apps} />

                            <div className="mt-6 flex justify-end border-t pt-4">
                                <Button type="submit" className="gap-2">
                                    <Save className="h-4 w-4" />
                                    Save Changes
                                </Button>
                            </div>
                        </Form>
                    </CardContent>
                </Card>
            </div>

            <ActivityLogSidebar
                open={activityLogCtl.open}
                onOpenChange={activityLogCtl.setOpen}
                modelClass={activityLogCtl.modelClass}
                modelId={activityLogCtl.modelId}
                title={activityLogCtl.title}
                action={activityLogCtl.action}
            />

            <ModuleSettingsConfirmationModal
                open={showConfirmModal}
                onOpenChange={setShowConfirmModal}
                onConfirm={handleConfirmedSubmit}
                isLoading={isLoading}
            />
        </>
    );
}

Index.layout = (page: ReactNode) => (
    <AppLayout
        breadcrumbs={[
            { title: 'Home', href: '/' },
            { title: 'Settings', href: '/settings' },
            { title: 'Module Settings', href: '#' },
        ]}
        title="Module Settings"
    >
        {page}
    </AppLayout>
);