// inb-parts.jsx — Inbox left/center reusable parts

const InbChannelIcon = ({ channel }) => {
  const map = { whatsapp: 'WA', instagram: 'IG', messenger: 'MS' };
  return <span className={`inb-channel ${channel}`}>{map[channel] || '?'}</span>;
};

const InbAvatar = ({ name, handle, size = 36, privacyMode }) => {
  const label = privacyMode ? window.INB.maskName(name) : name;
  return (
    <span
      className="inb-avatar"
      style={{ width: size, height: size, background: window.INB.avColor(name || handle), fontSize: Math.max(10, size / 3.2) }}
      title={label}
    >
      {window.INB.initials(label)}
    </span>
  );
};

const InbFilterButton = ({ active, label, count, onClick }) => (
  <button className={`inb-filter ${active ? 'active' : ''}`} onClick={onClick}>
    <span>{label}</span><b>{count}</b>
  </button>
);

const InbConvList = ({ conversations, activeId, onSelect, filter, setFilter, query, setQuery, sort, setSort, lang, privacyMode }) => {
  const t = window.INBOX_I18N[lang];
  const all = window.INB.CONVERSATIONS;
  const count = (kind) => all.filter((c) => {
    if (kind === 'all') return c.status !== 'spam';
    if (kind === 'spam') return c.status === 'spam';
    if (c.status === 'spam') return false;
    if (kind === 'unread') return c.unread;
    if (kind === 'unassigned') return !c.assignedTo;
    if (kind === 'mine') return c.assignedTo === 'Anna';
    if (kind === 'flagged') return c.flagged;
    if (kind === 'bookings') return !!c.booking;
    return true;
  }).length;
  const filters = ['all', 'unread', 'unassigned', 'mine', 'flagged', 'bookings', 'spam'];

  return (
    <aside className="inb-list">
      <div className="inb-list-top">
        <div>
          <h2>{t.title}</h2>
          <p>{conversations.length} conversations</p>
        </div>
      </div>
      <input className="inb-search" value={query} onChange={(e) => setQuery(e.target.value)} placeholder={t.search} />
      <div className="inb-filters">
        {filters.map((f) => <InbFilterButton key={f} active={filter === f} label={t.filters[f]} count={count(f)} onClick={() => setFilter(f)} />)}
      </div>
      <select className="inb-sort" value={sort} onChange={(e) => setSort(e.target.value)}>
        {Object.entries(t.sort).map(([value, label]) => <option key={value} value={value}>{label}</option>)}
      </select>
      <div className="inb-convs">
        {conversations.length === 0 && <div className="inb-empty-list">{t.emptyList}</div>}
        {conversations.map((c) => {
          const critical = c.unread && c.guest.ltv >= 1500 && (window.INB.NOW - c.lastInbound) / 60000 > 120;
          const name = privacyMode ? window.INB.maskName(c.guest.name) : c.guest.name;
          return (
            <button key={c.id} className={`inb-conv ${activeId === c.id ? 'active' : ''} ${critical ? 'critical' : ''}`} onClick={() => onSelect(c.id)}>
              <div className="inb-conv-main">
                <InbAvatar name={c.guest.name} handle={c.guest.handle} privacyMode={privacyMode} />
                <div className="inb-conv-text">
                  <div className="inb-conv-row">
                    <b>{name}</b>
                    <span>{window.INB.fmtRelative(c.lastInbound, lang)}</span>
                  </div>
                  <div className="inb-conv-meta">
                    <InbChannelIcon channel={c.channel} />
                    <span>{c.guest.handle}</span>
                    {c.booking && <em>{c.booking.cabin}</em>}
                  </div>
                  <p>{c.messages[c.messages.length - 1]?.text}</p>
                </div>
              </div>
              <div className="inb-conv-foot">
                <span>{c.assignedTo ? `@${c.assignedTo}` : 'unassigned'}</span>
                <span>€{c.guest.ltv.toLocaleString('en-US')}</span>
                {c.unread && <i className="inb-unread-dot"></i>}
              </div>
            </button>
          );
        })}
      </div>
    </aside>
  );
};

const InbHeader = ({ conversation, lang, privacyMode }) => {
  const name = privacyMode ? window.INB.maskName(conversation.guest.name) : conversation.guest.name;
  return (
    <header className="inb-thread-head">
      <div className="inb-thread-id">
        <InbAvatar name={conversation.guest.name} handle={conversation.guest.handle} privacyMode={privacyMode} />
        <div>
          <h2>{name}</h2>
          <p><InbChannelIcon channel={conversation.channel} /> {conversation.guest.handle} · {conversation.guest.country} · {conversation.guest.lang.toUpperCase()}</p>
        </div>
      </div>
      {conversation.booking && (
        <div className="inb-booking-pill">
          <b>{conversation.booking.id}</b>
          <span>{conversation.booking.cabin} · {conversation.booking.dates}</span>
        </div>
      )}
    </header>
  );
};

const InbThread = ({ conversation, lang, privacyMode, highlightId }) => {
  let lastDay = null;
  let prevAt = null;
  return (
    <div className="inb-thread">
      {conversation.messages.map((m) => {
        const day = window.INB.fmtDayLabel(m.at, lang);
        const showDay = day !== lastDay;
        const gap = prevAt && (m.at - prevAt) / 60000 > 30;
        lastDay = day;
        prevAt = m.at;
        return (
          <React.Fragment key={m.id}>
            {showDay && <div className="inb-day-sep">{day}</div>}
            {gap && <div className="inb-time-sep">{window.INB.fmtTime(m.at)}</div>}
            <div className={`inb-msg-row ${m.from === 'manager' ? 'manager' : 'guest'} ${highlightId === m.id ? 'highlight' : ''}`}>
              <div className="inb-msg">
                <p>{m.text}</p>
                <span>{m.mgr ? `${m.mgr} · ` : ''}{window.INB.fmtTime(m.at)} {m.from === 'manager' ? '✓✓' : ''}</span>
              </div>
            </div>
          </React.Fragment>
        );
      })}
    </div>
  );
};

const InbComposer = ({ conversation, value, setValue, onSend, lang }) => {
  const t = window.INBOX_I18N[lang];
  const outOfWindow = conversation.channel === 'whatsapp' && (window.INB.NOW - conversation.lastInbound) / 60000 > 1440;
  const send = () => {
    if (!value.trim()) return;
    onSend(value.trim());
  };
  return (
    <div className="inb-composer-wrap">
      {outOfWindow && <div className="inb-wa-window"><I name="alert-triangle" size={14}/>{t.outWindow}</div>}
      <div className="inb-composer">
        <textarea
          value={value}
          onChange={(e) => setValue(e.target.value)}
          onKeyDown={(e) => { if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') send(); }}
          placeholder={t.composer}
          rows={1}
        />
        <div className="inb-compose-actions">
          <button>📎</button><button>😊</button><button>⚡</button>
          <button className="primary" onClick={send}>{t.send}</button>
        </div>
      </div>
      <div className="inb-send-as">{t.sendingAs.replace('{channel}', conversation.channel).replace('{handle}', conversation.guest.handle)}</div>
    </div>
  );
};

const InbEmptyCenter = ({ lang }) => {
  const t = window.INBOX_I18N[lang];
  return (
    <div className="inb-empty-center">
      <I name="message" size={28}/>
      <h2>{t.noSelection}</h2>
      <p>{t.noSelectionSub}</p>
    </div>
  );
};

window.InbConvList = InbConvList;
window.InbThread = InbThread;
window.InbHeader = InbHeader;
window.InbComposer = InbComposer;
window.InbEmptyCenter = InbEmptyCenter;
window.InbAvatar = InbAvatar;
window.InbChannelIcon = InbChannelIcon;