/* Dashboard mockup component — fake but realistic adtech control panel */

const Dashboard = () => {
  return (
    <div className="dashboard-mock">
      {/* Window chrome */}
      <div className="dash-chrome">
        <div className="dash-dots">
          <span></span><span></span><span></span>
        </div>
        <div className="dash-url">
          <span className="dash-lock">⬢</span>
          app.corvex.io / performance
        </div>
        <div className="dash-meta">SYNCED 14:22:08</div>
      </div>

      {/* Body */}
      <div className="dash-body">
        {/* Sidebar */}
        <aside className="dash-side">
          <div className="dash-side-brand">
            <img src="assets/logo.png" alt="" />
            <span>CORVEX</span>
          </div>
          <div className="dash-side-section">
            {[
              { ic: "◆", l: "Overview" },
              { ic: "◇", l: "Contas", n: "BM" },
              { ic: "◈", l: "Campanhas", n: "147" },
              { ic: "◉", l: "Performance", active: true },
              { ic: "○", l: "Leads", n: "2.8k" },
              { ic: "◌", l: "Auditoria" },
            ].map((it, i) => (
              <div key={i} className={`dash-side-item ${it.active ? "active" : ""}`}>
                <span className="ic">{it.ic}</span>
                <span className="l">{it.l}</span>
                {it.n && <span className="n">{it.n}</span>}
              </div>
            ))}
          </div>
          <div className="dash-side-foot">
            <div className="dash-status">
              <span className="dot"></span>
              <span>Sync ativo</span>
            </div>
          </div>
        </aside>

        {/* Main */}
        <main className="dash-main">
          <div className="dash-main-head">
            <div>
              <div className="dash-eyebrow">PERFORMANCE / 7D / TODAS AS CONTAS</div>
              <div className="dash-h1">R$ 84.290,00</div>
              <div className="dash-h1-sub">
                <span className="up">▲ +18,4%</span> vs período anterior
              </div>
            </div>
            <div className="dash-pill">
              <span className="dot pulse"></span>
              LIVE
            </div>
          </div>

          {/* KPIs row */}
          <div className="dash-kpis">
            {[
              { l: "SPEND", v: "R$ 28.4k", d: "+12%", up: false, accent: "var(--red)"   },
              { l: "ROAS",  v: "2.97×",    d: "+0.21",   up: true,  accent: "var(--green)" },
              { l: "CPA",   v: "R$ 18,40", d: "−R$ 2,10", up: true,  accent: "var(--silver)" },
              { l: "LEADS", v: "1.547",    d: "+204",    up: true,  accent: "var(--amber)"  },
            ].map((k, i) => (
              <div key={i} className="dash-kpi">
                <div className="lbl">{k.l}</div>
                <div className="val" style={{color: k.accent}}>{k.v}</div>
                <div className={`del ${k.up ? "up" : "dn"}`}>{k.up ? "▲" : "▼"} {k.d}</div>
                <Spark color={k.accent}/>
              </div>
            ))}
          </div>

          {/* Chart */}
          <div className="dash-chart">
            <div className="dash-chart-head">
              <div>
                <div className="dash-chart-title">Spend × Revenue</div>
                <div className="dash-chart-sub">Últimos 30 dias · agregado</div>
              </div>
              <div className="dash-legend">
                <span><i style={{background:"var(--red)"}}></i>Spend</span>
                <span><i style={{background:"var(--green)"}}></i>Revenue</span>
              </div>
            </div>
            <ChartSVG />
          </div>

          {/* Table */}
          <div className="dash-table">
            <div className="dash-table-head">
              <div>Top anúncios — ROAS</div>
              <div className="dash-table-meta">Ordenado por ROAS · 7d</div>
            </div>
            <table>
              <thead>
                <tr>
                  <th>AD ID</th>
                  <th>CONTA</th>
                  <th className="num">SPEND</th>
                  <th className="num">REVENUE</th>
                  <th className="num">ROAS</th>
                  <th className="num">CPA</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {[
                  { id: "ad_7890123", a: "acc_001", s: "R$ 820", r: "R$ 3.100", roas: "3,78×", cpa: "R$ 12", st: "active" },
                  { id: "ad_7890124", a: "acc_001", s: "R$ 420", r: "R$ 1.240", roas: "2,95×", cpa: "R$ 18", st: "active" },
                  { id: "ad_7891001", a: "acc_004", s: "R$ 612", r: "R$ 1.708", roas: "2,79×", cpa: "R$ 21", st: "active" },
                  { id: "ad_7892044", a: "acc_007", s: "R$ 980", r: "R$ 2.401", roas: "2,45×", cpa: "R$ 24", st: "warn" },
                  { id: "ad_7893081", a: "acc_012", s: "R$ 340", r: "R$ 612",   roas: "1,80×", cpa: "R$ 38", st: "off" },
                ].map((r, i) => (
                  <tr key={i}>
                    <td className="mono">{r.id}</td>
                    <td className="mono dim">{r.a}</td>
                    <td className="num">{r.s}</td>
                    <td className="num">{r.r}</td>
                    <td className="num strong">{r.roas}</td>
                    <td className="num">{r.cpa}</td>
                    <td><span className={`status ${r.st}`}></span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </main>
      </div>
    </div>
  );
};

const Spark = ({ color = "var(--silver)" }) => (
  <svg className="spark" viewBox="0 0 80 24" preserveAspectRatio="none" style={{color}}>
    <path d="M 0 18 L 10 14 L 20 16 L 30 10 L 40 12 L 50 6 L 60 8 L 70 4 L 80 2"
          stroke="currentColor" strokeWidth="1.2" fill="none" opacity="0.9"/>
    <path d="M 0 18 L 10 14 L 20 16 L 30 10 L 40 12 L 50 6 L 60 8 L 70 4 L 80 2 L 80 24 L 0 24 Z"
          fill="currentColor" opacity="0.18"/>
  </svg>
);

const ChartSVG = () => {
  // Generate a deterministic-looking dual line chart
  const N = 30;
  const spendY = [];
  const revY = [];
  for (let i = 0; i < N; i++) {
    const base = 50 + Math.sin(i * 0.6) * 8 + i * 0.4;
    spendY.push(base + Math.sin(i * 1.3) * 4);
    revY.push(base - 20 - Math.sin(i * 0.9) * 6 - i * 0.7);
  }
  const w = 720, h = 200, pad = 12;
  const xStep = (w - pad * 2) / (N - 1);

  const toPath = (arr) =>
    arr.map((y, i) => `${i === 0 ? "M" : "L"} ${pad + i * xStep} ${y}`).join(" ");

  return (
    <svg className="chart-svg" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      {/* grid */}
      {[0, 1, 2, 3].map(i => (
        <line key={i} x1={0} x2={w} y1={40 + i * 40} y2={40 + i * 40}
              stroke="rgba(255,255,255,0.04)" strokeDasharray="2 4"/>
      ))}
      {/* spend area */}
      <path d={`${toPath(spendY)} L ${pad + (N-1)*xStep} ${h} L ${pad} ${h} Z`}
            fill="url(#spendGrad)" opacity="0.25"/>
      {/* revenue area */}
      <path d={`${toPath(revY)} L ${pad + (N-1)*xStep} ${h} L ${pad} ${h} Z`}
            fill="url(#revGrad)" opacity="0.35"/>
      {/* spend line */}
      <path d={toPath(spendY)} stroke="var(--red)" strokeWidth="1.4" fill="none" opacity="0.85"/>
      {/* revenue line */}
      <path d={toPath(revY)} stroke="var(--green)" strokeWidth="1.6" fill="none"
            style={{filter: "drop-shadow(0 0 6px rgba(95,201,122,0.4))"}}/>
      {/* now marker */}
      <line x1={w - pad} x2={w - pad} y1={0} y2={h}
            stroke="var(--silver)" strokeWidth="0.6" strokeDasharray="3 3" opacity="0.5"/>
      <circle cx={w - pad} cy={revY[N-1]} r="3.5" fill="var(--green)"
              style={{filter: "drop-shadow(0 0 6px rgba(95,201,122,0.6))"}}/>

      <defs>
        <linearGradient id="spendGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#ee5a5a" stopOpacity="0.4"/>
          <stop offset="100%" stopColor="#ee5a5a" stopOpacity="0"/>
        </linearGradient>
        <linearGradient id="revGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#5fc97a" stopOpacity="0.5"/>
          <stop offset="100%" stopColor="#5fc97a" stopOpacity="0"/>
        </linearGradient>
      </defs>
    </svg>
  );
};

window.Dashboard = Dashboard;