// Prodz — Threads: community discussions. List + detail. Each thread is bound
// to a production (brief §1.7). No dedicated chat icon — Inbox lives in the top bar.
function ThreadsList() {
  const { L } = useL();
  const nav = useNav();
  const { ThreadCard, Button, Tag, Badge } = window.ProdzDesignSystem_d0b87b;
  const [q, setQ] = useStateS('');
  const [filter, setFilter] = useStateS('ALL');

  const allTags = Array.from(new Set(THREADS.reduce((a, t) => a.concat(t.tags), [])));
  const shown = THREADS.filter((t) =>
    (filter === 'ALL' || t.tags.includes(filter)) &&
    (!q || tr(L, t.title).toLowerCase().includes(q.toLowerCase()) || tr(L, t.body).toLowerCase().includes(q.toLowerCase())));

  return (
    <div className="pz-screen-enter" style={{ paddingBottom: 28 }}>
      <TopBar />
      <div style={{ padding: '18px 16px 4px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
        <div>
          <h1 style={pageTitle}>Threads</h1>
          <p style={pageSub}>{L('Discussioni della community.', 'Community discussions.')}</p>
        </div>
        <Button variant="primary" size="sm" glow leadingIcon={<Ic n="Plus" s={15} />} onClick={() => nav.goTab('add')}>{L('Nuovo', 'New')}</Button>
      </div>

      {/* search + category filters */}
      <div style={{ padding: '14px 16px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, height: 44, padding: '0 14px', borderRadius: 'var(--radius-pill)', background: 'var(--surface-raised)', boxShadow: 'var(--ring-inset-hairline)' }}>
          <Ic n="Search" s={17} color="var(--text-subtle)" />
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder={L('Cerca nei thread…', 'Search threads…')}
            style={{ flex: 1, background: 'none', border: 'none', outline: 'none', color: 'var(--text-body)', fontSize: 14 }} />
        </div>
      </div>
      <div className="hscroll" style={{ padding: '12px 16px 2px', gap: 8 }}>
        {['ALL'].concat(allTags).map((c) => (
          <FilterChip key={c} active={filter === c} onClick={() => setFilter(c)} label={c === 'ALL' ? L('Tutti', 'All') : c} />
        ))}
      </div>

      <div style={{ padding: '14px 16px 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {shown.map((t) => {
          const author = PEOPLE[t.author];
          const prod = PRODUCTIONS.find((p) => p.id === t.prod);
          return (
            <div key={t.id} onClick={() => nav.openThread(t.id)} style={{ cursor: 'pointer' }}>
              <div style={{ position: 'relative' }}>
                <ThreadCard author={author.name} role={tr(L, author.role)} time={tr(L, t.time)} avatar={author.avatar}
                title={tr(L, t.title)} body={tr(L, t.body)} likes={t.likes} replies={t.replies} saves={t.saves} />
              </div>
              {/* production binding */}
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, margin: '8px 0 0 2px', fontSize: 11, color: 'var(--text-subtle)' }}>
                <Ic n="Clapperboard" s={13} color="var(--prodz-teal)" />
                {L('da', 'from')} <span style={{ color: 'var(--text-muted)', fontWeight: 600 }}>{prod.title}</span>
              </div>
            </div>);

        })}
        {shown.length === 0 && <p style={{ textAlign: 'center', fontSize: 13, color: 'var(--text-subtle)', padding: '20px 0' }}>{L('Nessun thread trovato.', 'No threads found.')}</p>}
      </div>
    </div>);

}

function ThreadDetail({ id }) {
  const { L } = useL();
  const nav = useNav();
  const { Avatar, Badge, Tag, Input } = window.ProdzDesignSystem_d0b87b;
  const t = THREADS.find((x) => x.id === id) || THREADS[0];
  const author = PEOPLE[t.author];
  const prod = PRODUCTIONS.find((p) => p.id === t.prod);
  const replies = THREAD_REPLIES[t.id] || [];

  const Engage = ({ icon, n, color }) =>
  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, color: color || 'var(--text-subtle)' }}>
      <Ic n={icon} s={16} color="currentColor" />{n}
    </span>;


  return (
    <div className="pz-screen-enter" style={{ display: 'flex', flexDirection: 'column', minHeight: '100%' }}>
      <TopBar title={L('Thread', 'Thread')} onBack={nav.pop} showLang={false} />
      <div style={{ flex: 1, paddingBottom: 16 }}>
        {/* OP post */}
        <div style={{ padding: '16px 16px 18px', borderBottom: '1px solid var(--border-hairline)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <Avatar src={author.avatar} alt={author.name} size={42} ring="gold" />
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                <span style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--text-primary)' }}>{author.name}</span>
                <Badge tone="gold">OP</Badge>
              </div>
              <div style={{ fontSize: 12, color: 'var(--text-subtle)' }}>{tr(L, author.role)} · {tr(L, t.time)}</div>
            </div>
          </div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, margin: '14px 0 0', padding: '5px 10px', background: 'var(--teal-surface)', boxShadow: 'var(--ring-teal)', borderRadius: 'var(--radius-pill)', fontSize: 11, color: 'var(--prodz-teal)', fontWeight: 600 }}>
            <Ic n="Clapperboard" s={13} color="var(--prodz-teal)" />{prod.title}
          </div>
          <h2 style={{ fontSize: 20, fontWeight: 800, letterSpacing: '-0.01em', color: 'var(--text-primary)', lineHeight: 1.25, margin: '14px 0 0' }}>{tr(L, t.title)}</h2>
          <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--text-muted)', margin: '10px 0 0' }}>{tr(L, t.body)}</p>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 14 }}>
            {t.tags.map((tg) => <Tag key={tg} tone="neutral">{tg}</Tag>)}
          </div>
          <div style={{ display: 'flex', gap: 20, marginTop: 16 }}>
            <Engage icon="Heart" n={t.likes} />
            <Engage icon="MessageCircle" n={t.replies} color="var(--prodz-teal)" />
            <Engage icon="Bookmark" n={t.saves} />
            <span style={{ marginLeft: 'auto' }}><Engage icon="Share2" n={''} /></span>
          </div>
        </div>

        {/* replies */}
        <div style={{ padding: '16px 16px 0' }}>
          <Eyebrow style={{ marginBottom: 4 }}>{L('Risposte', 'Replies')} · {t.replies}</Eyebrow>
        </div>
        <div style={{ padding: '8px 16px 0', display: 'flex', flexDirection: 'column' }}>
          {replies.map((r, i) => {
            const ra = PEOPLE[r.author];
            return (
              <div key={i} style={{ display: 'flex', gap: 11, padding: '14px 0', borderBottom: '1px solid var(--border-hairline)' }}>
                <Avatar src={ra.avatar} alt={ra.name} size={34} ring={ra.ring} />
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                    <span style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--text-primary)' }}>{ra.name}</span>
                    <span style={{ fontSize: 11.5, color: 'var(--text-subtle)' }}>{tr(L, ra.role)} · {tr(L, r.time)}</span>
                  </div>
                  <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--text-body)', margin: '5px 0 0' }}>{tr(L, r.text)}</p>
                  <div style={{ display: 'flex', gap: 16, marginTop: 8 }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 12, color: 'var(--text-subtle)' }}><Ic n="Heart" s={14} color="currentColor" />{(i + 1) * 4}</span>
                    <span style={{ fontSize: 12, color: 'var(--text-subtle)', cursor: 'pointer' }}>{L('Rispondi', 'Reply')}</span>
                  </div>
                </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)' }}>
        <Avatar src={USER_AVATAR} size={32} />
        <div style={{ flex: 1 }}><Input placeholder={L('Aggiungi al thread…', 'Add to the thread…')} /></div>
        <button aria-label="Send" style={{ width: 40, height: 40, borderRadius: '50%', border: 'none', cursor: 'pointer', background: 'var(--prodz-teal)', color: 'var(--text-on-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--glow-teal-soft)', flexShrink: 0 }}>
          <Ic n="Send" s={18} color="currentColor" />
        </button>
      </div>
    </div>);

}

Object.assign(window, { ThreadsList, ThreadDetail });