// app.jsx — Dj Antønic root, navbar, tweaks

const { useState: useStateA, useEffect: useEffectA } = React;
const _Auth = window.AudioDeckAuth;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "variant": "minimal",
  "accent": "cyan",
  "ambientEq": true,
  "spinPlatter": true
}/*EDITMODE-END*/;

const ACCENT_PRESETS = {
  cyan:    { accent: "oklch(0.82 0.16 220)", glow: "oklch(0.82 0.16 220 / 0.55)", accent2: "oklch(0.65 0.22 290)", rgb: "92, 199, 255" },
  magenta: { accent: "oklch(0.70 0.22 340)", glow: "oklch(0.70 0.22 340 / 0.55)", accent2: "oklch(0.82 0.16 220)", rgb: "235, 75, 175" },
  violet:  { accent: "oklch(0.65 0.22 290)", glow: "oklch(0.65 0.22 290 / 0.55)", accent2: "oklch(0.70 0.22 340)", rgb: "168, 110, 255" },
  lime:    { accent: "oklch(0.88 0.20 140)", glow: "oklch(0.88 0.20 140 / 0.55)", accent2: "oklch(0.82 0.16 220)", rgb: "150, 245, 130" },
};

function initialsA(name) {
  return (name || "?").split(" ").map(s => s[0]).slice(0, 2).join("").toUpperCase();
}

function AdminMenu({ user, onLogout }) {
  const [open, setOpen] = useStateA(false);
  useEffectA(() => {
    const onDoc = (e) => { if (!e.target.closest(".user-menu")) setOpen(false); };
    document.addEventListener("click", onDoc);
    return () => document.removeEventListener("click", onDoc);
  }, []);

  return (
    <div className="user-menu" style={{ position: "relative" }}>
      <button
        className="nav-cta"
        onClick={(e) => { e.preventDefault(); setOpen(o => !o); }}
        style={{ paddingLeft: 10, gap: 10 }}
      >
        <span className="user-avatar" style={{
          width: 24, height: 24, borderRadius: 6,
          background: "linear-gradient(135deg, var(--accent), var(--accent-2))",
          color: "var(--ink-0)", display: "grid", placeItems: "center",
          fontSize: 11, fontWeight: 600
        }}>{initialsA(user.name)}</span>
        <span style={{ fontWeight: 500 }}>{user.name.split(" ")[0]}</span>
        <span style={{
          fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.14em", textTransform: "uppercase",
          padding: "2px 6px", borderRadius: 4,
          background: "var(--accent)", color: "var(--ink-0)", fontWeight: 600
        }}>Admin</span>
      </button>

      {open && (
        <div style={{
          position: "absolute", right: 0, top: "calc(100% + 8px)", zIndex: 60,
          minWidth: 220, padding: 6, borderRadius: 12,
          background: "rgba(15,18,27,0.96)", backdropFilter: "blur(20px)",
          border: "1px solid var(--line-2)", boxShadow: "0 16px 40px rgba(0,0,0,0.5)",
        }}>
          <div style={{ padding: "10px 12px 8px", borderBottom: "1px solid var(--line)" }}>
            <div style={{ fontWeight: 500, fontSize: 14 }}>{user.name}</div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-3)" }}>{user.email}</div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 1, padding: 4 }}>
            <a href="admin.html" style={menuItemStyle}>Panel admin</a>
            <a href="account.html" style={menuItemStyle}>Mi cuenta</a>
            <button onClick={onLogout} style={{ ...menuItemStyle, background: "transparent", border: 0, textAlign: "left", cursor: "pointer", fontFamily: "inherit", fontSize: 14, color: "var(--text-2)" }}>
              Cerrar sesión
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

const menuItemStyle = {
  display: "block", padding: "9px 12px", borderRadius: 7,
  color: "var(--text-1)", fontSize: 14, textDecoration: "none",
  transition: "background .12s",
};

function Navbar({ onConvert, user, onLogout }) {
  return (
    <nav className="nav">
      <div className="shell nav-inner">
        <a href="/" className="brand" style={{ textDecoration: "none", color: "inherit" }}>
          <div className="brand-mark" aria-hidden />
          <span className="brand-name">DJ <b>Antønic</b></span>
        </a>
        <div className="nav-links">
          <a href="#converter">Convertidor</a>
          <a href="#formats">Formatos</a>
          <a href="#faq">FAQ</a>
        </div>
        {user
          ? <AdminMenu user={user} onLogout={onLogout} />
          : (
            <a href="login.html" className="nav-cta" style={{ background: "transparent", opacity: 0.5, fontSize: 12 }}>Admin</a>
          )}
      </div>
    </nav>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [user, setUser] = useStateA(null);
  const [authReady, setAuthReady] = useStateA(false);

  useEffectA(() => {
    _Auth.init().then(() => {
      setUser(_Auth.getSession());
      setAuthReady(true);
    });
  }, []);

  useEffectA(() => {
    const refresh = () => {
      fetch('/api/auth/session', { credentials: 'same-origin' })
        .then(r => r.json())
        .then(d => setUser(d.user || null))
        .catch(() => {});
    };
    window.addEventListener("focus", refresh);
    return () => window.removeEventListener("focus", refresh);
  }, []);

  const handleLogout = async () => {
    await _Auth.logout();
    setUser(null);
  };

  useEffectA(() => {
    const preset = ACCENT_PRESETS[t.accent] || ACCENT_PRESETS.cyan;
    const root = document.documentElement;
    root.style.setProperty("--accent", preset.accent);
    root.style.setProperty("--accent-2", preset.accent2);
    root.style.setProperty("--accent-glow", preset.glow);
    root.style.setProperty("--accent-rgb", preset.rgb);
  }, [t.accent]);

  useEffectA(() => {
    document.body.setAttribute("data-variant", t.variant);
  }, [t.variant]);

  useEffectA(() => {
    const styleId = "spin-toggle";
    let s = document.getElementById(styleId);
    if (!s) { s = document.createElement("style"); s.id = styleId; document.head.appendChild(s); }
    s.textContent = t.spinPlatter ? "" : ".deck-platter{animation:none!important}";
  }, [t.spinPlatter]);

  const scrollToConverter = (e) => {
    if (e) e.preventDefault();
    document.getElementById("converter")?.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  const scrollToFormats = (e) => {
    if (e) e.preventDefault();
    document.getElementById("formats")?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  if (!authReady) return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100vh" }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.14em", color: "var(--text-3)", textTransform: "uppercase" }}>
        Cargando…
      </div>
    </div>
  );

  return (
    <>
      <div className="noise" aria-hidden />
      {t.ambientEq && t.variant === "club" && (
        <div className="ambient-eq" aria-hidden>
          {Array.from({ length: 80 }).map((_, i) => (
            <i key={i} style={{ animationDelay: `${i * 50}ms`, animationDuration: `${0.8 + (i % 7) * 0.12}s` }} />
          ))}
        </div>
      )}

      <Navbar onConvert={scrollToConverter} user={user} onLogout={handleLogout} />
      <Hero onCtaConvert={scrollToConverter} onCtaFormats={scrollToFormats} />

      <section className="section" id="convert-section" style={{ paddingTop: 0 }}>
        <div className="shell">
          <div className="section-head">
            <div>
              <div className="section-eyebrow">01 · Convertidor</div>
              <h2 className="section-title">Suelta. Convierte. Descarga.</h2>
            </div>
            <p className="section-desc">Audio limpio. Conversión rápida. MP3 320 kbps. Sin registro, sin límites.</p>
          </div>
          <Converter />
        </div>
      </section>

      <FormatsSection />
      <FeaturesSection />
      <StepsSection />
      <PrivacySection />
      <FAQSection />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Versión visual" />
        <TweakRadio
          label="Variante"
          value={t.variant}
          options={[
            { value: "minimal", label: "Premium Minimal" },
            { value: "club",    label: "Club Energy" },
          ]}
          onChange={(v) => setTweak({ variant: v, accent: v === "club" ? "magenta" : "cyan" })}
        />
        <TweakColor
          label="Acento neón"
          value={
            t.accent === "cyan"    ? "#5cc7ff" :
            t.accent === "magenta" ? "#eb4baf" :
            t.accent === "violet"  ? "#a86eff" :
            "#96f582"
          }
          options={["#5cc7ff", "#eb4baf", "#a86eff", "#96f582"]}
          onChange={(v) => {
            const map = { "#5cc7ff": "cyan", "#eb4baf": "magenta", "#a86eff": "violet", "#96f582": "lime" };
            setTweak("accent", map[v] || "cyan");
          }}
        />
        <TweakSection label="Animaciones" />
        <TweakToggle label="Plato giratorio" value={t.spinPlatter} onChange={(v) => setTweak("spinPlatter", v)} />
        <TweakToggle label="Ambient EQ (Club)" value={t.ambientEq} onChange={(v) => setTweak("ambientEq", v)} />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);