'use client';

/**
 * C-FE — day-of-week picker.
 *
 * Input/output is the canonical comma-separated token string the API
 * accepts (`"MON,WED,FRI"`). Empty string represents a one-shot
 * window (no recurrence).
 */

import { Button } from '@/components/ui';

const DAYS = [
    { token: 'MON', label: 'Mon' },
    { token: 'TUE', label: 'Tue' },
    { token: 'WED', label: 'Wed' },
    { token: 'THU', label: 'Thu' },
    { token: 'FRI', label: 'Fri' },
    { token: 'SAT', label: 'Sat' },
    { token: 'SUN', label: 'Sun' },
] as const;

interface Props {
    value: string;
    onChange: (next: string) => void;
}

export function RecurrencePicker({ value, onChange }: Props) {
    const selected = new Set(
        value
            .split(',')
            .map((s) => s.trim().toUpperCase())
            .filter(Boolean)
    );

    function toggle(token: string) {
        const next = new Set(selected);
        if (next.has(token)) next.delete(token);
        else next.add(token);
        // Preserve canonical order (MON-first) so the API store reads predictably.
        const ordered = DAYS.filter((d) => next.has(d.token)).map((d) => d.token);
        onChange(ordered.join(','));
    }

    return (
        <div className="flex flex-wrap gap-2">
            {DAYS.map((d) => {
                const isSel = selected.has(d.token);
                return (
                    <Button
                        key={d.token}
                        variant="ghost"
                        size="sm"
                        onClick={() => toggle(d.token)}
                        className={
                            'text-xs font-bold ' +
                            (isSel
                                ? 'bg-amber-500 text-white shadow-sm'
                                : 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700')
                        }
                        aria-pressed={isSel}
                    >
                        {d.label}
                    </Button>
                );
            })}
        </div>
    );
}