import InputError from '@/components/input-error';
import { Label } from '@/components/ui/label';
import type { BrandingPreset } from '@/types/branding';

type ColorPresetPickerProps = {
    presets: BrandingPreset[];
    selectedPresetKey: string | null;
    primary: string;
    accent: string;
    errors: { primary_color?: string; accent_color?: string };
    onPresetSelect: (preset: BrandingPreset) => void;
    onPrimaryChange: (color: string) => void;
    onAccentChange: (color: string) => void;
};

export default function ColorPresetPicker({
    presets,
    selectedPresetKey,
    primary,
    accent,
    errors,
    onPresetSelect,
    onPrimaryChange,
    onAccentChange,
}: ColorPresetPickerProps) {
    return (
        <div className="grid gap-4">
            <div className="grid gap-2">
                <Label>Color preset</Label>
                <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
                    {presets.map((preset) => {
                        const isSelected = preset.key === selectedPresetKey;

                        return (
                            <button
                                key={preset.key}
                                type="button"
                                aria-pressed={isSelected}
                                onClick={() => onPresetSelect(preset)}
                                className={`flex items-center gap-2 rounded-md border px-3 py-2 text-left text-sm transition-colors ${
                                    isSelected
                                        ? 'border-primary ring-2 ring-primary/30'
                                        : 'border-input hover:bg-muted/50'
                                }`}
                            >
                                <span className="flex shrink-0 -space-x-1">
                                    <span
                                        className="size-4 rounded-full border"
                                        style={{
                                            backgroundColor: preset.primary,
                                        }}
                                    />
                                    <span
                                        className="size-4 rounded-full border"
                                        style={{
                                            backgroundColor: preset.accent,
                                        }}
                                    />
                                </span>
                                <span className="truncate">{preset.label}</span>
                            </button>
                        );
                    })}
                </div>
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
                <div className="grid gap-2">
                    <Label htmlFor="primary_color">Primary color</Label>
                    <input
                        id="primary_color"
                        name="primary_color"
                        type="color"
                        value={primary}
                        onChange={(event) =>
                            onPrimaryChange(event.target.value)
                        }
                        className="h-9 w-full cursor-pointer rounded-md border border-input bg-background p-1"
                    />
                    <InputError message={errors.primary_color} />
                </div>

                <div className="grid gap-2">
                    <Label htmlFor="accent_color">Accent color</Label>
                    <input
                        id="accent_color"
                        name="accent_color"
                        type="color"
                        value={accent}
                        onChange={(event) => onAccentChange(event.target.value)}
                        className="h-9 w-full cursor-pointer rounded-md border border-input bg-background p-1"
                    />
                    <InputError message={errors.accent_color} />
                </div>
            </div>
        </div>
    );
}