/* global React, Icon */
// ============================================
// MODULE MOCKUPS — lightweight SVG/HTML previews
// ============================================

// CRM / Kanban mockup
function KanbanMockup() {
  const cols = [
    { name: 'Prospecção', color: '#64748b', items: [
      { t: 'Clínica Vida Nova', v: 'R$ 12k', tag: 'Indicação' },
      { t: 'Padaria São João', v: 'R$ 3.5k', tag: 'Inbound' },
    ]},
    { name: 'Qualificação', color: '#3b5bdb', items: [
      { t: 'Tech Corp SA', v: 'R$ 48k', tag: 'Enterprise', hot: true },
    ]},
    { name: 'Proposta', color: '#f59e0b', items: [
      { t: 'Mercado Central', v: 'R$ 18k', tag: 'SMB' },
      { t: 'Studio Fit', v: 'R$ 7k', tag: 'Inbound' },
    ]},
    { name: 'Fechado', color: '#10b981', items: [
      { t: 'Loja do Bairro', v: 'R$ 4.2k', tag: 'Recorrente' },
    ]},
  ];
  return (
    <div className="card" style={{ padding: 0, background: 'var(--surface)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)', borderRadius: 16, border: '1px solid var(--border)' }}>
      {/* header */}
      <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 14, background: 'var(--surface)' }}>
        <div style={{ width: 32, height: 32, borderRadius: 8, background: '#eef2ff', color: '#3b5bdb', display: 'grid', placeItems: 'center' }}><Icon name="kanban" size={16}/></div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 500, fontSize: 14.5 }}>Funil — Comercial 2026</div>
          <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>12 oportunidades · R$ 92.7k em pipeline</div>
        </div>
        <span className="pill" style={{ fontSize: 11, padding: '3px 9px' }}>Atualizado agora</span>
      </div>
      {/* kanban */}
      <div style={{ padding: 16, background: 'var(--surface-2)', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, minHeight: 360 }}>
        {cols.map((c, i) => (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 2px', fontSize: 11.5, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: c.color }}>
              <span style={{ width: 6, height: 6, borderRadius: 3, background: c.color }}/>
              {c.name}
              <span style={{ marginLeft: 'auto', color: 'var(--text-muted)', fontWeight: 500 }}>{c.items.length}</span>
            </div>
            {c.items.map((it, j) => (
              <div key={j} style={{ padding: 12, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 10, boxShadow: '0 1px 3px rgba(15,23,42,0.04)' }}>
                <div style={{ fontWeight: 500, fontSize: 12.5, letterSpacing: '-0.005em', marginBottom: 6 }}>{it.t}</div>
                <div style={{ fontSize: 11, color: c.color, fontWeight: 600, marginBottom: 8 }}>{it.v}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ fontSize: 10, padding: '2px 7px', borderRadius: 999, background: 'var(--surface-2)', color: 'var(--text-muted)', border: '1px solid var(--border)' }}>{it.tag}</span>
                  {it.hot && <span style={{ fontSize: 10, padding: '2px 7px', borderRadius: 999, background: '#fee2e2', color: '#dc2626', border: '1px solid #fecaca' }}>🔥</span>}
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

// Financeiro mockup
function FinanceMockup() {
  const txs = [
    { d: '23/04', desc: 'Cliente X — Mensalidade', cat: 'Receita', v: '+ R$ 4.280,00', pos: true },
    { d: '22/04', desc: 'Fornecedor Cloud AWS', cat: 'Infraestrutura', v: '- R$ 1.842,30', pos: false },
    { d: '22/04', desc: 'Cliente Y — Mensalidade', cat: 'Receita', v: '+ R$ 2.100,00', pos: true },
    { d: '20/04', desc: 'Folha abril — parcial', cat: 'Pessoal', v: '- R$ 18.500,00', pos: false },
    { d: '19/04', desc: 'Cliente Z — Setup', cat: 'Receita', v: '+ R$ 12.000,00', pos: true },
  ];
  return (
    <div className="card" style={{ padding: 0, background: 'var(--surface)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)', borderRadius: 16, border: '1px solid var(--border)' }}>
      {/* top stats */}
      <div style={{ padding: 18, borderBottom: '1px solid var(--border)', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, background: 'var(--surface)' }}>
        {[
          { l: 'A receber', v: 'R$ 142.8k', c: '#10b981' },
          { l: 'A pagar', v: 'R$ 58.2k', c: '#ef4444' },
          { l: 'Projeção mensal', v: '+ R$ 84.6k', c: '#3b5bdb' },
        ].map((s, i) => (
          <div key={i}>
            <div style={{ fontSize: 11, color: 'var(--text-muted)', letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 6 }}>{s.l}</div>
            <div style={{ fontSize: 20, fontWeight: 600, letterSpacing: '-0.02em', color: s.c, fontFamily: 'var(--font-display)' }}>{s.v}</div>
          </div>
        ))}
      </div>
      {/* mini chart */}
      <div style={{ padding: '16px 18px', borderBottom: '1px solid var(--border)', background: 'var(--surface-2)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
          <div style={{ fontSize: 12.5, fontWeight: 500 }}>Fluxo de caixa · últimos 30 dias</div>
          <div style={{ display: 'flex', gap: 8, fontSize: 11, color: 'var(--text-muted)' }}>
            <span>● Entradas</span>
            <span style={{ color: '#ef4444' }}>● Saídas</span>
          </div>
        </div>
        <svg viewBox="0 0 300 60" style={{ width: '100%', height: 60 }}>
          <polyline fill="none" stroke="#10b981" strokeWidth="1.8" points="0,38 25,30 50,34 75,22 100,26 125,18 150,20 175,14 200,16 225,10 250,12 275,8 300,6"/>
          <polyline fill="none" stroke="#ef4444" strokeWidth="1.8" points="0,48 25,44 50,46 75,42 100,40 125,38 150,40 175,34 200,36 225,30 250,32 275,28 300,26"/>
        </svg>
      </div>
      {/* tx list */}
      <div style={{ maxHeight: 240, overflow: 'hidden' }}>
        {txs.map((t, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 18px', borderBottom: i < txs.length - 1 ? '1px solid var(--border)' : 'none', fontSize: 13 }}>
            <div style={{ fontSize: 11.5, color: 'var(--text-muted)', width: 46, fontFamily: 'var(--font-mono)' }}>{t.d}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 500, fontSize: 13.5 }}>{t.desc}</div>
              <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>{t.cat}</div>
            </div>
            <div style={{ fontSize: 13.5, fontWeight: 600, color: t.pos ? '#10b981' : '#ef4444', fontFamily: 'var(--font-mono)' }}>{t.v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============================================
// GENERIC MODULE MOCKUP — flexible "dashboard-style" preview
// Accepts a config and renders a credible UI for any module.
// ============================================
function GenericMockup({ color, bg, icon, title, subtitle, rows = [], stats = [], chart = false }) {
  return (
    <div className="card" style={{ padding: 0, background: 'var(--surface)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)', borderRadius: 16, border: '1px solid var(--border)' }}>
      {/* header */}
      <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 14, background: 'var(--surface)' }}>
        <div style={{ width: 32, height: 32, borderRadius: 8, background: bg, color, display: 'grid', placeItems: 'center' }}><Icon name={icon} size={16}/></div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 500, fontSize: 14.5 }}>{title}</div>
          {subtitle && <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{subtitle}</div>}
        </div>
        <span className="pill" style={{ fontSize: 11, padding: '3px 9px' }}>Tempo real</span>
      </div>
      {/* stats */}
      {stats.length > 0 && (
        <div style={{ padding: 18, borderBottom: '1px solid var(--border)', display: 'grid', gridTemplateColumns: `repeat(${stats.length}, 1fr)`, gap: 14, background: 'var(--surface)' }}>
          {stats.map((s, i) => (
            <div key={i}>
              <div style={{ fontSize: 11, color: 'var(--text-muted)', letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 6 }}>{s.l}</div>
              <div style={{ fontSize: 20, fontWeight: 600, letterSpacing: '-0.02em', color: s.c || color, fontFamily: 'var(--font-display)' }}>{s.v}</div>
            </div>
          ))}
        </div>
      )}
      {/* chart */}
      {chart && (
        <div style={{ padding: '16px 18px', borderBottom: '1px solid var(--border)', background: 'var(--surface-2)' }}>
          <div style={{ fontSize: 12.5, fontWeight: 500, marginBottom: 10 }}>{chart.label || 'Visão geral'}</div>
          <svg viewBox="0 0 300 60" style={{ width: '100%', height: 60 }}>
            <polyline fill="none" stroke={color} strokeWidth="1.8" points={chart.points || '0,40 25,32 50,36 75,24 100,28 125,18 150,22 175,14 200,18 225,10 250,14 275,8 300,6'}/>
          </svg>
        </div>
      )}
      {/* rows */}
      <div style={{ maxHeight: 300, overflow: 'hidden' }}>
        {rows.map((r, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 18px', borderBottom: i < rows.length - 1 ? '1px solid var(--border)' : 'none', fontSize: 13 }}>
            {r.badge && <div style={{ width: 32, height: 32, borderRadius: 8, background: r.badgeBg || bg, color: r.badgeColor || color, display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon name={r.badge} size={14}/></div>}
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 500, fontSize: 13.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.t}</div>
              {r.s && <div style={{ fontSize: 11.5, color: 'var(--text-muted)', marginTop: 2 }}>{r.s}</div>}
            </div>
            {r.v && <div style={{ fontSize: 12.5, fontWeight: 600, color: r.vColor || color, fontFamily: r.vMono ? 'var(--font-mono)' : 'inherit' }}>{r.v}</div>}
            {r.tag && <span style={{ fontSize: 10.5, padding: '3px 8px', borderRadius: 999, background: r.tagBg || bg, color: r.tagColor || color, fontWeight: 500 }}>{r.tag}</span>}
          </div>
        ))}
      </div>
    </div>
  );
}

window.KanbanMockup = KanbanMockup;
window.FinanceMockup = FinanceMockup;
window.GenericMockup = GenericMockup;