// ============================================================
// SCREENS — Prestador (M)
// ============================================================
const { useState: useStateM, useMemo: useMemoM } = React;

// ============ M2 — HOME DO PRESTADOR ============
function HomePro({ go }) {
  return (
    <div className="screen-enter" style={{paddingBottom:24}}>
      <div style={{padding:'18px 16px 8px', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <div>
          <div style={{fontSize:13, color:'var(--text-muted)'}}>Bom dia,</div>
          <div style={{fontSize:24, fontWeight:700, color:'var(--text)', letterSpacing:-.4}}>Marcos</div>
        </div>
        <div style={{display:'flex', gap:8}}>
          <button className="ripple" style={{
            width:40, height:40, borderRadius:40, background:'var(--surface)', border:'1px solid var(--border)',
            display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', position:'relative',
          }}>
            <Icon name="Bell" size={18} strokeWidth={1.8}/>
            <span style={{position:'absolute', top:6, right:8, width:8, height:8, borderRadius:8, background:'var(--danger)', border:'2px solid var(--surface)'}}/>
          </button>
        </div>
      </div>

      {/* Trust + week */}
      <div style={{padding:'8px 16px 0'}}>
        <div style={{
          background:'var(--primary)', color:'#fff', borderRadius:18, padding:16, overflow:'hidden', position:'relative',
        }}>
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10}}>
            <div style={{display:'inline-flex', alignItems:'center', gap:6}}>
              <Icon name="BadgeCheck" size={15} color="#E9D6A8" strokeWidth={2.2}/>
              <span style={{fontSize:12, color:'#E9D6A8'}}>Reputação · semana</span>
            </div>
            <span style={{
              fontSize:11.5, color:'#E9D6A8', background:'rgba(197,165,114,0.18)', border:'1px solid rgba(197,165,114,0.3)',
              padding:'3px 8px', borderRadius:999, fontWeight:600,
            }}>top 5% RJ</span>
          </div>
          <div style={{display:'flex', alignItems:'baseline', gap:10}}>
            <div className="mono" style={{fontSize:32, fontWeight:700, letterSpacing:-.5}}>4.9</div>
            <span style={{fontSize:14, color:'rgba(255,255,255,0.7)'}}>· 142 avaliações</span>
            <span style={{marginLeft:'auto', fontSize:13, color:'#9BD3AC', fontWeight:600, display:'inline-flex', alignItems:'center', gap:3}}>
              <Icon name="TrendingUp" size={14} color="#9BD3AC" strokeWidth={2.2}/> +0.1
            </span>
          </div>
          <div style={{display:'flex', gap:16, marginTop:16, paddingTop:14, borderTop:'1px solid rgba(255,255,255,0.12)'}}>
            <div>
              <div style={{fontSize:10.5, color:'rgba(255,255,255,0.6)', textTransform:'uppercase', letterSpacing:.5}}>Faturamento</div>
              <div className="mono" style={{fontSize:16, fontWeight:600, marginTop:2}}>R$ 4.380</div>
              <div style={{fontSize:11, color:'rgba(255,255,255,0.5)'}}>esta semana</div>
            </div>
            <div style={{width:1, background:'rgba(255,255,255,0.15)'}}/>
            <div>
              <div style={{fontSize:10.5, color:'rgba(255,255,255,0.6)', textTransform:'uppercase', letterSpacing:.5}}>OS abertas</div>
              <div className="mono" style={{fontSize:16, fontWeight:600, marginTop:2}}>3</div>
              <div style={{fontSize:11, color:'rgba(255,255,255,0.5)'}}>2 hoje · 1 amanhã</div>
            </div>
          </div>
        </div>
      </div>

      {/* Today agenda */}
      <div style={{padding:'22px 16px 0'}}>
        <SectionHeader title="Agenda de hoje" action="Semana" onAction={()=>go('pro-agenda')}/>
        <div style={{display:'flex', flexDirection:'column', gap:10}}>
          {PRO_AGENDA.filter(a=>a.date==='Hoje').map(a=>(
            <div key={a.id} style={{
              display:'flex', gap:12,
              background:'var(--surface)', border:'1px solid var(--border)', borderRadius:14, padding:14,
            }}>
              <div style={{
                display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
                width:56, padding:'6px 0', background:'var(--accent-soft)', border:'1px solid #E9DDC2',
                borderRadius:10, flexShrink:0,
              }}>
                <div className="mono" style={{fontSize:15, fontWeight:700, color:'#3A2D14'}}>{a.time}</div>
              </div>
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontSize:14, fontWeight:600, color:'var(--text)'}}>{a.title}</div>
                <div style={{fontSize:12, color:'var(--text-muted)', marginTop:2}}>{a.client} · {a.marina}</div>
                <div style={{marginTop:8}}>
                  <OrderStatusPill status={a.status}/>
                </div>
              </div>
              <button className="ripple" style={{
                width:36, height:36, borderRadius:36, background:'var(--surface)', border:'1px solid var(--border)',
                display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer',
                alignSelf:'center',
              }}>
                <Icon name="Navigation" size={15} color="var(--primary)" strokeWidth={2}/>
              </button>
            </div>
          ))}
        </div>
      </div>

      {/* Leads aguardando resposta */}
      <div style={{padding:'22px 16px 0'}}>
        <SectionHeader title="Leads aguardando resposta" action="Ver todos" onAction={()=>go('pro-orders')}/>
        <div style={{
          display:'flex', alignItems:'center', gap:12,
          background:'var(--surface)', border:'1px solid #F2D6A8',
          borderRadius:14, padding:14,
        }}>
          <div style={{width:38, height:38, borderRadius:10, background:'#FCEFE0', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
            <Icon name="Hourglass" size={18} color="#7A4A0A" strokeWidth={1.8}/>
          </div>
          <div style={{flex:1}}>
            <div style={{fontSize:13.5, fontWeight:600, color:'var(--text)'}}>3 leads aguardando cotação</div>
            <div style={{fontSize:12, color:'var(--text-muted)', marginTop:2}}>Tempo médio de resposta: 1h47 · seu alvo: &lt;2h</div>
          </div>
          <button onClick={()=>go('pro-orders')} className="ripple" style={{
            background:'var(--primary)', color:'#fff', border:'none',
            padding:'8px 14px', borderRadius:10, fontSize:13, fontWeight:600, cursor:'pointer',
          }}>Responder</button>
        </div>
      </div>

      {/* Week chart - minimalist */}
      <div style={{padding:'22px 16px 0'}}>
        <SectionHeader title="Receita por semana"/>
        <div style={{background:'var(--surface)', border:'1px solid var(--border)', borderRadius:14, padding:'16px 14px'}}>
          <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:14}}>
            <div className="mono" style={{fontSize:22, fontWeight:700, color:'var(--text)', letterSpacing:-.3}}>R$ 18.620</div>
            <span style={{fontSize:12, color:'var(--success)', fontWeight:600}}>+12% vs. mês anterior</span>
          </div>
          <div style={{display:'flex', alignItems:'flex-end', gap:8, height:80}}>
            {[0.4,0.55,0.45,0.7,0.6,0.8,0.95].map((v,i)=>(
              <div key={i} style={{flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:6}}>
                <div style={{
                  width:'100%', height: v*72, background: i===6 ? 'var(--primary)' : '#D7DBE3',
                  borderRadius:'4px 4px 2px 2px',
                }}/>
                <span style={{fontSize:10, color:'var(--text-subtle)'}}>S{i+1}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ============ M3 — OS RECEBIDAS ============
function ProOrdersScreen({ go }) {
  const [tab, setTab] = useStateM('novas');
  const counts = { novas:3, andamento:2, concluidas:12 };
  return (
    <div className="screen-enter" style={{paddingBottom:24}}>
      <ScreenHeader title="OS recebidas" large/>
      <div style={{padding:'4px 16px 0'}}>
        <div style={{display:'flex', gap:0, marginBottom:14, borderBottom:'1px solid var(--border)'}}>
          {[
            { key:'novas', label:'Novas' },
            { key:'andamento', label:'Em andamento' },
            { key:'concluidas', label:'Concluídas' },
          ].map(t=>{
            const on = tab===t.key;
            return (
              <button key={t.key} onClick={()=>setTab(t.key)} style={{
                flex:1, background:'none', border:'none', cursor:'pointer',
                padding:'10px 4px', fontSize:13.5, fontWeight: on?600:500,
                color: on ? 'var(--primary)' : 'var(--text-muted)',
                borderBottom: '2px solid ' + (on ? 'var(--primary)' : 'transparent'),
                marginBottom:-1, display:'inline-flex', alignItems:'center', justifyContent:'center', gap:6,
              }}>
                {t.label}
                <span style={{
                  background: on ? 'var(--primary)' : '#EDEFF3',
                  color: on ? '#fff' : 'var(--text-muted)',
                  fontSize:11, fontWeight:600, padding:'1px 7px', borderRadius:999,
                }}>{counts[t.key]}</span>
              </button>
            );
          })}
        </div>

        {tab==='novas' && (
          <div style={{display:'flex', flexDirection:'column', gap:12}}>
            {PRO_LEADS.map(l=>(
              <button key={l.id} onClick={()=>go('pro-quote-new')} className="ripple" style={{
                width:'100%', textAlign:'left', background:'var(--surface)', border:'1px solid var(--border)',
                borderRadius:16, padding:14, cursor:'pointer',
              }}>
                <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:10}}>
                  <span className="mono" style={{fontSize:11.5, color:'var(--text-subtle)', fontWeight:600}}>{l.osId}</span>
                  <span style={{fontSize:11, color:'var(--text-subtle)'}}>·</span>
                  <span style={{fontSize:12, color:'var(--text-muted)'}}>{l.receivedAt}</span>
                  <span style={{marginLeft:'auto', fontSize:11.5, color:'var(--text-subtle)', display:'inline-flex', alignItems:'center', gap:3}}>
                    <Icon name="Navigation" size={11} strokeWidth={2}/> {l.distance} km
                  </span>
                </div>
                <div style={{fontSize:14.5, fontWeight:600, color:'var(--text)', marginBottom:4}}>{l.boat}</div>
                <p style={{margin:'0 0 12px', fontSize:13, color:'var(--text-muted)', lineHeight:1.45}}>{l.summary}</p>
                <div style={{display:'flex', alignItems:'center', gap:10}}>
                  <div style={{
                    display:'inline-flex', alignItems:'center', gap:5,
                    background:'var(--accent-soft)', border:'1px solid #E9DDC2',
                    color:'#5F4F2E', padding:'3px 9px', borderRadius:999, fontSize:11.5,
                  }}>
                    <Icon name="Sparkles" size={11} color="#7D6A47" strokeWidth={2}/>
                    Estimativa IA: <span className="mono" style={{fontWeight:600}}>R$ {l.estimate}</span>
                  </div>
                  <span style={{marginLeft:'auto', fontSize:13, fontWeight:600, color:'var(--primary)'}}>Enviar cotação →</span>
                </div>
              </button>
            ))}
          </div>
        )}

        {tab==='andamento' && (
          <div style={{display:'flex', flexDirection:'column', gap:12}}>
            {PRO_AGENDA.slice(0,2).map(a=>(
              <div key={a.id} style={{
                background:'var(--surface)', border:'1px solid var(--border)', borderRadius:16, padding:14,
              }}>
                <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:8}}>
                  <span className="mono" style={{fontSize:11.5, color:'var(--text-subtle)', fontWeight:600}}>{a.os}</span>
                  <OrderStatusPill status={a.status}/>
                </div>
                <div style={{fontSize:14.5, fontWeight:600, color:'var(--text)'}}>{a.title}</div>
                <div style={{fontSize:12.5, color:'var(--text-muted)', marginTop:2}}>{a.client} · {a.marina} · {a.date} {a.time}</div>
              </div>
            ))}
          </div>
        )}

        {tab==='concluidas' && (
          <div style={{display:'flex', flexDirection:'column', gap:12}}>
            {[
              { os:'OS-2812', title:'Revisão de 200h Mercury', client:'Ricardo F.', boat:'Catalina 380', closedAt:'08 mai', amount:2380, rating:5 },
              { os:'OS-2801', title:'Diagnóstico — circuito de partida', client:'Eduardo S.', boat:'Phantom 365', closedAt:'02 mai', amount:680, rating:5 },
              { os:'OS-2794', title:'Troca de óleo e filtros', client:'Camila T.', boat:'Focker 272', closedAt:'27 abr', amount:1180, rating:5 },
              { os:'OS-2787', title:'Reaperto de hélice + balanceamento', client:'Henrique D.', boat:'Triton 360', closedAt:'19 abr', amount:520, rating:4 },
            ].map(o=>(
              <div key={o.os} style={{
                background:'var(--surface)', border:'1px solid var(--border)', borderRadius:16, padding:14,
              }}>
                <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:6}}>
                  <span className="mono" style={{fontSize:11.5, color:'var(--text-subtle)', fontWeight:600}}>{o.os}</span>
                  <OrderStatusPill status="concluido"/>
                  <span className="mono" style={{marginLeft:'auto', fontSize:11, color:'var(--text-subtle)'}}>{o.closedAt}</span>
                </div>
                <div style={{fontSize:14, fontWeight:600, color:'var(--text)'}}>{o.title}</div>
                <div style={{fontSize:12.5, color:'var(--text-muted)', marginTop:2}}>{o.client} · {o.boat}</div>
                <div style={{display:'flex', alignItems:'center', gap:10, marginTop:10}}>
                  <div style={{display:'inline-flex', alignItems:'center', gap:3}}>
                    {[1,2,3,4,5].map(n=>(
                      <Icon key={n} name="Star" size={12} color={n<=o.rating?'#C5A572':'#E5E7EB'} strokeWidth={1.5} style={{fill: n<=o.rating?'#C5A572':'transparent'}}/>
                    ))}
                  </div>
                  <span className="mono" style={{marginLeft:'auto', fontSize:13.5, fontWeight:600, color:'var(--text)'}}>{brl(o.amount)}</span>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

// ============ M4 — ENVIAR COTAÇÃO ============
function ProQuoteNew({ go }) {
  const lead = PRO_LEADS[0];
  const [price, setPrice] = useStateM('1450');
  const [days, setDays] = useStateM('2');
  const [note, setNote] = useStateM('Inclui óleo Mercury Premium 25W-40, filtros originais e teste de água. Garantia de 60 dias.');
  const priceN = Number(price.replace(/[^0-9]/g,'')) || 0;
  const commission = Math.round(priceN * 0.15);
  const net = priceN - commission;

  return (
    <div className="screen-enter" style={{paddingBottom:140}}>
      <ScreenHeader title="Enviar cotação" subtitle={lead.osId + ' · ' + lead.boat} onBack={()=>go('pro-orders')}/>
      <div style={{padding:'12px 16px 0', display:'flex', flexDirection:'column', gap:16}}>
        <div style={{
          background:'var(--surface)', border:'1px solid var(--border)', borderRadius:14, padding:14,
        }}>
          <div style={{fontSize:11.5, color:'var(--text-subtle)', textTransform:'uppercase', letterSpacing:.4, marginBottom:4}}>Resumo do pedido</div>
          <p style={{margin:0, fontSize:13.5, color:'var(--text)', lineHeight:1.5}}>{lead.summary}</p>
        </div>

        <Field label="Valor da cotação">
          <div style={{position:'relative'}}>
            <span className="mono" style={{position:'absolute', left:14, top:13, fontSize:14, color:'var(--text-muted)'}}>R$</span>
            <Input value={price} onChange={e=>setPrice(e.target.value)} className="mono" style={{paddingLeft:42, fontSize:18, fontWeight:600}}/>
          </div>
        </Field>

        {/* Net calculator */}
        <div style={{
          background:'var(--accent-soft)', border:'1px solid #E9DDC2', borderRadius:14, padding:14,
        }}>
          <div style={{display:'flex', justifyContent:'space-between', fontSize:13, color:'#5F4F2E', marginBottom:8}}>
            <span>Cotação</span>
            <span className="mono">{brl(priceN)}</span>
          </div>
          <div style={{display:'flex', justifyContent:'space-between', fontSize:13, color:'#5F4F2E', marginBottom:8}}>
            <span>Comissão Convés (15%)</span>
            <span className="mono">− {brl(commission)}</span>
          </div>
          <div style={{height:1, background:'#E9DDC2', margin:'8px 0'}}/>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
            <span style={{fontSize:13, color:'#3A2D14', fontWeight:600}}>Você receberá</span>
            <span className="mono" style={{fontSize:18, color:'#3A2D14', fontWeight:700}}>{brl(net)}</span>
          </div>
        </div>

        <Field label="Prazo">
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:8}}>
            {['1','2','3','5+'].map(d=>{
              const on = days === d;
              return (
                <button key={d} onClick={()=>setDays(d)} className="ripple" style={{
                  background: on ? 'var(--primary)' : 'var(--surface)',
                  color: on ? '#fff' : 'var(--text)',
                  border: '1px solid ' + (on ? 'var(--primary)' : 'var(--border)'),
                  borderRadius:10, padding:'10px 0', cursor:'pointer', fontSize:13, fontWeight:600,
                }}>{d} {d==='1'?'dia':'dias'}</button>
              );
            })}
          </div>
        </Field>

        <Field label="Observação" hint="Visível para o proprietário antes de aceitar.">
          <Textarea value={note} onChange={e=>setNote(e.target.value)}/>
        </Field>

        <Field label="Anexar orçamento (PDF/foto)" optional>
          <button className="ripple" style={{
            background:'transparent', border:'1.5px dashed var(--border-strong)',
            borderRadius:10, padding:'14px', color:'var(--text-muted)', fontSize:13, cursor:'pointer',
            display:'inline-flex', justifyContent:'center', alignItems:'center', gap:8, width:'100%',
          }}>
            <Icon name="Paperclip" size={15} strokeWidth={2}/> Adicionar arquivo
          </button>
        </Field>
      </div>

      <div style={{
        position:'absolute', left:0, right:0, bottom:0, padding:'12px 16px 28px',
        background:'rgba(250,250,250,0.96)', borderTop:'1px solid var(--border)',
        backdropFilter:'blur(10px)', WebkitBackdropFilter:'blur(10px)',
        display:'flex', gap:10,
      }}>
        <Btn variant="secondary" onClick={()=>go('pro-orders')}>Recusar</Btn>
        <Btn variant="primary" full onClick={()=>go('pro-home')}>Enviar cotação</Btn>
      </div>
    </div>
  );
}

Object.assign(window, { HomePro, ProOrdersScreen, ProQuoteNew });