/* ============================================================
   AppScreens.jsx — telas por dispositivo (papéis distintos)
   WEB: painel completo (KPIs + viz por módulo + recomendação IA)
   MOBILE: app operacional compacto (métrica-hero + sparkline + IA)
   Visual minimalista, denso e organizado — padrão SaaS premium.
   ============================================================ */

const Panel = ({ title, hint, children, style, bodyStyle }) => (
  <div style={{ background: SC.panel, border: `1px solid ${SC.line}`, borderRadius: 12, padding: '11px 12px', display: 'flex', flexDirection: 'column', minHeight: 0, overflow: 'hidden', ...style }}>
    {title && (
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8, flexShrink: 0 }}>
        <span style={{ fontFamily: 'var(--ar-font-title)', fontWeight: 600, fontSize: 11.5, color: SC.text, letterSpacing: '-0.005em' }}>{title}</span>
        {hint && <span style={{ fontFamily: 'var(--ar-font-body)', fontSize: 9.5, color: SC.dim, display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 5, height: 5, borderRadius: 999, background: SC.cyan }} />{hint}</span>}
      </div>
    )}
    <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', ...bodyStyle }}>{children}</div>
  </div>
);

const SideItem = ({ icon, active }) => (
  <div style={{ width: 32, height: 32, borderRadius: 9, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, position: 'relative', background: active ? 'linear-gradient(135deg,#005EFF,#00D4FF)' : 'transparent', boxShadow: active ? '0 6px 15px -5px rgba(0,94,255,0.7)' : 'none' }}>
    <i data-lucide={icon} style={{ width: 15, height: 15, color: active ? '#fff' : '#5C6680' }}></i>
  </div>
);

/* ====================== WEB APP ======================
   Painel completo: tira de KPIs + visualização por módulo
   (gráfico / pipeline / funil) + recomendação da IA. */
const WebAppScreen = ({ m }) => {
  const isPipe = m.web === 'pipeline', isFun = m.web === 'funnel';
  return (
    <div style={{ display: 'flex', width: '100%', height: '100%', background: SC.bg, fontFamily: 'var(--ar-font-body)' }}>
      {/* sidebar */}
      <div style={{ width: 50, borderRight: `1px solid ${SC.line}`, background: '#0A0E18', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '12px 0', gap: 5 }}>
        <div style={{ width: 28, height: 28, borderRadius: 8, background: 'linear-gradient(135deg,#005EFF,#00D4FF)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontFamily: 'var(--ar-font-title)', fontWeight: 800, fontSize: 11, marginBottom: 8, boxShadow: '0 0 12px rgba(0,212,255,0.35)' }}>AR</div>
        {AR_MODULES.map(mod => <SideItem key={mod.id} icon={mod.icon} active={mod.id === m.id} />)}
        <div style={{ flex: 1 }} />
        <SideItem icon="settings" />
      </div>

      {/* main */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        {/* topbar */}
        <div style={{ height: 42, borderBottom: `1px solid ${SC.line}`, display: 'flex', alignItems: 'center', gap: 12, padding: '0 14px', flexShrink: 0 }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontFamily: 'var(--ar-font-title)', fontWeight: 700, fontSize: 13, color: SC.text, lineHeight: 1 }}>{m.page}</div>
            <div style={{ fontFamily: 'var(--ar-font-body)', fontSize: 9, color: SC.dim, marginTop: 3 }}>Mercado São João · matriz</div>
          </div>
          <div style={{ flex: 1 }} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 7, background: SC.panel, border: `1px solid ${SC.line}`, borderRadius: 8, padding: '5px 10px', width: 150, color: SC.dim }}>
            <i data-lucide="sparkles" style={{ width: 12, height: 12, color: SC.cyan }}></i>
            <span style={{ fontSize: 10.5 }}>Pergunte à IA…</span>
          </div>
          <div style={{ width: 27, height: 27, borderRadius: 999, background: SC.panel, border: `1px solid ${SC.line}`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: SC.mut, position: 'relative' }}>
            <i data-lucide="bell" style={{ width: 13, height: 13 }}></i>
            <span style={{ position: 'absolute', top: 5, right: 6, width: 5, height: 5, borderRadius: 999, background: SC.red }} />
          </div>
          <div style={{ width: 27, height: 27, borderRadius: 999, background: 'linear-gradient(135deg,#005EFF,#00D4FF)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--ar-font-title)', fontWeight: 700, fontSize: 10 }}>SJ</div>
        </div>

        {/* content */}
        <div style={{ flex: 1, padding: 13, display: 'flex', flexDirection: 'column', gap: 10, overflow: 'hidden' }}>
          {/* KPIs */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 9, flexShrink: 0 }}>
            {m.kpis.map((k, i) => <Kpi key={i} k={k} />)}
          </div>

          {isPipe ? (
            <React.Fragment>
              <Panel title="Funil de atendimento" hint="ao vivo" style={{ flex: 1 }} bodyStyle={{ display: 'block' }}>
                <Pipeline m={m} />
              </Panel>
              <div style={{ flexShrink: 0 }}><AIBlock m={m} compact /></div>
            </React.Fragment>
          ) : isFun ? (
            <div style={{ display: 'grid', gridTemplateColumns: '1.45fr 1fr', gap: 10, flex: 1, minHeight: 0 }}>
              <Panel title="Funil comercial" hint="este mês"><Funnel m={m} /></Panel>
              <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}><AIBlock m={m} /></div>
            </div>
          ) : (
            <React.Fragment>
              <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 10, flex: 1, minHeight: 0 }}>
                <Panel title={m.chartTitle} hint={m.chartHint}>
                  <div style={{ flex: 1, minHeight: 0 }}><ModuleChart m={m} w={420} h={118} uid={'w' + m.id} /></div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, flexShrink: 0 }}>
                    {m.labels.map(l => <span key={l} style={{ fontFamily: 'var(--ar-font-body)', fontSize: 9, color: SC.dim }}>{l}</span>)}
                  </div>
                </Panel>
                <AIBlock m={m} />
              </div>
              <Panel title={m.listTitle} style={{ flexShrink: 0 }}><Rows m={m} n={3} compact /></Panel>
            </React.Fragment>
          )}
        </div>
      </div>
    </div>
  );
};

/* ====================== MOBILE ======================
   App operacional: métrica-destaque com sparkline + 2 KPIs
   + recomendação da IA + barra de navegação. */
const PhoneAppScreen = ({ m }) => (
  <div style={{ display: 'flex', flexDirection: 'column', width: '100%', height: '100%', background: SC.bg, fontFamily: 'var(--ar-font-body)' }}>
    {/* status bar */}
    <div style={{ height: 26, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 16px 0 18px', flexShrink: 0, color: SC.text, fontSize: 9.5, fontWeight: 600 }}>
      <span>9:41</span>
      <span style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}>
        <i data-lucide="signal" style={{ width: 11, height: 11 }}></i>
        <i data-lucide="wifi" style={{ width: 11, height: 11 }}></i>
        <i data-lucide="battery-full" style={{ width: 13, height: 13 }}></i>
      </span>
    </div>
    {/* header */}
    <div style={{ padding: '6px 14px 10px', display: 'flex', alignItems: 'center', gap: 9, flexShrink: 0 }}>
      <div style={{ width: 30, height: 30, borderRadius: 9, background: 'linear-gradient(135deg,#005EFF,#00D4FF)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontFamily: 'var(--ar-font-title)', fontWeight: 800, fontSize: 12 }}>AR</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: 'var(--ar-font-body)', fontSize: 9, color: SC.dim, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Mercado São João</div>
        <div style={{ fontFamily: 'var(--ar-font-title)', fontWeight: 700, fontSize: 12.5, color: SC.text, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.page}</div>
      </div>
      <div style={{ width: 28, height: 28, borderRadius: 999, background: SC.panel, border: `1px solid ${SC.line}`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: SC.cyan, position: 'relative', flexShrink: 0 }}>
        <i data-lucide="bell" style={{ width: 14, height: 14 }}></i>
        <span style={{ position: 'absolute', top: 6, right: 7, width: 5, height: 5, borderRadius: 999, background: SC.red }} />
      </div>
    </div>

    <div style={{ flex: 1, padding: '0 14px', display: 'flex', flexDirection: 'column', gap: 9, overflow: 'hidden' }}>
      {/* hero metric + sparkline */}
      <div style={{ borderRadius: 13, padding: '12px 13px', background: 'linear-gradient(150deg, rgba(0,94,255,0.15), rgba(0,212,255,0.04))', border: '1px solid rgba(0,212,255,0.18)', position: 'relative', overflow: 'hidden', flexShrink: 0 }}>
        <div style={{ position: 'absolute', top: -28, right: -18, width: 84, height: 84, borderRadius: 999, background: 'radial-gradient(circle, rgba(0,212,255,0.16), transparent 70%)' }} />
        <div style={{ position: 'relative', fontFamily: 'var(--ar-font-body)', fontSize: 10, color: '#A9C6FF', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.hero.l}</div>
        <div style={{ position: 'relative', display: 'flex', alignItems: 'baseline', gap: 7, marginTop: 4, flexWrap: 'wrap' }}>
          <span style={{ fontFamily: 'var(--ar-font-title)', fontWeight: 800, fontSize: 21, color: SC.text, letterSpacing: '-0.02em', whiteSpace: 'nowrap' }}>{m.hero.v}</span>
          <Delta d={m.hero.d} up={m.hero.up} size={10} />
        </div>
        <div style={{ position: 'relative', fontFamily: 'var(--ar-font-body)', fontSize: 9, color: SC.mut, marginTop: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.hero.sub}</div>
        <div style={{ position: 'relative', height: 26, marginTop: 9 }}>
          <Area data={m.series} w={210} h={26} pad={2} color={m.accent} uid={'ph' + m.id} />
        </div>
      </div>

      {/* 2 KPIs */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, flexShrink: 0 }}>
        {m.kpis.slice(1, 3).map((k, i) => <Kpi key={i} k={k} pad="9px 10px" />)}
      </div>

      <AIBlock m={m} compact lines={2} />
    </div>

    {/* bottom nav */}
    <div style={{ height: 50, borderTop: `1px solid ${SC.line}`, background: '#0A0E18', display: 'flex', alignItems: 'center', justifyContent: 'space-around', padding: '0 10px 6px', flexShrink: 0 }}>
      {[['layout-dashboard', false], ['bar-chart-3', false], ['sparkles', true], ['bell', false], ['user', false]].map(([ic, act], i) => (
        act
          ? <div key={i} style={{ width: 32, height: 32, borderRadius: 10, marginTop: -8, background: 'linear-gradient(135deg,#005EFF,#00D4FF)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', boxShadow: '0 5px 12px -7px rgba(0,94,255,0.5)' }}><i data-lucide={ic} style={{ width: 15, height: 15 }}></i></div>
          : <i key={i} data-lucide={ic} style={{ width: 16, height: 16, color: '#4F5873' }}></i>
      ))}
    </div>
  </div>
);

Object.assign(window, { WebAppScreen, PhoneAppScreen });