import { cn } from '@/lib/utils';
import { memo } from 'react';
import type { AxisDay } from '../lib/day-axis';
import { DAY_COL_WIDTH } from '../lib/day-axis';
import { getPriceColor } from '../lib/price-color';
import type { PriceDay } from '../types';
/** Subtle brand-tinted background for weekend / today header & cells. */
const WEEKEND_TINT = 'bg-emerald-50/60 dark:bg-emerald-950/20';
const TODAY_TINT = 'bg-emerald-100/70 ring-1 ring-emerald-300 dark:bg-emerald-900/30 dark:ring-emerald-700';
/**
* One sticky-top date header cell (day-of-month over short weekday). Pure +
* memoized — there are DAY_COUNT of these and they never change once rendered.
*
* `tourAnchor` : ancre de la visite guidée, posée sur UNE seule en-tête (la
* première nuit). Elle porte aussi une marge de défilement égale à la zone
* figée : la visite amène sa cible à l'écran avec `scrollIntoView`, qui ne sait
* rien des colonnes collées à gauche — sans cette marge, un tableau déjà
* défilé ramènerait la première nuit PILE sous les colonnes figées.
*/
export const DateColumnHeader = memo(function DateColumnHeader({ day, tourAnchor }: { day: AxisDay; tourAnchor?: string }) {
return (
|
{day.dayOfMonth}
{day.weekday}
|
);
});
interface DayCellProps {
day: PriceDay | undefined;
/** Base price for demand-colour ratio; falls back to the cell price. */
basePrice: number | null;
/** USD→TND rate; stable prop, used to expose the TND value on a data-* attr. */
exchangeRate: number;
weekendTint: boolean;
todayTint: boolean;
}
/**
* One day cell. Pure + memoized for perf (~114 rows × 90 cells). Renders the
* compact price with a demand-coloured background; booked nights are muted +
* line-through (mirrors PriceCalendarPreview).
*
* Detail (date · price · TND · reasons) is exposed via `data-*` attributes
* rather than a native `title` (slow hover) or a per-cell Radix tooltip (perf
* trap). A single delegated mousemove listener on the scroll container reads
* these attributes to drive one shared tooltip — O(1) DOM regardless of count.
*/
export const DayCell = memo(function DayCell({ day, basePrice, exchangeRate, weekendTint, todayTint }: DayCellProps) {
if (!day) {
// Loaded-but-no-data for this date (e.g. shorter series): faint dash.
return (
—
|
);
}
const colour = day.is_booked ? 'bg-muted/80 text-muted-foreground line-through opacity-60' : getPriceColor(day.price, basePrice ?? day.price);
return (
${Math.round(day.price)}
|
);
});
/** Skeleton shimmer cell shown while a row's series is still loading. */
export const SkeletonDayCell = memo(function SkeletonDayCell({ weekendTint, todayTint }: { weekendTint: boolean; todayTint: boolean }) {
return (
|
);
});
/** Faint disabled cell for unconfigured rows (no series will ever load). */
export const DisabledDayCell = memo(function DisabledDayCell({ weekendTint, todayTint }: { weekendTint: boolean; todayTint: boolean }) {
return (
—
|
);
});