// app.jsx — router, global state, tweaks
const { useState: uSapp, useEffect: uEapp, useCallback } = React;

// Forest-green brand stays fixed; the highlight is the only color that varies.
const HIGHLIGHTS = {
  leaf:   { c: "#7AAE33", tint: "#ecf2dd" },   // logo lime-leaf (default)
  olive:  { c: "#8C8A45", tint: "#f0eedd" },   // logo olive/gold
  carrot: { c: "#EA6A22", tint: "#fbe9dc" },   // logo carrot
};
const FONTS = {
  Tajawal: '"Tajawal", system-ui, sans-serif',
  Cairo: '"Cairo", system-ui, sans-serif',
  "IBM Plex": '"IBM Plex Sans Arabic", system-ui, sans-serif',
};
const CORNERS = { soft: ["22px", "14px", "14px"], rounded: ["28px", "18px", "16px"], crisp: ["12px", "9px", "10px"] };

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "font": "Tajawal",
  "highlight": "carrot",
  "corners": "crisp",
  "heroLayout": "full"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // ----- routing -----
  const parseHash = () => {
    const h = (window.location.hash || "#home").slice(1);
    const [route, id] = h.split("/");
    return { route: route || "home", id: id || null };
  };
  const [nav, setNav] = uSapp(parseHash);
  const go = useCallback((route, id) => {
    window.location.hash = id ? `${route}/${id}` : route;
    window.scrollTo(0, 0);
  }, []);
  uEapp(() => {
    const onHash = () => { setNav(parseHash()); window.scrollTo(0, 0); };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  // ----- data state -----
  const [patients, setPatients] = uSapp(PATIENTS);
  const [published, setPublished] = uSapp(TESTIMONIALS);
  const [pending, setPending] = uSapp(PENDING_FEEDBACK);
  const [toast, toastNode] = useToast();

  // ----- apply tweaks to CSS vars (forest brand fixed; highlight + font + shape vary) -----
  uEapp(() => {
    const r = document.documentElement.style;
    const h = HIGHLIGHTS[t.highlight] || HIGHLIGHTS.leaf;
    r.setProperty("--font", FONTS[t.font] || FONTS.Tajawal);
    r.setProperty("--leaf", h.c);
    r.setProperty("--green", h.c); r.setProperty("--green-tint", h.tint);
    const [c1, c2, c3] = CORNERS[t.corners] || CORNERS.soft;
    r.setProperty("--r-card", c1); r.setProperty("--r-sm", c2); r.setProperty("--r-btn", c3);
  }, [t.font, t.highlight, t.corners]);

  // ----- actions -----
  const openPatient = (id) => go("patient", id);
  const markFollowed = (id) => {
    setPatients((ps) => ps.map((p) => p.id === id ? { ...p, followed: true, remaining: Math.max(0, p.remaining - 1) } : p));
    toast("اتسجلت المتابعة ✓");
  };
  const addSession = (id, s) => {
    setPatients((ps) => ps.map((p) => {
      if (p.id !== id) return p;
      const tl = [...(p.timeline || []), { t: "session", date: s.date, text: "جلسة متابعة", meta: [`الوزن ${s.weight} كجم`, `الالتزام ${s.commit}/10`], note: s.note || undefined }];
      const weights = s.weight ? [...p.weights, { d: s.date.replace(" 2026", ""), w: +s.weight }] : p.weights;
      return { ...p, remaining: Math.max(0, p.remaining - 1), last: s.date.replace(" 2026", ""), followed: true, timeline: tl, weights };
    }));
    toast("اتسجلت الجلسة ✓");
  };
  const submitFeedback = (f) => {
    setPending((ps) => [{ id: "u" + Date.now(), date: "النهاردة", ...f }, ...ps]);
  };
  const approveFeedback = (id) => {
    setPending((ps) => {
      const f = ps.find((x) => x.id === id);
      if (f) setPublished((pub) => [{ id: "pub" + id, name: f.name, rating: f.rating, text: f.text }, ...pub]);
      return ps.filter((x) => x.id !== id);
    });
    toast("اتنشر الرأي ✓");
  };
  const rejectFeedback = (id) => { setPending((ps) => ps.filter((x) => x.id !== id)); toast("اترفض الرأي"); };

  // ----- render route -----
  let screen;
  switch (nav.route) {
    case "feedback": screen = <FeedbackWall nav={go} testimonials={published} onSubmit={submitFeedback} />; break;
    case "login": screen = <Login nav={go} />; break;
    case "dashboard": screen = <Dashboard nav={go} patients={patients} openPatient={openPatient} />; break;
    case "today": screen = <Today nav={go} patients={patients} openPatient={openPatient} markFollowed={markFollowed} />; break;
    case "cases": screen = <Cases nav={go} patients={patients} openPatient={openPatient} />; break;
    case "patient": screen = <Patient nav={go} patient={patients.find((p) => p.id === nav.id)} back={() => go("cases")} addSession={addSession} quickAction={toast} />; break;
    case "admin-feedback": screen = <Moderation nav={go} pending={pending} published={published} onApprove={approveFeedback} onReject={rejectFeedback} />; break;
    case "settings": screen = <Settings nav={go} />; break;
    default: screen = <Landing nav={go} testimonials={published} t={t} />;
  }

  return (
    <>
      {screen}
      {toastNode}
    </>
  );
}

// small helper kept tidy
ReactDOM.createRoot(document.getElementById("root")).render(<App />);