'use client';
import { useEffect, useMemo, useRef, useState } from 'react';
import { AlertTriangle, Check, Copy, Pipette, RotateCcw, Shuffle, ShoppingBag } from 'lucide-react';
import { cn } from '@/lib/utils';
import {
buildRamp, contrastRatio, hexToHsl, hslToHex, isValidHex, normalizeHex,
PRESETS, readableOn, themeAdvice,
} from '@/lib/color';
/**
* Colour picker for Settings → Appearance → Primary Color.
*
* Replaces the bare `` the field used to render. Reasons a
* plain text box was not good enough:
* - it accepted `red`, `#00`, `006a4e` and silently saved whatever was typed,
* which then got interpolated into CSS and broke the palette;
* - it showed no hint of what the colour would actually do to the storefront;
* - it was impossible to use on a phone.
*
* This control is valid-by-construction: every interaction path produces a
* normalised `#rrggbb`, and the ramp preview is generated with the exact same
* `buildRamp()` the storefront injector uses, so what you see is what ships.
*/
export default function ColorPickerField({
value,
onChange,
label,
hint,
previewAccent,
}: {
value: string;
onChange: (hex: string) => void;
label: string;
hint?: string;
/**
* The sibling accent colour, shown in the preview as a sale flag and cart
* counter. Passed only on the Primary field — the Accent field omits it so its
* own swatch is not drawn twice.
*/
previewAccent?: string;
}) {
const initial = normalizeHex(value) || '#006a4e';
const [hsl, setHsl] = useState(() => hexToHsl(initial));
const [draft, setDraft] = useState(initial);
const [copied, setCopied] = useState(false);
const [open, setOpen] = useState(false);
const lastPushed = useRef(initial);
// Adopt externally-driven changes (Reset button) without stomping in-progress
// edits: only react when the incoming value differs from what we last emitted.
useEffect(() => {
const n = normalizeHex(value);
if (n && n !== lastPushed.current) {
lastPushed.current = n;
setHsl(hexToHsl(n));
setDraft(n);
}
}, [value]);
const hex = useMemo(() => hslToHex(hsl), [hsl]);
const ramp = useMemo(() => buildRamp(hex), [hex]);
const advice = useMemo(() => themeAdvice(hex), [hex]);
function push(next: string) {
lastPushed.current = next;
onChange(next);
}
function setFromHex(input: string) {
const n = normalizeHex(input);
if (!n) return;
setHsl(hexToHsl(n));
setDraft(n);
push(n);
}
function setChannel(patch: Partial) {
const next = { ...hsl, ...patch };
setHsl(next);
const h = hslToHex(next);
setDraft(h);
push(h);
}
const hueGradient =
'linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)';
const satGradient = `linear-gradient(to right,hsl(${hsl.h} 0% ${hsl.l}%),hsl(${hsl.h} 100% ${hsl.l}%))`;
const lightGradient = `linear-gradient(to right,#000,hsl(${hsl.h} ${hsl.s}% 50%),#fff)`;
const isDefault = hex === '#006a4e';
async function copy() {
try {
await navigator.clipboard.writeText(hex);
setCopied(true);
setTimeout(() => setCopied(false), 1600);
} catch {
/* clipboard blocked — the value is visible in the field anyway */
}
}
return (
Your Store
{['Shop', 'New in', 'Blog'].map((t, i) => (
{t}
))}
{/* buttons */}
Add to Cart
Buy Now
In stock
{/* The accent colour drives sale flags and counters, so show one here.
Only meaningful on the primary field; the accent field passes its
own colour through `previewAccent`. */}
{previewAccent && (
<>
-25%
3
)}