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 { DesignNote, PhoneFrame } from '@/pages/mobile/PhoneFrame';
import { hourRangeLabel, hoursBetween, longDayLabel, naiveMinutes } from '@/lib/time';
import { t } from '@/i18n';

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="m-6 max-w-[560px] border-[3px] border-dashed border-ink bg-paper p-4 font-display text-[13px] font-bold">
        {t('mobileVol.noAccount')}
      </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="flex flex-wrap items-start gap-[26px] p-6">
      <PhoneFrame time={t('mobileVol.statusTime')}>
        <div className="bg-ink px-4 pb-4 pt-3 text-cream">
          <div className="font-mono text-[10px] text-yellow">{t('mobileVol.kicker')}</div>
          <div className="mt-[5px] font-display text-[30px] font-black leading-tight tracking-tight">
            {t('mobileVol.greeting', { name: firstName.toUpperCase() })}
          </div>
          <div className="mt-3 flex 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-col gap-[14px] px-[14px] pb-[26px] pt-[14px]">
          {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>
      </PhoneFrame>

      <DesignNote>{t('mobileVol.designNote')}</DesignNote>
    </div>
  );
}