ita-ito-horaires/app/admin/vacances/YearCalendar.tsx

import { addCivilDays, civilDayOfWeek } from '@/lib/schedule/civil';
import { periodsOverlap, type Period } from '@/lib/schedule/vacations';

const MONTHS_FR = [
  'Janvier',
  'Février',
  'Mars',
  'Avril',
  'Mai',
  'Juin',
  'Juillet',
  'Août',
  'Septembre',
  'Octobre',
  'Novembre',
  'Décembre',
];

type LabelledPeriod = Period & { labelFr: string };

type Day = { date: string; isWeekend: boolean; label: string | null };
type Month = { key: string; label: string; days: Day[] };

/**
 * Twelve months from today, with closure days filled in.
 *
 * A list of date ranges is precise and hard to picture; a year at a glance is
 * how anyone actually checks "have I left a gap in August?". Rendered on the
 * server: it only changes when the data does.
 */
export default function YearCalendar({
  from,
  periods,
}: {
  from: string;
  periods: LabelledPeriod[];
}) {
  const months = buildMonths(from, periods);

  return (
    <div className="overflow-x-auto">
      <table className="w-full min-w-[34rem] border-separate border-spacing-y-1 text-sm">
        <caption className="sr-only">
          Calendrier des douze prochains mois, jours de fermeture marqués
        </caption>
        <tbody>
          {months.map((month) => (
            <tr key={month.key}>
              <th
                scope="row"
                className="w-28 pr-3 text-left align-middle font-normal text-[var(--ink-muted)]"
              >
                {month.label}
              </th>
              <td>
                <div className="flex gap-[2px]">
                  {month.days.map((day) => (
                    <span
                      key={day.date}
                      title={day.label ? `${day.date} — ${day.label}` : day.date}
                      className={[
                        'h-5 flex-1 rounded-[2px]',
                        day.label
                          ? 'bg-[var(--accent)]'
                          : day.isWeekend
                            ? 'bg-[var(--surface-muted)]'
                            : 'bg-[var(--line)]',
                      ].join(' ')}
                    />
                  ))}
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      <p className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-[var(--ink-muted)]">
        <span className="flex items-center gap-1.5">
          <span className="inline-block h-3 w-3 rounded-[2px] bg-[var(--accent)]" /> fermeture
        </span>
        <span className="flex items-center gap-1.5">
          <span className="inline-block h-3 w-3 rounded-[2px] bg-[var(--surface-muted)]" /> week-end
        </span>
      </p>
    </div>
  );
}

function buildMonths(from: string, periods: LabelledPeriod[]): Month[] {
  const months: Month[] = [];
  let cursor = `${from.slice(0, 7)}-01`;

  for (let index = 0; index < 12; index += 1) {
    const prefix = cursor.slice(0, 7);
    const [year, month] = prefix.split('-').map(Number);
    const days: Day[] = [];

    let day = cursor;
    while (day.startsWith(prefix)) {
      const covering = periods.find((period) =>
        periodsOverlap({ startDate: day, endDate: day }, period),
      );
      days.push({
        date: day,
        isWeekend: [0, 6].includes(civilDayOfWeek(day)),
        label: covering?.labelFr ?? null,
      });
      day = addCivilDays(day, 1);
    }

    months.push({ key: prefix, label: `${MONTHS_FR[(month ?? 1) - 1]} ${year}`, days });
    cursor = day;
  }

  return months;
}