dyolink/frontend/src/components/ui/treatment/AppointmentsStrip.tsx

'use client';

import { useLocale, useTranslations } from 'next-intl';
import { CalendarDays } from 'lucide-react';
import { Card } from '@/components/ui/shared/Card';
import { ScheduleDayPicker } from '@/components/ui/shared/ScheduleDayPicker';
import { startOfLocalDay } from '@/components/appointments/appointmentTime';
import {
  treatmentTypeBannerStyle,
  treatmentTypeLabelFromCatalog,
} from '@/components/shared/treatmentTypeDisplay';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
import type { TreatmentAppointment } from '@/types/treatment';
import { APP_DATE, formatAppTimeRange } from '@/lib/i18n/format';

interface AppointmentsStripProps {
  stripHidden: boolean;
  onToggleStripHidden: () => void;
  selectedDay: Date;
  onSelectDay: (day: Date) => void;
  appointments: TreatmentAppointment[];
  selectedAppointmentId: string | null;
  onSelectAppointment: (id: string) => void;
  treatmentCatalog: TreatmentCatalogEntry[];
  loading?: boolean;
}

export function AppointmentsStrip({
  stripHidden,
  onToggleStripHidden,
  selectedDay,
  onSelectDay,
  appointments,
  selectedAppointmentId,
  onSelectAppointment,
  treatmentCatalog,
  loading = false,
}: AppointmentsStripProps) {
  const locale = useLocale();
  const t = useTranslations('treatment');

  if (stripHidden) {
    return (
      <Card className="flex items-center justify-between gap-3 flex-wrap" padding="sm">
        <p className="text-sm text-text-secondary">{t('hiddenMessage')}</p>
        <button
          type="button"
          onClick={onToggleStripHidden}
          className="text-sm font-medium text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 rounded-[var(--radius-sm)]"
        >
          {t('showAppointments')}
        </button>
      </Card>
    );
  }

  return (
    <Card className="space-y-4">
      <div className="flex items-center justify-between gap-3 flex-wrap">
        <div className="flex items-center gap-2 min-w-0">
          <CalendarDays className="w-5 h-5 text-text-muted shrink-0 icon-flat" aria-hidden />
          <h2 className="text-sm font-semibold text-text-primary truncate">{t('appointmentsTitle')}</h2>
        </div>
        <button
          type="button"
          onClick={onToggleStripHidden}
          className="text-sm font-medium text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 rounded-[var(--radius-sm)]"
        >
          {t('hideAppointments')}
        </button>
      </div>

      <div className="flex flex-col sm:flex-row sm:items-end gap-4 sm:justify-between">
        <ScheduleDayPicker
          value={selectedDay}
          onChange={(d) => onSelectDay(startOfLocalDay(d))}
        />
        {loading && (
          <p className="text-sm text-text-muted pb-2">{t('loadingAppointments')}</p>
        )}
      </div>

      <div className="flex flex-wrap gap-2">
        {appointments.length === 0 && (
          <p className="text-sm text-text-muted">{t('emptyDay')}</p>
        )}
        {appointments.map((a) => {
          const sel = a.id === selectedAppointmentId;
          const timeLabel = formatAppTimeRange(a.startAt, a.endAt, locale);
          const purposeLabel = treatmentTypeLabelFromCatalog(a.purpose, treatmentCatalog);
          const purposeIndex = treatmentCatalog.findIndex((e) => e.code === a.purpose);
          return (
            <Card
              as="button"
              key={a.id}
              type="button"
              onClick={() => onSelectAppointment(a.id)}
              padding="none"
              style={treatmentTypeBannerStyle(a.purpose, purposeIndex < 0 ? 0 : purposeIndex)}
              className={`
                text-start rounded-[var(--radius-sm)] px-3 py-2 w-full sm:w-auto sm:min-w-[200px] sm:max-w-[280px] transition-shadow min-h-[52px]
                focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/45
                ${sel ? 'ring-2 ring-primary ring-offset-2 ring-offset-background-secondary shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]' : 'hover:brightness-110'}
              `}
            >
              <p className="text-[11px] font-medium tabular-nums opacity-95">{timeLabel}</p>
              <p className="text-sm font-medium leading-tight truncate mt-0.5">
                {a.patientFirstName} {a.patientLastName}
              </p>
              <p className="text-[11px] opacity-90 mt-0.5 truncate">{purposeLabel}</p>
            </Card>
          );
        })}
      </div>
    </Card>
  );
}