benevoles/frontend/src/pages/MobileVolunteerPage.tsx

import { Fragment, useMemo } from 'react';

import { useVolunteer, useVolunteerPlanning } from '@/api/hooks';
import { useAuth } from '@/auth/auth-context';
import { ErrorNote, Loading } from '@/components/state';
import { hourRangeLabel, longDayLabel, naiveMinutes } from '@/lib/time';
import { useNowMinutes } from '@/lib/useNowMinutes';
import { t } from '@/i18n';

// Page réellement consultée par le bénévole (accueil de son rôle, cf.
// `auth/roles.ts:homePath`) — sur son propre téléphone la plupart du temps,
// mais aussi possible depuis un ordinateur : le rendu ci-dessous s'adapte
// (mobile d'abord, une seule colonne pleine largeur ; élargi et centré à
// partir de `sm:`), sans jamais simuler un cadre de téléphone. Repères de
// conception conservés : fonds opaques, texte noir sur jaune ou blanc (pas
// de gris clair, lisibilité plein soleil), cibles tactiles ≥ 52 px de haut,
// une seule action par créneau.

function NowLine() {
  return (
    <div className="flex items-center gap-2 px-1" aria-hidden="true">
      <div className="h-[3px] flex-1 bg-orange" />
      <div className="bg-orange px-[7px] py-[3px] font-mono text-[10px] font-bold text-white">
        {t('mobileVol.now')}
      </div>
      <div className="h-[3px] flex-1 bg-orange" />
    </div>
  );
}

export function MobileVolunteerPage() {
  const { account } = useAuth();
  const volunteerId = account?.volunteer_id ?? null;

  const meVolunteer = useVolunteer(volunteerId);
  const planning = useVolunteerPlanning(volunteerId);
  const nowMinutes = useNowMinutes();
  // Hooks appelés inconditionnellement avant les retours anticipés ci-dessous.
  const slots = useMemo(
    () =>
      [...(planning.data ?? [])].sort(
        (a, b) => naiveMinutes(a.starts_at) - naiveMinutes(b.starts_at),
      ),
    [planning.data],
  );

  if (!volunteerId) {
    return (
      <div className="mx-auto w-full max-w-[640px] p-4 sm:p-6">
        <div className="border-[3px] border-dashed border-ink bg-paper p-4 font-display text-[13px] font-bold">
          {t('mobileVol.noAccount')}
        </div>
      </div>
    );
  }
  if (planning.isLoading) return <Loading />;
  if (planning.error) return <ErrorNote error={planning.error} />;

  const firstName = meVolunteer.data?.first_name ?? account?.email.split('@')[0] ?? '';

  const totalHours =
    Math.round(
      slots.reduce((sum, s) => sum + (naiveMinutes(s.ends_at) - naiveMinutes(s.starts_at)) / 60, 0) *
        10,
    ) / 10;

  // Le repère « maintenant » se place juste avant le premier créneau pas
  // encore commencé (le prochain à venir) ; en fin de liste si tous sont déjà
  // passés.
  const nowIndex = slots.findIndex((s) => naiveMinutes(s.starts_at) > nowMinutes);
  const nowInsertAt = nowIndex === -1 ? slots.length : nowIndex;

  return (
    <div className="mx-auto flex w-full max-w-[640px] flex-1 flex-col">
      <div className="bg-ink px-4 py-5 text-cream sm:px-6 sm:py-7">
        <div className="font-mono text-[10px] text-yellow">{t('mobileVol.kicker')}</div>
        <div className="mt-[5px] font-display text-[28px] font-black leading-tight tracking-tight sm:text-[34px]">
          {t('mobileVol.greeting', { name: firstName.toUpperCase() })}
        </div>
        <div className="mt-3 flex flex-wrap gap-2">
          <div className="bg-yellow px-[9px] py-[7px] font-display text-[12px] font-extrabold text-ink">
            {t('mobileVol.slots', { count: slots.length })}
          </div>
          <div className="border-2 border-cream px-[9px] py-[6px] font-display text-[12px] font-extrabold">
            {t('mobileVol.hours', { count: totalHours })}
          </div>
        </div>
      </div>

      <div className="flex flex-1 flex-col gap-[14px] p-4 sm:p-6">
        {slots.map((entry, i) => (
          <Fragment key={entry.assignment_id}>
            {i === nowInsertAt ? <NowLine /> : null}
            <div className="border-[3px] border-ink bg-paper shadow-brutal-lg">
              <div className="flex items-baseline gap-2 bg-ink px-[11px] py-2 text-cream">
                <span className="font-display text-[15px] font-black">
                  {longDayLabel(entry.starts_at)}
                </span>
                <span className="ml-auto font-mono text-[16px] font-bold text-yellow">
                  {hourRangeLabel(entry.starts_at, entry.ends_at)}
                </span>
              </div>
              <div className="p-[11px]">
                <div className="font-display text-[23px] font-black leading-tight tracking-tight">
                  {entry.position_name.toUpperCase()}
                </div>
                {entry.position_location ? (
                  <div className="mt-[9px] border-t-2 border-ink pt-[9px] font-mono text-[12px]">
                    {t('mobileVol.location', { location: entry.position_location })}
                  </div>
                ) : null}
                {entry.referent_name ? (
                  <div className="mt-[9px] font-mono text-[12px]">
                    {t('mobileVol.referent', { name: entry.referent_name })}
                  </div>
                ) : null}
                {entry.referent_phone ? (
                  <div className="mt-[3px] font-mono text-[12px]">
                    {t('mobileVol.phone', { phone: entry.referent_phone })}
                  </div>
                ) : null}
              </div>
            </div>
          </Fragment>
        ))}
        {nowInsertAt === slots.length && slots.length > 0 ? <NowLine /> : null}
        {slots.length === 0 ? (
          <div className="border-[3px] border-dashed border-ink p-4 font-mono text-[11px] leading-relaxed opacity-70">
            {t('mobileVol.noSlots')}
          </div>
        ) : null}
      </div>
    </div>
  );
}