/* ============================================================
   AppScreens.jsx — telas por dispositivo (papéis distintos)
   WEB: painel completo (com pipeline/funil/gráfico por módulo)
   TABLET: visão intermediária focada em um indicador (ring)
   MOBILE: visão compacta prática (métrica hero + ação da IA)
   ============================================================ */

const Panel = ({ title, hint, children, style, bodyStyle }) => (
  <div style={{ background: SC.panel, border: `1px solid ${SC.line}`, borderRadius: 13, padding: '12px 13px', display: 'flex', flexDirection: 'column', minHeight: 0, overflow: 'hidden', ...style }}>
    {title && (
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 9, flexShrink: 0 }}>
        <span style={{ fontFamily: 'var(--ar-font-title)', fontWeight: 600, fontSize: 12.5, color: SC.text }}>{title}</span>
        {hint && <span style={{ fontFamily: 'var(--ar-font-body)', fontSize: 10, color: SC.dim, display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 6, height: 6, 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: 34, height: 34, borderRadius: 9, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, background: active ? 'linear-gradient(135deg,#005EFF,#00D4FF)' : 'transparent', boxShadow: active ? '0 6px 16px -5px rgba(0,94,255,0.7)' : 'none' }}>
    <i data-lucide={icon} style={{ width: 16, height: 16, color: active ? '#fff' : '#5C6680' }}></i>
  </div>
);

/* ====================== WEB APP ====================== */
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: 54, borderRight: `1px solid ${SC.line}`, background: '#0A0F1B', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '13px 0', gap: 6 }}>
        <div style={{ width: 30, height: 30, borderRadius: 8, background: 'linear-gradient(135deg,#005EFF,#00D4FF)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontFamily: 'var(--ar-font-title)', fontWeight: 800, fontSize: 12, marginBottom: 7, boxShadow: '0 0 14px rgba(0,212,255,0.4)' }}>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: 46, borderBottom: `1px solid ${SC.line}`, display: 'flex', alignItems: 'center', gap: 12, padding: '0 16px', flexShrink: 0 }}>
          <div>
            <div style={{ fontFamily: 'var(--ar-font-title)', fontWeight: 700, fontSize: 14, color: SC.text, lineHeight: 1 }}>{m.page}</div>
            <div style={{ fontFamily: 'var(--ar-font-body)', fontSize: 10, color: SC.dim, marginTop: 2 }}>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: '6px 11px', width: 178, color: SC.dim }}>
            <i data-lucide="sparkles" style={{ width: 13, height: 13, color: SC.cyan }}></i>
            <span style={{ fontSize: 11 }}>Pergunte à IA…</span>
          </div>
          <div style={{ width: 30, height: 30, 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: 14, height: 14 }}></i>
            <span style={{ position: 'absolute', top: 6, right: 7, width: 5, height: 5, borderRadius: 999, background: SC.red }} />
          </div>
          <div style={{ width: 30, height: 30, borderRadius: 999, background: 'linear-gradient(135deg,#005EFF,#00D4FF)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--ar-font-title)', fontWeight: 700, fontSize: 11 }}>SJ</div>
        </div>

        {/* content */}
        <div style={{ flex: 1, padding: 15, display: 'flex', flexDirection: 'column', gap: 11, overflow: 'hidden' }}>
          {/* KPIs */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 10, 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 ? (
            <React.Fragment>
              <div style={{ display: 'grid', gridTemplateColumns: '1.45fr 1fr', gap: 11, 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>
          ) : (
            <React.Fragment>
              <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 11, flex: 1, minHeight: 0 }}>
                <Panel title={m.chartTitle} hint={m.chartHint}>
                  <div style={{ flex: 1, minHeight: 0 }}><ModuleChart m={m} w={420} h={130} uid={'w' + m.id} /></div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 7, flexShrink: 0 }}>
                    {m.labels.map(l => <span key={l} style={{ fontFamily: 'var(--ar-font-body)', fontSize: 9.5, 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>
  );
};

/* ====================== TABLET ======================
   Visão gerencial compacta: anel (indicador-chave) + 2 KPIs
   + recomendação da IA. Sem repetir o desktop. */
const TabletScreen = ({ m }) => (
  <div style={{ display: 'flex', flexDirection: 'column', width: '100%', height: '100%', background: SC.bg, fontFamily: 'var(--ar-font-body)' }}>
    <div style={{ height: 34, borderBottom: `1px solid ${SC.line}`, display: 'flex', alignItems: 'center', gap: 8, padding: '0 11px', flexShrink: 0 }}>
      <div style={{ width: 22, height: 22, borderRadius: 6, background: 'linear-gradient(135deg,#005EFF,#00D4FF)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontFamily: 'var(--ar-font-title)', fontWeight: 800, fontSize: 10 }}>AR</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: 'var(--ar-font-title)', fontWeight: 700, fontSize: 11.5, color: SC.text, lineHeight: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.page}</div>
      </div>
      <i data-lucide="bell" style={{ width: 14, height: 14, color: SC.mut }}></i>
    </div>

    <div style={{ flex: 1, padding: 11, display: 'flex', flexDirection: 'column', gap: 9, overflow: 'hidden' }}>
      {/* anel — indicador-chave */}
      <Panel bodyStyle={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 12 }}>
        <Ring pct={m.ring.pct} size={60} stroke={7} uid={'t' + m.id} label={m.ring.label} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: 'var(--ar-font-title)', fontWeight: 700, fontSize: 12.5, color: SC.text, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.ring.label}</div>
          <div style={{ fontFamily: 'var(--ar-font-body)', fontSize: 9.5, color: SC.mut, marginTop: 3, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.ring.sub}</div>
        </div>
      </Panel>

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

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

/* ====================== MOBILE ======================
   App operacional compacto: métrica-destaque + recomendação da IA. */
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: '5px 15px 0 17px', 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: '5px 13px 9px', display: 'flex', alignItems: 'center', gap: 8, 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 13px', display: 'flex', flexDirection: 'column', gap: 9, overflow: 'hidden' }}>
      {/* hero metric */}
      <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.20)', 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.5, 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: 22, color: SC.text, letterSpacing: '-0.02em', whiteSpace: 'nowrap' }}>{m.hero.v}</span>
          <Delta d={m.hero.d} up={m.hero.up} size={10.5} />
        </div>
        <div style={{ position: 'relative', fontFamily: 'var(--ar-font-body)', fontSize: 9.5, color: SC.mut, marginTop: 3, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.hero.sub}</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: '#0A0F1B', 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, TabletScreen, PhoneAppScreen });
