// FOOTPASS Messenger v2 · ACCUEIL complet (HMHomeV2)
// Le tableau de bord épuré de l'agent : ce qu'il faut traiter, le prochain
// rendez-vous, la négociation en cours, les joueurs représentés et les
// dernières conversations. Chaque tuile mène à l'endroit réel de l'app
// (fiche agenda, conversation, autorisations) · rien n'est décoratif.
// Branché par FPShell (home.jsx) via window.HMHomeV2.

const acTX = (s) => (typeof TX === 'function' ? TX(s) : s);

// Coche « tout est traité »
const AcCheck = ({ s = 15 }) => (
  <svg width={s} height={s} viewBox="0 0 16 16" fill="none">
    <path d="M2.8 8.6L6.2 12L13.2 4.4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
  </svg>
);

function HMHomeV2({ lang, onOpenChat, onTab, onOpenSub, onOpenEvent, events, hasUnreadNotifs }) {
  const cal = window.FP_CAL;
  const TH = window.FP_EV_THEMES;

  // ── Prochain rendez-vous (jour puis heure) ──
  const upcoming = (events || []).filter((e) => !window.fpEvIsPast(e)).sort(window.fpEvSort);
  const next = upcoming[0] || null;
  const nextPeer = next ? FP_PEERS[next.who] : null;

  // ── À traiter · dérivé des stores réels (rien d'inventé, tout actionnable) ──
  const todos = [];
  upcoming.filter((e) => e.status === 'pending' && e.d - cal.todayD <= 3).forEach((e) => {
    todos.push({
      id: 'ev' + e.id, tint: TH[e.theme].c, icon: <HMI.Calendar s={16} />,
      title: acTX('Présence à confirmer'),
      sub: acTX(e.title) + ' · ' + window.fpEvDayLabel(e.d, e.m) + ', ' + e.time,
      go: () => onOpenEvent(e),
    });
  });
  (window.FP_DOCS || []).filter((d) => d.state === 'pending' && d.chat && FP_PEERS[d.chat]).forEach((d) => {
    todos.push({
      id: 'doc' + d.id, tint: '#E2B248', icon: <HMI.Pen s={15} />,
      title: acTX('Signature en attente'),
      sub: acTX(d.title) + ' · ' + window.fpUpperLast(FP_PEERS[d.chat].name),
      go: () => onOpenChat(d.chat),
    });
  });
  (window.FP_MANDATES || []).filter((m) => m.status === 'pending').forEach((m) => {
    todos.push({
      id: 'mand' + m.id, tint: '#A07CEA', icon: <HMI.Mandate s={17} />,
      title: acTX("Demande d'accès à examiner"),
      sub: m.title + ' · ' + acTX(m.until.charAt(0).toLowerCase() + m.until.slice(1)),
      go: () => onOpenSub('mandates'),
    });
  });

  // ── Négociation en cours + joueurs représentés ──
  const deal = (window.FP_DEALS || [])[0];
  const players = (window.FP_MANDATES || []).filter((m) => m.pid && FP_PEERS[m.pid] && FP_PEERS[m.pid].role === 'Joueur' && m.status === 'active');
  const recents = window.FP_CONVOS.map((m) => ({ ...FP_PEERS[m.id], ...m })).slice(0, 3);
  const mandYear = (m) => { const y = String(m.until || '').match(/(20\d\d)/); return y ? acTX('Autorisation') + ' · ' + y[1] : acTX('Autorisation active'); };

  return (
    <div className="hm-page" data-screen-label="Accueil">
      <div className="hm-apphead">
        <img className="hm-logo" src="assets/logotype_white.png" alt="FOOTPASS®" />
        <div className="hm-apphead-actions">
          <button className="hm-iconbtn" onClick={() => onOpenSub('notifs')} aria-label="Notifications">
            <HMI.Bell />
            {hasUnreadNotifs ? <span className="hm-dot"></span> : null}
          </button>
          <button className="hm-avatarbtn" onClick={() => onTab('menu')} aria-label="Profil"><img src={FP_ME.photo} alt="AD" /></button>
        </div>
      </div>

      <div className="hm-scroll">
        <div className="ac-hello">
          <h1 className="hm-h1">{acTX('Bonjour, Alexandre')}</h1>
          <span className="ac-date">{acTX(cal.todayLabel)}</span>
        </div>

        {/* Pass ID : statut compact, or · tap = carte complète + QR */}
        <button className="hm-pass" onClick={() => onOpenSub('passid')}>
          <span className="hm-pass-ic"><HMI.Card s={20} /></span>
          <span className="hm-pass-txt">
            <b>PASS ID · VERIFIED</b>
            <em>2480 1196 0049 · {acTX('Agent')}</em>
          </span>
          <span className="hm-pass-chev"><HMI.Chevron /></span>
        </button>

        {/* À traiter · vivant : confirmer, signer, examiner. Vide quand tout est fait. */}
        <div className="hm-sechead">
          <span>{acTX('À traiter')}{todos.length ? <i className="ac-count">{todos.length}</i> : null}</span>
        </div>
        {todos.length ? (
          <div className="hm-cardlist">
            {todos.map((t) => (
              <button key={t.id} className="hm-row" onClick={t.go}>
                <span className="hm-row-ic" style={{ background: `color-mix(in srgb, ${t.tint} 13%, transparent)`, color: t.tint }}>{t.icon}</span>
                <span className="hm-row-txt"><b>{t.title}</b><em>{t.sub}</em></span>
                <HMI.Chevron c="#A1A1AA" />
              </button>
            ))}
          </div>
        ) : (
          <div className="ac-done">
            <span className="ac-done-ic"><AcCheck /></span>
            {acTX('Tout est traité. Rien ne vous attend.')}
          </div>
        )}

        {/* Prochain rendez-vous */}
        {next ? (
          <React.Fragment>
            <div className="hm-sechead">
              <span>{acTX('Prochain rendez-vous')}</span>
              <button className="hm-seclink" onClick={() => onTab('agenda')}>{acTX('Agenda')}</button>
            </div>
            <button className="ac-next" style={{ '--tc': TH[next.theme].c }} onClick={() => onOpenEvent(next)}>
              <span className="ac-next-bar"></span>
              <span className="ac-next-when">
                <b>{next.time}</b>
                <em>{window.fpEvDayLabel(next.d, next.m)}</em>
              </span>
              <span className="ac-next-main">
                <b>{acTX(next.title)}</b>
                <em><FPIcon.Pin s={10} c="currentColor" /> {acTX(next.place)}</em>
                {nextPeer ? (
                  <span className="ac-next-who">
                    <FPAvatar size={17} initials={nextPeer.initials} src={nextPeer.photo} />
                    {window.fpUpperLast(nextPeer.name)}
                  </span>
                ) : null}
              </span>
              <span className={`ag-tag ${next.status}`}>{window.fpEvStatusLabel(next.status)}</span>
            </button>
          </React.Fragment>
        ) : null}

        {/* Négociation en cours · timeline d'offre */}
        {deal ? (
          <React.Fragment>
            <div className="hm-sechead"><span>{acTX('Négociation en cours')}</span></div>
            <button className="ac-deal" onClick={() => onOpenChat(deal.chat)}>
              <span className="ac-deal-top">
                <span className="ac-deal-title">
                  <b>{deal.title}</b>
                  <em>{acTX(deal.kind)} · {acTX('mis à jour')} {acTX(deal.updated)}</em>
                </span>
                <span className="ac-deal-amt">{deal.amount}<em>{deal.term}</em></span>
              </span>
              <span className="ac-deal-steps">
                {deal.steps.map((s, i) => (
                  <span key={s} className={`ac-step ${i < deal.done ? 'done' : i === deal.done ? 'cur' : ''}`}>
                    <i>{i < deal.done ? <AcCheck s={8} /> : null}</i>
                    <em>{acTX(s)}</em>
                  </span>
                ))}
              </span>
              <span className="ac-deal-next">{acTX('Prochaine étape')} : {acTX(deal.next)}</span>
            </button>
          </React.Fragment>
        ) : null}

        {/* Mes joueurs · autorisations actives */}
        {players.length ? (
          <React.Fragment>
            <div className="hm-sechead">
              <span>{acTX('Mes joueurs')}</span>
              <button className="hm-seclink" onClick={() => onOpenSub('mandates')}>{acTX('Autorisations')}</button>
            </div>
            <div className="ac-players">
              {players.map((m) => {
                const p = FP_PEERS[m.pid];
                return (
                  <button key={m.id} className="ac-player" onClick={() => onOpenChat(m.pid)}>
                    <FPAvatar size={44} initials={p.initials} src={p.photo} />
                    <b>{window.fpUpperLast(p.name)}</b>
                    <em>{p.org}</em>
                    <span className="ac-mand"><FPIcon.Shield s={9} /> {mandYear(m)}</span>
                  </button>
                );
              })}
              <button className="ac-player add" onClick={() => onOpenSub('mandates')}>
                <span className="ac-addic">+</span>
                <b>{acTX('Nouvelle autorisation')}</b>
                <em>{acTX('Représenter un joueur')}</em>
              </button>
            </div>
          </React.Fragment>
        ) : null}

        {/* Conversations récentes */}
        <div className="hm-sechead">
          <span>{acTX('Conversations récentes')}</span>
          <button className="hm-seclink" onClick={() => onTab('messages')}>{acTX('Tout voir')}</button>
        </div>
        <div className="hm-cardlist">
          {recents.map((c) => (
            <button key={c.id} className="hm-row" onClick={() => onOpenChat(c.id)}>
              <FPAvatar size={40} initials={c.initials} src={c.photo} />
              <span className="hm-row-txt">
                <b>{window.fpUpperLast(c.name)}</b>
                <em>{window.m4RoleColor && c.fam ? <span style={{ color: window.m4RoleColor(c.fam) }}>{acTX(c.role)}</span> : acTX(c.role)}{c.org ? ' · ' + c.org : ''}</em>
              </span>
              {c.unread ? <span className="hm-unread">{c.unread}</span> : <span className="hm-time">{acTX(c.time)}</span>}
            </button>
          ))}
        </div>

        <div className="hm-listfoot"><FPIcon.Shield s={10} /> {acTX('Chiffré de bout en bout · identités vérifiées PASS ID')}</div>
      </div>
    </div>
  );
}

Object.assign(window, { HMHomeV2 });