import { Form, FormField } from '@/components/form';
import { HexColorPicker } from '@/components/hex-color-picker';
import TextEditor from '@/components/rich-text-editor';
import { Button } from '@/components/ui/button';
import { Sheet, SheetClose, SheetContent, SheetFooter, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import AppLayout from '@/layouts/app-layout';
import SettingsLayout from '@/layouts/settings/layout';
import { type BreadcrumbItem } from '@/types';
import { Head, router } from '@inertiajs/react';
import { Pencil, Save, Trash2 } from 'lucide-react';
import { type ReactNode, useMemo, useState } from 'react';
import { FormProvider, useForm } from 'react-hook-form';

function FileRow({
    fieldName, label, hint, currentUrl, onDelete, deleting, maxSize = 5,
}: {
    fieldName: string; label: string; hint: string;
    currentUrl?: string | null; onDelete?: () => void; deleting?: boolean; maxSize?: number;
}) {
    return (
        <div className="rounded-lg border p-4">
            <div className="mb-3 flex items-center justify-between">
                <div>
                    <p className="text-sm font-medium text-gray-900">{label}</p>
                    <p className="text-xs text-gray-500">{hint}</p>
                </div>
                {currentUrl && onDelete && (
                    <Button type="button" variant="outline" size="sm" onClick={onDelete} disabled={deleting}
                        className="text-red-600 hover:border-red-300 hover:text-red-700">
                        <Trash2 className="h-4 w-4" />
                    </Button>
                )}
            </div>
            <FormField type="file" name={fieldName} accept="image/*" maxSize={maxSize} preview={true} currentUrl={currentUrl ?? undefined} />
        </div>
    );
}

// ── Page ────────────────────────────────────────────────────────────────────

interface Props {
    branding: {
        primary_color: string;
        secondary_color: string;
        background_color: string;
        default_logo: string | null;
        default_icon: string | null;
        default_favicon: string | null;
    };
    typography: {
        font_family: string;
        base_font_size: string;
        heading_font: string;
        mono_font: string;
    };
    login: {
        login_layout?: string;
        login_banner?: string | null;
        login_title?: string;
        login_subtitle?: string;
        social_login_enabled?: boolean;
        terms_url?: string;
        privacy_url?: string;
        terms_content?: string;
        privacy_content?: string;
    };
}

function LegalContentSheet({
    title,
    fieldName,
    initialContent,
}: {
    title: string;
    fieldName: 'terms_content' | 'privacy_content';
    initialContent: string;
}) {
    const [open, setOpen] = useState(false);
    const [saving, setSaving] = useState(false);
    const methods = useForm({ defaultValues: { [fieldName]: initialContent } });

    const handleSave = () => {
        const content = methods.getValues(fieldName);
        setSaving(true);
        router.post(
            route('settings.appearance.legal-content'),
            { [fieldName]: content },
            {
                preserveScroll: true,
                onSuccess: () => { setOpen(false); setSaving(false); },
                onError: () => setSaving(false),
            },
        );
    };

    return (
        <Sheet open={open} onOpenChange={setOpen}>
            <Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)}>
                <Pencil className="mr-1 h-3.5 w-3.5" />
                Edit
            </Button>
            <SheetContent className="flex w-screen max-w-none flex-col overflow-y-auto">
                <SheetHeader>
                    <SheetTitle>Edit {title}</SheetTitle>
                </SheetHeader>
                <div className="flex-1 px-4 py-4">
                    <FormProvider {...methods}>
                        <TextEditor name={fieldName} minHeight="500px" />
                    </FormProvider>
                </div>
                <SheetFooter>
                    <SheetClose asChild>
                        <Button type="button" variant="outline">Cancel</Button>
                    </SheetClose>
                    <Button type="button" onClick={handleSave} disabled={saving}>
                        <Save className="mr-2 h-4 w-4" />
                        {saving ? 'Saving…' : 'Save'}
                    </Button>
                </SheetFooter>
            </SheetContent>
        </Sheet>
    );
}

const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Home', href: '/' },
    { title: 'Settings', href: route('settings.company.edit') },
    { title: 'Branding', href: '#' },
];

function AppearanceForm({ branding, login }: Props) {
    const [deletingKey, setDeletingKey] = useState<string | null>(null);

    const defaultValues = useMemo(() => ({
        primary_color: branding?.primary_color || '#4f46e5',
        secondary_color: branding?.secondary_color || '#7c3aed',
        default_logo: branding?.default_logo || '',
        default_icon: branding?.default_icon || '',
        default_favicon: branding?.default_favicon || '',
        login_banner: login?.login_banner || '',
        login_title: login?.login_title || 'Welcome back',
        login_subtitle: login?.login_subtitle || 'Enter your email and password to sign in to your account',
        social_login_enabled: login?.social_login_enabled ?? false,
        terms_url: login?.terms_url || '',
        privacy_url: login?.privacy_url || '',
    }), [branding, login]);

    const refreshCache = () => {
        try { localStorage.removeItem('personalizer_settings'); } catch { }
        fetch('/api/personalizer/resolved', { headers: { Accept: 'application/json' }, cache: 'no-cache' })
            .then((res) => res.ok ? res.json() : null)
            .catch(() => { });
    };

    const handleSubmit = (data: any) => {
        const appearancePayload: any = {
            primary_color: data.primary_color,
            secondary_color: data.secondary_color,
        };
        ['default_logo', 'default_icon', 'default_favicon'].forEach((k) => {
            if (data[k] instanceof File) appearancePayload[k] = data[k];
        });

        const loginPayload: any = {
            login_title: data.login_title,
            login_subtitle: data.login_subtitle,
            social_login_enabled: data.social_login_enabled,
            terms_url: data.terms_url,
            privacy_url: data.privacy_url,
        };
        if (data.login_banner instanceof File) loginPayload.login_banner = data.login_banner;

        router.post(route('settings.appearance.save'), appearancePayload, {
            forceFormData: true,
            preserveScroll: true,
            onSuccess: () => {
                router.post(route('settings.login-page.save'), loginPayload, {
                    forceFormData: true,
                    preserveScroll: true,
                    onSuccess: refreshCache,
                });
            },
        });
    };

    const deleteFile = (group: 'branding' | 'login', key: string) => {
        if (!confirm('Delete this image?')) return;
        setDeletingKey(key);
        if (group === 'login') {
            router.delete(route('settings.login-page.file.delete', { key }), {
                preserveScroll: true,
                onFinish: () => setDeletingKey(null),
            });
        }
        if (group === 'branding') setDeletingKey(null);
    };

    return (
        <Form submitHandler={handleSubmit} defaultValues={defaultValues}>
            <div className="space-y-8">
                {/* Brand Colors */}
                <div>
                    <h3 className="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500">Brand Colors</h3>
                    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                        <HexColorPicker
                            name="primary_color"
                            label="Primary Color"
                            onColorChange={(color) => {
                                document.documentElement.style.setProperty('--primary', color);
                                document.documentElement.style.setProperty('--color-primary', color);
                            }}
                        />
                        <HexColorPicker
                            name="secondary_color"
                            label="Secondary Color"
                            onColorChange={(color) => {
                                document.documentElement.style.setProperty('--secondary', color);
                                document.documentElement.style.setProperty('--color-secondary', color);
                            }}
                        />
                    </div>
                </div>

                {/* Login Banner */}
                <div>
                    <h3 className="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500">Login Banner</h3>
                    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                        <FileRow
                            fieldName="login_banner"
                            label="Login Banner"
                            hint="Used in login page layouts. Recommended: 800×1200px. Max 10 MB."
                            maxSize={10}
                            currentUrl={login?.login_banner}
                            onDelete={() => deleteFile('login', 'login_banner')}
                            deleting={deletingKey === 'login_banner'}
                        />
                    </div>
                </div>

                {/* Login Content */}
                <div>
                    <h3 className="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500">Login Page Content</h3>
                    <div className="space-y-4">
                        <FormField type="text" name="login_title" label="Heading" placeholder="Welcome back" />
                        <FormField type="textarea" name="login_subtitle" label="Sub-heading" placeholder="Enter your email and password to sign in" rows={2} />
                    </div>
                </div>

                {/* Legal Links */}
                <div>
                    <h3 className="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500">Legal Links</h3>
                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div className="space-y-1">
                            <div className="flex items-center justify-between">
                                <span className="text-sm font-medium text-gray-700">Terms of Service</span>
                                <LegalContentSheet
                                    title="Terms of Service"
                                    fieldName="terms_content"
                                    initialContent={login?.terms_content || ''}
                                />
                            </div>
                            <FormField type="text" name="terms_url" placeholder="https://example.com/terms" />
                        </div>
                        <div className="space-y-1">
                            <div className="flex items-center justify-between">
                                <span className="text-sm font-medium text-gray-700">Privacy Policy</span>
                                <LegalContentSheet
                                    title="Privacy Policy"
                                    fieldName="privacy_content"
                                    initialContent={login?.privacy_content || ''}
                                />
                            </div>
                            <FormField type="text" name="privacy_url" placeholder="https://example.com/privacy" />
                        </div>
                    </div>
                </div>

                {/* Options */}
                <div>
                    <h3 className="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500">Options</h3>
                    <FormField type="checkbox" name="social_login_enabled" checkboxLabel="Enable social login buttons (Google, GitHub)" />
                </div>

                <div className="flex">
                    <Button type="submit" className="px-8">
                        <Save className="mr-2 h-4 w-4" />
                        Save Settings
                    </Button>
                </div>
            </div>
        </Form>
    );
}

export default function Appearance({ branding, typography, login }: Props) {
    return (
        <>
            <Head title="Branding" />
            <SettingsLayout tab="platform">
                <AppearanceForm branding={branding} typography={typography} login={login} />
            </SettingsLayout>
        </>
    );
}

Appearance.layout = (page: ReactNode) => (
    <AppLayout breadcrumbs={breadcrumbs} title="Branding">
        {page}
    </AppLayout>
);