/* global React */
// ── Visual mocks: desktop dashboard + LothusApp phone ─────────────────────

function DashboardMock() {
  // Animated SVG chart with two smooth lines + tooltip on hover point
  const w = 520, h = 120;
  const pts1 = [10, 28, 18, 42, 36, 30, 58, 70, 52, 84, 68];
  const pts2 = [55, 50, 60, 58, 70, 68, 64, 56, 50, 46, 48];
  const toPath = (arr) => {
    const step = w / (arr.length - 1);
    const norm = (v) => h - (v / 100) * h;
    let d = `M 0 ${norm(arr[0])}`;
    for (let i = 1; i < arr.length; i++) {
      const x0 = (i - 1) * step;
      const x1 = i * step;
      const cx0 = x0 + step / 2;
      const cx1 = x1 - step / 2;
      d += ` C ${cx0} ${norm(arr[i - 1])}, ${cx1} ${norm(arr[i])}, ${x1} ${norm(arr[i])}`;
    }
    return d;
  };
  const areaPath = toPath(pts1) + ` L ${w} ${h} L 0 ${h} Z`;
  const tooltipX = w * 0.66;
  const tooltipY = h - (84 / 100) * h;

  return (
    <div className="dash">
      <aside className="dash-side">
        <div className="brand">
          <LotusMark size={20} />
          LothusPDV
        </div>
        <div className="nav-item active"><span className="ico"><IconChart size={13}/></span> Visão geral</div>
        <div className="nav-item"><span className="ico"><IconReceipt size={13}/></span> Vendas</div>
        <div className="nav-item"><span className="ico"><IconBox size={13}/></span> Estoque</div>
        <div className="nav-item"><span className="ico"><IconLayers size={13}/></span> Compras</div>
        <div className="nav-item"><span className="ico"><IconShield size={13}/></span> Auditoria</div>
        <div className="nav-item"><span className="ico"><IconCog size={13}/></span> Configurações</div>
        <div className="spacer"></div>
        <div className="user-card">
          <div className="av"></div>
          <div>
            <div style={{fontWeight: 500}}>Sua Loja</div>
            <div style={{color: 'var(--muted)', fontSize: 10}}>online · 3 caixas</div>
          </div>
        </div>
      </aside>

      <div className="dash-main">
        <div className="dash-topbar">
          <div>
            <h4>Faturamento de hoje</h4>
            <div className="meta">
              <span>Ter · 13 mai 2026</span>
              <span className="live"><span className="pulse"></span>tempo real</span>
            </div>
          </div>
          <div className="meta" style={{gap:18}}>
            <span style={{display:'inline-flex', alignItems:'center', gap:6}}><IconBell size={12}/> 2</span>
            <span style={{display:'inline-flex', alignItems:'center', gap:6, color:'var(--ink)', fontWeight:500}}>R$ 8.421,40</span>
          </div>
        </div>

        <div className="dash-kpis">
          <div className="dash-kpi">
            <div className="lbl">Vendas</div>
            <div className="val">R$ 8.421</div>
            <div className="delta">↑ 12,4% vs ontem</div>
          </div>
          <div className="dash-kpi amber">
            <div className="lbl">Ticket médio</div>
            <div className="val">R$ 81,00</div>
            <div className="delta">↑ R$ 6,20</div>
          </div>
          <div className="dash-kpi">
            <div className="lbl">Cupons</div>
            <div className="val">104</div>
            <div className="delta">↑ 7 vs ontem</div>
          </div>
        </div>

        <div className="dash-chart">
          <div className="legend">
            <span><span className="sw" style={{background:'var(--primary)'}}></span>Vendas</span>
            <span><span className="sw" style={{background:'var(--accent)'}}></span>Lucro</span>
          </div>
          <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
            <defs>
              <linearGradient id="fill" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="var(--primary)" stopOpacity="0.18"/>
                <stop offset="100%" stopColor="var(--primary)" stopOpacity="0"/>
              </linearGradient>
            </defs>
            <path d={areaPath} fill="url(#fill)"/>
            <path d={toPath(pts1)} stroke="var(--primary)" strokeWidth="2.4" fill="none" strokeLinecap="round"/>
            <path d={toPath(pts2)} stroke="var(--accent)" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeDasharray="0"/>
            <line x1={tooltipX} y1={tooltipY+4} x2={tooltipX} y2={h} stroke="var(--ink-soft)" strokeWidth="1" strokeDasharray="3 3" opacity="0.4"/>
            <circle cx={tooltipX} cy={tooltipY} r="5" fill="var(--surface)" stroke="var(--primary)" strokeWidth="2.4"/>
          </svg>
          <div className="tooltip" style={{left: `${(tooltipX / w) * 100}%`, top: 14, right: 'auto', transform: 'translateX(-50%)'}}>R$ 1.842,00</div>
        </div>

        <div className="dash-feed">
          <div className="dash-feed-row">
            <div className="ico"><IconReceipt size={13}/></div>
            <div>
              <div style={{fontWeight: 500}}>Cupom #20438 — NFC-e emitida</div>
              <div className="meta">Caixa 02 · Pamela · 14:22</div>
            </div>
            <div className="val">R$ 142,30</div>
            <div className="meta">há 2 min</div>
          </div>
          <div className="dash-feed-row">
            <div className="ico danger"><IconEye size={13}/></div>
            <div>
              <div style={{fontWeight: 500}}>Produto removido sem finalizar venda</div>
              <div className="meta">Caixa 01 · Rodrigo · 14:18</div>
            </div>
            <div className="val neg">−1 un</div>
            <div className="meta">há 6 min</div>
          </div>
          <div className="dash-feed-row">
            <div className="ico"><IconBox size={13}/></div>
            <div>
              <div style={{fontWeight: 500}}>Entrada de mercadoria · NF 3128</div>
              <div className="meta">LothusCompras · 27 itens</div>
            </div>
            <div className="val">R$ 2.840,00</div>
            <div className="meta">há 1h</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function PhoneMock() {
  return (
    <div className="phone-float" aria-hidden="true">
      <div className="phone">
        <div className="phone-screen phone-screen-image">
          <img src="assets/app-dashboard.jpg" alt="LothusApp dashboard real"/>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DashboardMock, PhoneMock });