/* dashboard.jsx — interactive Lina Optimizer dashboard mockup */
const { useState: useState_dash, useEffect: useEffect_dash, useMemo: useMemo_dash } = React;

/* ---------- Live process feed (cosmetic) ---------- */
const PROCESS_LIST = [
  { name: "Chrome.exe",          cpu: 18.4, ram: 1280, status: "high",  category: "browser" },
  { name: "ChatApp.exe",         cpu:  4.2, ram:  340, status: "ok",    category: "social" },
  { name: "Spotify.exe",         cpu:  2.1, ram:  220, status: "ok",    category: "media" },
  { name: "OneDrive.exe",        cpu:  6.5, ram:  180, status: "warn",  category: "cloud" },
  { name: "MsMpEng.exe",         cpu: 11.8, ram:  410, status: "warn",  category: "system" },
  { name: "explorer.exe",        cpu:  1.4, ram:  120, status: "ok",    category: "system" },
  { name: "Steam.exe",           cpu:  3.6, ram:  280, status: "ok",    category: "game" },
  { name: "RuntimeBroker.exe",   cpu:  0.9, ram:   90, status: "ok",    category: "system" },
  { name: "SearchHost.exe",      cpu:  5.7, ram:  260, status: "warn",  category: "system" },
  { name: "Teams.exe",           cpu:  9.2, ram:  720, status: "high",  category: "work" },
];

/* ---------- Tab: Game Boost ---------- */
const TabGameBoost = ({ active }) => {
  const [boost, setBoost] = useState_dash(false);
  useEffect_dash(() => {
    if (!active) setBoost(false);
    else { const t = setTimeout(() => setBoost(true), 600); return () => clearTimeout(t); }
  }, [active]);
  return (
    <div style={{ padding: 24, display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 24 }}>
      <div>
        <div className="eyebrow">Modo de jogo</div>
        <h3 style={{ marginTop: 8, fontSize: 22 }}>Game Boost</h3>
        <p className="dim" style={{ marginTop: 6, fontSize: 13 }}>
          Prepara o sistema para o jogo: prioriza o foreground, libera RAM, suspende ruído de fundo.
        </p>

        <div style={{ marginTop: 20, display: "flex", flexDirection: "column", gap: 12 }}>
          {[
            { label: "Prioridade do jogo (foreground)",   on: true },
            { label: "Pausa de Cloud sync e atualizações", on: true },
            { label: "Limpeza de RAM ociosa",              on: true },
            { label: "Reduzir notificações do sistema",    on: true },
            { label: "Plano de energia: Lina Power",       on: true },
            { label: "Hibernar serviços não-essenciais",   on: false },
          ].map((it, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", justifyContent: "space-between",
              padding: "10px 14px", border: "1px solid var(--line)",
              background: it.on ? "linear-gradient(90deg, var(--accent-soft), transparent 80%)" : "var(--bg-2)" }}>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg)" }}>{it.label}</span>
              <span style={{
                width: 28, height: 14, borderRadius: 8,
                background: it.on ? "var(--accent)" : "var(--bg-3)",
                border: "1px solid var(--line-2)", position: "relative",
                boxShadow: it.on ? "0 0 8px var(--accent-soft)" : "none",
              }}>
                <span style={{ position: "absolute", top: 1, left: it.on ? 14 : 1, width: 10, height: 10, background: "#0a0a0c", borderRadius: 5, transition: "150ms" }}></span>
              </span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
        <Brackets4 style={{ padding: 24, background: "linear-gradient(180deg, #15050a, #08080d)", border: "1px solid var(--accent)" }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.2em", color: "var(--accent-text)" }}>STATUS</div>
          <div style={{ fontSize: 36, fontWeight: 800, fontFamily: "var(--font-display)", marginTop: 4, color: boost ? "var(--accent)" : "var(--fg-dim)", textShadow: boost ? "0 0 16px var(--accent)" : "none", transition: "300ms" }}>
            {boost ? "BOOSTED" : "STANDBY"}
          </div>
          <div className="mono dim" style={{ fontSize: 11, marginTop: 10 }}>
            {boost ? "8 ajustes ativos · 4 reversíveis" : "Aguardando ativação"}
          </div>
          <div style={{ marginTop: 18 }}>
            <Bar label="CPU LIVRE" value={boost ? 72 : 41} sub={`${boost ? 72 : 41}%`} color="var(--ok)" />
          </div>
          <div style={{ marginTop: 10 }}>
            <Bar label="RAM LIVRE" value={boost ? 64 : 22} sub={`${boost ? 64 : 22}%`} color="var(--ok)" />
          </div>
          <div style={{ marginTop: 10 }}>
            <Bar label="PROCESSOS BG" value={boost ? 34 : 100} sub={boost ? "34" : "62"} color="var(--accent)" />
          </div>
        </Brackets4>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <div className="card" style={{ padding: 14 }}>
            <div className="mono" style={{ fontSize: 10, color: "var(--fg-mute)", letterSpacing: "0.2em" }}>LATÊNCIA</div>
            <div style={{ fontSize: 22, fontWeight: 700, marginTop: 4 }}>baixa</div>
            <div className="mono dim" style={{ fontSize: 11 }}>foco em foreground</div>
          </div>
          <div className="card" style={{ padding: 14 }}>
            <div className="mono" style={{ fontSize: 10, color: "var(--fg-mute)", letterSpacing: "0.2em" }}>ROLLBACK</div>
            <div style={{ fontSize: 22, fontWeight: 700, marginTop: 4 }}>1 clique</div>
            <div className="mono dim" style={{ fontSize: 11 }}>tudo reversível</div>
          </div>
        </div>
      </div>
    </div>
  );
};

/* ---------- Tab: Diagnóstico ---------- */
const TabDiagnostic = ({ active }) => {
  return (
    <div style={{ padding: 24 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 20 }}>
        {[
          { ic: "cpu",    label: "CPU",   v: "Ryzen 5 5600",     load: 28, color: "var(--accent)" },
          { ic: "memory", label: "RAM",   v: "16 GB DDR4",       load: 47, color: "var(--info)" },
          { ic: "gpu",    label: "GPU",   v: "RTX 3060 6GB",     load: 12, color: "var(--ok)" },
          { ic: "disk",   label: "SSD",   v: "NVMe 1TB · 78%",   load: 78, color: "var(--warn)" },
        ].map((c, i) => (
          <div key={i} className="card" style={{ padding: 14 }}>
            <div className="row between">
              <span className="mono" style={{ fontSize: 10, color: "var(--fg-mute)", letterSpacing: "0.2em" }}>{c.label}</span>
              <Icon name={c.ic} size={14} style={{ color: "var(--fg-mute)" }} />
            </div>
            <div style={{ fontSize: 14, fontWeight: 600, marginTop: 4 }}>{c.v}</div>
            <div style={{ marginTop: 8 }}>
              <Bar value={c.load} sub={`${c.load}%`} color={c.color} animated={active} />
            </div>
          </div>
        ))}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 16 }}>
        <div className="card" style={{ padding: 18 }}>
          <div className="row between" style={{ marginBottom: 14 }}>
            <h4 style={{ fontSize: 14, fontFamily: "var(--font-mono)", letterSpacing: "0.1em", textTransform: "uppercase" }}>Comparativo · antes/depois</h4>
            <span className="tag accent"><span className="dot"></span>análise concluída</span>
          </div>
          {[
            { label: "Processos em segundo plano", before: 62, after: 34, unit: "" },
            { label: "Carga de CPU em idle",       before: 38, after: 12, unit: "%" },
            { label: "RAM ocupada (idle)",          before: 71, after: 44, unit: "%" },
            { label: "Tempo de resposta sistema",   before: 86, after: 41, unit: "ms" },
            { label: "Serviços não-essenciais",     before: 24, after:  9, unit: "" },
          ].map((row, i) => (
            <div key={i} style={{ padding: "10px 0", borderTop: i ? "1px dashed var(--line)" : "none" }}>
              <div className="row between" style={{ marginBottom: 6 }}>
                <span style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--fg-dim)" }}>{row.label}</span>
                <span style={{ fontSize: 12, fontFamily: "var(--font-mono)" }}>
                  <span style={{ color: "var(--fg-mute)", textDecoration: "line-through" }}>{row.before}{row.unit}</span>
                  <span style={{ margin: "0 8px", color: "var(--fg-faint)" }}>→</span>
                  <span style={{ color: "var(--ok)" }}>{row.after}{row.unit}</span>
                </span>
              </div>
              <div style={{ position: "relative", height: 4, background: "var(--bg-3)" }}>
                <div style={{ position: "absolute", left: 0, top: 0, height: "100%", width: `${row.before}%`, background: "var(--fg-faint)", opacity: 0.5 }}></div>
                <div style={{ position: "absolute", left: 0, top: 0, height: "100%", width: active ? `${row.after}%` : 0, background: "var(--ok)", boxShadow: "0 0 6px rgba(74,222,128,0.4)", transition: "width 1.4s ease" }}></div>
              </div>
            </div>
          ))}
        </div>

        <div className="card" style={{ padding: 18 }}>
          <div className="row between" style={{ marginBottom: 14 }}>
            <h4 style={{ fontSize: 14, fontFamily: "var(--font-mono)", letterSpacing: "0.1em", textTransform: "uppercase" }}>Diagnóstico inteligente</h4>
            <span className="mono" style={{ fontSize: 10, color: "var(--accent-text)" }}>14 achados</span>
          </div>
          {[
            { txt: "Inicialização com 19 apps acionando ao boot",     risk: "warn" },
            { txt: "Plano de energia em modo Equilibrado",            risk: "warn" },
            { txt: "Serviço Xbox Live em auto sem necessidade",       risk: "ok"   },
            { txt: "Indexação do Search varrendo SSD",                risk: "warn" },
            { txt: "MsMpEng escaneando durante o jogo",               risk: "warn" },
            { txt: "Notificações do Windows ativas",                  risk: "ok"   },
          ].map((it, i) => (
            <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", padding: "10px 0", borderTop: i ? "1px dashed var(--line)" : "none" }}>
              <span className={`tag ${it.risk}`} style={{ marginTop: 2 }}>
                <span className="dot"></span>{it.risk === "warn" ? "atenção" : "ok"}
              </span>
              <span style={{ fontSize: 12.5, color: "var(--fg-dim)", lineHeight: 1.5 }}>{it.txt}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

/* ---------- Tab: Lina Performance Director ---------- */
const TabProcesses = ({ active }) => {
  const [tick, setTick] = useState_dash(0);
  useEffect_dash(() => {
    if (!active) return;
    const id = setInterval(() => setTick(t => t + 1), 1500);
    return () => clearInterval(id);
  }, [active]);
  const data = useMemo_dash(() => PROCESS_LIST.map(p => ({
    ...p,
    cpu: Math.max(0.1, p.cpu + (Math.sin((tick + p.name.length) * 0.7) * 1.4)),
  })), [tick]);

  return (
    <div style={{ padding: 0 }}>
      <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr 0.8fr", padding: "10px 24px", borderBottom: "1px solid var(--line)", background: "var(--bg-2)", fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--fg-mute)" }}>
        <span>Performance Director · processo</span>
        <span>CPU</span>
        <span>RAM</span>
        <span>Categoria</span>
        <span style={{ textAlign: "right" }}>Ação</span>
      </div>
      <div style={{ maxHeight: 360, overflow: "hidden" }}>
        {data.map((p, i) => (
          <div key={p.name} style={{
            display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr 0.8fr",
            padding: "11px 24px", borderBottom: "1px solid var(--line)",
            alignItems: "center", fontSize: 12, fontFamily: "var(--font-mono)",
            background: p.status === "high" ? "linear-gradient(90deg, rgba(255,46,58,0.08), transparent 60%)" : "transparent",
          }}>
            <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span className="dot" style={{ color: p.status === "high" ? "var(--bad)" : p.status === "warn" ? "var(--warn)" : "var(--ok)" }}></span>
              <span style={{ color: "var(--fg)" }}>{p.name}</span>
            </span>
            <span style={{ color: p.cpu > 10 ? "var(--accent-text)" : "var(--fg-dim)" }}>
              {p.cpu.toFixed(1)}%
            </span>
            <span className="dim">{p.ram} MB</span>
            <span className="dim">{p.category}</span>
            <span style={{ textAlign: "right" }}>
              <span style={{ fontSize: 10, padding: "3px 8px", border: "1px solid var(--line-2)", color: "var(--fg-dim)", letterSpacing: "0.1em" }}>
                {p.status === "high" ? "REVISAR" : "OK"}
              </span>
            </span>
          </div>
        ))}
      </div>
    </div>
  );
};

/* ---------- Tab: Power Plan ---------- */
const TabPower = ({ active }) => (
  <div style={{ padding: 24, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
    <div>
      <div className="eyebrow">Modo Turbo</div>
      <h3 style={{ marginTop: 8, fontSize: 22 }}>Lina Power Plan</h3>
      <p className="dim" style={{ marginTop: 6, fontSize: 13 }}>
        Plano de energia focado em desempenho. Você mantém controle total e pode reverter para Equilibrado a qualquer momento.
      </p>
      <div style={{ marginTop: 20, display: "flex", flexDirection: "column", gap: 8 }}>
        {[
          ["Equilibrado",  false, "Padrão Windows"],
          ["Economia",     false, "Padrão Windows"],
          ["Lina Power",   true,  "Desempenho contínuo"],
          ["Lina Turbo",   false, "Apenas em jogo"],
        ].map(([n, sel, sub], i) => (
          <div key={i} style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            padding: "12px 14px",
            border: sel ? "1px solid var(--accent)" : "1px solid var(--line)",
            background: sel ? "linear-gradient(90deg, var(--accent-soft), transparent 80%)" : "var(--bg-2)",
          }}>
            <div>
              <div style={{ fontWeight: 600, fontSize: 13 }}>{n}</div>
              <div className="mono dim" style={{ fontSize: 11 }}>{sub}</div>
            </div>
            <span style={{ width: 14, height: 14, borderRadius: 7, border: `1px solid ${sel ? "var(--accent)" : "var(--line-strong)"}`, background: sel ? "var(--accent)" : "transparent", boxShadow: sel ? "0 0 8px var(--accent-soft)" : "none" }}></span>
          </div>
        ))}
      </div>
    </div>

    <Brackets4 style={{ padding: 24, background: "linear-gradient(180deg, #15050a, #08080d)", border: "1px solid var(--accent)" }}>
      <div className="mono" style={{ fontSize: 10, letterSpacing: "0.2em", color: "var(--accent-text)" }}>SAÍDA · POWER</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 6 }}>
        <span style={{ fontSize: 56, fontWeight: 800, color: "var(--accent)", textShadow: "0 0 24px var(--accent-soft)", letterSpacing: "-0.04em" }}>100</span>
        <span className="mono dim" style={{ fontSize: 14 }}>%</span>
        <span className="mono" style={{ fontSize: 11, color: "var(--fg-mute)", letterSpacing: "0.2em", marginLeft: 8 }}>MIN/MAX CPU</span>
      </div>
      <div style={{ height: 1, background: "var(--line)", margin: "16px 0" }}></div>
      {[
        ["Throttle agressivo",   "DESLIGADO"],
        ["USB selective suspend", "DESLIGADO"],
        ["PCI Express",           "DESEMPENHO"],
        ["Resfriamento",          "ATIVO"],
        ["Disco em idle",         "NUNCA"],
      ].map(([k, v], i) => (
        <div key={i} className="row between" style={{ padding: "8px 0", borderTop: i ? "1px dashed var(--line)" : "none" }}>
          <span className="mono dim" style={{ fontSize: 11, letterSpacing: "0.05em" }}>{k}</span>
          <span className="mono" style={{ fontSize: 11, color: "var(--accent-text)" }}>{v}</span>
        </div>
      ))}
    </Brackets4>
  </div>
);

/* ---------- Dashboard shell ---------- */
const TABS = [
  { id: "boost",   label: "GAME BOOST",  icon: "bolt"   },
  { id: "diag",    label: "DIAGNÓSTICO", icon: "gauge"  },
  { id: "proc",    label: "DIRECTOR",    icon: "list"   },
  { id: "power",   label: "POWER PLAN",  icon: "lightning" },
];

const Dashboard = ({ initialTab = "boost", autoRotate = false, scale = 1, perspective = false, style = {} }) => {
  const [tab, setTab] = useState_dash(initialTab);
  useEffect_dash(() => {
    if (!autoRotate) return;
    const id = setInterval(() => {
      setTab(prev => {
        const i = TABS.findIndex(t => t.id === prev);
        return TABS[(i + 1) % TABS.length].id;
      });
    }, 4500);
    return () => clearInterval(id);
  }, [autoRotate]);

  return (
    <div className="hud" style={{
      transform: `scale(${scale})`,
      transformOrigin: "top left",
      width: 880,
      maxWidth: "100%",
      ...style,
    }}>
      {/* titlebar */}
      <div className="hud-titlebar">
        <div className="lights"><span></span><span></span><span></span></div>
        <span style={{ color: "var(--fg-dim)" }}>lina_optimizer.exe</span>
        <span style={{ marginLeft: "auto", display: "flex", gap: 14 }}>
          <span>Performance Director ativo</span>
          <span>v3.4.0</span>
          <span style={{ color: "var(--ok)" }}>● online</span>
        </span>
      </div>

      {/* tabs */}
      <div style={{ display: "flex", borderBottom: "1px solid var(--line)", background: "var(--bg-2)" }}>
        {TABS.map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{
            display: "flex", alignItems: "center", gap: 8,
            padding: "12px 18px", background: "transparent",
            border: "none", cursor: "pointer",
            fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.15em",
            color: tab === t.id ? "var(--accent-text)" : "var(--fg-mute)",
            borderBottom: `2px solid ${tab === t.id ? "var(--accent)" : "transparent"}`,
            transition: "150ms",
            position: "relative",
          }}>
            <Icon name={t.icon} size={13} />
            {t.label}
          </button>
        ))}
        <span style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 12, padding: "0 18px", fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-mute)", letterSpacing: "0.1em" }}>
          <span>CPU 28%</span>
          <span style={{ color: "var(--line-strong)" }}>|</span>
          <span>RAM 47%</span>
          <span style={{ color: "var(--line-strong)" }}>|</span>
          <span style={{ color: "var(--ok)" }}>● HEALTHY</span>
        </span>
      </div>

      {/* content */}
      <div style={{ minHeight: 480, position: "relative", background: "var(--bg-1)" }}>
        {tab === "boost" && <TabGameBoost active={tab === "boost"} />}
        {tab === "diag"  && <TabDiagnostic active={tab === "diag"} />}
        {tab === "proc"  && <TabProcesses active={tab === "proc"} />}
        {tab === "power" && <TabPower active={tab === "power"} />}
      </div>

      {/* status bar */}
      <div style={{ display: "flex", padding: "8px 16px", borderTop: "1px solid var(--line)", background: "var(--bg-2)", fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-mute)", letterSpacing: "0.1em" }}>
        <span>SYS: WIN 11 22H2 · BUILD 22631.4317</span>
        <span style={{ marginLeft: "auto", display: "flex", gap: 14 }}>
          <span>UPTIME 04:21:13</span>
          <span style={{ color: "var(--accent-text)" }}>● ROLLBACK READY</span>
        </span>
      </div>
    </div>
  );
};

Object.assign(window, { Dashboard, TABS });