import { Fragment, useMemo, useState } from 'react';

import type { ShiftRead } from '@/api/schema';
import { useAssignments, usePositions, useShifts, useVolunteers } from '@/api/hooks';
import { useAuth } from '@/auth/auth-context';
import { ErrorNote, Loading } from '@/components/state';
import { NowLine } from '@/components/NowLine';
import { hourRangeLabel, longDayLabel, naiveMinutes } from '@/lib/time';
import { useNowMinutes } from '@/lib/useNowMinutes';
import { t } from '@/i18n';
import { cx } from '@/lib/cx';
import { VolunteerHomeView } from '@/pages/VolunteerHomeView';

// Page réellement consultée par le référent (accueil de son rôle LEAD, cf.
// `auth/roles.ts:homePath`) — page responsive (mobile d'abord, élargie à
// partir de `sm:`), plus de maquette de téléphone. Un compte peut être
// référent de plusieurs postes (`Position.lead_account_id`) : chacun a sa
// propre carte, listant TOUS ses créneaux (pas seulement le plus proche) avec
// un repère « MAINTENANT » pour se situer. Aucun repli vers « le premier
// poste de l'édition » si le compte n'est référent d'aucun poste — ce serait
// montrer un poste qui n'est pas le sien ; s'il est par ailleurs rattaché à
// une fiche bénévole (cas courant : « Donner un accès de connexion » promu
// en référent), il voit alors sa vue de bénévole classique plutôt qu'un
// écran référent vide (`VolunteerHomeView`).
//
// Le pointage présent/absent reste local à l'écran (état React, jamais
// envoyé au serveur) : le pointage sur site est hors périmètre (CLAUDE.md §5).

type Presence = Record<string, 'present' | 'absent'>;

export function MobileLeadPage() {
  const { account } = useAuth();
  const positions = usePositions();
  const shifts = useShifts();
  const volunteers = useVolunteers();
  const assignments = useAssignments();
  const nowMinutes = useNowMinutes();
  const [presence, setPresence] = useState<Presence>({});

  const myPositions = (positions.data ?? []).filter(
    (p) => account && p.lead_account_id === account.id,
  );

  const shiftsByPosition = useMemo(() => {
    const map = new Map<string, ShiftRead[]>();
    for (const s of shifts.data ?? []) {
      const list = map.get(s.position_id) ?? [];
      list.push(s);
      map.set(s.position_id, list);
    }
    for (const list of map.values()) {
      list.sort((a, b) => naiveMinutes(a.starts_at) - naiveMinutes(b.starts_at));
    }
    return map;
  }, [shifts.data]);

  const volunteersById = useMemo(
    () => new Map((volunteers.data ?? []).map((v) => [v.id, v])),
    [volunteers.data],
  );

  if (positions.isLoading || shifts.isLoading) return <Loading />;
  const error = positions.error ?? shifts.error ?? volunteers.error ?? assignments.error;
  if (error) return <ErrorNote error={error} />;

  if (myPositions.length === 0) {
    if (account?.volunteer_id) {
      return (
        <VolunteerHomeView
          volunteerId={account.volunteer_id}
          fallbackName={account.email.split('@')[0]}
        />
      );
    }
    return (
      <div className="mx-auto w-full max-w-[640px] p-4 sm:p-6">
        <div className="border-[3px] border-dashed border-ink p-4 font-mono text-[11px] leading-relaxed opacity-70">
          {t('mobileLead.noPosition')}
        </div>
      </div>
    );
  }

  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('mobileLead.kicker')}</div>
        <div className="mt-[5px] font-display text-[28px] font-black leading-tight tracking-tight sm:text-[34px]">
          {t('mobileLead.positionsCount', { count: myPositions.length })}
        </div>
      </div>

      <div className="flex flex-1 flex-col gap-[22px] p-4 sm:p-6">
        {myPositions.map((position) => {
          const positionShifts = shiftsByPosition.get(position.id) ?? [];
          const nowIndex = positionShifts.findIndex((s) => naiveMinutes(s.starts_at) > nowMinutes);
          const nowInsertAt = nowIndex === -1 ? positionShifts.length : nowIndex;

          return (
            <div key={position.id} className="border-[3px] border-ink bg-paper shadow-brutal-lg">
              <div className="bg-ink px-[14px] pb-[11px] pt-[11px] text-cream">
                <div className="font-display text-[19px] font-black leading-tight tracking-tight">
                  {position.name.toUpperCase()}
                </div>
                {position.location ? (
                  <div className="font-display text-[13px] font-semibold opacity-80">
                    {position.location}
                  </div>
                ) : null}
              </div>

              <div className="flex flex-col gap-[14px] px-[14px] pb-[18px] pt-[13px]">
                {positionShifts.length === 0 ? (
                  <div className="font-mono text-[11px] leading-relaxed opacity-70">
                    {t('mobileLead.noShift')}
                  </div>
                ) : null}
                {positionShifts.map((shift, i) => {
                  const team = (assignments.data ?? [])
                    .filter((a) => a.shift_id === shift.id)
                    .map((a) => {
                      const volunteer = volunteersById.get(a.volunteer_id);
                      return {
                        id: a.id,
                        name: volunteer
                          ? `${volunteer.first_name} ${volunteer.last_name}`
                          : a.volunteer_id,
                        initials: volunteer
                          ? `${volunteer.first_name[0]}${volunteer.last_name[0]}`
                          : '?',
                        phone: volunteer?.phone ?? '',
                        present: presence[a.id] === 'present',
                        absent: presence[a.id] === 'absent',
                      };
                    });
                  const presentCount = team.filter((m) => m.present).length;

                  return (
                    <Fragment key={shift.id}>
                      {i === nowInsertAt ? <NowLine /> : null}
                      <div className="border-2 border-ink">
                        <div className="flex flex-wrap items-stretch gap-2 border-b-2 border-ink bg-sand px-[11px] py-[9px]">
                          <div className="bg-yellow px-[9px] py-[7px] font-display text-[12px] font-extrabold text-ink">
                            {longDayLabel(shift.starts_at)} ·{' '}
                            {hourRangeLabel(shift.starts_at, shift.ends_at)}
                          </div>
                          <div className="border-2 border-ink bg-cream px-[9px] py-[6px] font-display text-[12px] font-extrabold">
                            {t('mobileLead.present', { present: presentCount, total: team.length })}
                          </div>
                        </div>
                        <div className="flex flex-col gap-[11px] p-[11px]">
                          {team.map((member) => (
                            <div
                              key={member.id}
                              className="border-[3px] border-ink bg-cream shadow-brutal-sm"
                            >
                              <div className="flex items-center gap-[10px] px-[11px] py-[10px]">
                                <span className="flex h-[38px] w-[38px] flex-none items-center justify-center border-[3px] border-ink bg-yellow font-display text-[13px] font-extrabold">
                                  {member.initials}
                                </span>
                                <span className="min-w-0 flex-1">
                                  <span className="block font-display text-[17px] font-extrabold leading-tight">
                                    {member.name}
                                  </span>
                                  <span className="block font-mono text-[10.5px] opacity-65">
                                    {member.phone}
                                  </span>
                                </span>
                                {member.present ? (
                                  <span className="flex-none border-2 border-ink bg-green px-[7px] py-[5px] font-display text-[11px] font-extrabold text-white">
                                    {t('mobileLead.badgePresent')}
                                  </span>
                                ) : null}
                                {member.absent ? (
                                  <span className="flex-none border-2 border-ink bg-orange px-[7px] py-[5px] font-display text-[11px] font-extrabold">
                                    {t('mobileLead.badgeAbsent')}
                                  </span>
                                ) : null}
                              </div>
                              <div className="grid grid-cols-2 border-t-[3px] border-ink">
                                <button
                                  type="button"
                                  onClick={() =>
                                    setPresence((p) => ({ ...p, [member.id]: 'present' }))
                                  }
                                  className={cx(
                                    'min-h-[52px] cursor-pointer border-r-[3px] border-ink bg-paper font-display text-[14px] font-black hover:bg-green hover:text-white',
                                  )}
                                >
                                  {t('mobileLead.markPresent')}
                                </button>
                                <button
                                  type="button"
                                  onClick={() =>
                                    setPresence((p) => ({ ...p, [member.id]: 'absent' }))
                                  }
                                  className="min-h-[52px] cursor-pointer bg-paper font-display text-[14px] font-black hover:bg-orange"
                                >
                                  {t('mobileLead.markAbsent')}
                                </button>
                              </div>
                            </div>
                          ))}
                          {team.length === 0 ? (
                            <div className="font-mono text-[11px] leading-relaxed opacity-70">
                              {t('mobileLead.emptyTeam')}
                            </div>
                          ) : null}
                        </div>
                      </div>
                    </Fragment>
                  );
                })}
                {nowInsertAt === positionShifts.length && positionShifts.length > 0 ? (
                  <NowLine />
                ) : null}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}