const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = {
  "showSplash": true,
  "heroMode": "me",
  "accent": "#e50914",
  "playful": true
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const D = window.IFECHILL;

  const [entered, setEntered] = useState(false);
  const [profile, setProfile] = useState(null);
  const [modalItem, setModalItem] = useState(null);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    if (!t.showSplash && !entered) {
      setEntered(true);
      if (!profile) setProfile(D.profiles[0]);
    }
  }, [t.showSplash]);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
  }, [t.accent]);

  const pickProfile = (p) => { setProfile(p); setEntered(true); window.scrollTo(0, 0); };
  const openModal = (item) => setModalItem(item);
  const backToSplash = () => { setEntered(false); setProfile(null); window.scrollTo(0, 0); };

  const heroIsProject = t.heroMode === "project";
  const featured = D.projects[0];
  const billboardData = heroIsProject
    ? {
        series: "FEATURED PROJECT",
        logoLines: featured.title.toUpperCase().split(" "),
        tagline: featured.description,
        meta: [featured.year, featured.genre, featured.tech.join(" · "), featured.type],
        rating: "Rated DEV-MA · " + featured.tech.slice(0, 3).join(", "),
        match: featured.match,
        badges: featured.badges.length ? featured.badges : ["NEW"],
        video: featured.video,
        image: featured.image && featured.images[0],
      }
    : D.billboard;

  const aboutItem = {
    __about: true,
    title: D.identity.name,
    type: D.identity.title,
    year: "Now Showing",
    runtime: D.identity.location,
    genre: "Software Developer · Web Systems",
    match: D.billboard.match,
    rating: D.billboard.rating,
    badges: ["NEW"],
    tech: ["HTML", "CSS", "JavaScript", "PHP", "React", "C#", "SQL"],
    description:
      "Aspiring Software Developer & Web Systems Designer based in Barnsley, UK. Former Web System Developer at ZZC System Ltd, building responsive, dynamic web systems in HTML, PHP, jQuery, SCSS and SQL. Self-driven, disciplined and obsessed with growth (Especailly muscle growth). Recently studyed Cyber Security & Networking while still programmig oacationally but constantly training hard. My 330 lb deadlift is just one of the things I'm most proud of.",
    highlights: [
      "Web System Developer — ZZC System Ltd (Nov 2024 – Jun 2025)",
      "Studied HN Flex Computing — Cyber Security & Networking (Merit)",
      "T-Level Digital Production, Design & Development — Merit",
      "🏆 Cook of the Month ",
	  "💪 330 lb deadlift, 2 yr 5 mo training",
    ],
    shot: "hero portrait",
    video: "Videos/pool.mp4",
    links: [{ label: "Visit TomsThrone.com", url: D.identity.siteUrl }],
  };

  const scrollToWork = () => {
    const el = document.getElementById("row-projects");
    if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: "smooth" });
  };

  return (
    <div className="ix-root">
      {!entered && t.showSplash && (
        <Splash profiles={D.profiles} onPick={pickProfile} />
      )}

      {entered && (
        <div className="ix-app">
          <Nav scrolled={scrolled} profile={profile} onLogo={t.showSplash ? backToSplash : undefined} />

          <Billboard
            data={billboardData}
            playful={t.playful}
            profile={profile}
            onMoreInfo={() => openModal(aboutItem)}
            onScrollWork={scrollToWork}
          />

          <main className="ix-rows">
            <Row title="Featured Projects" anchor="row-projects">
              {D.projects.map((p) => (
                <TitleCard key={p.id} item={p} playful={t.playful} onOpen={openModal} />
              ))}
            </Row>

            <Row title="Continue Watching — In Progress" anchor="row-continue">
              {D.continueWatching.map((p) => (
                <TitleCard key={p.id} item={p} playful={t.playful} onOpen={openModal} showProgress />
              ))}
            </Row>

            <Row title="Education & Qualifications" anchor="row-education">
              {D.education.map((p) => (
                <TitleCard key={p.id} item={p} playful={t.playful} onOpen={openModal} />
              ))}
            </Row>

            <Row title="Work Experience" anchor="row-work">
              {D.work.map((p) => (
                <TitleCard key={p.id} item={p} playful={t.playful} onOpen={openModal} />
              ))}
            </Row>

            <Row title="Skills & Tech Stack" anchor="row-skills" variant="skills-track">
              {D.skills.map((s) => (
                <SkillCard key={s.name} item={s} playful={t.playful} />
              ))}
            </Row>

            <Row title="A Day In My Life" anchor="row-day" variant="day-track">
              {D.myWeek.map((d, i) => (
                <DayCard key={d.id} item={d} index={i} playful={t.playful} />
              ))}
            </Row>
          </main>

          <footer className="ix-footer">
            <div className="ix-footer-links">
              <a href={D.identity.github} target="_blank" rel="noopener">GitHub ↗</a>
              <a href={D.identity.linkedin} target="_blank" rel="noopener">LinkedIn ↗</a>
              <a href={D.identity.siteUrl} target="_blank" rel="noopener">{D.identity.site} ↗</a>
            </div>
            <p className="ix-footer-name">{D.identity.name} — {D.identity.title}</p>
            <p className="ix-footer-fine">
              IFE & CHILL is an original, Netflix-inspired portfolio concept. Not affiliated with Netflix.However, if they wanna hire me, then im open to it.
            </p>
          </footer>
        </div>
      )}

      <Modal item={modalItem} playful={t.playful} onClose={() => setModalItem(null)} />

      <TweaksPanel>
        <TweakSection label="Experience" />
        <TweakToggle label="Profile splash screen" value={t.showSplash}
          onChange={(v) => setTweak("showSplash", v)} />
        <TweakRadio label="Hero billboard" value={t.heroMode}
          options={["me", "project"]}
          onChange={(v) => setTweak("heroMode", v)} />
        <TweakToggle label="Playful Netflix chrome" value={t.playful}
          onChange={(v) => setTweak("playful", v)} />
        <TweakSection label="Brand" />
        <TweakColor label="Accent color" value={t.accent}
          options={["#e50914", "#2a6fdb", "#1f8a5b", "#7a5ae0", "#f5b50a"]}
          onChange={(v) => setTweak("accent", v)} />
      </TweaksPanel>
    </div>
  );
}

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