/* ============================================================
   CENSA — Ami(e)s
   Trois vues : Tous · Suggestions · Invitations envoyées.
   Les liens et invitations sont persistés dans localStorage.
   ============================================================ */

function readLS(key, fallback) {
  try { const v = JSON.parse(localStorage.getItem(key)); return Array.isArray(v) ? v : fallback; }
  catch (e) { return fallback; }
}

/* En-tête collant de la section */
function SectionHead({ icon, title, sub }) {
  return (
    <div className="center-head" style={{ alignItems: 'flex-start' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
        {icon && <Icon name={icon} size={22} style={{ color: 'var(--accent)' }} />}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
          <h1>{title}</h1>
          {sub && <span className="mono" style={{ fontSize: 11, color: 'var(--text-faint)', letterSpacing: '.02em' }}>{sub}</span>}
        </div>
      </div>
    </div>
  );
}

/* Une ligne membre */
function MemberRow({ m, onOpen, right }) {
  return (
    <div className="hoverable" onClick={onOpen}
      style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '14px 18px',
        borderBottom: '1px solid var(--border)', cursor: onOpen ? 'pointer' : 'default' }}>
      <Avatar user={m} size={50} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ fontWeight: 600, fontSize: 15, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.name}</span>
          <Badge user={m} />
        </div>
        <div style={{ fontSize: 13, color: 'var(--text-faint)' }}>@{m.handle}</div>
        <div className="mono" style={{ fontSize: 11.5, color: 'var(--text-faint)', marginTop: 4, display: 'flex', alignItems: 'center', gap: 5 }}>
          <Icon name="users" size={12} /> {m.mutual} {L({ fr: 'liens communs', en: 'mutual ties' })}
        </div>
      </div>
      <div onClick={(e) => e.stopPropagation()} style={{ display: 'flex', alignItems: 'center', gap: 8, flex: '0 0 auto' }}>{right}</div>
    </div>
  );
}

function Friends({ t, onOpenUser, onMessage }) {
  const [friends, setFriends] = useState(() => readLS('censa_friends', DEFAULT_FRIEND_IDS));
  const [invites, setInvites] = useState(() => readLS('censa_invites', []));
  const [tab, setTab] = useState('all');

  const persistF = (v) => { setFriends(v); try { localStorage.setItem('censa_friends', JSON.stringify(v)); } catch (e) {} };
  const persistI = (v) => { setInvites(v); try { localStorage.setItem('censa_invites', JSON.stringify(v)); } catch (e) {} };

  const byId = (id) => MEMBERS.find(m => m.id === id);
  const friendList = friends.map(byId).filter(Boolean);
  const inviteList = invites.map(byId).filter(Boolean);
  const suggestions = MEMBERS.filter(m => !friends.includes(m.id) && !invites.includes(m.id));

  const send = (id) => persistI([id, ...invites]);
  const cancel = (id) => persistI(invites.filter(x => x !== id));
  const remove = (id) => persistF(friends.filter(x => x !== id));

  const tabs = [
    { id: 'all', label: { fr: 'Tous', en: 'All' }, n: friendList.length },
    { id: 'sug', label: { fr: 'Suggestions', en: 'Suggestions' }, n: suggestions.length },
    { id: 'inv', label: { fr: 'Invitations', en: 'Invitations' }, n: inviteList.length },
  ];

  const subFor = {
    all: L({ fr: 'Vos liens validés et observés par CENSA.', en: 'Your validated ties, observed by CENSA.' }),
    sug: L({ fr: 'Recommandés par l\u2019algorithme de surveillance.', en: 'Recommended by the surveillance algorithm.' }),
    inv: L({ fr: 'Invitations envoyées — en attente d\u2019acceptation.', en: 'Sent invitations — awaiting acceptance.' }),
  }[tab];

  return (
    <div className="animate-in">
      <SectionHead icon="users" title={L({ fr: 'Ami(e)s', en: 'Friends' })} sub={subFor} />

      <div style={{ display: 'flex', borderBottom: '1px solid var(--border)' }}>
        {tabs.map(tb => (
          <button key={tb.id} className={'tab' + (tab === tb.id ? ' active' : '')} onClick={() => setTab(tb.id)} style={{ fontSize: 14 }}>
            {L(tb.label)}
            {tb.n > 0 && <span className="mono" style={{ marginLeft: 6, fontSize: 11.5, color: 'var(--text-faint)' }}>{tb.n}</span>}
          </button>
        ))}
      </div>

      {/* TOUS */}
      {tab === 'all' && (friendList.length ? friendList.map(m => (
        <MemberRow key={m.id} m={m} onOpen={() => onOpenUser && onOpenUser(m)} right={<>
          <button className="btn" style={{ padding: '8px 14px', fontSize: 13 }} onClick={onMessage}><Icon name="mail" size={15} /> {L({ fr: 'Message', en: 'Message' })}</button>
          <button className="iconbtn" title={L({ fr: 'Retirer le lien', en: 'Remove tie' })} onClick={() => remove(m.id)}><Icon name="trash" size={16} /></button>
        </>} />
      )) : <Empty t={t} icon="users" text={{ fr: 'Aucun lien validé. Vous êtes isolé·e — c\u2019est noté.', en: 'No validated ties. You are isolated — it is noted.' }} />)}

      {/* SUGGESTIONS */}
      {tab === 'sug' && (suggestions.length ? suggestions.map(m => (
        <MemberRow key={m.id} m={m} onOpen={() => onOpenUser && onOpenUser(m)} right={
          <button className="btn btn-primary" style={{ padding: '8px 15px', fontSize: 13 }} onClick={() => send(m.id)}>
            <Icon name="userplus" size={15} /> {L({ fr: 'Ajouter', en: 'Add' })}</button>
        } />
      )) : <Empty t={t} icon="users" text={{ fr: 'Aucune suggestion. L\u2019algorithme se recalibre.', en: 'No suggestions. The algorithm is recalibrating.' }} />)}

      {/* INVITATIONS ENVOYÉES */}
      {tab === 'inv' && (inviteList.length ? inviteList.map(m => (
        <MemberRow key={m.id} m={m} onOpen={() => onOpenUser && onOpenUser(m)} right={<>
          <span className="mono" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11.5, fontWeight: 600,
            color: 'var(--accent)', background: 'var(--glow)', padding: '5px 10px', borderRadius: 999 }}>
            <Icon name="clock" size={13} /> {L({ fr: 'En attente', en: 'Pending' })}</span>
          <button className="btn" style={{ padding: '8px 14px', fontSize: 13 }} onClick={() => cancel(m.id)}>{L({ fr: 'Annuler', en: 'Cancel' })}</button>
        </>} />
      )) : <Empty t={t} icon="clock" text={{ fr: 'Aucune invitation en attente.', en: 'No pending invitations.' }} />)}
    </div>
  );
}

Object.assign(window, { Friends, SectionHead, MemberRow });