// ============================================================
// SCREENS — Proprietário (P) part 1
// ============================================================
const { useState: useStateO1, useEffect: useEffectO1, useMemo: useMemoO1 } = React;

// ============ P3 — HOME PROPRIETÁRIO ============
function HomeOwner({ go }) {
  const boat = BOATS[0];
  const nextOrder = ORDERS[0];
  const pro = PROS.find(p=>p.id===nextOrder.proId);
  const hoursToService = 50;
  return (
    <div className="screen-enter" style={{paddingBottom:24}}>
      {/* Greeting header */}
      <div style={{padding:'18px 16px 8px'}}>
        <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
          <div>
            <div style={{fontSize:13, color:'var(--text-muted)', letterSpacing:-.1}}>Bom dia,</div>
            <div style={{fontSize:24, fontWeight:700, color:'var(--text)', letterSpacing:-.4}}>Pedro</div>
          </div>
          <div style={{display:'flex', gap:8}}>
            <button onClick={()=>go('notif')} className="ripple" style={{
              width:40, height:40, borderRadius:40, background:'var(--surface)',
              border:'1px solid var(--border)', display:'flex', alignItems:'center', justifyContent:'center',
              position:'relative', cursor:'pointer',
            }}>
              <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>
            <button onClick={()=>go('concierge')} className="ripple" style={{
              width:40, height:40, borderRadius:40, background:'var(--primary)',
              border:'none', display:'flex', alignItems:'center', justifyContent:'center',
              cursor:'pointer', color:'#fff',
            }}>
              <Icon name="Sparkles" size={17} strokeWidth={2} color="#fff"/>
            </button>
          </div>
        </div>
      </div>

      {/* Featured boat card */}
      <div style={{padding:'0 16px', marginTop:8}}>
        <button onClick={()=>go('boats')} className="ripple" style={{
          width:'100%', textAlign:'left', background:'var(--primary)',
          border:'none', borderRadius:20, padding:18, color:'#fff', cursor:'pointer',
          position:'relative', overflow:'hidden',
        }}>
          {/* decorative water lines */}
          <svg width="100%" height="60" viewBox="0 0 360 60" style={{position:'absolute', bottom:0, left:0, opacity:.18}}>
            <path d="M0 30 Q 60 18, 120 30 T 240 30 T 360 30" stroke="#C5A572" fill="none" strokeWidth="1.2"/>
            <path d="M0 44 Q 60 32, 120 44 T 240 44 T 360 44" stroke="#C5A572" fill="none" strokeWidth="1.2" opacity=".6"/>
          </svg>
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', position:'relative'}}>
            <div>
              <div style={{display:'inline-flex', alignItems:'center', gap:6, background:'rgba(255,255,255,0.12)', padding:'3px 8px', borderRadius:999, fontSize:11, fontWeight:500, marginBottom:10}}>
                <Icon name="Anchor" size={11} color="#C5A572" strokeWidth={2.2}/>
                <span style={{color:'#E2D6B6'}}>Embarcação principal</span>
              </div>
              <div style={{fontSize:22, fontWeight:700, letterSpacing:-.3}}>{boat.name}</div>
              <div style={{fontSize:13, color:'rgba(255,255,255,0.75)', marginTop:2}}>{boat.model} · {boat.length} pés</div>
            </div>
            <Icon name="ChevronRight" size={22} color="rgba(255,255,255,0.6)" strokeWidth={1.8}/>
          </div>
          <div style={{display:'flex', gap:16, marginTop:18, position:'relative'}}>
            <div>
              <div style={{fontSize:10.5, color:'rgba(255,255,255,0.55)', textTransform:'uppercase', letterSpacing:.5}}>Motor</div>
              <div className="mono" style={{fontSize:13, fontWeight:500, marginTop:2}}>{boat.motorHours.toLocaleString('pt-BR')}h</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.55)', textTransform:'uppercase', letterSpacing:.5}}>Marina</div>
              <div style={{fontSize:13, fontWeight:500, marginTop:2}}>{boat.marina.split(',')[0]} · {boat.slip}</div>
            </div>
          </div>
        </button>
      </div>

      {/* Alert */}
      <div style={{padding:'0 16px', marginTop:14}}>
        <div style={{
          display:'flex', gap:12, alignItems:'flex-start',
          background:'var(--surface)', border:'1px solid #F2D6A8',
          borderRadius:14, padding:'12px 14px',
        }}>
          <div style={{
            width:34, height:34, borderRadius:10, background:'#FCEFE0',
            display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
          }}>
            <Icon name="Gauge" size={18} color="#7A4A0A" strokeWidth={1.8}/>
          </div>
          <div style={{flex:1, minWidth:0}}>
            <div style={{fontSize:13, fontWeight:600, color:'var(--text)'}}>Revisão de 100h se aproxima</div>
            <div style={{fontSize:12, color:'var(--text-muted)', marginTop:2, lineHeight:1.4}}>
              Faltam <span className="mono">{hoursToService}h</span> de motor. Recomendamos agendar com 1 semana de antecedência.
            </div>
            <button onClick={()=>go('quote-new')} style={{
              marginTop:8, background:'none', border:'none', color:'var(--primary)',
              fontWeight:600, fontSize:13, cursor:'pointer', padding:0,
            }}>Solicitar orçamento →</button>
          </div>
        </div>
      </div>

      {/* Quick actions */}
      <div style={{padding:'22px 16px 0'}}>
        <SectionHeader title="Atalhos"/>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:10}}>
          {[
            { icon:'FilePlus', label:'Solicitar\norçamento', to:'quote-new' },
            { icon:'Compass', label:'Encontrar\nprestador', to:'pros' },
            { icon:'BookOpen', label:'Logbook\ndigital', to:'logbook' },
          ].map(a=>(
            <button key={a.label} onClick={()=>go(a.to)} className="ripple" style={{
              background:'var(--surface)', border:'1px solid var(--border)',
              borderRadius:14, padding:'14px 10px',
              display:'flex', flexDirection:'column', alignItems:'flex-start', gap:10,
              cursor:'pointer', minHeight:100, textAlign:'left',
            }}>
              <div style={{
                width:34, height:34, borderRadius:10, background:'var(--accent-soft)',
                border:'1px solid #E9DDC2', display:'flex', alignItems:'center', justifyContent:'center',
              }}>
                <Icon name={a.icon} size={17} color="#7D6A47" strokeWidth={1.8}/>
              </div>
              <div style={{fontSize:12.5, fontWeight:600, color:'var(--text)', whiteSpace:'pre-line', lineHeight:1.25}}>{a.label}</div>
            </button>
          ))}
        </div>
      </div>

      {/* Next service */}
      <div style={{padding:'22px 16px 0'}}>
        <SectionHeader title="Próximo serviço" action="Ver tudo" onAction={()=>go('orders')}/>
        <button onClick={()=>go('order-detail')} 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', justifyContent:'space-between', marginBottom:10}}>
            <OrderStatusPill status={nextOrder.status}/>
            <span className="mono" style={{fontSize:11, color:'var(--text-subtle)'}}>{nextOrder.id}</span>
          </div>
          <div style={{display:'flex', alignItems:'center', gap:12}}>
            <Avatar tone={pro.avatarTone} name={pro.short} size={40}/>
            <div style={{flex:1}}>
              <div style={{fontSize:14, fontWeight:600, color:'var(--text)'}}>{nextOrder.title}</div>
              <div style={{fontSize:12, color:'var(--text-muted)', marginTop:2}}>{pro.short} · sábado, 16 mai · 09:00</div>
            </div>
            <Icon name="ChevronRight" size={18} color="var(--text-subtle)" strokeWidth={1.8}/>
          </div>
        </button>
      </div>

      {/* Recent activity */}
      <div style={{padding:'22px 16px 0'}}>
        <SectionHeader title="Atividade recente" action="Ver Logbook" onAction={()=>go('logbook')}/>
        <div style={{display:'flex', flexDirection:'column', gap:0, background:'var(--surface)', border:'1px solid var(--border)', borderRadius:14, overflow:'hidden'}}>
          {LOGBOOK.slice(0,3).map((e,i,arr)=>(
            <div key={e.id} style={{
              display:'flex', alignItems:'center', gap:12, padding:'12px 14px',
              borderBottom: i<arr.length-1 ? '1px solid var(--border)' : 'none',
            }}>
              <div style={{
                width:32, height:32, borderRadius:8, background:'var(--accent-soft)',
                border:'1px solid #E9DDC2', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
              }}>
                <Icon name={CATEGORY_ICON[e.category]} size={15} color="#7D6A47" strokeWidth={2}/>
              </div>
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontSize:13.5, fontWeight:500, color:'var(--text)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{e.title}</div>
                <div style={{fontSize:11.5, color:'var(--text-subtle)', marginTop:1}}>{e.pro} · {new Date(e.date+'T12:00:00').toLocaleDateString('pt-BR',{day:'2-digit', month:'short'})}</div>
              </div>
              <span className="mono" style={{fontSize:12, color:'var(--text-muted)'}}>{brl(e.amount)}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============ P4 — MINHAS EMBARCAÇÕES ============
function BoatsList({ go }) {
  return (
    <div className="screen-enter" style={{paddingBottom:24}}>
      <ScreenHeader title="Embarcações" large
        right={<button onClick={()=>go('boat-new')} className="ripple" style={{
          width:36, height:36, borderRadius:36, border:'1px solid var(--border)',
          background:'var(--surface)', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer',
        }}><Icon name="Plus" size={18} strokeWidth={2}/></button>}/>
      <div style={{padding:'12px 16px', display:'flex', flexDirection:'column', gap:12}}>
        {BOATS.map(b=>(
          <BoatCard key={b.id} boat={b} onClick={()=>go('boats')} highlight={b.id==='b1'}/>
        ))}
        <button onClick={()=>go('boat-new')} className="ripple" style={{
          background:'transparent', border:'1.5px dashed var(--border-strong)',
          borderRadius:16, padding:'18px', display:'flex', alignItems:'center', justifyContent:'center',
          gap:8, color:'var(--text-muted)', fontSize:14, fontWeight:600, cursor:'pointer',
        }}>
          <Icon name="Plus" size={16} strokeWidth={2}/> Adicionar embarcação
        </button>
        <div style={{
          marginTop:10, padding:14, background:'var(--accent-soft)',
          border:'1px solid #E9DDC2', borderRadius:14,
        }}>
          <div style={{display:'flex', gap:10, alignItems:'flex-start'}}>
            <Icon name="Anchor" size={18} color="#7D6A47" strokeWidth={1.8}/>
            <div style={{flex:1}}>
              <div style={{fontSize:13, fontWeight:600, color:'#3A2D14'}}>Histórico verificado é ativo financeiro</div>
              <div style={{fontSize:12, color:'#5F4F2E', marginTop:3, lineHeight:1.45}}>
                Cada serviço registrado pelo Convés valoriza sua embarcação na revenda.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============ P5 — CADASTRO DE EMBARCAÇÃO (multi-step) ============
function BoatNew({ go }) {
  const [step, setStep] = useStateO1(1);
  const [form, setForm] = useStateO1({
    model:'Schaefer Phantom 365', brand:'Schaefer', year:'2022',
    motor:'Mercury Verado 300 HP', hours:'2450',
    marina:'Marina da Glória', slip:'A-12',
  });
  const [errors, setErrors] = useStateO1({});

  function validate(s) {
    const e = {};
    if (s===1) {
      if (!form.model) e.model = 'Informe o modelo';
      if (!form.year || +form.year < 1980) e.year = 'Ano inválido';
    }
    if (s===2) {
      if (!form.motor) e.motor = 'Informe o motor';
      if (!form.hours) e.hours = 'Informe as horas';
    }
    setErrors(e);
    return Object.keys(e).length === 0;
  }

  function next() {
    if (!validate(step)) return;
    if (step === 4) { go('boats'); return; }
    setStep(step + 1);
  }

  return (
    <div className="screen-enter" style={{paddingBottom:120}}>
      <ScreenHeader title="Nova embarcação" onBack={()=>step>1?setStep(step-1):go('boats')}/>
      {/* Stepper */}
      <div style={{padding:'14px 16px'}}>
        <div style={{display:'flex', alignItems:'center', gap:6, marginBottom:14}}>
          {[1,2,3,4].map(s=>(
            <div key={s} style={{
              flex:1, height:4, borderRadius:4,
              background: s<=step ? 'var(--primary)' : 'var(--border)',
            }}/>
          ))}
        </div>
        <div className="mono" style={{fontSize:11, color:'var(--text-subtle)', textTransform:'uppercase', letterSpacing:.5, marginBottom:4}}>
          Passo {step} de 4
        </div>
        <h2 style={{margin:'2px 0 4px', fontSize:22, fontWeight:700, color:'var(--text)', letterSpacing:-.3}}>
          {['Modelo e ano','Motorização','Marina e vaga','Fotos da embarcação'][step-1]}
        </h2>
        <p style={{margin:0, fontSize:13, color:'var(--text-muted)'}}>
          {[
            'Esses dados ajudam o Convés a sugerir prestadores certificados para o seu modelo.',
            'Horas de motor são salvas no Logbook digital. Use a leitura do horímetro a bordo.',
            'O endereço da marina aparece automaticamente para o prestador no momento da OS.',
            'Boas fotos transmitem confiança e melhoram a precisão das cotações.',
          ][step-1]}
        </p>
      </div>

      <div style={{padding:'4px 16px', display:'flex', flexDirection:'column', gap:14}}>
        {step===1 && (<>
          <Field label="Marca">
            <Input value={form.brand} onChange={e=>setForm({...form, brand:e.target.value})}/>
          </Field>
          <Field label="Modelo" error={errors.model}>
            <Input value={form.model} onChange={e=>setForm({...form, model:e.target.value})}/>
          </Field>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
            <Field label="Ano" error={errors.year}>
              <Input value={form.year} className="mono" onChange={e=>setForm({...form, year:e.target.value})}/>
            </Field>
            <Field label="Comprimento">
              <div style={{position:'relative'}}>
                <Input defaultValue="36" className="mono"/>
                <span className="mono" style={{position:'absolute', right:12, top:13, fontSize:13, color:'var(--text-subtle)'}}>pés</span>
              </div>
            </Field>
          </div>
          <Field label="Apelido" hint="Como você se refere à embarcação no dia a dia." optional>
            <Input defaultValue="Bonança"/>
          </Field>
        </>)}

        {step===2 && (<>
          <Field label="Motor principal" error={errors.motor}>
            <Input value={form.motor} onChange={e=>setForm({...form, motor:e.target.value})}/>
          </Field>
          <Field label="Horas de motor" error={errors.hours} hint="Confira o horímetro do painel.">
            <div style={{position:'relative'}}>
              <Input value={form.hours} className="mono" onChange={e=>setForm({...form, hours:e.target.value})}/>
              <span className="mono" style={{position:'absolute', right:12, top:13, fontSize:13, color:'var(--text-subtle)'}}>horas</span>
            </div>
          </Field>
          <div style={{
            background:'var(--accent-soft)', border:'1px solid #E9DDC2', borderRadius:12,
            padding:12, fontSize:12.5, color:'#5F4F2E', lineHeight:1.5,
          }}>
            Sua próxima revisão programada será calculada automaticamente com base nas horas atuais.
          </div>
          <Field label="Segundo motor" optional>
            <button style={{
              background:'transparent', border:'1.5px dashed var(--border-strong)',
              borderRadius:8, padding:'10px 14px', color:'var(--text-muted)',
              fontSize:13, cursor:'pointer', display:'inline-flex', gap:6, alignItems:'center',
            }}>
              <Icon name="Plus" size={14} strokeWidth={2}/> Adicionar motor
            </button>
          </Field>
        </>)}

        {step===3 && (<>
          <Field label="Marina">
            <div style={{position:'relative'}}>
              <Input value={form.marina} onChange={e=>setForm({...form, marina:e.target.value})}/>
              <Icon name="ChevronDown" size={16} strokeWidth={2} style={{position:'absolute', right:12, top:13, color:'var(--text-subtle)', pointerEvents:'none'}}/>
            </div>
          </Field>
          <Field label="Número da vaga">
            <Input value={form.slip} className="mono" onChange={e=>setForm({...form, slip:e.target.value})}/>
          </Field>
          <Field label="Contato do zelador (opcional)" optional>
            <Input placeholder="(21) 9 9999-9999" className="mono"/>
          </Field>
        </>)}

        {step===4 && (<>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
            {[1,2,3,4].map(i=>(
              <div key={i} className="boat-illo" style={{height:110, borderRadius:12, position:'relative', overflow:'hidden'}}>
                {i===4 && <div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center',background:'rgba(31,56,100,0.05)'}}>
                  <Icon name="Plus" size={22} color="#7D8FAE" strokeWidth={1.6}/>
                </div>}
                {i!==4 && (
                  <div style={{position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center'}}>
                    <BoatPlaceholder width="80%" height="60%"/>
                  </div>
                )}
              </div>
            ))}
          </div>
          <button className="ripple" style={{
            background:'transparent', border:'1.5px dashed var(--border-strong)',
            borderRadius:12, padding:'14px', color:'var(--text-muted)', fontSize:13, cursor:'pointer',
            display:'inline-flex', justifyContent:'center', alignItems:'center', gap:8,
          }}>
            <Icon name="Camera" size={16} strokeWidth={2}/> Adicionar foto da embarcação
          </button>
          <p style={{margin:0, fontSize:12, color:'var(--text-subtle)', lineHeight:1.5}}>
            Ideal: 4 fotos — proa, popa, lateral e compartimento do motor. Resolução mínima 1280×960.
          </p>
        </>)}
      </div>

      {/* Bottom bar */}
      <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,
      }}>
        {step>1 && <Btn variant="secondary" size="md" onClick={()=>setStep(step-1)}>Voltar</Btn>}
        <Btn variant="primary" size="md" full onClick={next} iconRight={step<4?'ArrowRight':'Check'}>
          {step<4 ? 'Continuar' : 'Salvar embarcação'}
        </Btn>
      </div>
    </div>
  );
}

// ============ P11 — LOGBOOK DIGITAL ============
function LogbookScreen({ go }) {
  const [filter, setFilter] = useStateO1('todas');
  const boat = BOATS[0];
  const filtered = useMemoO1(()=>{
    if (filter==='todas') return LOGBOOK;
    return LOGBOOK.filter(e=>e.category===filter);
  }, [filter]);
  const total = LOGBOOK.reduce((s,e)=>s+e.amount, 0);

  return (
    <div className="screen-enter" style={{paddingBottom:24}}>
      <ScreenHeader title="Logbook digital" large
        right={<button onClick={()=>go('concierge')} className="ripple" style={{
          width:36, height:36, borderRadius:36, border:'1px solid var(--border)',
          background:'var(--surface)', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer',
        }}><Icon name="Share2" size={16} strokeWidth={2}/></button>}/>

      {/* Pride header */}
      <div style={{padding:'8px 16px 0'}}>
        <div style={{
          background:'var(--primary)', color:'#fff', borderRadius:18,
          padding:'18px', position:'relative', overflow:'hidden',
        }}>
          <div style={{display:'inline-flex', alignItems:'center', gap:6, marginBottom:10,
            background:'rgba(197,165,114,0.18)', border:'1px solid rgba(197,165,114,0.4)',
            padding:'4px 10px', borderRadius:999, fontSize:11, fontWeight:600, color:'#E9D6A8'}}>
            <Icon name="BadgeCheck" size={12} color="#E9D6A8" strokeWidth={2.2}/> Histórico verificado
          </div>
          <div style={{fontSize:22, fontWeight:700, letterSpacing:-.3, lineHeight:1.2}}>{LOGBOOK.length} serviços documentados</div>
          <div style={{fontSize:13, color:'rgba(255,255,255,0.7)', marginTop:4}}>{boat.name} · {boat.model}</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}}>Investido</div>
              <div className="mono" style={{fontSize:15, fontWeight:600, marginTop:2}}>{brl(total)}</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}}>Horas motor</div>
              <div className="mono" style={{fontSize:15, fontWeight:600, marginTop:2}}>{boat.motorHours}h</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}}>Desde</div>
              <div style={{fontSize:15, fontWeight:600, marginTop:2}}>mai/25</div>
            </div>
          </div>
        </div>
      </div>

      {/* Filters */}
      <div className="scroll-clean" style={{display:'flex', gap:8, padding:'18px 16px 12px', overflowX:'auto'}}>
        <CategoryChip label="Todas" active={filter==='todas'} onClick={()=>setFilter('todas')}/>
        {CATEGORIES.map(c=>(
          <CategoryChip key={c.id} icon={c.icon} label={c.label} active={filter===c.id} onClick={()=>setFilter(c.id)}/>
        ))}
      </div>

      {/* Timeline */}
      <div style={{padding:'4px 16px 0'}}>
        {filtered.length === 0 ? (
          <EmptyState icon="BookOpen" title="Nenhuma entrada nesta categoria"
            description="Mude o filtro para ver outros serviços ou adicione um novo serviço pelo app."/>
        ) : (
          filtered.map((e,i)=>(
            <LogbookEntry key={e.id} entry={e} isLast={i===filtered.length-1}/>
          ))
        )}
      </div>

      <div style={{padding:'8px 16px 0'}}>
        <Btn variant="secondary" full icon="FileText">Exportar relatório PDF</Btn>
      </div>
    </div>
  );
}

Object.assign(window, { HomeOwner, BoatsList, BoatNew, LogbookScreen });