// Main App
function App() {
  const H = window.kretaHelpers;
  const DATA = window.CORVEE_DATA;

  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const h = () => setTick(t => t + 1);
    window.addEventListener("kreta-state", h);
    return () => window.removeEventListener("kreta-state", h);
  }, []);

  // Login gate (familie-wachtwoord)
  const [unlocked, setUnlocked] = React.useState(() => !!localStorage.getItem("kreta-auth-hash"));

  const [state, setState] = React.useState(() => H.loadState());
  React.useEffect(() => { setState(H.loadState()); }, [tick]);
  const [screen, setScreen] = React.useState("vandaag");
  const [tweaksOpen, setTweaksOpen] = React.useState(false);
  const [tweaksAvailable, setTweaksAvailable] = React.useState(false);
  const [demoDateStr, setDemoDateStr] = React.useState(null);
  const [confettiKey, setConfettiKey] = React.useState(0);
  const [toasts, setToasts] = React.useState([]);
  const now = useNow(1000);

  const me = state.meId ? H.getPerson(state.meId) : null;
  const demoDate = demoDateStr ? H.parseDateTime(demoDateStr, now.toTimeString().slice(0, 5)) : null;

  React.useEffect(() => { if (state.meId !== undefined) H.saveState(state); }, [state.meId]);

  React.useEffect(() => {
    const h = () => setConfettiKey(k => k + 1);
    window.addEventListener("task-done", h);
    return () => window.removeEventListener("task-done", h);
  }, []);

  React.useEffect(() => {
    if (!me || !state.notifEnabled) return;
    const today = demoDate || now;
    const nextTask = H.nextTaskForPerson(me.id, today);
    if (!nextTask) return;
    const mins = (nextTask.dateTime - today) / 60000;
    const shownKey = `${nextTask.date}:${nextTask.taskId}`;
    if (mins > 0 && mins <= 30 && state.lastNotif !== shownKey) {
      const msg = `${nextTask.type.icon} ${nextTask.type.label} om ${nextTask.type.time}`;
      setToasts(t => [...t, { id: Date.now(), title: "Bijna aan de beurt!", msg, icon: "⏰" }]);
      if ("Notification" in window && Notification.permission === "granted") {
        new Notification("Corvee Kreta", { body: msg, icon: "🇬🇷" });
      }
      setState(s => ({ ...s, lastNotif: shownKey }));
    }
  }, [now, me, state.notifEnabled]);

  const dismissToast = (id) => setToasts(t => t.filter(x => x.id !== id));

  // Push-opt-in: banner tonen als user nog geen subscription heeft
  const [hasPushSub, setHasPushSub] = React.useState(true); // default true = niet tonen tot we weten
  const [pushDismissedAt, setPushDismissedAt] = React.useState(() => {
    const v = parseInt(localStorage.getItem("kreta-push-dismissed-at") || "0");
    return isNaN(v) ? 0 : v;
  });

  React.useEffect(() => {
    let cancelled = false;
    async function check() {
      try {
        if (!("serviceWorker" in navigator) || !window.kretaBackend?.hasBackend?.()) {
          if (!cancelled) setHasPushSub(true);
          return;
        }
        const reg = await navigator.serviceWorker.getRegistration();
        const sub = reg ? await reg.pushManager.getSubscription() : null;
        if (!cancelled) setHasPushSub(!!sub);
      } catch {
        if (!cancelled) setHasPushSub(true);
      }
    }
    check();
    const t = setInterval(check, 30000);
    return () => { cancelled = true; clearInterval(t); };
  }, [me?.id]);

  // Admin detection
  const [adminIds, setAdminIds] = React.useState(["marije", "martin"]);
  React.useEffect(() => {
    window.kretaBackend?.getAdminIds?.().then(ids => ids && setAdminIds(ids));
  }, [tick]);
  const isAdmin = me && adminIds.includes(me.id);

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

  if (!unlocked) {
    return <LoginGate onUnlock={() => setUnlocked(true)} />;
  }

  if (!me) {
    return <NamePicker onPick={(id) => setState(s => ({ ...s, meId: id }))} />;
  }

  const screens = {
    admin: <AdminScreen me={me} goBack={() => setScreen("meer")} />,
    vandaag: <VandaagScreen me={me} state={state} setState={setState} now={now} demoDate={demoDate} />,
    week: <WeekScreen me={me} state={state} setState={setState} now={now} demoDate={demoDate} />,
    boodsch: <BoodschappenScreen me={me} now={now} demoDate={demoDate} />,
    grieks: <GrieksScreen now={now} demoDate={demoDate} />,
    leaderboard: <LeaderboardScreen now={now} demoDate={demoDate} />,
    wall: <WallScreen me={me} isAdmin={isAdmin} />,
    random: <RandomizerScreen me={me} />,
    program: <ProgramScreen me={me} now={now} demoDate={demoDate} />,
    voting: <VotingScreen me={me} />,
    mij: <MijnScreen me={me} state={state} setState={setState} now={now} demoDate={demoDate} onSwitchUser={() => setState(s => ({ ...s, meId: null }))} />,
    meer: <MeerScreen go={setScreen} me={me} isAdmin={isAdmin} onSwitchUser={() => setState(s => ({ ...s, meId: null }))} onLogout={() => { localStorage.removeItem("kreta-auth-hash"); localStorage.removeItem("kreta-corvee-live-v1"); location.reload(); }} />,
  };

  const meerScreens = ["leaderboard","wall","random","program","voting","mij","meer","admin"];

  const canPush = window.kretaBackend?.hasBackend?.() && "Notification" in window && Notification.permission !== "denied";
  const showPushBanner = canPush && !hasPushSub && (Date.now() - pushDismissedAt > 24 * 60 * 60 * 1000);
  const enablePush = async () => {
    const res = await window.kretaActions?.registerPush?.();
    if (res?.ok) {
      setHasPushSub(true);
      setToasts(t => [...t, { id: Date.now(), title: "🔔 Meldingen aan", msg: "Je krijgt nu push-meldingen van de familie", icon: "🫒" }]);
    }
  };

  const dismissPush = () => {
    localStorage.setItem("kreta-push-dismissed-at", String(Date.now()));
    setPushDismissedAt(Date.now());
  };

  return (
    <div className="app">
      <div className="topbar">
        <div className="logo">
          <span style={{ fontSize: 22 }}>🇬🇷</span>
          <span>Corvee Kreta</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <div style={{ fontSize: 11, color: "var(--muted)", textAlign: "right" }}>
            Hallo,<br />
            <b style={{ color: me.color }}>{me.name}</b>
          </div>
          <div onClick={() => { if (isAdmin) setState(s => ({ ...s, meId: null })); }} style={{ cursor: isAdmin ? "pointer" : "default" }}>
            <Avatar person={me} size={36} />
          </div>
        </div>
      </div>

      {showPushBanner && (
        <div style={{
          margin: "10px 16px", padding: "12px 14px",
          background: "linear-gradient(135deg, #1a5490, #0d3a6b)",
          color: "white", borderRadius: 14,
          display: "flex", alignItems: "center", gap: 12,
          boxShadow: "0 6px 18px rgba(13,58,107,0.25)",
        }}>
          <div style={{ fontSize: 28 }}>🔔</div>
          <div style={{ flex: 1, fontSize: 13, lineHeight: 1.4 }}>
            <b>Zet meldingen aan</b><br/>
            <span style={{ opacity: 0.85 }}>Zo mis je geen taken of berichten</span>
          </div>
          <button onClick={enablePush} style={{
            appearance: "none", border: "none", cursor: "pointer",
            background: "white", color: "#1a5490",
            padding: "8px 14px", borderRadius: 999,
            fontWeight: 700, fontSize: 12, fontFamily: "inherit",
          }}>Aanzetten</button>
          <button onClick={dismissPush} style={{
            appearance: "none", border: "none", cursor: "pointer",
            background: "transparent", color: "white", opacity: 0.7,
            fontSize: 18, padding: 4,
          }}>✕</button>
        </div>
      )}

      {screens[screen]}

      <nav className="bottom-nav">
        <button className={screen === "vandaag" ? "active" : ""} onClick={() => setScreen("vandaag")}>
          <span className="icon">☀️</span><span>Vandaag</span>
        </button>
        <button className={screen === "week" ? "active" : ""} onClick={() => setScreen("week")}>
          <span className="icon">📅</span><span>Schema</span>
        </button>
        <button className={screen === "boodsch" ? "active" : ""} onClick={() => setScreen("boodsch")}>
          <span className="icon">🛒</span><span>Super</span>
        </button>
        <button className={screen === "grieks" ? "active" : ""} onClick={() => setScreen("grieks")}>
          <span className="gr-icon">Ω</span><span>Grieks</span>
        </button>
        <button className={meerScreens.includes(screen) ? "active" : ""} onClick={() => setScreen("meer")}>
          <span className="icon">☰</span><span>Meer</span>
        </button>
      </nav>

      <Confetti trigger={confettiKey} />

      <div className="toast-wrap">
        {toasts.map(t => (
          <div key={t.id} className="toast" onClick={() => dismissToast(t.id)}>
            <div style={{ fontSize: 22 }}>{t.icon}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 700, fontSize: 14 }}>{t.title}</div>
              <div style={{ fontSize: 13, color: "var(--ink-soft)" }}>{t.msg}</div>
            </div>
            <div style={{ fontSize: 11, color: "var(--muted)" }}>✕</div>
          </div>
        ))}
      </div>

      {tweaksAvailable && (
        <>
          <button className="btn" onClick={() => setTweaksOpen(o => !o)} style={{
            position: "fixed", bottom: 90, right: 16, zIndex: 160,
            width: 48, height: 48, borderRadius: "50%", padding: 0,
            background: "white", color: "var(--aegean-deep)",
            boxShadow: "0 8px 20px rgba(13,58,107,0.2)",
            fontSize: 20,
          }}>⚙️</button>
          {tweaksOpen && (
            <div className="tweak-panel">
              <h4>Tweaks</h4>
              <div className="tweak-row">
                <label>Push-meldingen</label>
                <input type="checkbox" checked={!!state.notifEnabled} onChange={async e => {
                  if (e.target.checked) {
                    if ("Notification" in window) await Notification.requestPermission();
                    if (window.kretaActions?.registerPush) await window.kretaActions.registerPush();
                  }
                  setState(s => ({ ...s, notifEnabled: e.target.checked }));
                }} />
              </div>
              <div className="tweak-row" style={{ flexDirection: "column", alignItems: "stretch", gap: 6 }}>
                <label>Demo-datum</label>
                <select
                  value={demoDateStr || "live"}
                  onChange={e => setDemoDateStr(e.target.value === "live" ? null : e.target.value)}
                  style={{ padding: 6, borderRadius: 8, border: "1px solid var(--line)", fontFamily: "inherit" }}
                >
                  <option value="live">Echte datum ({now.toISOString().slice(0,10)})</option>
                  {DATA.days.map(d => (
                    <option key={d.date} value={d.date}>{H.formatDateNL(d.date)}</option>
                  ))}
                </select>
              </div>
              <div className="tweak-row" style={{ flexDirection: "column", alignItems: "stretch", gap: 6 }}>
                <label>Taken leegmaken</label>
                <button className="btn btn-ghost" style={{ fontSize: 12, padding: "6px 10px", border: "1px solid var(--line)" }} onClick={() => {
                  setState(s => ({ ...s, done: {} }));
                }}>Reset afvinken</button>
              </div>
            </div>
          )}
        </>
      )}
    </div>
  );
}

// Meer-menu: hub naar extra schermen
function MeerScreen({ go, me, isAdmin, onSwitchUser, onLogout }) {
  void onSwitchUser;
  const items = [
    { id: "mij", icon: "🧿", title: "Mijn profiel", sub: "Stats & komende taken" },
    { id: "leaderboard", icon: "🏆", title: "Leaderboard", sub: "Wie is de MVP?" },
    { id: "program", icon: "🏖️", title: "Dagprogramma", sub: "Plan activiteiten" },
    { id: "voting", icon: "🗳️", title: "Stemmen", sub: "Wat gaan we doen/eten?" },
    { id: "wall", icon: "📌", title: "Prikbord", sub: "Berichten voor de groep" },
    { id: "random", icon: "🎲", title: "Klusjeswiel", sub: "Laat het lot beslissen" },
    ...(isAdmin ? [{ id: "admin", icon: "🛠️", title: "Admin panel", sub: "Push · logs · beheer" }] : []),
  ];
  return (
    <div className="screen">
      <h1 className="serif" style={{ fontSize: 30, margin: "8px 0 2px", letterSpacing: -0.6 }}>Meer</h1>
      <div className="section-sub">Nog meer vakantie-gereedschap</div>
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        {items.map((it, i) => (
          <div
            key={it.id}
            onClick={() => go(it.id)}
            style={{
              display: "flex", alignItems: "center", gap: 14,
              padding: "14px 16px",
              cursor: "pointer",
              borderBottom: i < items.length - 1 ? "1px solid var(--line-soft)" : "none",
            }}
          >
            <div style={{ fontSize: 26, width: 40, textAlign: "center" }}>{it.icon}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 700, fontSize: 15 }}>{it.title}</div>
              <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 1 }}>{it.sub}</div>
            </div>
            <div style={{ color: "var(--muted)" }}>›</div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 16, textAlign: "center", display: "flex", gap: 8, justifyContent: "center", flexWrap: "wrap" }}>
        {isAdmin && (
          <button className="btn btn-ghost" onClick={onSwitchUser} style={{ fontSize: 13 }}>
            ↻ Van persoon wisselen
          </button>
        )}
        {onLogout && (
          <button className="btn btn-ghost" onClick={onLogout} style={{ fontSize: 13, color: "#9b2226" }}>
            🚪 Uitloggen
          </button>
        )}
      </div>
    </div>
  );
}

window.MeerScreen = MeerScreen;

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