"use client";
import { useState, useMemo, useEffect, useCallback } from "react";
import { PEPTIDES } from "@/data/peptides";
import { COMBOS } from "@/data/combos";
import { CAT_META } from "@/data/categories";
import { LIGHT, DARK, getStyles } from "@/theme/theme";
import { loadLS, saveLS } from "@/lib/storage";
import { saveToCloud, loadFromCloud } from "@/lib/db";
import WikiView from "@/components/WikiView";
import Calculator from "@/components/Calculator";
import StackBuilder from "@/components/StackBuilder";
import ChatAssistant from "@/components/ChatAssistant";
import ComboView from "@/components/ComboView";
import InjectionGuide from "@/components/InjectionGuide";
import OnboardingModal from "@/components/OnboardingModal";
import DisclaimerModal from "@/components/DisclaimerModal";
import ProgressTracker from "@/components/ProgressTracker";
import DoseReminders from "@/components/DoseReminders";

function GenderModal({ onSelect }) {
  return (
    <div
      style={{
        position: "fixed",
        inset: 0,
        background: "rgba(0,0,0,0.95)",
        zIndex: 500,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: 20,
        overflowY: "auto",
        WebkitOverflowScrolling: "touch",
      }}
    >
      <div
        style={{
          background: "#080e1c",
          border: "1px solid #1e293b",
          borderRadius: 20,
          maxWidth: 480,
          width: "100%",
          padding: "36px 32px",
          boxShadow: "0 32px 80px rgba(0,0,0,0.9)",
          margin: "auto",
        }}
      >
        <div style={{ textAlign: "center", marginBottom: 28 }}>
          <div style={{ fontSize: 32, marginBottom: 12 }}>⚗️</div>
          <div style={{ fontSize: 20, fontWeight: 900, color: "#f1f5f9", marginBottom: 8 }}>
            Personalize Your Experience
          </div>
          <div style={{ fontSize: 13, color: "#475569", lineHeight: 1.7 }}>
            We'll tailor compound recommendations, dosing notes, and AI advice to your biology. You can
            change this anytime.
          </div>
        </div>
        <div style={{ display: "flex", gap: 12, marginBottom: 16 }}>
          <button
            onClick={() => onSelect("male")}
            style={{
              flex: 1,
              padding: "22px 16px",
              background: "#0a1628",
              border: "2px solid #3b82f644",
              borderRadius: 14,
              cursor: "pointer",
              transition: "all 0.18s",
              fontFamily: "inherit",
              textAlign: "center",
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.borderColor = "#3b82f6";
              e.currentTarget.style.background = "#0f1f38";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.borderColor = "#3b82f644";
              e.currentTarget.style.background = "#0a1628";
            }}
          >
            <div style={{ fontSize: 30, marginBottom: 8 }}>♂</div>
            <div style={{ fontSize: 15, fontWeight: 800, color: "#f1f5f9", marginBottom: 6 }}>Male</div>
            <div style={{ fontSize: 11, color: "#475569", lineHeight: 1.6 }}>
              TRT support · GH optimization
              <br />
              Performance · Body recomp
            </div>
          </button>
          <button
            onClick={() => onSelect("female")}
            style={{
              flex: 1,
              padding: "22px 16px",
              background: "#160a1e",
              border: "2px solid #ec489944",
              borderRadius: 14,
              cursor: "pointer",
              transition: "all 0.18s",
              fontFamily: "inherit",
              textAlign: "center",
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.borderColor = "#ec4899";
              e.currentTarget.style.background = "#1e0f28";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.borderColor = "#ec489944";
              e.currentTarget.style.background = "#160a1e";
            }}
          >
            <div style={{ fontSize: 30, marginBottom: 8 }}>♀</div>
            <div style={{ fontSize: 15, fontWeight: 800, color: "#f1f5f9", marginBottom: 6 }}>Female</div>
            <div style={{ fontSize: 11, color: "#475569", lineHeight: 1.6 }}>
              Hormonal balance · Skin & aging
              <br />
              Longevity · Fertility
            </div>
          </button>
        </div>
        <button
          onClick={() => onSelect("skip")}
          style={{
            width: "100%",
            padding: "10px",
            background: "transparent",
            border: "1px solid #1e293b",
            borderRadius: 10,
            color: "#475569",
            fontSize: 12,
            cursor: "pointer",
            fontFamily: "inherit",
          }}
        >
          Skip — show everything
        </button>
        <div style={{ marginTop: 14, fontSize: 10, color: "#1e293b", textAlign: "center" }}>
          Stored locally on your device only
        </div>
      </div>
    </div>
  );
}

export default function App() {
  const [view, setView] = useState("wiki");
  const [search, setSearch] = useState("");
  const [categories, setCategories] = useState(new Set());
  const [selected, setSelected] = useState(null);
  const [tab, setTab] = useState("overview");
  const [cloudStatus, setCloudStatus] = useState("idle");
  const [showOnboarding, setShowOnboarding] = useState(false);
  const [showDisclaimer, setShowDisclaimer] = useState(false);
  const [showGenderModal, setShowGenderModal] = useState(false);

  const [hydrated, setHydrated] = useState(false);
  const [dark, setDark] = useState(true);
  const [gender, setGenderState] = useState(null);
  const [myStacks, setMyStacks] = useState([]);
  const [savedCalcs, setSavedCalcs] = useState([]);
  const [favorites, setFavorites] = useState([]);
  const [savedBlends, setSavedBlends] = useState([]);
  const [stackName, setStackName] = useState("");
  const [stackGoal, setStackGoal] = useState("");
  const [stackItems, setStackItems] = useState([]);

  useEffect(() => {
    const localStacks = loadLS("pw_stacks", []);
    const localCalcs = loadLS("pw_calcs", []);
    const localFavs = loadLS("pw_favs", []);
    const localBlends = loadLS("pw_blends", []);

    setDark(loadLS("pw_dark", true));
    setGenderState(loadLS("pw_gender", null));
    setMyStacks(localStacks);
    setSavedCalcs(localCalcs);
    setFavorites(localFavs);
    setSavedBlends(localBlends);
    setStackName(loadLS("pw_sb_name", ""));
    setStackGoal(loadLS("pw_sb_goal", ""));
    setStackItems(loadLS("pw_sb_items", []));
    setHydrated(true);

    if (!localStorage.getItem("pw_disclaimer_accepted")) {
      setShowDisclaimer(true);
    } else if (!localStorage.getItem("pw_gender_set")) {
      setShowGenderModal(true);
    } else if (!localStorage.getItem("pw_onboarded")) {
      setShowOnboarding(true);
    }

    setCloudStatus("syncing");
    loadFromCloud()
      .then((cloud) => {
        if (cloud) {
          const stacks = cloud.stacks || [];
          const calcs = cloud.calcs || [];
          const favs = cloud.favs || [];
          const blends = cloud.blends || [];
          setMyStacks(stacks);
          setSavedCalcs(calcs);
          setFavorites(favs);
          setSavedBlends(blends);
          saveLS("pw_stacks", stacks);
          saveLS("pw_calcs", calcs);
          saveLS("pw_favs", favs);
          saveLS("pw_blends", blends);
          setCloudStatus("synced");
        } else {
          if (localStacks.length || localCalcs.length || localFavs.length) {
            saveToCloud({ stacks: localStacks, calcs: localCalcs, favs: localFavs, blends: localBlends }).then(
              () => setCloudStatus("synced")
            );
          } else {
            setCloudStatus("synced");
          }
        }
      })
      .catch(() => setCloudStatus("error"));
  }, []);

  useEffect(() => { if (hydrated) saveLS("pw_dark", dark); }, [dark, hydrated]);
  useEffect(() => { if (hydrated) saveLS("pw_gender", gender); }, [gender, hydrated]);
  useEffect(() => { if (hydrated) saveLS("pw_sb_name", stackName); }, [stackName, hydrated]);
  useEffect(() => { if (hydrated) saveLS("pw_sb_goal", stackGoal); }, [stackGoal, hydrated]);
  useEffect(() => { if (hydrated) saveLS("pw_sb_items", stackItems); }, [stackItems, hydrated]);

  const setGender = (g) => {
    setGenderState(g === "skip" ? null : g);
    localStorage.setItem("pw_gender_set", "true");
  };

  const handleGenderSelect = (g) => {
    setGender(g);
    setShowGenderModal(false);
    if (!localStorage.getItem("pw_onboarded")) setShowOnboarding(true);
  };

  const syncToCloud = useCallback((stacks, calcs, favs, blends) => {
    setCloudStatus("syncing");
    saveToCloud({ stacks, calcs, favs, blends })
      .then(() => setCloudStatus("synced"))
      .catch(() => setCloudStatus("error"));
  }, []);

  const isPremium = process.env.NEXT_PUBLIC_ADMIN_CID === "pv-admin-matt" || false;
  const T = dark ? DARK : LIGHT;
  const styles = useMemo(() => getStyles(T), [T]);

  const [savedMsg, setSavedMsg] = useState(false);
  const [calcPeptide, setCalcPeptide] = useState("");
  const [vialMg, setVialMg] = useState("");
  const [bacWaterMl, setBacWaterMl] = useState("");
  const [desiredDose, setDesiredDose] = useState("");
  const [doseUnit, setDoseUnit] = useState("mcg");
  const [calcSaved, setCalcSaved] = useState(false);

  const peptide = selected ? PEPTIDES.find((p) => p.id === selected) : null;
  const catMeta = peptide ? CAT_META[peptide.category] : null;

  const filtered = useMemo(() => {
    const matchCat = (p) => categories.size === 0 || categories.has(p.category);
    const q = search.toLowerCase().trim();
    if (!q) return PEPTIDES.filter(matchCat);
    const score = (p) => {
      const name = p.name.toLowerCase();
      const full = (p.full || "").toLowerCase();
      if (name === q) return 100;
      if (name.startsWith(q)) return 90;
      if (name.includes(q)) return 80;
      if (full.includes(q)) return 70;
      if ((p.tags || []).some(t => t.toLowerCase().includes(q))) return 60;
      if ((p.blurb || "").toLowerCase().includes(q)) return 50;
      return 0;
    };
    return PEPTIDES
      .filter(p => matchCat(p) && score(p) > 0)
      .sort((a, b) => score(b) - score(a));
  }, [search, categories]);

  useEffect(() => {
    if (selected && !filtered.find((p) => p.id === selected)) setSelected(null);
  }, [filtered, selected]);

  const calcResult = useMemo(() => {
    const vial = parseFloat(vialMg);
    const water = parseFloat(bacWaterMl);
    const dose = parseFloat(desiredDose);
    if (!vial || !water || !dose || vial <= 0 || water <= 0 || dose <= 0) return null;
    const concMgPerMl = vial / water;
    const doseMg = doseUnit === "mcg" ? dose / 1000 : dose;
    const volumeMl = doseMg / concMgPerMl;
    const units = volumeMl * 100;
    if (units > 100) return { error: "Dose exceeds full syringe capacity (100 units). Check your inputs." };
    if (units < 0.5) return { error: "Calculated volume is extremely small (<0.5 units). Verify your dose and vial size." };
    return {
      concMgPerMl: concMgPerMl.toFixed(3),
      concMcgPerMl: (concMgPerMl * 1000).toFixed(1),
      doseMg: doseMg.toFixed(4),
      volumeMl: volumeMl.toFixed(3),
      units: units.toFixed(1),
    };
  }, [vialMg, bacWaterMl, desiredDose, doseUnit]);

  const saveStack = () => {
    if (!stackItems.length) return;
    const name = stackName.trim() || `Stack #${myStacks.length + 1}`;
    const updated = [
      { id: Date.now(), name, goal: stackGoal, peptides: stackItems, date: new Date().toLocaleDateString() },
      ...myStacks,
    ];
    setMyStacks(updated);
    saveLS("pw_stacks", updated);
    setStackName("");
    setStackGoal("");
    setStackItems([]);
    setSavedMsg(true);
    setTimeout(() => setSavedMsg(false), 2500);
    syncToCloud(updated, savedCalcs, favorites, savedBlends);
  };

  const saveCalc = () => {
    if (!calcResult || calcResult.error) return;
    const updated = [
      {
        id: Date.now(),
        name: calcPeptide || "Custom",
        vialMg, bacWaterMl, desiredDose, doseUnit,
        units: calcResult.units,
        date: new Date().toLocaleDateString(),
      },
      ...savedCalcs,
    ];
    setSavedCalcs(updated);
    saveLS("pw_calcs", updated);
    setCalcSaved(true);
    setTimeout(() => setCalcSaved(false), 2000);
    syncToCloud(myStacks, updated, favorites, savedBlends);
  };

  const toggleFav = (id) => {
    const updated = favorites.includes(id) ? favorites.filter((x) => x !== id) : [...favorites, id];
    setFavorites(updated);
    saveLS("pw_favs", updated);
    syncToCloud(myStacks, savedCalcs, updated, savedBlends);
  };

  const setMyStacksAndSync = (updater) => {
    setMyStacks((prev) => {
      const updated = typeof updater === "function" ? updater(prev) : updater;
      saveLS("pw_stacks", updated);
      syncToCloud(updated, savedCalcs, favorites, savedBlends);
      return updated;
    });
  };

  const setSavedCalcsAndSync = (updater) => {
    setSavedCalcs((prev) => {
      const updated = typeof updater === "function" ? updater(prev) : updater;
      saveLS("pw_calcs", updated);
      syncToCloud(myStacks, updated, favorites, savedBlends);
      return updated;
    });
  };

  const setSavedBlendsAndSync = (updater) => {
    setSavedBlends((prev) => {
      const updated = typeof updater === "function" ? updater(prev) : updater;
      saveLS("pw_blends", updated);
      syncToCloud(myStacks, savedCalcs, favorites, updated);
      return updated;
    });
  };

  const openCalcFor = useCallback((name) => {
    setCalcPeptide(name);
    const p = PEPTIDES.find((x) => x.name === name);
    if (p) {
      setVialMg("5");
      setBacWaterMl("2");
      const firstDose = p.dosing?.[0]?.v || "";
      const num = firstDose.match(/[\d.]+/)?.[0];
      if (num) {
        setDesiredDose(num);
        setDoseUnit(firstDose.toLowerCase().includes("mg") && !firstDose.toLowerCase().includes("mcg") ? "mg" : "mcg");
      }
    }
    setView("calc");
  }, []);

  const handleOnboardingComplete = (starterStack) => {
    setShowOnboarding(false);
    if (starterStack) {
      const newStack = {
        id: Date.now(),
        name: starterStack.name,
        goal: "",
        peptides: starterStack.peptides,
        date: new Date().toLocaleDateString(),
      };
      const updated = [newStack, ...myStacks];
      setMyStacks(updated);
      saveLS("pw_stacks", updated);
      syncToCloud(updated, savedCalcs, favorites, savedBlends);
      setView("stacks");
    }
  };

  const cloudDot = {
    idle: { label: "" },
    syncing: { label: "⟳" },
    synced: { label: "☁️" },
    error: { label: "⚠" },
  }[cloudStatus];

  // NAV — added Progress tracker tab
  const NAV = [
    { key: "wiki",     label: "Wiki",     emoji: "📖", sub: PEPTIDES.length + " peptides" },
    { key: "calc",     label: "Recon",    emoji: "🧮", sub: "Reconstitution" },
    { key: "stacks",   label: "Stacks",   emoji: "🔗", sub: myStacks.length + " saved" },
    { key: "tracker",  label: "Progress", emoji: "📊", sub: "Track results" },
    { key: "reminders", label: "Reminders", emoji: "⏰", sub: "Dose alerts" },
    { key: "guide",    label: "Guide",    emoji: "💉", sub: "Injection" },
    { key: "chat",     label: "AI",       emoji: "🤖", sub: "Ask anything" },
  ];

  return (
    <div
      style={{
        fontFamily: "'Trebuchet MS',Georgia,serif",
        background: T.bg,
        minHeight: "100dvh",
        color: T.text,
        transition: "background 0.2s, color 0.2s",
      }}
    >
      <nav
        style={{
          background: T.navBg,
          position: "sticky",
          top: 0,
          zIndex: 200,
          boxShadow: "0 4px 20px rgba(37,99,235,0.35)",
        }}
      >
        {/* Row 1 — Logo + controls */}
        <div style={{ display: "flex", alignItems: "center", padding: "6px 10px", borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
          <div className="nav-logo" style={{ display: "flex", alignItems: "center", gap: 6, flex: 1 }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0 }}>
              <rect x="3" y="8" width="18" height="13" rx="2.5" fill="rgba(255,255,255,0.18)" stroke="rgba(255,255,255,0.7)" strokeWidth="1.5" />
              <path d="M8 8V6a4 4 0 1 1 8 0v2" stroke="rgba(255,255,255,0.7)" strokeWidth="1.5" strokeLinecap="round" />
              <circle cx="12" cy="14.5" r="2" fill="rgba(255,255,255,0.7)" />
              <line x1="12" y1="16.5" x2="12" y2="18.5" stroke="rgba(255,255,255,0.7)" strokeWidth="1.5" strokeLinecap="round" />
            </svg>
            <div>
              <div style={{ fontSize: 12, fontWeight: 900, letterSpacing: 2, color: "#fff", whiteSpace: "nowrap" }}>PEPTIDE VAULT</div>
              <div style={{ fontSize: 6, color: "rgba(255,255,255,0.45)", letterSpacing: 2 }}>BIOHACKER'S REFERENCE</div>
            </div>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
            {cloudStatus !== "idle" && <span style={{ fontSize: 13, lineHeight: 1 }}>{cloudDot.label}</span>}
            <button
              onClick={() => setDark((d) => !d)}
              aria-label="Toggle dark mode"
              style={{ background: "rgba(255,255,255,0.12)", border: "1px solid rgba(255,255,255,0.25)", color: "#fff", fontSize: 13, width: 28, height: 28, borderRadius: 7, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}
            >
              {dark ? "☀️" : "🌙"}
            </button>
            <span className="edu-badge" style={{ background: "rgba(255,255,255,0.12)", border: "1px solid rgba(255,255,255,0.25)", color: "#fff", fontSize: 7, padding: "3px 6px", borderRadius: 20, letterSpacing: 1, fontWeight: 700, whiteSpace: "nowrap" }}>EDU ONLY</span>
          </div>
        </div>

        {/* Row 2 — All tabs, equal width, all visible */}
        <div style={{ display: "flex", alignItems: "stretch" }}>
          {NAV.map((t) => (
            <button
              key={t.key}
              onClick={() => setView(t.key)}
              aria-label={t.label}
              style={{
                background: view === t.key ? "rgba(255,255,255,0.15)" : "transparent",
                border: "none",
                borderBottom: view === t.key ? "2px solid #fff" : "2px solid transparent",
                color: view === t.key ? "#fff" : "rgba(255,255,255,0.55)",
                padding: "6px 0",
                cursor: "pointer",
                fontFamily: "inherit",
                fontSize: 9,
                fontWeight: view === t.key ? 700 : 400,
                transition: "all 0.2s",
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "center",
                gap: 2,
                flex: 1,
              }}
            >
              <span style={{ fontSize: 16, lineHeight: 1 }}>{t.emoji}</span>
              <span style={{ whiteSpace: "nowrap", letterSpacing: 0.2 }}>{t.label}</span>
            </button>
          ))}
        </div>
      </nav>

      {view === "wiki" && (
        <WikiView
          search={search} setSearch={setSearch}
          categories={categories} setCategories={setCategories}
          selected={selected} setSelected={setSelected}
          tab={tab} setTab={setTab}
          filtered={filtered} peptide={peptide} catMeta={catMeta}
          favorites={favorites} toggleFav={toggleFav}
          stackItems={stackItems} setStackItems={setStackItems}
          setView={setView} openCalcFor={openCalcFor}
          dark={dark} T={T} styles={styles}
          gender={gender} setGender={setGender}
        />
      )}
      {view === "calc" && (
        <Calculator
          calcPeptide={calcPeptide} openCalcFor={openCalcFor}
          vialMg={vialMg} setVialMg={setVialMg}
          bacWaterMl={bacWaterMl} setBacWaterMl={setBacWaterMl}
          desiredDose={desiredDose} setDesiredDose={setDesiredDose}
          doseUnit={doseUnit} setDoseUnit={setDoseUnit}
          calcResult={calcResult} saveCalc={saveCalc} calcSaved={calcSaved}
          savedCalcs={savedCalcs} setSavedCalcs={setSavedCalcsAndSync}
          dark={dark} T={T} styles={styles}
        />
      )}
      {view === "stacks" && (
        <StackBuilder
          stackName={stackName} setStackName={setStackName}
          stackGoal={stackGoal} setStackGoal={setStackGoal}
          stackItems={stackItems} setStackItems={setStackItems}
          myStacks={myStacks} setMyStacks={setMyStacksAndSync}
          saveStack={saveStack} savedMsg={savedMsg}
          setSelected={setSelected} setView={setView} setTab={setTab}
          savedCalcs={savedCalcs} setSavedCalcs={setSavedCalcsAndSync}
          favorites={favorites} setFavorites={setFavorites}
          savedBlends={savedBlends} setSavedBlends={setSavedBlendsAndSync}
          isPremium={isPremium} onUpgrade={() => setView("chat")}
          T={T} styles={styles}
        />
      )}
      {view === "tracker" && (
        <ProgressTracker
          T={T}
          styles={styles}
          myStacks={myStacks}
        />
      )}
      {view === "reminders" && (
        <DoseReminders T={T} styles={styles} myStacks={myStacks} />
      )}
      {view === "guide" && <InjectionGuide />}
      {view === "chat" && <ChatAssistant T={T} styles={styles} gender={gender} />}
      {view === "blends" && (
        <ComboView T={T} styles={styles} savedBlends={savedBlends} setSavedBlends={setSavedBlendsAndSync} />
      )}

      {showDisclaimer && (
        <DisclaimerModal
          T={T}
          onAccept={() => {
            setShowDisclaimer(false);
            if (!localStorage.getItem("pw_gender_set")) setShowGenderModal(true);
            else if (!localStorage.getItem("pw_onboarded")) setShowOnboarding(true);
          }}
        />
      )}
      {showGenderModal && !showDisclaimer && <GenderModal onSelect={handleGenderSelect} />}
      {showOnboarding && !showDisclaimer && !showGenderModal && (
        <OnboardingModal T={T} onComplete={handleOnboardingComplete} />
      )}

      <style>{`
        * { box-sizing: border-box; }
        input::placeholder { color: ${T.textFaint}; }
        ::-webkit-scrollbar { width: 5px; height: 5px; }
        ::-webkit-scrollbar-track { background: ${T.scrollTrack}; }
        ::-webkit-scrollbar-thumb { background: ${T.scrollBar}; border-radius: 4px; }
        input[type=number]::-webkit-inner-spin-button { opacity: 0.4; }
        nav div::-webkit-scrollbar { display: none; }
        @media (max-width: 420px) { .nav-logo { display: none !important; } .edu-badge { display: none !important; } }
        /* PWA safe area — Dynamic Island + home indicator */
        nav {
          padding-top: max(0px, env(safe-area-inset-top));
          padding-left: max(8px, env(safe-area-inset-left));
          padding-right: max(8px, env(safe-area-inset-right));
        }
        /* Fix full height in PWA / standalone mode */
        @media all and (display-mode: standalone) {
          body { min-height: 100vh; }
        }
      `}</style>
    </div>
  );
}