// Main app shell - Orbit-only + shared form + tweaks + language toggle

const { useState, useEffect, useCallback } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": 255,
  "pastelIntensity": 1
}/*EDITMODE-END*/;

const ACCENT_SWATCHES = [
  { label: "Slate", hue: 255 },
  { label: "Rose", hue: 20 },
  { label: "Mint", hue: 160 },
  { label: "Amber", hue: 70 },
  { label: "Violet", hue: 290 },
  { label: "Sky", hue: 230 },
];

function EmailForm({ t, onJoin, joinState }) {
  const [email, setEmail] = useState("");
  const handleSubmit = (e) => {
    e.preventDefault();
    if (joinState === "idle" && email.includes("@")) onJoin(email);
  };
  const btnTextDesktop = joinState === "joining" ? t.cta_joining : joinState === "joined" ? t.cta_joined : t.cta_join;
  const btnTextMobile = joinState === "joining" ? t.cta_joining_short : joinState === "joined" ? t.cta_joined_short : t.cta_join_short;
  return (
    <>
      <form className="vo-form" onSubmit={handleSubmit}>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder={t.email_placeholder}
          disabled={joinState !== "idle"}
          required
        />
        <button type="submit" disabled={joinState !== "idle"}>
          <span className="hide-on-mobile">{btnTextDesktop}</span>
          <span className="show-on-mobile">{btnTextMobile}</span>
        </button>
      </form>
      <p className="lt-consent">
        {t.consent_before}
        <a href="privacy.html">{t.consent_privacy}</a>
        {t.consent_and}
        <a href="terms.html">{t.consent_terms}</a>
        {t.consent_dot}
      </p>
    </>
  );
}
window.EmailForm = EmailForm;

function TopNav({ lang, setLang, t }) {
  return (
    <nav className="lt-nav">
      <div className="lt-nav-inner">
        <a href="#" className="lt-logo">
          <span className="lt-logo-mark">L</span>
          <span>LuchiTimer</span>
        </a>
        <div className="lt-nav-links">
          <a href="#features">{t.nav_features}</a>
          <a href="#how">{t.nav_how}</a>
        </div>
        <div className="lt-lang" style={{ marginLeft: "auto" }}>
          <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
          <button className={lang === "es" ? "active" : ""} onClick={() => setLang("es")}>ES</button>
        </div>
        <a href="#join" className="lt-nav-cta">
          <span className="hide-on-mobile">{t.nav_join}</span>
          <span className="show-on-mobile">{t.nav_join_short}</span>
        </a>
      </div>
    </nav>
  );
}

function TweaksPanel({ tweaks, setTweaks, onClose }) {
  return (
    <div className="lt-tweaks">
      <div className="lt-tweaks-title">
        <span>TWEAKS</span>
        <button className="lt-tweaks-close" onClick={onClose}>×</button>
      </div>
      <div className="lt-tweaks-row">
        <label>Accent color</label>
        <div className="lt-tweaks-colors">
          {ACCENT_SWATCHES.map(s => (
            <button
              key={s.hue}
              className={`lt-swatch ${tweaks.accentHue === s.hue ? "active" : ""}`}
              style={{ background: `oklch(62% 0.14 ${s.hue})` }}
              onClick={() => setTweaks({ ...tweaks, accentHue: s.hue })}
              title={s.label}
            />
          ))}
        </div>
      </div>
      <div className="lt-tweaks-row">
        <label>Pastel intensity · {tweaks.pastelIntensity.toFixed(2)}×</label>
        <input
          type="range"
          min="0.4" max="1.6" step="0.1"
          value={tweaks.pastelIntensity}
          onChange={(e) => setTweaks({ ...tweaks, pastelIntensity: parseFloat(e.target.value) })}
          className="lt-slider"
        />
      </div>
    </div>
  );
}

function App() {
  const [lang, setLang] = useState(() => localStorage.getItem("luchi-lang") || "en");
  const [joinState, setJoinState] = useState("idle");
  const [waitlistCount, setWaitlistCount] = useState(2431);
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
  const [tweaksOpen, setTweaksOpen] = useState(false);
  const [_, setReRender] = useState(0);

  useEffect(() => {
    localStorage.setItem("luchi-lang", lang);
    document.documentElement.lang = lang;
  }, [lang]);

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent-hue", tweaks.accentHue);
    root.style.setProperty("--accent", `oklch(62% 0.14 ${tweaks.accentHue})`);
    root.style.setProperty("--pastel-mult", tweaks.pastelIntensity);
    const mult = tweaks.pastelIntensity;
    const recipes = { rose: 20, butter: 95, mint: 160, sky: 230, lavender: 290, blush: 0 };
    Object.entries(recipes).forEach(([name, hue]) => {
      const c = 0.06 * mult;
      LUCHI_PASTELS[name].bg = `oklch(${94 - (mult - 1) * 4}% ${c} ${hue})`;
      LUCHI_PASTELS[name].ring = `oklch(${86 - (mult - 1) * 4}% ${c * 1.2} ${hue})`;
    });
    setReRender(n => n + 1);
  }, [tweaks]);

  useEffect(() => {
    const handler = (e) => {
      if (!e.data || typeof e.data !== "object") return;
      if (e.data.type === "__activate_edit_mode") setTweaksOpen(true);
      if (e.data.type === "__deactivate_edit_mode") setTweaksOpen(false);
    };
    window.addEventListener("message", handler);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handler);
  }, []);

  useEffect(() => {
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: tweaks }, "*");
  }, [tweaks]);

  // === SUPABASE CONFIGURATION ===
  const SUPABASE_URL = "https://kpqamotglbxnuokkksoy.supabase.co";
  // IMPORTANTE: Debes reemplazar este string con tu Anon Key ('anon' public key) de Supabase
  const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImtwcWFtb3RnbGJ4bnVva2trc295Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzY2NDY3NDcsImV4cCI6MjA5MjIyMjc0N30.8KQI78JZKU2ttD4qKew7QJ-nvMuR8ndtapY4SEsVqUw";

  const onJoin = useCallback(async (email) => {
    setJoinState("joining");

    try {
      // Registrar el email en la tabla 'waitlist'
      const response = await fetch(`${SUPABASE_URL}/rest/v1/waitlist`, {
        method: "POST",
        headers: {
          "apikey": SUPABASE_ANON_KEY,
          "Authorization": `Bearer ${SUPABASE_ANON_KEY}`,
          "Content-Type": "application/json",
          "Prefer": "return=minimal"
        },
        body: JSON.stringify({ email: email, language: lang })
      });

      if (!response.ok) {
        throw new Error("Failed to register email");
      }

      setJoinState("joined");
      setWaitlistCount(c => c + 1);
      setTimeout(() => setJoinState("idle"), 3500);
    } catch (err) {
      console.error("Supabase Error:", err);
      // Fallback visual en caso de error (o para desarrollo sin la key puesta)
      setJoinState("joined");
      setTimeout(() => setJoinState("idle"), 3500);
    }
  }, [lang]);

  const t = LUCHI_I18N[lang];

  return (
    <>
      <TopNav lang={lang} setLang={setLang} t={t} />
      <OrbitVariant t={t} onJoin={onJoin} joinState={joinState} waitlistCount={waitlistCount} />
      {tweaksOpen && <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} onClose={() => setTweaksOpen(false)} />}
    </>
  );
}

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