/* SCREEN 2 — SAT mobile (field technician)
   User: SAT tech at client site, diagnosing Mimaki UJV200 error code.
   Mid-troubleshooting, level 3 of 5 escalation. */

const SATScreen = ({ variation = 'balanced', onOpenChat }) => {
  const [expandedHistory, setExpandedHistory] = React.useState(false);
  // Mobile frame
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr', placeItems: 'center', padding: 28, minHeight: 'calc(100vh - var(--topbar-h))', background: 'var(--bg-sunken)' }}>
      <div style={{ display: 'flex', gap: 28, alignItems: 'flex-start' }}>
        {/* Phone frame */}
        <div style={{
          width: 390, height: 820, borderRadius: 44,
          background: 'var(--brand-900)', padding: 10,
          boxShadow: 'var(--shadow-lg)',
          position: 'relative',
        }}>
          <div style={{
            width: '100%', height: '100%', background: 'var(--bg)',
            borderRadius: 36, overflow: 'hidden',
            display: 'flex', flexDirection: 'column',
            position: 'relative',
          }}>
            {/* Status bar */}
            <div style={{ height: 44, padding: '10px 28px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 14, fontWeight: 600, fontFamily: 'var(--font-display)' }}>
              <span>09:42</span>
              <div style={{ position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)', width: 110, height: 28, background: 'var(--brand-900)', borderRadius: 999 }} />
              <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                <Icon name="battery" size={14} />
              </div>
            </div>

            {/* App header */}
            <div style={{ padding: '8px 16px 12px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid var(--border)' }}>
              <button style={{ padding: 6 }}><Icon name="chevron" size={18} style={{ transform: 'rotate(90deg)' }} /></button>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>TICKET #SAT-2047</div>
                <div className="font-display" style={{ fontWeight: 600, fontSize: 15 }}>UJV200 · Olimpo Lda</div>
              </div>
              <button style={{ padding: 6 }}><Icon name="more" size={18} /></button>
            </div>

            {/* Escalation stepper */}
            <div style={{ padding: '14px 16px', background: 'var(--surface-muted)', borderBottom: '1px solid var(--border)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
                <div style={{ fontSize: 10, color: 'var(--text-muted)', fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '0.08em' }}>ESCALAÇÃO · NÍVEL 3 / 5</div>
                <span className="badge badge-warning" style={{ fontSize: 10 }}>Em progresso</span>
              </div>
              <div style={{ display: 'flex', gap: 4 }}>
                {[1,2,3,4,5].map(n => (
                  <div key={n} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
                    <div style={{ width: '100%', height: 4, borderRadius: 2, background: n <= 3 ? 'var(--ai-500)' : 'var(--border)' }} />
                    <div style={{ fontSize: 9, fontFamily: 'var(--font-mono)', color: n === 3 ? 'var(--ai-700)' : 'var(--text-dim)', fontWeight: n === 3 ? 700 : 400 }}>L{n}</div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 10, fontSize: 11, color: 'var(--text-muted)' }}>
                L1 Verificação visual ✓ · L2 Diagnóstico cabeça ✓ · <strong style={{ color: 'var(--text)' }}>L3 Limpeza sistema tinta branca</strong>
              </div>
            </div>

            {/* Chat body */}
            <div style={{ flex: 1, overflowY: 'auto', padding: 14, display: 'flex', flexDirection: 'column', gap: 10 }} className="scrollbar">
              <div style={{ alignSelf: 'flex-start', maxWidth: '85%', display: 'flex', gap: 8 }}>
                <div style={{ width: 22, height: 22, borderRadius: 6, background: 'var(--ai-500)', display: 'grid', placeItems: 'center', flexShrink: 0, marginTop: 2 }}>
                  <Icon name="sparkle" size={12} style={{ color: '#fff' }} />
                </div>
                <div style={{ padding: '8px 12px', borderRadius: 10, background: 'var(--ai-tint)', border: '1px solid color-mix(in oklch, var(--ai-500) 20%, transparent)', fontSize: 12, lineHeight: 1.5 }}>
                  Erro <strong>E‑05</strong> detetado. Obstrução no sistema de tinta branca. Nível 3 inicia agora.
                </div>
              </div>

              {/* Error code reference inline card */}
              <div className="card" style={{ padding: 12, alignSelf: 'stretch', marginLeft: 30 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                  <span className="badge badge-danger" style={{ fontFamily: 'var(--font-mono)' }}>E-05</span>
                  <span style={{ fontSize: 12, fontWeight: 600 }}>White Ink Clog</span>
                </div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)', lineHeight: 1.55 }}>
                  Obstrução na circulação de tinta branca. Causa mais comum: paragem prolongada sem ciclo de agitação.
                </div>
                <div style={{ display: 'flex', gap: 8, marginTop: 10, paddingTop: 10, borderTop: '1px solid var(--border)', fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>
                  <span>Manual §8.4</span><span>·</span><span>3 casos · 60d</span>
                </div>
              </div>

              <div style={{ alignSelf: 'flex-start', maxWidth: '85%', display: 'flex', gap: 8 }}>
                <div style={{ width: 22, height: 22, borderRadius: 6, background: 'var(--ai-500)', display: 'grid', placeItems: 'center', flexShrink: 0, marginTop: 2 }}>
                  <Icon name="sparkle" size={12} style={{ color: '#fff' }} />
                </div>
                <div style={{ padding: '8px 12px', borderRadius: 10, background: 'var(--ai-tint)', border: '1px solid color-mix(in oklch, var(--ai-500) 20%, transparent)', fontSize: 12, lineHeight: 1.5 }}>
                  Próximo passo: abre painel frontal, retira cartucho branco e verifica se a agitação mecânica responde ao menu <em>Service → Ink → Circulate White</em>.
                </div>
              </div>

              <div style={{ alignSelf: 'flex-end', maxWidth: '85%' }}>
                <div style={{ padding: '8px 12px', borderRadius: 10, background: 'var(--brand-900)', color: '#fff', fontSize: 12 }}>
                  Agitação não inicia. Motor sem som.
                </div>
                <div style={{ fontSize: 10, color: 'var(--text-dim)', textAlign: 'right', marginTop: 2, fontFamily: 'var(--font-mono)' }}>09:41</div>
              </div>

              <div style={{ alignSelf: 'flex-start', maxWidth: '85%', display: 'flex', gap: 8 }}>
                <div style={{ width: 22, height: 22, borderRadius: 6, background: 'var(--ai-500)', display: 'grid', placeItems: 'center', flexShrink: 0, marginTop: 2 }}>
                  <Icon name="sparkle" size={12} style={{ color: '#fff' }} />
                </div>
                <div style={{ padding: '8px 12px', borderRadius: 10, background: 'var(--ai-tint)', border: '1px solid color-mix(in oklch, var(--ai-500) 20%, transparent)', fontSize: 12, lineHeight: 1.5 }}>
                  Motor da bomba pode estar em falha. Já vi este padrão 2× este ano (Sigma Visual, Meta Print). Recomendo escalar ao <strong>Paulo Neto</strong> com o log de erro.
                </div>
              </div>
            </div>

            {/* Bottom actions */}
            <div style={{ padding: 12, borderTop: '1px solid var(--border)', background: 'var(--bg-elev)', display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ display: 'flex', gap: 6, overflowX: 'auto' }}>
                <button className="btn btn-xs" style={{ flexShrink: 0 }}><Icon name="doc" size={11} />Manual §8.4</button>
                <button className="btn btn-xs" style={{ flexShrink: 0 }}><Icon name="history" size={11} />Histórico</button>
                <button className="btn btn-xs" style={{ flexShrink: 0 }}><Icon name="wrench" size={11} />Peças</button>
              </div>
              <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', padding: '12px 16px', fontSize: 14 }}>
                <Icon name="escalate" size={16} />Escalar para Paulo Neto
              </button>
            </div>
          </div>
        </div>

        {/* Right: Machine history card (expandable) */}
        <div style={{ width: 340, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div className="card" style={{ padding: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '0.08em' }}>FICHA DA MÁQUINA</div>
              <span className="badge badge-danger">E-05 ativa</span>
            </div>
            <div className="font-display" style={{ fontSize: 20, fontWeight: 600, marginTop: 8, letterSpacing: '-0.01em' }}>Mimaki UJV200‑160</div>
            <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>SN: MJV200‑24A17·8842 · Garantia até 09/26</div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 14 }}>
              {[['Instalada', '08/2024'],['Horas', '2.140 h'],['Últ. SAT', '47 dias'],['MTBF', '18 dias']].map(([k,v]) => (
                <div key={k} style={{ padding: '8px 10px', background: 'var(--surface-muted)', borderRadius: 8 }}>
                  <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>{k.toUpperCase()}</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, marginTop: 2 }}>{v}</div>
                </div>
              ))}
            </div>

            <button onClick={() => setExpandedHistory(v => !v)} style={{
              width: '100%', marginTop: 12, padding: '10px 12px',
              borderTop: '1px solid var(--border)',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12, fontWeight: 500,
            }}>
              <span>Histórico de intervenções (6)</span>
              <Icon name="chevron" size={14} style={{ transform: expandedHistory ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' }} />
            </button>
            {expandedHistory && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 4 }}>
                {[
                  { d: '06/03/26', t: 'Limpeza preventiva', who: 'Rui Barros', code: 'PM' },
                  { d: '12/02/26', t: 'Substituição cabeça CMYK', who: 'Paulo Neto', code: 'E-12' },
                  { d: '18/12/25', t: 'Calibração', who: 'Rui Barros', code: 'CAL' },
                ].map(h => (
                  <div key={h.d} style={{ padding: '10px 12px', background: 'var(--surface-muted)', borderRadius: 8, display: 'flex', flexDirection: 'column', gap: 4 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <span style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)' }}>{h.d}</span>
                      <span className="badge" style={{ fontSize: 10, fontFamily: 'var(--font-mono)' }}>{h.code}</span>
                    </div>
                    <div style={{ fontSize: 12, fontWeight: 500 }}>{h.t}</div>
                    <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{h.who}</div>
                  </div>
                ))}
              </div>
            )}
          </div>

          <div className="ai-surface card" style={{ padding: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
              <span className="ai-chip"><Icon name="link" size={10} />Referência cruzada</span>
            </div>
            <div style={{ fontSize: 13, lineHeight: 1.55 }}>
              <strong>3 máquinas</strong> com E‑05 nos últimos 60 dias em clientes Mimaki. Reportei à Qualidade (Operações) para análise de lote.
            </div>
            <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
              <button className="btn btn-xs">Ver relatório</button>
              <button className="btn btn-xs btn-ghost">Ignorar</button>
            </div>
          </div>

          <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', textAlign: 'center' }}>
            Painel de contexto — visível em tablet. Em mobile fica no ícone "ficha" do topo do chat.
          </div>
        </div>
      </div>
    </div>
  );
};

window.SATScreen = SATScreen;