// chamapro-desktop.jsx — Desktop screens (rendered inside BrowserWindow)

// ─────────────────────────────────────────────────────────────
// Desktop Header / Sidebar bits
// ─────────────────────────────────────────────────────────────
function DesktopShell({ children, page = 'dashboard' }) {
  const nav = [
    { id: 'dashboard', label: 'Início', icon: Icon.home },
    { id: 'requests', label: 'Meus pedidos', icon: Icon.list, badge: 3 },
    { id: 'proposals', label: 'Propostas', icon: Icon.briefcase, badge: 7 },
    { id: 'messages', label: 'Mensagens', icon: Icon.chat, badge: 2 },
    { id: 'pros', label: 'Profissionais', icon: Icon.user },
    { id: 'history', label: 'Histórico', icon: Icon.clock },
  ];
  return (
    <div className="cp" style={{ display: 'flex', height: '100%', background: 'var(--cp-bg)' }}>
      {/* Sidebar */}
      <aside style={{
        width: 248, flexShrink: 0,
        background: 'var(--cp-surface)', borderRight: '1px solid var(--cp-border)',
        display: 'flex', flexDirection: 'column',
        padding: '20px 14px',
      }}>
        <div style={{ padding: '4px 8px 22px' }}>
          <Logo size={22} />
        </div>

        {/* Quick action */}
        <button className="cp-btn-primary" style={{ marginBottom: 18, padding: '12px', fontSize: 14 }}>
          {Icon.plus(16)} Novo pedido
        </button>

        <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--cp-text-soft)', textTransform: 'uppercase', letterSpacing: '.08em', padding: '4px 10px 8px' }}>
          Navegação
        </div>
        {nav.map(n => (
          <div key={n.id} style={{
            display: 'flex', alignItems: 'center', gap: 11,
            padding: '9px 11px', borderRadius: 10, cursor: 'pointer',
            background: n.id === page ? 'var(--cp-primary-tint)' : 'transparent',
            color: n.id === page ? 'var(--cp-primary)' : 'var(--cp-text)',
            fontSize: 13.5, fontWeight: n.id === page ? 600 : 500,
            marginBottom: 2,
          }}>
            <span style={{ width: 18, display: 'inline-flex' }}>{n.icon(17)}</span>
            <span style={{ flex: 1 }}>{n.label}</span>
            {n.badge && (
              <span style={{
                background: n.id === page ? 'var(--cp-primary)' : 'var(--cp-surface-2)',
                color: n.id === page ? 'white' : 'var(--cp-text-muted)',
                padding: '1px 7px', borderRadius: 999,
                fontSize: 11, fontWeight: 600,
              }}>{n.badge}</span>
            )}
          </div>
        ))}

        <div style={{ flex: 1 }} />

        {/* Help card */}
        <div style={{
          padding: 14, borderRadius: 14,
          background: 'linear-gradient(135deg, #FFE9DF, #FFCCBC)',
          color: 'var(--cp-text)', position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', top: -8, right: -8, fontSize: 50, opacity: .2 }}>🔥</div>
          <div style={{ fontSize: 12.5, fontWeight: 700 }}>Profissional?</div>
          <div style={{ fontSize: 11.5, color: 'var(--cp-text-muted)', marginTop: 2, marginBottom: 8 }}>
            Entre como pro e receba pedidos.
          </div>
          <button style={{
            background: 'var(--cp-primary)', color: 'white', border: 'none',
            padding: '6px 12px', borderRadius: 8, fontSize: 12, fontWeight: 600, cursor: 'pointer',
          }}>Cadastrar →</button>
        </div>

        {/* User */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 6px 0' }}>
          <Avatar name="Marina Silva" size="sm" />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12.5, fontWeight: 600 }} className="cp-truncate">Marina Silva</div>
            <div style={{ fontSize: 11, color: 'var(--cp-text-muted)' }} className="cp-truncate">marina@chamapro.app</div>
          </div>
        </div>
      </aside>

      {/* Main */}
      <main style={{ flex: 1, overflow: 'auto', minWidth: 0 }}>
        {children}
      </main>
    </div>
  );
}

function DesktopTopbar({ title, sub }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '20px 28px', borderBottom: '1px solid var(--cp-border)',
      background: 'var(--cp-surface)',
    }}>
      <div>
        <h1 style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-.025em', margin: 0 }}>{title}</h1>
        {sub && <div style={{ fontSize: 13, color: 'var(--cp-text-muted)', marginTop: 2 }}>{sub}</div>}
      </div>
      <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px',
          background: 'var(--cp-surface-2)', borderRadius: 10, width: 280,
        }}>
          <span style={{ color: 'var(--cp-text-muted)' }}>{Icon.search(15)}</span>
          <span style={{ fontSize: 13, color: 'var(--cp-text-soft)' }}>Buscar pedidos, profissionais...</span>
          <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--cp-text-soft)', padding: '1px 6px', border: '1px solid var(--cp-border)', borderRadius: 4 }}>⌘K</span>
        </div>
        <button style={{
          width: 36, height: 36, border: '1px solid var(--cp-border)', background: 'var(--cp-surface)',
          borderRadius: 10, cursor: 'pointer', position: 'relative',
          display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--cp-text)',
        }}>
          {Icon.bell(17)}
          <span style={{ position: 'absolute', top: 7, right: 7, width: 7, height: 7, background: 'var(--cp-primary)', borderRadius: 999, border: '2px solid var(--cp-surface)' }}/>
        </button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// DESKTOP — Dashboard / Home
// ─────────────────────────────────────────────────────────────
function DesktopDashboard() {
  return (
    <DesktopShell page="dashboard">
      <DesktopTopbar title="Olá, Marina 👋" sub="Você tem 3 pedidos ativos e 7 propostas para revisar." />
      <div style={{ padding: '24px 28px' }}>
        {/* Hero CTA */}
        <div style={{
          background: 'linear-gradient(120deg, #FF5722 0%, #E64A19 100%)',
          color: 'white', borderRadius: 20, padding: 28,
          position: 'relative', overflow: 'hidden',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          boxShadow: '0 14px 32px rgba(255,87,34,.25)',
        }}>
          <div style={{ position: 'absolute', top: -30, right: 60, fontSize: 180, opacity: .1 }}>🔥</div>
          <div style={{ maxWidth: 480, position: 'relative' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 700, opacity: .92, marginBottom: 8, letterSpacing: '.06em' }}>
              {Icon.lightning(13)} RESPOSTA EM MINUTOS
            </div>
            <div style={{ fontSize: 30, fontWeight: 800, letterSpacing: '-.025em', lineHeight: 1.15 }}>
              Precisa de algo? Os pros chegam até você.
            </div>
            <div style={{ fontSize: 14, opacity: .9, marginTop: 8, lineHeight: 1.5 }}>
              Em média <b>7 propostas em 24h</b> de profissionais verificados, com pagamento protegido.
            </div>
          </div>
          <div style={{ display: 'flex', gap: 10, position: 'relative' }}>
            <button style={{
              background: 'white', color: 'var(--cp-primary)', border: 'none',
              borderRadius: 12, padding: '14px 22px', fontWeight: 700, fontSize: 14,
              cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>
              {Icon.plus(15)} Criar pedido
            </button>
            <button style={{
              background: 'rgba(255,255,255,.15)', color: 'white',
              border: '1px solid rgba(255,255,255,.3)',
              borderRadius: 12, padding: '14px 22px', fontWeight: 600, fontSize: 14,
              cursor: 'pointer', backdropFilter: 'blur(20px)',
            }}>
              Ver categorias
            </button>
          </div>
        </div>

        {/* Stats */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginTop: 22 }}>
          {[
            { l: 'Pedidos ativos', v: '3', d: '+1 desta semana', icon: '📋', tone: 'primary' },
            { l: 'Propostas novas', v: '7', d: 'em 2 pedidos', icon: '🔥', tone: 'success' },
            { l: 'Mensagens', v: '12', d: '2 não lidas', icon: '💬' },
            { l: 'Economia média', v: 'R$ 340', d: 'vs. mercado', icon: '💰', tone: 'success' },
          ].map((s, i) => (
            <div key={i} className="cp-card" style={{ padding: 18 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
                <span style={{ fontSize: 12, color: 'var(--cp-text-muted)', fontWeight: 500 }}>{s.l}</span>
                <span style={{ fontSize: 22 }}>{s.icon}</span>
              </div>
              <div style={{ fontSize: 28, fontWeight: 800, letterSpacing: '-.02em', lineHeight: 1 }}>{s.v}</div>
              <div style={{ fontSize: 11.5, color: s.tone === 'success' ? 'var(--cp-success)' : 'var(--cp-text-muted)', marginTop: 6, fontWeight: 500 }}>
                {s.tone === 'success' && '↗ '}{s.d}
              </div>
            </div>
          ))}
        </div>

        {/* Active requests + Recommended pros */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr .7fr', gap: 16, marginTop: 22 }}>
          {/* Active list */}
          <div className="cp-card" style={{ padding: 0 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 18px 12px' }}>
              <div>
                <div style={{ fontSize: 16, fontWeight: 700 }}>Pedidos ativos</div>
                <div style={{ fontSize: 12, color: 'var(--cp-text-muted)', marginTop: 2 }}>Acompanhe propostas e progresso</div>
              </div>
              <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--cp-primary)', cursor: 'pointer' }}>Ver todos →</span>
            </div>
            <div style={{ borderTop: '1px solid var(--cp-border)' }}>
              {[
                { kind: 'paint', title: 'Pintar sala e quarto', sub: 'Pinheiros · esta semana', bids: 7, range: 'R$ 950–1.450', state: 'active', live: true },
                { kind: 'plumb', title: 'Conserto de chuveiro', sub: 'Pinheiros · hoje', bids: 5, range: 'em andamento', state: 'ongoing' },
                { kind: 'ac', title: 'Limpeza de ar-condicionado split', sub: 'Pinheiros · próx. semana', bids: 3, range: 'R$ 180–260', state: 'active' },
              ].map((r, i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 14, padding: '14px 18px',
                  borderTop: i > 0 ? '1px solid var(--cp-border)' : 'none', cursor: 'pointer',
                }}>
                  <div style={{ width: 44, height: 44, borderRadius: 10, overflow: 'hidden', flexShrink: 0 }}>
                    <PhotoPlaceholder kind={r.kind} h={44} />
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <span style={{ fontWeight: 600, fontSize: 14 }}>{r.title}</span>
                      {r.live && <span style={{ fontSize: 10, color: 'var(--cp-primary)', fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 3 }}>
                        <span style={{ width: 6, height: 6, background: 'var(--cp-primary)', borderRadius: 999 }}/> AO VIVO
                      </span>}
                    </div>
                    <div style={{ fontSize: 12, color: 'var(--cp-text-muted)', marginTop: 2 }}>{r.sub}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontSize: 13, fontWeight: 700 }}>{r.range}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--cp-text-muted)' }}>
                      {r.state === 'ongoing' ? '🟢 profissional a caminho' : `${r.bids} propostas`}
                    </div>
                  </div>
                  <span style={{ color: 'var(--cp-text-soft)' }}>{Icon.arrowRight(14)}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Right column */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="cp-card" style={{ padding: 16 }}>
              <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 4 }}>Categoria em alta</div>
              <div style={{ fontSize: 12, color: 'var(--cp-text-muted)', marginBottom: 14 }}>Em Pinheiros, esta semana</div>
              {[
                { cat: '🎨 Pintura', n: '+34%', tone: '#16A34A' },
                { cat: '⚡ Elétrica', n: '+18%', tone: '#16A34A' },
                { cat: '🧹 Limpeza', n: '+12%', tone: '#16A34A' },
                { cat: '❄️ Ar-cond.', n: '−5%', tone: '#9A9588' },
              ].map((c, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '7px 0', borderTop: i > 0 ? '1px solid var(--cp-border)' : 'none' }}>
                  <span style={{ fontSize: 13 }}>{c.cat}</span>
                  <span style={{ fontSize: 12.5, fontWeight: 600, color: c.tone }}>{c.n}</span>
                </div>
              ))}
            </div>

            <div className="cp-card" style={{ padding: 16, background: 'linear-gradient(135deg, var(--cp-surface), var(--cp-primary-tint))' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, fontWeight: 700, color: 'var(--cp-primary)', textTransform: 'uppercase', letterSpacing: '.06em' }}>
                {Icon.sparkle(12)} Sugestão
              </div>
              <div style={{ fontSize: 14, fontWeight: 600, marginTop: 6, lineHeight: 1.4 }}>
                Faltam 3 dias para a vistoria do seu apto. Quer agendar uma limpeza pós-obra?
              </div>
              <button style={{
                marginTop: 12, background: 'var(--cp-text)', color: 'var(--cp-bg)',
                border: 'none', borderRadius: 10, padding: '8px 14px', fontSize: 13, fontWeight: 600, cursor: 'pointer',
              }}>Ver pros perto →</button>
            </div>
          </div>
        </div>
      </div>
    </DesktopShell>
  );
}

// ─────────────────────────────────────────────────────────────
// DESKTOP — Comparar propostas (split view)
// ─────────────────────────────────────────────────────────────
function DesktopCompareProposals() {
  const proposals = [
    { name: 'Carlos Souza', cat: 'Pintor profissional', rating: 4.9, jobs: 312, verified: true, price: 1180, days: 2, eta: '8 min', highlight: true,
      msg: 'Posso fazer com tinta Coral premium incluída. Garantia escrita de 1 ano. Visito antes para alinhar tons.', },
    { name: 'Ana Beatriz Lopes', cat: 'Pintura & acabamento', rating: 5.0, jobs: 184, verified: true, price: 1450, days: 3, eta: '15 min',
      msg: 'Faço massa corrida, lixamento e 2 demãos. Posso visitar antes para orçamento detalhado.', },
    { name: 'Roberto Lima', cat: 'Reformas em geral', rating: 4.6, jobs: 89, verified: false, price: 950, days: 4, eta: '42 min',
      msg: 'Trabalho com qualidade e preço justo. Disponível a partir de amanhã.', },
  ];

  return (
    <DesktopShell page="proposals">
      <DesktopTopbar title="Propostas recebidas" />
      <div style={{ padding: '20px 28px' }}>
        {/* Job context bar */}
        <div className="cp-card" style={{ padding: 16, display: 'flex', alignItems: 'center', gap: 16 }}>
          <div style={{ width: 56, height: 56, borderRadius: 12, overflow: 'hidden', flexShrink: 0 }}>
            <PhotoPlaceholder kind="paint" h={56} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontSize: 17, fontWeight: 700, letterSpacing: '-.015em' }}>Pintar sala e quarto</span>
              <span className="cp-pill is-primary" style={{ fontSize: 11 }}>● ao vivo</span>
            </div>
            <div style={{ display: 'flex', gap: 18, marginTop: 5, fontSize: 12.5, color: 'var(--cp-text-muted)' }}>
              <span>📍 Pinheiros, SP</span>
              <span>📅 esta semana, manhã</span>
              <span>📐 ~45m²</span>
              <span>🎨 incluindo material</span>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 22, alignItems: 'center' }}>
            <div>
              <div style={{ fontSize: 11, color: 'var(--cp-text-muted)', textTransform: 'uppercase', letterSpacing: '.04em', fontWeight: 600 }}>Lances</div>
              <div style={{ fontSize: 22, fontWeight: 800 }}>7</div>
            </div>
            <div>
              <div style={{ fontSize: 11, color: 'var(--cp-text-muted)', textTransform: 'uppercase', letterSpacing: '.04em', fontWeight: 600 }}>Faixa</div>
              <div style={{ fontSize: 17, fontWeight: 700 }}>R$ 950–1.450</div>
            </div>
            <div>
              <div style={{ fontSize: 11, color: 'var(--cp-text-muted)', textTransform: 'uppercase', letterSpacing: '.04em', fontWeight: 600 }}>Tempo aberto</div>
              <div style={{ fontSize: 17, fontWeight: 700 }}>2h 14m</div>
            </div>
          </div>
        </div>

        {/* Filter tabs */}
        <div style={{ display: 'flex', gap: 8, marginTop: 20, alignItems: 'center' }}>
          {['Recomendados', 'Menor preço', 'Melhor avaliados', 'Mais rápidos', 'Verificados'].map((t, i) => (
            <button key={t} className="cp-chip" style={{
              padding: '7px 14px', fontSize: 12.5,
              background: i === 0 ? 'var(--cp-text)' : 'var(--cp-surface)',
              color: i === 0 ? 'var(--cp-bg)' : 'var(--cp-text)',
              borderColor: i === 0 ? 'var(--cp-text)' : 'var(--cp-border)',
            }}>{t}</button>
          ))}
          <div style={{ flex: 1 }} />
          <span style={{ fontSize: 12, color: 'var(--cp-text-muted)' }}>Mostrando 3 de 7</span>
        </div>

        {/* Proposal grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 16 }}>
          {proposals.map((p, i) => (
            <div key={i} className="cp-card" style={{
              padding: 18, position: 'relative',
              borderColor: p.highlight ? 'var(--cp-primary)' : 'var(--cp-border)',
              borderWidth: p.highlight ? 2 : 1,
              boxShadow: p.highlight ? '0 6px 20px rgba(255,87,34,.12)' : 'none',
            }}>
              {p.highlight && (
                <div style={{
                  position: 'absolute', top: -11, left: 16,
                  background: 'var(--cp-primary)', color: 'white',
                  padding: '4px 10px', borderRadius: 999,
                  fontSize: 10.5, fontWeight: 700, letterSpacing: '.06em',
                  display: 'inline-flex', alignItems: 'center', gap: 4,
                }}>
                  {Icon.flame(11, 'white')} MELHOR ESCOLHA
                </div>
              )}
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <Avatar name={p.name} size="md" />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                    <span style={{ fontWeight: 600, fontSize: 14 }} className="cp-truncate">{p.name}</span>
                    {p.verified && <Verified />}
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--cp-text-muted)' }} className="cp-truncate">{p.cat}</div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 16, marginTop: 14, fontSize: 12 }}>
                <div>
                  <div style={{ color: 'var(--cp-text-muted)' }}>Avaliação</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 3, fontWeight: 700, fontSize: 14 }}>
                    <span style={{ color: '#FFB300' }}>{Icon.star(12)}</span> {p.rating}
                  </div>
                </div>
                <div>
                  <div style={{ color: 'var(--cp-text-muted)' }}>Trabalhos</div>
                  <div style={{ fontWeight: 700, fontSize: 14 }}>{p.jobs}</div>
                </div>
                <div>
                  <div style={{ color: 'var(--cp-text-muted)' }}>Resp.</div>
                  <div style={{ fontWeight: 700, fontSize: 14 }}>{p.eta}</div>
                </div>
              </div>
              <div style={{
                marginTop: 14, padding: 10, borderRadius: 10,
                background: 'var(--cp-surface-2)', fontSize: 12.5, lineHeight: 1.5,
                minHeight: 64,
              }}>
                "{p.msg}"
              </div>
              <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--cp-border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div>
                  <div style={{ fontSize: 11, color: 'var(--cp-text-muted)', textTransform: 'uppercase', letterSpacing: '.04em', fontWeight: 600 }}>Total</div>
                  <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-.02em' }}>R$ {p.price.toLocaleString('pt-BR')}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--cp-text-muted)' }}>{p.days} dias úteis</div>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <button className="cp-btn-primary" style={{ padding: '8px 14px', fontSize: 12.5, boxShadow: 'none' }}>
                    Aceitar
                  </button>
                  <button className="cp-btn-ghost" style={{ padding: '7px 14px', fontSize: 12.5 }}>
                    {Icon.chat(13)} Conversar
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Comparison footer */}
        <div className="cp-card" style={{
          marginTop: 20, padding: 14, display: 'flex', alignItems: 'center', gap: 14,
          background: 'var(--cp-surface-2)',
        }}>
          <div style={{ color: 'var(--cp-primary)' }}>{Icon.sparkle(18)}</div>
          <div style={{ flex: 1, fontSize: 13 }}>
            <b>Análise ChamaPro:</b> Carlos é a opção com melhor custo-benefício baseado em avaliações, prazo e preço. Ana tem o portfólio mais robusto. Roberto é o mais barato, mas tem menos trabalhos verificados.
          </div>
        </div>
      </div>
    </DesktopShell>
  );
}

Object.assign(window, {
  DesktopShell, DesktopTopbar, DesktopDashboard, DesktopCompareProposals,
});