import { useTranslation } from '@/hooks/use-translation';
import { cn } from '@/lib/utils';
import { CalendarRange } from 'lucide-react';
import { projectTemplate, rangesOverlap, type DateRange, type SeasonIntensity, type SeasonTemplate } from '../season-range-utils';

/** An existing range may carry the season name typed by the user (manual rows). */
type ExistingRange = DateRange & { name?: string };

type SeasonTemplateGalleryProps = {
    templates: SeasonTemplate[];
    /** Local ISO date (YYYY-MM-DD) built by the caller — projection anchor. */
    today: string;
    /** Ranges already present in the form; a template overlapping one is disabled. */
    existingRanges: ExistingRange[];
    onPick: (season: { name: string; start_date: string; end_date: string }) => void;
    /** Disables the whole gallery (e.g. while a bulk run is in progress). */
    disabled?: boolean;
};

/**
 * Subtle Tailwind palettes per intensity: chip = pale background + matching
 * border/text, dot = the saturated accent. Literal strings on purpose so the
 * Tailwind JIT compiler sees every class.
 */
const INTENSITY_CHIP_CLASS: Record<SeasonIntensity, string> = {
    low: 'border-sky-200 bg-sky-50 text-sky-900 hover:bg-sky-100 dark:border-sky-900 dark:bg-sky-950/40 dark:text-sky-200 dark:hover:bg-sky-950/70',
    mid: 'border-amber-200 bg-amber-50 text-amber-900 hover:bg-amber-100 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-200 dark:hover:bg-amber-950/70',
    high: 'border-orange-200 bg-orange-50 text-orange-900 hover:bg-orange-100 dark:border-orange-900 dark:bg-orange-950/40 dark:text-orange-200 dark:hover:bg-orange-950/70',
    peak: 'border-rose-200 bg-rose-50 text-rose-900 hover:bg-rose-100 dark:border-rose-900 dark:bg-rose-950/40 dark:text-rose-200 dark:hover:bg-rose-950/70',
    event: 'border-violet-200 bg-violet-50 text-violet-900 hover:bg-violet-100 dark:border-violet-900 dark:bg-violet-950/40 dark:text-violet-200 dark:hover:bg-violet-950/70',
};

const INTENSITY_DOT_CLASS: Record<SeasonIntensity, string> = {
    low: 'bg-sky-400',
    mid: 'bg-amber-400',
    high: 'bg-orange-400',
    peak: 'bg-rose-400',
    event: 'bg-violet-400',
};

/**
 * Timeline segment colors, exported for the parent page: same accents as the
 * gallery dots (template seasons), plus neutral (manual season), gray (base
 * price gaps) and a light outline (untouched window when no base price).
 */
export const INTENSITY_BAR_CLASS: Record<SeasonIntensity, string> = {
    low: 'bg-sky-400',
    mid: 'bg-amber-400',
    high: 'bg-orange-400',
    peak: 'bg-rose-400',
    event: 'bg-violet-400',
};
export const TIMELINE_MANUAL_CLASS = 'bg-teal-500';
export const TIMELINE_BASE_PRICE_CLASS = 'bg-gray-300 dark:bg-gray-600';
export const TIMELINE_UNTOUCHED_CLASS = 'bg-transparent shadow-[inset_0_0_0_1px] shadow-gray-300 dark:shadow-gray-700';

/** dd/MM, with the 2-digit year appended only when it differs from today's. */
function formatProjectedDate(iso: string, todayYear: string): string {
    const [year, month, day] = iso.split('-');
    return year === todayYear ? `${day}/${month}` : `${day}/${month}/${year.slice(2)}`;
}

/**
 * Spec A — clickable template chips, colored by intensity, showing the name
 * and the PROJECTED concrete dates. Clicking pre-fills a season row (only the
 * price remains to type). A chip is disabled with an explanatory tooltip when
 * its projection overlaps a range already present. Chips are sorted by
 * projected start date.
 */
export default function SeasonTemplateGallery({ templates, today, existingRanges, onPick, disabled }: SeasonTemplateGalleryProps) {
    const { t } = useTranslation();
    const todayYear = today.slice(0, 4);

    const projected = templates
        .map((tpl) => {
            const range = projectTemplate(tpl, today);
            const conflict = existingRanges.find((existing) => rangesOverlap(range, existing));
            return { tpl, range, conflict };
        })
        .sort((a, b) => (a.range.start_date < b.range.start_date ? -1 : a.range.start_date > b.range.start_date ? 1 : 0));

    return (
        <div className="flex flex-col gap-2">
            <div>
                <p className="text-sm font-medium">{t('properties.step6', 'template_gallery_title')}</p>
                <p className="text-muted-foreground text-xs">{t('properties.step6', 'template_gallery_hint')}</p>
            </div>
            <div className="flex flex-wrap gap-2">
                {projected.map(({ tpl, range, conflict }) => {
                    const blocked = disabled || conflict !== undefined;
                    const conflictName =
                        conflict &&
                        (conflict.name ||
                            `${formatProjectedDate(conflict.start_date, todayYear)} → ${formatProjectedDate(conflict.end_date, todayYear)}`);

                    return (
                        <button
                            key={tpl.name}
                            type="button"
                            disabled={blocked}
                            title={conflict ? t('properties.step6', 'template_conflicts_with').replace(':name', conflictName ?? '') : undefined}
                            onClick={() => onPick({ name: tpl.name, start_date: range.start_date, end_date: range.end_date })}
                            className={cn(
                                'flex flex-col items-start gap-0.5 rounded-lg border px-3 py-2 text-left transition-colors',
                                INTENSITY_CHIP_CLASS[tpl.intensity],
                                blocked ? 'cursor-not-allowed opacity-40' : 'cursor-pointer',
                            )}
                        >
                            <span className="flex items-center gap-1.5 text-sm font-medium">
                                <span className={cn('h-2 w-2 shrink-0 rounded-full', INTENSITY_DOT_CLASS[tpl.intensity])} />
                                {tpl.name}
                            </span>
                            <span className="flex items-center gap-1 text-xs opacity-80">
                                <CalendarRange className="h-3 w-3 shrink-0" />
                                {formatProjectedDate(range.start_date, todayYear)} → {formatProjectedDate(range.end_date, todayYear)}
                            </span>
                        </button>
                    );
                })}
            </div>
        </div>
    );
}