import { Modal } from '@/Components/ui';
import type { ThemeKnobs } from '@/lib/themePalette';
import { ArrowRight, X } from 'lucide-react';
import type { PresetSummary } from './KnobsPanel';

type Props = {
    presets: PresetSummary[];
    open: boolean;
    onClose: () => void;
    onApplyPreset: (knobs: ThemeKnobs) => void;
};

export default function PresetGallery({ presets, open, onClose, onApplyPreset }: Props) {
    return (
        <Modal
            open={open}
            onClose={onClose}
            size="2xl"
            data-testid="preset-gallery"
            aria-labelledby="preset-gallery-title"
        >
            <Modal.Header
                title="Browse presets"
                titleId="preset-gallery-title"
                subtitle="Pick a starting point. Knobs load into the form — nothing is saved until you hit save."
                actions={
                    <button
                        type="button"
                        onClick={onClose}
                        aria-label="Close"
                        data-testid="preset-gallery-close"
                        className="-mr-1 inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                    >
                        <X className="h-4 w-4" strokeWidth={2} />
                    </button>
                }
            />
            <Modal.Body fade={false}>
                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    {presets.length === 0 && (
                        <div className="col-span-full rounded-md border border-dashed border-border p-6 text-center text-[12px] text-muted-foreground">
                            No presets available.
                        </div>
                    )}
                    {/* Each preset is the whole card — a single click target
                        with no nested button. The earlier card-with-Apply-button
                        layout was viewport-fragile: grid rows stretch to the
                        tallest card, `overflow-hidden` clipped the bottom of
                        shorter cards' buttons when a row mixed long and short
                        descriptions. Single-clickable-card removes the failure
                        mode entirely + reads cleaner. */}
                    {presets.map((preset) => {
                        const a = preset.knobs.accent;
                        const swatch = `oklch(${a.l.toFixed(3)} ${a.c.toFixed(3)} ${a.h.toFixed(1)})`;
                        return (
                            <button
                                key={preset.key}
                                type="button"
                                data-testid={`preset-card-${preset.key}`}
                                onClick={() => {
                                    onApplyPreset(preset.knobs);
                                    onClose();
                                }}
                                aria-label={`Use ${preset.name} preset`}
                                className="group flex w-full items-start gap-3 rounded-lg border border-border bg-card p-3 text-left transition-all hover:-translate-y-0.5 hover:border-accent/50 hover:shadow-sm focus:outline-none focus-visible:border-accent/60 focus-visible:ring-2 focus-visible:ring-accent/30"
                            >
                                {/* Square accent swatch on the left — full
                                    card-height so the color reads at a glance.
                                    Fixed pixel size avoids any flex compression
                                    or row-height drift. */}
                                <span
                                    aria-hidden="true"
                                    className="block shrink-0 self-stretch rounded-md border border-border/60"
                                    style={{
                                        width: '48px',
                                        background: swatch,
                                        minHeight: '48px',
                                    }}
                                    data-testid={`preset-card-swatch-${preset.key}`}
                                />
                                <span className="flex min-w-0 flex-1 flex-col gap-1">
                                    <span className="flex items-center justify-between gap-2">
                                        <span className="text-[13px] font-semibold tracking-tight text-foreground">
                                            {preset.name}
                                        </span>
                                        <ArrowRight
                                            className="h-3.5 w-3.5 shrink-0 translate-x-0 text-muted-foreground/60 transition-all group-hover:translate-x-0.5 group-hover:text-accent"
                                            strokeWidth={2}
                                            aria-hidden
                                        />
                                    </span>
                                    <span className="text-[11px] leading-snug text-muted-foreground">
                                        {preset.description}
                                    </span>
                                </span>
                            </button>
                        );
                    })}
                </div>
            </Modal.Body>
        </Modal>
    );
}
