import { Form, FormField } from '@admin/components/form';
import { Button } from '@admin/components/ui/button';
import { router } from '@inertiajs/react';
import { Save } from 'lucide-react';

interface TypographySettings {
    font_family?: string;
    base_font_size?: string;
    heading_font?: string;
    mono_font?: string;
}

export default function TypographyPanel({ typography }: { typography: TypographySettings }) {
    const handleSubmit = (data: any) => {
        router.post(
            '/admin/settings/general/personalizer/typography',
            { ...data, _method: 'post' },
            { preserveScroll: true },
        );
    };

    const defaultValues = {
        font_family: typography?.font_family || 'Inter',
        base_font_size: typography?.base_font_size || '14px',
        heading_font: typography?.heading_font || 'Inter',
        mono_font: typography?.mono_font || 'JetBrains Mono',
    };

    return (
        <Form submitHandler={handleSubmit} defaultValues={defaultValues}>
            <div className="space-y-6">
                <div>
                    <h3 className="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500">Font Families</h3>
                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <FormField
                            type="text"
                            name="font_family"
                            label="Base Font Family"
                            placeholder="Inter"
                            description="Used for body text and UI elements"
                        />
                        <FormField
                            type="text"
                            name="heading_font"
                            label="Heading Font"
                            placeholder="Inter"
                            description="Used for H1–H6 headings"
                        />
                    </div>
                </div>

                <div>
                    <h3 className="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500">Scale</h3>
                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <FormField
                            type="text"
                            name="base_font_size"
                            label="Base Font Size"
                            placeholder="14px"
                            description="Root font size (e.g. 14px, 16px)"
                        />
                        <FormField
                            type="text"
                            name="mono_font"
                            label="Monospace Font"
                            placeholder="JetBrains Mono"
                            description="Used for code and log displays"
                        />
                    </div>
                </div>

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