/* ============================================================
   ZERO — Customer Support. window.Screens.Support
   ============================================================ */
(function () {
  const { useState } = React;
  const I = window.Icon;
  const { Badge, Card } = window.UI;
  const D = window.DATA;

  function Support() {
    const [active, setActive] = useState('c1');
    const conv = D.conversations.find(c => c.id === active) || D.conversations[0];

    return (
      <div style={{ height: '100%', display: 'grid', gridTemplateColumns: '300px 1fr 280px' }}>
        {/* LEFT — conversation list */}
        <div style={{ borderRight: '1px solid var(--line)', display: 'flex', flexDirection: 'column', background: 'oklch(0.16 0.013 265 /.4)' }}>
          <div className="row between" style={{ padding: '14px 16px', borderBottom: '1px solid var(--line)' }}>
            <div className="row gap8"><I.inbox w={17} /><span style={{ fontWeight: 700, fontSize: 14 }}>Caixa de entrada</span>
              <span className="badge" style={{ color: 'var(--rose)', background: 'var(--rose-soft)', borderColor: 'transparent', fontSize: 10.5 }}>2 novas</span></div>
            <button className="btn btn-icon btn-sm"><I.filter w={15} /></button>
          </div>
          <div style={{ flex: 1, overflowY: 'auto' }}>
            {D.conversations.map(c => {
              const on = active === c.id;
              const sc = { ai: 'var(--teal)', resolved: 'var(--green)', escalated: 'var(--amber)' }[c.status];
              return (
                <button key={c.id} onClick={() => setActive(c.id)} className="row gap10"
                  style={{ width: '100%', textAlign: 'left', padding: '13px 16px', cursor: 'pointer', border: 'none',
                    borderBottom: '1px solid var(--line)', borderLeft: '2px solid ' + (on ? 'var(--violet-2)' : 'transparent'),
                    background: on ? 'var(--bg-2)' : 'transparent', alignItems: 'flex-start' }}>
                  <span className="avatar" style={{ width: 34, height: 34, background: c.hue, flex: 'none' }}>{c.name.split(' ').map(w=>w[0]).join('')}</span>
                  <div className="grow" style={{ minWidth: 0 }}>
                    <div className="row between">
                      <span style={{ fontSize: 13, fontWeight: 700 }} className="ellipsis">{c.name}</span>
                      <span className="mono" style={{ fontSize: 10, color: 'var(--tx-3)', flex: 'none', marginLeft: 6 }}>{c.time}</span>
                    </div>
                    <div className="ellipsis" style={{ fontSize: 11.5, color: c.unread ? 'var(--tx-0)' : 'var(--tx-2)', fontWeight: c.unread ? 600 : 400, marginTop: 2 }}>{c.preview}</div>
                    <div className="row gap6" style={{ marginTop: 6 }}>
                      <Badge soft={`color-mix(in oklab, ${sc}, transparent 86%)`} color={sc}>{c.status === 'ai' ? 'IA atendendo' : c.status === 'resolved' ? 'resolvido' : 'escalado'}</Badge>
                      {c.unread && <span className="dot" style={{ background: 'var(--violet-2)' }} />}
                    </div>
                  </div>
                </button>
              );
            })}
          </div>
        </div>

        {/* CENTER — chat */}
        <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
          <div className="row between" style={{ padding: '13px 22px', borderBottom: '1px solid var(--line)' }}>
            <div className="row gap10">
              <span className="avatar" style={{ width: 36, height: 36, background: conv.hue }}>{conv.name.split(' ').map(w=>w[0]).join('')}</span>
              <div><div style={{ fontWeight: 700, fontSize: 14 }}>{conv.name}</div>
                <div style={{ fontSize: 11.5, color: 'var(--tx-2)' }}>{conv.co} · plano Pro</div></div>
            </div>
            <div className="row gap8">
              <Badge soft="var(--teal-soft)" color="var(--teal)"><I.cpu w={12} /> Echo atendendo</Badge>
              <button className="btn btn-sm"><I.user w={14} /> Assumir</button>
            </div>
          </div>

          <div style={{ flex: 1, overflowY: 'auto', padding: '22px 28px' }}>
            <div className="row center" style={{ marginBottom: 20 }}>
              <span className="badge mono" style={{ color: 'var(--tx-3)', background: 'var(--bg-1)' }}>Conversa iniciada · 14:02</span>
            </div>
            {D.supportThread.map((m, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: m.from === 'ai' ? 'flex-start' : 'flex-end', marginBottom: 16 }}>
                <div style={{ maxWidth: '72%' }}>
                  <div className="row gap6" style={{ marginBottom: 5, justifyContent: m.from === 'ai' ? 'flex-start' : 'flex-end' }}>
                    {m.from === 'ai' && <span className="badge" style={{ color: 'var(--teal)', background: 'var(--teal-soft)', borderColor: 'transparent', fontSize: 10 }}><I.cpu w={10} /> {m.name}</span>}
                    <span style={{ fontSize: 11.5, fontWeight: 700 }}>{m.from === 'ai' ? '' : m.name}</span>
                    <span className="mono" style={{ fontSize: 10, color: 'var(--tx-3)' }}>{m.time}</span>
                  </div>
                  <div style={{ padding: '11px 15px', fontSize: 13.5, lineHeight: 1.55,
                    borderRadius: m.from === 'ai' ? '4px 14px 14px 14px' : '14px 14px 4px 14px',
                    background: m.from === 'ai' ? 'var(--bg-2)' : 'linear-gradient(180deg, var(--teal), color-mix(in oklab, var(--teal), black 18%))',
                    border: m.from === 'ai' ? '1px solid var(--line)' : 'none',
                    color: m.from === 'ai' ? 'var(--tx-0)' : 'oklch(0.18 0.02 200)' }}>{m.text}</div>
                </div>
              </div>
            ))}
          </div>

          <div style={{ padding: '14px 22px 18px', borderTop: '1px solid var(--line)' }}>
            <div className="panel-flat" style={{ padding: 10, marginBottom: 10, display: 'flex', gap: 8, alignItems: 'center' }}>
              <span style={{ color: 'var(--violet-2)' }}><I.sparkle w={15} /></span>
              <span style={{ fontSize: 12, color: 'var(--tx-2)' }}><b style={{ color: 'var(--tx-1)' }}>Echo sugere:</b> "Emitir crédito proporcional de R$ 40 e reenviar a fatura" — </span>
              <button className="btn btn-sm" style={{ marginLeft: 'auto' }}>Aprovar e enviar</button>
            </div>
            <div className="row gap10" style={{ padding: '8px 8px 8px 16px', borderRadius: 14, border: '1px solid var(--line-strong)', background: 'var(--bg-1)' }}>
              <input placeholder="Responda você mesmo, ou deixe a Echo cuidar disso…" style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none', color: 'var(--tx-0)', fontSize: 13.5 }} />
              <button className="btn btn-primary" style={{ padding: '8px 12px' }}><I.send w={15} /></button>
            </div>
          </div>
        </div>

        {/* RIGHT — metrics + ticket */}
        <div style={{ borderLeft: '1px solid var(--line)', padding: 18, overflowY: 'auto', background: 'oklch(0.16 0.013 265 /.4)', display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Desempenho de hoje</div>
            <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {D.supportKpis.map((k, i) => (
                <div key={i} className="panel-flat" style={{ padding: 12 }}>
                  <div style={{ fontSize: 10.5, color: 'var(--tx-2)' }}>{k.label}</div>
                  <div className="tnum" style={{ fontSize: 18, fontWeight: 800, letterSpacing: '-0.03em', color: k.accent, marginTop: 3 }}>{k.value}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="hr" />

          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Detalhes do ticket</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 12.5 }}>
              {[['Ticket', '#4821'],['Tipo', 'Cobrança'],['Prioridade', 'Média'],['SLA', conv.sla]].map(([k,v]) => (
                <div key={k} className="row between"><span style={{ color: 'var(--tx-2)' }}>{k}</span>
                  <span style={{ fontWeight: 600, color: v === 'Em risco' ? 'var(--amber)' : 'var(--tx-0)' }}>{v}</span></div>
              ))}
            </div>
          </div>

          <div className="hr" />

          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Satisfação do cliente</div>
            <div className="panel-flat" style={{ padding: 14, textAlign: 'center' }}>
              <div className="tnum" style={{ fontSize: 34, fontWeight: 800, letterSpacing: '-0.04em', color: 'var(--violet-2)' }}>4,8</div>
              <div className="row center gap4" style={{ margin: '4px 0 6px' }}>
                {[0,1,2,3,4].map(i => <span key={i} style={{ color: i < 5 ? 'var(--amber)' : 'var(--tx-3)' }}><I.star w={14} /></span>)}
              </div>
              <div style={{ fontSize: 11, color: 'var(--tx-2)' }}>de 412 avaliações este mês</div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.Screens = window.Screens || {};
  window.Screens.Support = Support;
})();