/* global React, ReactDOM */
const { useState, useEffect, useRef, useMemo, useCallback } = React;

// ============= FORM RELAY ============================================
// All public-facing forms POST through FormSubmit's AJAX endpoint so
// submissions land in will.donnell652@gmail.com until a proper backend
// replaces this. First submission to this endpoint triggers a one-time
// verification email from FormSubmit — click the link in that email to
// activate forwarding.
window.__pwSubmitForm = async function pwSubmitForm(fields, subject) {
  const res = await fetch("https://formsubmit.co/ajax/will.donnell652@gmail.com", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Accept": "application/json",
    },
    body: JSON.stringify({
      ...fields,
      _subject: subject,
      _template: "table",
      _captcha: "false",
    }),
  });
  if (!res.ok) throw new Error(`relay status ${res.status}`);
  return res.json();
};

// ============= NAVBAR =============
function Navbar() {
  return (
    <nav className="nav">
      <a href="#" className="nav-brand">
        <span className="nav-brand-mark"></span>
        <span>PATCH<span className="accent"> ROBOWARS</span></span>
      </a>
      <div className="nav-links">
        <a className="nav-link" href="#about">About</a>
        <a className="nav-link" href="#compete">Compete</a>
        <a className="nav-link" href="#sponsor">Sponsor</a>
        <a className="nav-link" href="#gallery">Gallery</a>
        <a className="nav-link" href="#register">Register</a>
        <a className="nav-cta" href="#register">
          <span className="nav-cta-dot"></span>
          Apply 2026
        </a>
      </div>
    </nav>
  );
}

// ============= HERO =============
function Reactor() {
  const ticks = Array.from({ length: 36 }, (_, i) => i);
  return (
    <div className="hero-reactor">
      <div className="reactor-cross"></div>
      <div className="reactor-cross v"></div>
      <div className="reactor-ring r1"></div>
      <div className="reactor-ring r2"></div>
      <div className="reactor-ring r3"></div>
      <div className="reactor-ring r4"></div>
      <div className="reactor-ring r5"></div>
      <div className="reactor-arc"></div>
      <div className="reactor-arc inner"></div>
      <div className="reactor-core"></div>
      {ticks.map(i => (
        <div
          key={i}
          className="reactor-tick"
          style={{
            transform: `translate(-50%, -50%) rotate(${i * 10}deg) translateY(-360px)`,
            opacity: i % 3 === 0 ? 0.7 : 0.25,
            height: i % 3 === 0 ? 14 : 8,
          }}
        ></div>
      ))}
    </div>
  );
}

function GlitchText({ children, className = "" }) {
  return (
    <span className={`glitch flicker ${className}`} data-text={children}>
      {children}
    </span>
  );
}

function Sparkline({ count = 18, seed = 0 }) {
  const bars = useMemo(() => {
    return Array.from({ length: count }, (_, i) => {
      const v = (Math.sin((i + seed) * 1.3) * 0.4 + Math.random() * 0.6) * 100;
      return Math.max(8, Math.abs(v));
    });
  }, [count, seed]);
  return (
    <div className="sparkline">
      {bars.map((h, i) => (
        <div key={i} className="sparkline-bar" style={{ height: `${h}%`, opacity: 0.3 + (i / count) * 0.5 }}></div>
      ))}
    </div>
  );
}

const HERO_SLIDES = [
  { src: "assets/photo-smoke.png",      id: "FN25-008", label: "BOUT 09 · SMOKE" },
  { src: "assets/photo-chainsaw.png",   id: "FN25-002", label: "WEAPON · CHAINSAW" },
  { src: "assets/photo-arena-wide.png", id: "FN25-001", label: "BOUT 04 · ARENA" },
  { src: "assets/photo-bot-eyes.png",   id: "FN25-003", label: "INSPECTION · BLUE-EYE" },
  { src: "assets/photo-controller.png", id: "FN25-006", label: "PILOT BOX · BOUT 07" },
  { src: "assets/photo-arena-overview.png", id: "FN25-007", label: "ARENA · 16:00" },
];
const HERO_SLIDE_MS = 4000;

function HeroBackground() {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const id = setInterval(() => {
      setIdx((i) => (i + 1) % HERO_SLIDES.length);
    }, HERO_SLIDE_MS);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="hero-bg">
      {HERO_SLIDES.map((s, i) => (
        <div
          key={i}
          className={`hero-bg-slide ${i === idx ? "active" : ""}`}
          style={{ backgroundImage: `url("${s.src}")` }}
        ></div>
      ))}
      <div className="hero-bg-scan"></div>
      <div className="hero-bg-grid"></div>
      <div className="hero-bg-progress">
        {HERO_SLIDES.map((_, i) => (
          <div
            key={i}
            className={`hero-bg-tick ${i < idx ? "done" : ""} ${i === idx ? "live" : ""}`}
            // restart the live animation on each cycle by remounting
            ref={null}
          ></div>
        ))}
      </div>
      <div className="hero-bg-frame-id">
        <span className="dim">FRAME</span>
        {HERO_SLIDES[idx].id} · {HERO_SLIDES[idx].label}
      </div>
    </div>
  );
}

// Applications open: 01 JUN 2026 · 09:00 IST (Dublin, UTC+1)
const APPS_OPEN_TS = new Date("2026-06-01T09:00:00+01:00").getTime();

function HeroCountdown() {
  const [now, setNow] = useState(Date.now());
  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);

  const diff = Math.max(0, APPS_OPEN_TS - now);
  const days = Math.floor(diff / 86400000);
  const hours = Math.floor((diff % 86400000) / 3600000);
  const mins = Math.floor((diff % 3600000) / 60000);
  const secs = Math.floor((diff % 60000) / 1000);

  const cells = [
    { v: days, k: "DAYS" },
    { v: hours, k: "HOURS" },
    { v: mins, k: "MINUTES" },
    { v: secs, k: "SECONDS" },
  ];

  return (
    <div className="hero-countdown" role="timer" aria-label="Countdown to when applications open">
      <div className="hero-countdown-header">
        <span className="hch-l">▸ APPLICATIONS OPEN</span>
        <span className="hch-r">01 JUN 2026</span>
      </div>

      <div className="hero-countdown-grid">
        {cells.map((c) => (
          <div key={c.k} className="hero-countdown-cell" data-key={c.k}>
            <span className="hero-countdown-num">{String(c.v).padStart(2, "0")}</span>
            <span className="hero-countdown-key">{c.k}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function HeroNotifyField() {
  const [email, setEmail] = useState("");
  const [state, setState] = useState("idle"); // idle | submitting | done | error

  const submit = async (e) => {
    e.preventDefault();
    if (!email) return;
    setState("submitting");
    try {
      await window.__pwSubmitForm({
        email,
        source: "register-interest-hero",
        page: typeof window !== "undefined" ? window.location.hash || "/" : "",
      }, "FN-2026 · Register Interest (hero)");
      setState("done");
    } catch (err) {
      setState("error");
    }
  };

  if (state === "done") {
    return (
      <div className="hero-notify hero-notify-done" role="status">
        <span className="hn-msg">
          <span className="ok">●</span> You're on the list — we'll email you when applications open.
        </span>
      </div>
    );
  }

  return (
    <form
      className="hero-notify"
      onSubmit={submit}
      data-action="register-interest-hero"
      noValidate
    >
      <input
        className="hn-input"
        type="email"
        name="email"
        id="hero-notify-email"
        autoComplete="email"
        inputMode="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Enter your email"
        aria-label="Email address"
        required
      />
      <button type="submit" className="hn-submit" disabled={state === "submitting"}>
        {state === "submitting" ? "SENDING…" : "REGISTER INTEREST →"}
      </button>
      {state === "error" && (
        <span className="hn-error" role="alert">
          Couldn't send — try again, or email hello@patchrobowars.ie.
        </span>
      )}
    </form>
  );
}

function Hero({ variant, openInterest }) {
  const [time, setTime] = useState("");
  useEffect(() => {
    const tick = () => {
      const d = new Date();
      const h = String(d.getUTCHours()).padStart(2, "0");
      const m = String(d.getUTCMinutes()).padStart(2, "0");
      const s = String(d.getUTCSeconds()).padStart(2, "0");
      setTime(`${h}:${m}:${s}`);
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="hero" data-screen-label="01 Hero" data-variant={variant}>
      {variant === 'photo' && <HeroBackground />}
      {/* Frame */}
      <div className="hero-frame"></div>
      <div className="hero-corner-tr"></div>
      <div className="hero-corner-bl"></div>

      {/* Telemetry rails */}
      <div className="hero-rail hero-rail-top">
        <div className="hero-rail-item"><span className="dot"></span>SYS.ARMED</div>
        <div className="hero-rail-item ember">FN-25 RECAP <span style={{marginLeft: 6, color: 'var(--orange)'}}>VERIFIED</span></div>
      </div>
      <div className="hero-rail hero-rail-bottom">
        <div className="hero-rail-item amber">FIGHT NIGHT <span className="accent" style={{marginLeft: 6}}>05 SEP 2026</span></div>
        <div className="hero-rail-item"><span className="dot"></span>UTC <span className="accent" style={{marginLeft: 6}}>{time}</span></div>
        <div className="hero-rail-item">LOC. <span style={{marginLeft: 6, color: 'var(--orange)'}}>DOGPATCH-LABS · DUBLIN · IE</span></div>
      </div>

      {/* Reactor backdrop */}
      <Reactor />

      {/* Side rails */}
      <aside className="hero-side hero-side-l">
        <div className="spec-block">
          <div className="spec-block-head">
            <span>FIELD REPORT // FN-2025</span>
            <span style={{color: 'var(--amber)'}}>● VERIFIED</span>
          </div>
          <div className="spec-block-row"><span>APPLICATIONS</span><span className="v">150+</span></div>
          <div className="spec-block-row"><span>OVERSUBSCRIBED</span><span className="v">4×</span></div>
          <div className="spec-block-row"><span>TEAMS BUILT</span><span className="v">8</span></div>
          <div className="spec-block-row"><span>FIRES</span><span className="v">0</span></div>
        </div>
        <div className="spec-block">
          <div className="spec-block-head">
            <span>BUILD // PROFILE</span>
            <span className="ember">● FN-26</span>
          </div>
          <div className="spec-block-row"><span>WEEKS</span><span className="v">8</span></div>
          <div className="spec-block-row"><span>BUDGET</span><span className="v">€500 / TEAM</span></div>
          <Sparkline count={20} seed={3} />
        </div>
        {variant === 'photo' && (
          <div className="hero-side-photo">
            <img src="assets/photo-bot-eyes.png" alt="" />
            <div className="hero-side-photo-label">FRG-21 · 2025</div>
          </div>
        )}
      </aside>

      <aside className="hero-side hero-side-r">
        <div className="spec-block">
          <div className="spec-block-head">
            <span>RULES // SUMMARY</span>
            <span style={{color: 'var(--orange)'}}>SPARC</span>
          </div>
          <div className="spec-block-row"><span>WEIGHT CAP</span><span className="v">5 KG</span></div>
          <div className="spec-block-row"><span>SPEND CAP</span><span className="v">€750</span></div>
          <div className="spec-block-row"><span>TEAM SIZE</span><span className="v">4 – 6</span></div>
        </div>
        <div className="spec-block">
          <div className="spec-block-head">
            <span>ELIGIBILITY</span>
            <span style={{color: 'var(--amber)'}}>OPEN</span>
          </div>
          <div className="spec-block-row"><span>AGE</span><span className="v">16 – 25</span></div>
          <div className="spec-block-row"><span>WHERE</span><span className="v">ALL OF IE</span></div>
          <div className="spec-block-row"><span>EXPERIENCE</span><span className="v">NOT REQ.</span></div>
          <div className="spec-block-row"><span>COST TO YOU</span><span className="v">€0</span></div>
        </div>
        {variant === 'photo' && (
          <div className="hero-side-photo">
            <img src="assets/photo-smoke.png" alt="" />
            <div className="hero-side-photo-label">FN25 · BOUT-09</div>
          </div>
        )}
      </aside>

      {/* Center stack */}
      <div className="hero-stack">
        <div className="hero-presents">
          <span className="hero-presents-line"></span>
          PATCH PRESENTS
          <span className="hero-presents-line r"></span>
        </div>

        <div className="hero-title-wrap">
          <h1 className="hero-title">
            <span className="hero-title-row"><GlitchText>ROBO</GlitchText></span>
            <span className="hero-title-row"><GlitchText>WARS</GlitchText></span>
          </h1>
        </div>

        <div className="hero-fightnight">
          <span>FIGHT</span>
          <span>NIGHT</span>
          <span className="year">2026</span>
        </div>

        <div className="hero-divider">
          STUDENT · BUILT · BATTLE · READY
        </div>

        <HeroCountdown />
        <HeroNotifyField />

        <div className="hero-meta" style={{display: 'none'}}>
          <div className="hero-meta-item">
            <span className="hero-meta-key">LOCATION</span>
            <span className="hero-meta-val">Dogpatch Labs, Dublin</span>
          </div>
          <div className="hero-meta-item">
            <span className="hero-meta-key">DATE</span>
            <span className="hero-meta-val"><span className="accent">July</span> 2026</span>
          </div>
          <div className="hero-meta-item">
            <span className="hero-meta-key">ENTRY</span>
            <span className="hero-meta-val">Free <span className="accent">·</span> Funded</span>
          </div>
          <div className="hero-meta-item">
            <span className="hero-meta-key">FORMAT</span>
            <span className="hero-meta-val">10 Teams · Single Elim</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;
window.Navbar = Navbar;
window.HeroNotifyField = HeroNotifyField;