// Prodz — Inbox: the single destination for every collab/job-call conversation
// (brief §1.8). Shoutouts "Rispondi" and Network "Collab" both land here.
function InboxList() {
  const { L } = useL();
  const nav = useNav();
  const { Avatar, Badge } = window.ProdzDesignSystem_d0b87b;
  const [filter, setFilter] = useStateS('all');
  const convs = nav.conversations.filter((c) => filter === 'all' || c.kind === filter);
  const cat = [
    { id: 'all', label: L('Tutte', 'All') },
    { id: 'collab', label: 'Collab' },
    { id: 'job', label: L('Job Call', 'Job Call') },
  ];

  return (
    <div className="pz-screen-enter" style={{ display: 'flex', flexDirection: 'column', minHeight: '100%' }}>
      <TopBar title="Inbox" onBack={nav.pop} showLang={false} />
      <div style={{ padding: '14px 16px 2px' }}>
        <p style={{ ...pageSub, margin: 0 }}>{L('Tutte le conversazioni di lavoro, in un unico posto.', 'Every work conversation, in one place.')}</p>
      </div>
      {/* category filters */}
      <div className="hscroll" style={{ padding: '12px 16px 4px', gap: 8 }}>
        {cat.map((c) => {
          const n = c.id === 'all' ? nav.conversations.length : nav.conversations.filter((x) => x.kind === c.id).length;
          return (
            <button key={c.id} onClick={() => setFilter(c.id)} style={{
              flexShrink: 0, border: 'none', cursor: 'pointer', height: 34, padding: '0 13px', borderRadius: 'var(--radius-pill)',
              display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 12.5, fontWeight: 700, whiteSpace: 'nowrap',
              background: filter === c.id ? 'var(--teal-surface)' : 'var(--surface-raised)',
              color: filter === c.id ? 'var(--prodz-teal)' : 'var(--text-muted)',
              boxShadow: filter === c.id ? 'var(--ring-teal)' : 'var(--ring-inset-hairline)',
            }}>
              {c.id === 'job' && <Ic n="Megaphone" s={13} color="currentColor" />}
              {c.id === 'collab' && <Ic n="Handshake" s={13} color="currentColor" />}
              {c.label}
              <span style={{ fontSize: 10.5, opacity: 0.75 }}>{n}</span>
            </button>);

        })}
      </div>
      <div style={{ padding: '8px 0 24px' }}>
        {convs.map((c) => {
          const p = c.person ? PEOPLE[c.person] : null;
          const name = p ? p.name : c.org;
          return (
            <button key={c.id} onClick={() => nav.openConversation(c.id)} style={convRow}>
              {p ? <Avatar src={p.avatar} alt={name} size={48} ring={p.ring} status={p.online ? 'online' : null} /> :
              <span style={{ width: 48, height: 48, borderRadius: '50%', background: 'var(--surface-raised)', boxShadow: 'var(--ring-inset-hairline)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Ic n="Building2" s={22} color="var(--text-muted)" /></span>}
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--text-primary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{name}</span>
                  <span style={{ fontSize: 11, color: 'var(--text-subtle)', marginLeft: 'auto', flexShrink: 0 }}>{tr(L, c.time)}</span>
                </div>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 3 }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 10, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: c.kind === 'job' ? 'var(--prodz-gold)' : 'var(--prodz-teal)' }}>
                    <Ic n={c.kind === 'job' ? 'Megaphone' : 'Handshake'} s={12} color="currentColor" />{c.kind === 'job' ? L('Job Call', 'Job Call') : 'Collab'}
                  </span>
                  <span style={{ fontSize: 11, color: 'var(--text-subtle)' }}>· {tr(L, c.subject)}</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 4 }}>
                  <span style={{ flex: 1, fontSize: 13, color: c.unread ? 'var(--text-body)' : 'var(--text-muted)', fontWeight: c.unread ? 600 : 400, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{tr(L, c.preview)}</span>
                  {c.unread > 0 && <Badge tone="teal">{c.unread}</Badge>}
                </div>
              </div>
            </button>);

        })}
      </div>
    </div>);

}

function ConversationDetail({ id }) {
  const { L } = useL();
  const nav = useNav();
  const { Avatar, Input } = window.ProdzDesignSystem_d0b87b;
  const c = nav.conversations.find((x) => x.id === id) || nav.conversations[0];
  const p = c.person ? PEOPLE[c.person] : null;
  const name = p ? p.name : c.org;

  return (
    <div className="pz-screen-enter" style={{ display: 'flex', flexDirection: 'column', minHeight: '100%' }}>
      <TopBar title={name} onBack={nav.pop} showLang={false} />

      {/* subject banner — the Collab Proposal / Job Call this conversation came from */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 16px', margin: '12px 16px 0', background: 'var(--surface-card)', borderRadius: 'var(--radius-md)', boxShadow: 'var(--ring-inset-hairline)' }}>
        <span style={{ width: 34, height: 34, borderRadius: 10, background: c.kind === 'job' ? 'rgba(212,175,55,0.14)' : 'var(--teal-surface)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <Ic n={c.kind === 'job' ? 'Megaphone' : 'Handshake'} s={17} color={c.kind === 'job' ? 'var(--prodz-gold)' : 'var(--prodz-teal)'} />
        </span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <Eyebrow color={c.kind === 'job' ? 'var(--prodz-gold)' : 'var(--prodz-teal)'}>{c.kind === 'job' ? L('Job Call', 'Job Call') : 'Collab Proposal'}</Eyebrow>
          <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--text-primary)', marginTop: 2 }}>{tr(L, c.subject)}</div>
        </div>
      </div>

      {/* messages */}
      <div style={{ flex: 1, padding: '16px 16px 8px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {c.messages.map((m, i) =>
        <div key={i} style={{ display: 'flex', justifyContent: m.me ? 'flex-end' : 'flex-start', alignItems: 'flex-end', gap: 8 }}>
            {!m.me && <Avatar src={p ? p.avatar : null} alt={name} size={26} />}
            <div style={{ maxWidth: '76%' }}>
              <div style={{
              padding: '10px 13px', borderRadius: 16,
              borderBottomRightRadius: m.me ? 4 : 16, borderBottomLeftRadius: m.me ? 16 : 4,
              background: m.me ? 'var(--prodz-gold)' : 'var(--surface-raised)',
              color: m.me ? 'var(--text-on-accent)' : 'var(--text-body)',
              boxShadow: m.me ? 'var(--glow-gold)' : 'var(--ring-inset-hairline)',
              fontSize: 14, lineHeight: 1.5
            }}>{tr(L, m.text)}</div>
              {m.card && <CollabCard card={m.card} L={L} />}
              <div style={{ fontSize: 10, color: 'var(--text-subtle)', marginTop: 4, textAlign: m.me ? 'right' : 'left' }}>{m.time}</div>
            </div>
          </div>
        )}
      </div>

      {/* composer */}
      <div style={{ position: 'sticky', bottom: 0, display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px calc(10px + env(safe-area-inset-bottom))', background: 'var(--surface-chrome)', backdropFilter: 'var(--blur-chrome)', WebkitBackdropFilter: 'var(--blur-chrome)', borderTop: '1px solid var(--border-hairline)' }}>
        <button aria-label="Attach" style={{ width: 38, height: 38, borderRadius: '50%', border: 'none', cursor: 'pointer', background: 'var(--surface-raised)', color: 'var(--text-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, boxShadow: 'var(--ring-inset-hairline)' }}><Ic n="Plus" s={20} color="currentColor" /></button>
        <div style={{ flex: 1 }}><Input placeholder={L('Scrivi un messaggio…', 'Write a message…')} /></div>
        <button aria-label="Send" style={{ width: 40, height: 40, borderRadius: '50%', border: 'none', cursor: 'pointer', background: 'var(--prodz-gold)', color: 'var(--text-on-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--glow-gold)', flexShrink: 0 }}>
          <Ic n="Send" s={18} color="currentColor" />
        </button>
      </div>
    </div>);

}

const convRow = { display: 'flex', alignItems: 'flex-start', gap: 12, width: '100%', padding: '12px 16px', background: 'none', border: 'none', borderBottom: '1px solid var(--border-hairline)', cursor: 'pointer', textAlign: 'left' };

Object.assign(window, { InboxList, ConversationDetail });