// Mobile screens — part 1: Dashboard, CRM/Leads, Processos
// Each export is a self-contained inner content (no bezel) used inside <IOSDevice>.

const NAV_ITEMS = [
  { id: 'home',    label: 'Início',   icon: 'home' },
  { id: 'crm',     label: 'CRM',      icon: 'users' },
  { id: 'proc',    label: 'Processos',icon: 'gavel' },
  { id: 'pet',     label: 'Peças',    icon: 'feather' },
  { id: 'mais',    label: 'Mais',     icon: 'menu' },
];

// ─── Dashboard ─────────────────────────────────────────────
function MDashboard() {
  const t = useTheme();
  const nav = useNav();
  return <div style={{ background: t.bg, minHeight: '100%', paddingBottom: 92, color: t.text, fontFamily: 'Inter, system-ui' }}>
    <div style={{ padding: '6px 18px 6px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <Avatar name="Dr Augusto Mendes" tone={t.accent}/>
        <div>
          <div style={{ fontSize: 11, color: t.muted, fontWeight: 500 }}>Bom dia,</div>
          <div style={{ fontSize: 14, fontWeight: 600, color: t.text }}>Dr. Augusto</div>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 6 }}>
        <IconBtn name="search" onClick={() => nav.go('acervo')}/>
        <IconBtn name="bell"/>
      </div>
    </div>

    {/* Hero / KPI */}
    <div style={{ padding: '12px 18px 0' }}>
      <Card pad={16} style={{ background: t.accent, border: 'none', color: '#fff' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div>
            <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: 0.8, opacity: 0.85, fontWeight: 600 }}>Visão de hoje</div>
            <div style={{ fontFamily: '"Playfair Display", serif', fontSize: 32, fontWeight: 600, marginTop: 6, letterSpacing: -0.5 }}>R$ 184.320</div>
            <div style={{ fontSize: 11, opacity: 0.9, marginTop: 2 }}>+12,4% vs. semana passada</div>
          </div>
          <div style={{ background: 'rgba(255,255,255,0.18)', borderRadius: 10, padding: '4px 8px', fontSize: 10, fontWeight: 700, letterSpacing: 0.4 }}>MAI · 2026</div>
        </div>
        <div style={{ display: 'flex', gap: 14, marginTop: 14, paddingTop: 14, borderTop: '1px solid rgba(255,255,255,0.18)' }}>
          <div><div style={{ fontSize: 18, fontWeight: 700, fontFamily: '"Playfair Display"' }}>28</div><div style={{ fontSize: 10, opacity: 0.85 }}>Audiências</div></div>
          <div style={{ width: 1, background: 'rgba(255,255,255,0.18)' }}/>
          <div><div style={{ fontSize: 18, fontWeight: 700, fontFamily: '"Playfair Display"' }}>147</div><div style={{ fontSize: 10, opacity: 0.85 }}>Processos ativos</div></div>
          <div style={{ width: 1, background: 'rgba(255,255,255,0.18)' }}/>
          <div><div style={{ fontSize: 18, fontWeight: 700, fontFamily: '"Playfair Display"' }}>9</div><div style={{ fontSize: 10, opacity: 0.85 }}>Leads quentes</div></div>
        </div>
      </Card>
    </div>

    {/* Próximas audiências */}
    <div style={{ padding: '16px 18px 0' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
        <h3 style={{ fontFamily: '"Playfair Display", serif', fontSize: 16, fontWeight: 600, margin: 0, color: t.text }}>Prazos & audiências</h3>
        <a style={{ fontSize: 11, color: t.accent, fontWeight: 600 }}>Ver tudo</a>
      </div>
      <Card pad={0}>
        {[
          { dia: '05', mes: 'JUN', hora: '09:30', titulo: 'Audiência conciliação', sub: 'Proc. 0023421-12 · 4ª Vara Cível', tag: 'Hoje', tone: 'danger' },
          { dia: '07', mes: 'JUN', hora: '14:00', titulo: 'Prazo contestação', sub: 'Proc. 0011245-08 · Tribunal TJSP', tag: '2d', tone: 'warn' },
          { dia: '10', mes: 'JUN', hora: '11:00', titulo: 'Reunião — Cliente Vellozo S/A', sub: 'M&A · Sala 1', tag: '5d', tone: 'neutral' },
        ].map((it, i) => <div key={i} onClick={() => nav.go('processo-det')} style={{
          display: 'flex', alignItems: 'center', gap: 12,
          padding: '12px 14px', cursor: 'pointer',
          borderBottom: i < 2 ? `1px solid ${t.borderSoft}` : 'none',
        }}>
          <div style={{
            width: 44, textAlign: 'center', background: t.elevated,
            borderRadius: 8, padding: '5px 0',
          }}>
            <div style={{ fontFamily: '"Playfair Display"', fontSize: 16, fontWeight: 700, color: t.text, lineHeight: 1 }}>{it.dia}</div>
            <div style={{ fontSize: 8.5, color: t.muted, letterSpacing: 0.5, marginTop: 2 }}>{it.mes}</div>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: t.text, marginBottom: 2 }}>{it.titulo}</div>
            <div style={{ fontSize: 11, color: t.subtext, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{it.hora} · {it.sub}</div>
          </div>
          <Pill tone={it.tone}>{it.tag}</Pill>
        </div>)}
      </Card>
    </div>

    {/* IA insight */}
    <div style={{ padding: '14px 18px 0' }}>
      <Card pad={14} style={{ background: t.raised, borderColor: t.border }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
          <div style={{ width: 26, height: 26, borderRadius: 8, background: t.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}><Icon name="spark" size={14}/></div>
          <div style={{ fontSize: 10, color: t.muted, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase' }}>Copiloto jurídico</div>
        </div>
        <div style={{ fontSize: 13, color: t.text, lineHeight: 1.45 }}>
          O processo <b>0023421-12</b> tem 3 jurisprudências favoráveis recentes do <b>STJ</b>. Sugiro fundamentar com base no <span style={{ color: t.accent, fontWeight: 600 }}>REsp 1.987.443/SP</span>.
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
          <Btn size="sm" variant="primary" icon="doc" onClick={() => nav.go('editor')}>Abrir minuta</Btn>
          <Btn size="sm" variant="ghost" onClick={() => nav.go('acervo')}>Por quê?</Btn>
        </div>
      </Card>
    </div>

    {/* Atalhos rápidos */}
    <div style={{ padding: '18px 18px 0' }}>
      <h3 style={{ fontFamily: '"Playfair Display", serif', fontSize: 16, fontWeight: 600, margin: '0 0 10px', color: t.text }}>Atalhos</h3>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
        {[
          { ico: 'feather', l: 'Nova peça', to: 'editor' },
          { ico: 'doc',     l: 'Contrato',  to: 'contratos' },
          { ico: 'users',   l: 'Lead',      to: 'crm' },
          { ico: 'search',  l: 'Acervo',    to: 'acervo' },
        ].map(s => <Card key={s.l} pad={10} style={{ textAlign: 'center', cursor: 'pointer' }} onClick={() => nav.go(s.to)}>
          <div style={{ width: 32, height: 32, borderRadius: 10, background: t.chipBg, color: t.chipText, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 6 }}><Icon name={s.ico} size={17}/></div>
          <div style={{ fontSize: 11, color: t.text, fontWeight: 600 }}>{s.l}</div>
        </Card>)}
      </div>
    </div>

    <BottomNav items={NAV_ITEMS} value="home"/>
  </div>;
}

// ─── CRM / Leads (Kanban-rows on mobile) ─────────────────
function MCRM() {
  const t = useTheme();
  const nav = useNav();
  const [filter, setFilter] = React.useState('todos');
  return <div style={{ background: t.bg, minHeight: '100%', paddingBottom: 92, color: t.text, fontFamily: 'Inter, system-ui' }}>
    <ScreenHeader sub="CRM" title="Captação" right={
      <div style={{ display: 'flex', gap: 6 }}>
        <IconBtn name="filter"/><IconBtn name="plus"/>
      </div>
    }/>

    {/* Funnel KPI */}
    <div style={{ padding: '0 18px 12px' }}>
      <Card pad={14}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
          <Stat label="Leads no funil" value="143" hint="+18 esta semana" tone="positive"/>
          <Donut size={70} thickness={12} segments={[
            { value: 38, color: t.accent },
            { value: 52, color: t.accent2 },
            { value: 33, color: t.muted },
            { value: 20, color: t.borderSoft },
          ]}/>
        </div>
        <div style={{ display: 'flex', gap: 10, fontSize: 10.5, color: t.subtext }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 8, height: 8, background: t.accent, borderRadius: 2 }}/>Novo · 38</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 8, height: 8, background: t.accent2, borderRadius: 2 }}/>Reunião · 52</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 8, height: 8, background: t.muted, borderRadius: 2 }}/>Proposta · 33</span>
        </div>
      </Card>
    </div>

    {/* Stage chips */}
    <div style={{ marginBottom: 10 }}>
      <ChipRow scroll value={filter} onChange={setFilter} items={[
        { id: 'todos', label: 'Todos · 143' },
        { id: 'novo', label: 'Novo · 38' },
        { id: 'reu', label: 'Em reunião · 52' },
        { id: 'prop', label: 'Proposta · 33' },
        { id: 'fech', label: 'Fechado · 20' },
      ]}/>
    </div>

    {/* Lead cards */}
    <div style={{ padding: '4px 18px', display: 'flex', flexDirection: 'column', gap: 10 }}>
      {[
        { nome: 'Vellozo S/A',         caso: 'M&A · operação 18M', valor: 'R$ 240k',  estagio: 'Proposta',  tone: 'accent',   tempo: '2h',  fonte: 'Indicação' },
        { nome: 'Marina Quintanilha',  caso: 'Trabalhista · rescisão',  valor: 'R$ 12k',   estagio: 'Reunião',   tone: 'warn',     tempo: '5h',  fonte: 'LinkedIn' },
        { nome: 'Construtora Rocha',   caso: 'Tributário · execução',   valor: 'R$ 480k',  estagio: 'Proposta',  tone: 'accent',   tempo: 'ontem', fonte: 'Site' },
        { nome: 'Otávio Bernardes',    caso: 'Família · divórcio',      valor: 'R$ 24k',   estagio: 'Novo',      tone: 'neutral',  tempo: '2d',  fonte: 'Google' },
        { nome: 'Inova Tech Ltda',     caso: 'Cível · contratual',      valor: 'R$ 86k',   estagio: 'Reunião',   tone: 'warn',     tempo: '3d',  fonte: 'Indicação' },
      ].map((l, i) => <Card key={i} pad={13}>
        <div style={{ display: 'flex', gap: 11, alignItems: 'flex-start' }}>
          <Avatar name={l.nome} size={38}/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 1 }}>
              <div style={{ fontSize: 13.5, fontWeight: 700, color: t.text }}>{l.nome}</div>
              <div style={{ fontSize: 10, color: t.muted }}>{l.tempo}</div>
            </div>
            <div style={{ fontSize: 11.5, color: t.subtext, marginBottom: 8 }}>{l.caso}</div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ display: 'flex', gap: 6 }}>
                <Pill tone={l.tone}>{l.estagio}</Pill>
                <Pill tone="neutral">{l.fonte}</Pill>
              </div>
              <div style={{ fontFamily: '"Playfair Display"', fontSize: 14, fontWeight: 700, color: t.text }}>{l.valor}</div>
            </div>
          </div>
        </div>
        {i === 0 && <div style={{
          marginTop: 11, padding: '9px 11px', background: t.raised,
          border: `1px dashed ${t.accent}`, borderRadius: 10,
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <Icon name="spark" size={14} color={t.accent}/>
          <div style={{ fontSize: 11, color: t.text, flex: 1 }}>Contrato de honorários pronto · auto-preenchido</div>
          <Btn size="sm" variant="soft" onClick={() => nav.go('contratos')}>Abrir</Btn>
        </div>}
      </Card>)}
    </div>

    <BottomNav items={NAV_ITEMS} value="crm"/>
  </div>;
}

// ─── Processos ─────────────────────────────────────────────
function MProcessos() {
  const t = useTheme();
  const nav = useNav();
  const [tab, setTab] = React.useState('ativos');
  return <div style={{ background: t.bg, minHeight: '100%', paddingBottom: 92, color: t.text, fontFamily: 'Inter, system-ui' }}>
    <ScreenHeader sub="Andamentos" title="Processos" right={
      <div style={{ display: 'flex', gap: 6 }}><IconBtn name="search"/><IconBtn name="filter"/></div>
    }/>

    <div style={{ padding: '0 18px 12px' }}>
      <Tabs value={tab} onChange={setTab} items={[
        { id: 'ativos', label: 'Ativos · 147' },
        { id: 'prazos', label: 'Prazos · 23' },
        { id: 'arquiv', label: 'Arquivados' },
      ]}/>
    </div>

    {/* Resumo IA do dia */}
    <div style={{ padding: '0 18px 12px' }}>
      <Card pad={14}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
          <Icon name="spark" size={14} color={t.accent}/>
          <div style={{ fontSize: 10, color: t.muted, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase' }}>Resumo automático do dia</div>
        </div>
        <div style={{ fontSize: 12.5, color: t.textDim, lineHeight: 1.5 }}>
          <b style={{ color: t.text }}>4 movimentações</b> em processos seus nas últimas 24h. Destaque: sentença favorável em <b style={{ color: t.accent }}>0011245-08</b> · TJSP.
        </div>
      </Card>
    </div>

    <div style={{ padding: '0 18px', display: 'flex', flexDirection: 'column', gap: 10 }}>
      {[
        { num: '0023421-12.2025.8.26.0100', cliente: 'Vellozo S/A', area: 'Cível', tribunal: 'TJSP · 4ª Vara', urgencia: 'Audiência hoje', tone: 'danger', mov: 'Decisão interlocutória', prog: 0.7 },
        { num: '0011245-08.2024.8.26.0500', cliente: 'Construtora Rocha', area: 'Tributário', tribunal: 'TRF3 · 2ª Turma', urgencia: 'Prazo 2d', tone: 'warn', mov: 'Sentença publicada', prog: 0.92 },
        { num: '0058912-44.2024.5.02.0001', cliente: 'Marina Quintanilha', area: 'Trabalhista', tribunal: 'TRT2 · 14ª Vara', urgencia: 'Em curso', tone: 'neutral', mov: 'Réplica protocolada', prog: 0.4 },
        { num: '0098765-33.2025.8.26.0050', cliente: 'Inova Tech Ltda', area: 'Cível', tribunal: 'TJSP · 22ª Vara', urgencia: 'Em curso', tone: 'neutral', mov: 'Contestação juntada', prog: 0.55 },
      ].map((p, i) => <Card key={i} pad={13} style={{ cursor: 'pointer' }} onClick={() => nav.go('processo-det')}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{ fontSize: 10.5, color: t.muted, fontWeight: 600, letterSpacing: 0.4, marginBottom: 2 }}>{p.num}</div>
            <div style={{ fontSize: 14, fontWeight: 700, color: t.text }}>{p.cliente}</div>
            <div style={{ fontSize: 11, color: t.subtext, marginTop: 2 }}>{p.tribunal}</div>
          </div>
          <Pill tone={p.tone}>{p.urgencia}</Pill>
        </div>
        <div style={{ marginTop: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
          <Pill tone="neutral">{p.area}</Pill>
          <div style={{ flex: 1, color: t.textDim, fontSize: 11.5, display: 'flex', alignItems: 'center', gap: 5 }}>
            <Icon name="clock" size={11} color={t.muted}/> {p.mov}
          </div>
        </div>
        <div style={{ marginTop: 9 }}>
          <ProgressBar value={p.prog}/>
        </div>
      </Card>)}
    </div>

    <BottomNav items={NAV_ITEMS} value="proc"/>
  </div>;
}

Object.assign(window, { NAV_ITEMS, MDashboard, MCRM, MProcessos });