// ─── SiteReservations.jsx — Onglet « Réservations site » ──────────────────────
// Pas de build, pas d'import/export — tout est global (React CDN).
//
// Deux sections :
//   1. Demandes de réservation des CGP (alertes in-app). « Traiter » ou « Refuser »
//      referme la demande ; ça NE pose PAS l'option (l'équipe le fait manuellement
//      dans le flux statut existant). Tant qu'une demande est en attente, le lot
//      apparaît « Réservé » sur le site.
//   2. Comptes CGP : inviter un CGP du CRM (génère un lien à transmettre soi-même,
//      pas d'email auto), activer / désactiver.
// Rafraîchissement temps réel via SSE (/api/events, event « cgp-reservation ») +
// repli par polling léger.

function SiteReservationsView({ C }) {
  const [tab, setTab]       = React.useState('demandes');
  const [resas, setResas]   = React.useState([]);
  const [filter, setFilter] = React.useState('en_attente');
  const [users, setUsers]   = React.useState([]);
  const [cgps, setCgps]     = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [busy, setBusy]     = React.useState(null);
  const [invite, setInvite] = React.useState({ cgpId: '', email: '' });
  const [inviteLink, setInviteLink] = React.useState('');
  const [msg, setMsg]       = React.useState('');

  function flash(t) { setMsg(t); setTimeout(() => setMsg(''), 4000); }

  async function loadResas() {
    try {
      const r = await fetch('/api/site-admin/reservations?status=' + filter);
      if (r.ok) setResas((await r.json()).reservations || []);
    } catch (_) {}
  }
  async function loadUsers() {
    try {
      const r = await fetch('/api/site-admin/cgp-users');
      if (r.ok) { const d = await r.json(); setUsers(d.users || []); setCgps(d.cgps || []); }
    } catch (_) {}
  }

  React.useEffect(() => { loadResas(); }, [filter]);
  React.useEffect(() => {
    Promise.all([loadResas(), loadUsers()]).finally(() => setLoading(false));
    // SSE : refresh quand une demande arrive ou change.
    let es;
    try {
      es = new EventSource('/api/events');
      es.addEventListener('cgp-reservation', () => { loadResas(); });
    } catch (_) {}
    // Repli polling (60 s).
    const poll = setInterval(loadResas, 60000);
    return () => { clearInterval(poll); if (es) es.close(); };
  }, []);

  async function decide(id, decision) {
    setBusy('resa:' + id);
    try {
      const r = await fetch('/api/site-admin/reservations/' + id + '/decide', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ decision }),
      });
      const d = await r.json().catch(() => ({}));
      if (!r.ok) throw new Error(d.error || 'Erreur ' + r.status);
      await loadResas();
      if (decision === 'refusee') flash('✓ Demande refusée');
      else flash(d.optionPosee
        ? '✓ Validée — lot posé en « Optionné » (à compléter dans Suivi des signatures)'
        : '✓ Validée — le lot n\'était plus libre, statut inchangé');
    } catch (e) { flash('✗ ' + e.message); } finally { setBusy(null); }
  }

  async function sendInvite() {
    if (!invite.cgpId || !invite.email) { flash('✗ Choisis un CGP et saisis un email'); return; }
    setBusy('invite');
    setInviteLink('');
    try {
      const r = await fetch('/api/site-admin/cgp-users/invite', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(invite),
      });
      const d = await r.json().catch(() => ({}));
      if (!r.ok) throw new Error(d.error || 'Erreur ' + r.status);
      setInviteLink(d.inviteUrl);
      await loadUsers();
      flash('✓ Invitation créée — copie le lien et transmets-le au CGP');
    } catch (e) { flash('✗ ' + e.message); } finally { setBusy(null); }
  }

  async function setUserStatus(id, status) {
    setBusy('user:' + id);
    try {
      const r = await fetch('/api/site-admin/cgp-users/' + id + '/status', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ status }),
      });
      if (!r.ok) throw new Error((await r.json().catch(() => ({}))).error || 'Erreur ' + r.status);
      await loadUsers();
    } catch (e) { flash('✗ ' + e.message); } finally { setBusy(null); }
  }

  const fmtDate = (d) => d ? new Date(d).toLocaleString('fr-FR', { day: '2-digit', month: '2-digit', year: '2-digit', hour: '2-digit', minute: '2-digit' }) : '—';
  const card = { background: C.card, border: '1px solid ' + C.border, borderRadius: 10, padding: 14, marginBottom: 10 };
  const btn  = (bg) => ({ background: bg || C.accent, color: '#fff', border: 'none', borderRadius: 7, padding: '6px 12px', cursor: 'pointer', fontSize: 12, fontWeight: 600 });
  const input = { padding: '7px 9px', border: '1px solid ' + C.border, borderRadius: 7, fontSize: 13, background: C.card, color: C.text };
  const tabBtn = (id, lbl) => (
    <button onClick={() => setTab(id)} style={{ background: 'none', border: 'none', borderBottom: tab === id ? '2px solid ' + C.accent : '2px solid transparent',
      color: tab === id ? C.accent : C.muted, fontWeight: tab === id ? 700 : 500, fontSize: 14, padding: '6px 2px', cursor: 'pointer' }}>{lbl}</button>
  );
  const statusBadge = (s) => {
    const m = { en_attente: ['#fef3c7', '#92400e', 'En attente'], traitee: ['#dcfce7', '#15803d', 'Traitée'], refusee: ['#fee2e2', '#dc2626', 'Refusée'],
      invited: ['#fef3c7', '#92400e', 'Invité'], active: ['#dcfce7', '#15803d', 'Actif'], disabled: ['#f1f5f9', '#64748b', 'Désactivé'] }[s] || ['#f1f5f9', '#64748b', s];
    return <span style={{ background: m[0], color: m[1], borderRadius: 6, padding: '2px 8px', fontSize: 11, fontWeight: 700 }}>{m[2]}</span>;
  };

  const pending = resas.filter(r => r.status === 'en_attente').length;

  return (
    <div style={{ padding: '18px 20px', maxWidth: 1000, margin: '0 auto' }}>
      <h2 style={{ margin: '0 0 12px', fontSize: 18 }}>📥 Réservations site</h2>
      <div style={{ display: 'flex', gap: 18, marginBottom: 16, borderBottom: '1px solid ' + C.border }}>
        {tabBtn('demandes', 'Demandes' + (pending ? ' (' + pending + ')' : ''))}
        {tabBtn('comptes', 'Comptes CGP')}
      </div>

      {msg && <div style={{ marginBottom: 12, padding: '8px 12px', borderRadius: 8, fontSize: 13, fontWeight: 600,
        background: msg[0] === '✓' ? '#dcfce7' : '#fee2e2', color: msg[0] === '✓' ? '#15803d' : '#dc2626' }}>{msg}</div>}

      {loading && <div style={{ color: C.muted, padding: 30, textAlign: 'center' }}>Chargement…</div>}

      {/* ─── DEMANDES ─── */}
      {!loading && tab === 'demandes' && (
        <div>
          <div style={{ marginBottom: 12 }}>
            <select value={filter} onChange={e => setFilter(e.target.value)} style={input}>
              <option value="en_attente">En attente</option>
              <option value="traitee">Traitées</option>
              <option value="refusee">Refusées</option>
              <option value="all">Toutes</option>
            </select>
          </div>
          {resas.length === 0 && <div style={{ color: C.muted, padding: 30, textAlign: 'center' }}>Aucune demande.</div>}
          {resas.map(r => (
            <div key={r.id} style={card}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                <span style={{ fontWeight: 700 }}>{r.programmeNom} — Lot {r.lotNumero}{r.lotType ? ' (' + r.lotType + ')' : ''}</span>
                {statusBadge(r.status)}
                {r.statutLot && r.statutLot !== 'LIBRE' && <span style={{ fontSize: 11, color: '#b45309' }}>⚠ lot déjà {r.statutLot} dans TrésoImmo</span>}
                <span style={{ marginLeft: 'auto', fontSize: 12, color: C.muted }}>{fmtDate(r.createdAt)}</span>
              </div>
              <div style={{ fontSize: 13, color: C.text, margin: '6px 0' }}>
                CGP : <b>{r.cgpNom}</b>{r.cgpEmail ? ' · ' + r.cgpEmail : ''}
              </div>
              {r.note && <div style={{ fontSize: 13, color: C.muted, fontStyle: 'italic', marginBottom: 6 }}>« {r.note} »</div>}
              {r.status === 'en_attente' ? (
                <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
                  <button style={btn('#15803d')} disabled={busy === 'resa:' + r.id} onClick={() => decide(r.id, 'traitee')} title="Valide la demande et pose le lot en « Optionné » (date du jour, +7 j, CGP rattaché)">✓ Valider</button>
                  <button style={btn('#dc2626')} disabled={busy === 'resa:' + r.id} onClick={() => decide(r.id, 'refusee')}>✗ Refuser</button>
                </div>
              ) : (
                <div style={{ fontSize: 12, color: C.muted }}>{r.status === 'traitee' ? 'Traitée' : 'Refusée'} le {fmtDate(r.decidedAt)} par {r.decidedBy || '—'}</div>
              )}
            </div>
          ))}
          <div style={{ fontSize: 12, color: C.muted, marginTop: 10 }}>
            ℹ️ « Valider » pose le lot en « Optionné » (date du jour, +7 j, CGP rattaché ; client à compléter dans Suivi des signatures) et retire le « Réservé ». « Refuser » referme la demande sans rien changer.
          </div>
        </div>
      )}

      {/* ─── COMPTES CGP ─── */}
      {!loading && tab === 'comptes' && (
        <div>
          <div style={{ ...card, background: C.bg }}>
            <div style={{ fontWeight: 700, marginBottom: 10 }}>Inviter un CGP</div>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center' }}>
              <select value={invite.cgpId} style={{ ...input, minWidth: 220 }}
                onChange={e => { const c = cgps.find(x => x.id === e.target.value); setInvite({ cgpId: e.target.value, email: (c && c.email) || invite.email }); }}>
                <option value="">— Choisir un CGP du CRM —</option>
                {cgps.map(c => <option key={c.id} value={c.id}>{c.nom || c.id}</option>)}
              </select>
              <input style={{ ...input, minWidth: 240 }} type="email" placeholder="email du CGP" value={invite.email}
                onChange={e => setInvite(s => ({ ...s, email: e.target.value }))} />
              <button style={btn()} disabled={busy === 'invite'} onClick={sendInvite}>{busy === 'invite' ? 'Création…' : 'Créer l\'invitation'}</button>
            </div>
            {inviteLink && (
              <div style={{ marginTop: 12, padding: 10, background: '#dcfce7', borderRadius: 8 }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: '#15803d', marginBottom: 4 }}>Lien d'invitation (à transmettre au CGP) :</div>
                <div style={{ display: 'flex', gap: 8 }}>
                  <input readOnly value={inviteLink} style={{ ...input, flex: 1, fontFamily: 'monospace', fontSize: 12 }} onFocus={e => e.target.select()} />
                  <button style={btn('#15803d')} onClick={() => { navigator.clipboard && navigator.clipboard.writeText(inviteLink); flash('✓ Lien copié'); }}>Copier</button>
                </div>
              </div>
            )}
          </div>

          <div style={{ fontWeight: 700, margin: '16px 0 8px' }}>Comptes existants ({users.length})</div>
          {users.length === 0 && <div style={{ color: C.muted, padding: 20 }}>Aucun compte CGP.</div>}
          {users.map(u => (
            <div key={u.id} style={card}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                <span style={{ fontWeight: 700 }}>{u.cgpNom}</span>
                <span style={{ fontSize: 13, color: C.muted }}>{u.email}</span>
                {statusBadge(u.status)}
                {u.hasPendingInvite && <span style={{ fontSize: 11, color: '#b45309' }}>invitation en attente</span>}
                <span style={{ marginLeft: 'auto', fontSize: 12, color: C.muted }}>
                  {u.lastLogin ? 'connexion : ' + fmtDate(u.lastLogin) : 'jamais connecté'}
                </span>
              </div>
              <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
                {u.status !== 'disabled'
                  ? <button style={btn('#64748b')} disabled={busy === 'user:' + u.id} onClick={() => setUserStatus(u.id, 'disabled')}>Désactiver</button>
                  : <button style={btn('#15803d')} disabled={busy === 'user:' + u.id} onClick={() => setUserStatus(u.id, 'active')}>Réactiver</button>}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}