benevoles/frontend/src/pages/MobileVolunteerPage.tsx

import { useMemo } from 'react';

import { ApiError } from '@/api';
import { useAssignments, usePositions, useShifts, useVolunteer } from '@/api/hooks';
import { useAuth } from '@/auth/auth-context';
import { ErrorNote, Loading } from '@/components/state';
import { hourRangeLabel, hoursBetween, longDayLabel, naiveMinutes } from '@/lib/time';
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.

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

  const meVolunteer = useVolunteer(volunteerId);
  const assignments = useAssignments(volunteerId ? { volunteerId } : undefined, {
    enabled: Boolean(volunteerId),
  });
  const shifts = useShifts();
  const positions = usePositions();

  const shiftsById = useMemo(
    () => new Map((shifts.data ?? []).map((s) => [s.id, s])),
    [shifts.data],
  );
  const positionsById = useMemo(
    () => new Map((positions.data ?? []).map((p) => [p.id, p])),
    [positions.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 (assignments.isLoading) return <Loading />;
  if (assignments.error) return <ErrorNote error={assignments.error} />;

  const firstName = meVolunteer.data?.first_name ?? account?.email.split('@')[0] ?? '';
  // shifts / positions peuvent être refusés (403) à un bénévole côté back-end réel :
  // on affiche alors les créneaux sans détail plutôt que de tomber en erreur.
  const detailsUnavailable =
    (shifts.error instanceof ApiError && shifts.error.status === 403) ||
    (positions.error instanceof ApiError && positions.error.status === 403);

  const slots = (assignments.data ?? [])
    .map((a) => ({ assignment: a, shift: shiftsById.get(a.shift_id) ?? null }))
    .sort((a, b) => {
      const av = a.shift ? naiveMinutes(a.shift.starts_at) : 0;
      const bv = b.shift ? naiveMinutes(b.shift.starts_at) : 0;
      return av - bv;
    });

  const totalHours =
    Math.round(
      slots.reduce(
        (sum, s) => sum + (s.shift ? hoursBetween(s.shift.starts_at, s.shift.ends_at) : 0),
        0,
      ) * 10,
    ) / 10;

  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>
          {!detailsUnavailable ? (
            <div className="border-2 border-cream px-[9px] py-[6px] font-display text-[12px] font-extrabold">
              {t('mobileVol.hours', { count: totalHours })}
            </div>
          ) : null}
        </div>
      </div>

      <div className="flex flex-1 flex-col gap-[14px] p-4 sm:p-6">
        {detailsUnavailable ? (
          <div className="border-2 border-dashed border-ink bg-yellow-soft p-3 font-mono text-[10px] leading-relaxed">
            {t('mobileVol.detailsUnavailable')}
          </div>
        ) : null}
        {slots.map(({ assignment, shift }) => {
          const position = shift ? positionsById.get(shift.position_id) : undefined;
          return (
            <div key={assignment.id} className="border-[3px] border-ink bg-paper shadow-brutal-lg">
              {shift ? (
                <div className="flex items-baseline gap-2 bg-ink px-[11px] py-2 text-cream">
                  <span className="font-display text-[15px] font-black">
                    {longDayLabel(shift.starts_at)}
                  </span>
                  <span className="ml-auto font-mono text-[16px] font-bold text-yellow">
                    {hourRangeLabel(shift.starts_at, shift.ends_at)}
                  </span>
                </div>
              ) : null}
              <div className="p-[11px]">
                {position ? (
                  <div className="font-display text-[23px] font-black leading-tight tracking-tight">
                    {position.name.toUpperCase()}
                  </div>
                ) : null}
                {position?.location ? (
                  <div className="mt-[9px] border-t-2 border-ink pt-[9px] font-mono text-[12px]">
                    {t('mobileVol.location', { location: position.location })}
                  </div>
                ) : null}
                <div className="mt-[11px] flex min-h-[52px] items-center justify-center border-[3px] border-ink bg-green font-display text-[15px] font-black text-white">
                  {t('mobileVol.slotAssigned')}
                </div>
              </div>
            </div>
          );
        })}
        {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>
  );
}