import { Accordion, AccordionItem } from '@admin/components/ui/accordion';
import { FormCheckboxField } from '@admin/components/ui/forms/form-checkbox-field';
import { FormNumberInput } from '@admin/components/ui/forms/form-number-input';
import { FormSelect } from '@admin/components/ui/forms/form-select';
import { ThemeColorField } from '@admin/components/ui/theme-color-field';
import { formHelpClassName } from '@admin/components/ui/field-styles';
import { useQrCodeSettings } from '@admin/hooks/use-qr-code-settings';
import { formatKebabLabel } from '@admin/lib/qr-code';
import { cn } from '@admin/lib/utils';

type QrSettingsFormProps = {
    settings: ReturnType<typeof useQrCodeSettings>;
};

export function QrSettingsForm({ settings }: QrSettingsFormProps) {
    const {
        minSize,
        maxSize,
        defaultSize,
        resolvedSize,
        size,
        setSize,
        templates,
        defaultTemplate,
        template,
        setTemplate,
        logo,
        setLogo,
        logoAvailable,
        themeColors,
        colorMode,
        setColorMode,
        color,
        setColor,
        backgroundMode,
        setBackgroundMode,
        background,
        setBackground,
        minLogoWidth,
        maxLogoWidth,
        logoWidth,
        setLogoWidth,
        punchout,
        setPunchout,
    } = settings;

    const summary = [`${resolvedSize}px`, formatKebabLabel(template), logo ? 'logo on' : 'logo off'].join(' · ');

    return (
        <div className="box">
            <div className="box-body">
                <Accordion>
                    <AccordionItem title="QR code settings" summary={summary} defaultOpen={false}>
                        <p className={cn(formHelpClassName, 'mb-4 mt-0')}>
                            Downloads use the size below ({resolvedSize}×{resolvedSize}px). Default is {defaultSize}px.
                        </p>

                        <div className="grid grid-cols-12 gap-x-6">
                            <div className="col-span-12 lg:col-span-4">
                                <FormNumberInput
                                    id="qr-size"
                                    label="Resolution (px)"
                                    min={minSize}
                                    max={maxSize}
                                    step={64}
                                    value={size}
                                    helpText={`${minSize}–${maxSize}px. PNG/WebP export at this size.`}
                                    onChange={(value) => setSize(value)}
                                />
                            </div>
                            <div className="col-span-12 lg:col-span-4">
                                <FormSelect
                                    id="qr-template"
                                    label="Template"
                                    value={template}
                                    sortAlphabetically={false}
                                    placeholder="Select a template"
                                    options={templates.map((name) => ({
                                        value: name,
                                        label: `${formatKebabLabel(name)}${name === defaultTemplate ? ' (default)' : ''}`,
                                    }))}
                                    onChange={setTemplate}
                                />
                            </div>
                            <div className="col-span-12 lg:col-span-4">
                                <FormCheckboxField
                                    id="qr-logo"
                                    label="Brand logo"
                                    checkboxLabel="Add logo inside QR code"
                                    checked={logo}
                                    disabled={!logoAvailable}
                                    helpText={
                                        logoAvailable
                                            ? 'Places the brand mark in the centre of the QR.'
                                            : 'Brand logo file was not found.'
                                    }
                                    onChange={setLogo}
                                />
                            </div>
                        </div>

                        <div className="grid grid-cols-12 gap-x-6">
                            <div className="col-span-12 lg:col-span-6">
                                <ThemeColorField
                                    id="qr-color"
                                    label="QR colour"
                                    mode={colorMode}
                                    onModeChange={setColorMode}
                                    value={color}
                                    onChange={setColor}
                                    themeColors={themeColors}
                                    help="Modules and finder eyes. Keep strong contrast with the background."
                                />
                            </div>
                            <div className="col-span-12 lg:col-span-6">
                                <ThemeColorField
                                    id="qr-background"
                                    label="Background colour"
                                    mode={backgroundMode}
                                    onModeChange={setBackgroundMode}
                                    value={background}
                                    onChange={setBackground}
                                    themeColors={themeColors}
                                    help="Solid templates use this fully. Gradient templates keep their gradient fill."
                                />
                            </div>
                        </div>

                        {logo ? (
                            <div className="grid grid-cols-12 gap-x-6">
                                <div className="col-span-12 lg:col-span-4">
                                    <FormNumberInput
                                        id="qr-logo-width"
                                        label="Logo width (px)"
                                        min={minLogoWidth}
                                        max={maxLogoWidth}
                                        step={8}
                                        value={logoWidth}
                                        helpText={`${minLogoWidth}–${maxLogoWidth}px (max 36% of QR size).`}
                                        onChange={(value) => setLogoWidth(value)}
                                    />
                                </div>
                                <div className="col-span-12 lg:col-span-4">
                                    <FormCheckboxField
                                        id="qr-punchout"
                                        label="Logo punchout"
                                        checkboxLabel="Clear modules behind logo"
                                        checked={punchout}
                                        helpText="Keeps QR modules from showing through the logo."
                                        onChange={setPunchout}
                                    />
                                </div>
                            </div>
                        ) : null}
                    </AccordionItem>
                </Accordion>
            </div>
        </div>
    );
}