/* app.jsx — shell: auth gate, top bar, user chip, router, Tweaks. */

const FONT_PAIRS = {
  classic: { display: '"Lora", Georgia, serif', ui: '"Be Vietnam Pro", system-ui, sans-serif', label: "Cổ điển" },
  magazine: { display: '"Noto Serif", Georgia, serif', ui: '"Be Vietnam Pro", system-ui, sans-serif', label: "Thanh lịch" },
  modern: { display: '"Be Vietnam Pro", system-ui, sans-serif', ui: '"Be Vietnam Pro", system-ui, sans-serif', label: "Hiện đại" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#3d8a8c",
  "font": "classic",
  "thumb": 220,
  "dark": false
}/*EDITMODE-END*/;

function UserChip({ user, onLogout }) {
  const [open, setOpen] = React.useState(false);
  const roleLabel = user.role === "studio" ? "Studio" : "Cô dâu & chú rể";
  return (
    <div className="user-chip-wrap">
      <button className="user-chip" onClick={() => setOpen((v) => !v)}>
        <Avatar name={user.name} size={30} role={user.role} />
        <div className="uc-text">
          <div className="uc-name">{user.name}</div>
          <div className="uc-role">{roleLabel}</div>
        </div>
        <Icon name="more" size={16} style={{ color: "var(--ink-3)" }} />
      </button>
      {open && (
        <>
          <div className="uc-backdrop" onClick={() => setOpen(false)} />
          <div className="uc-menu">
            <div className="uc-menu-head">
              <Avatar name={user.name} size={36} role={user.role} />
              <div><div className="uc-name">{user.name}</div><div className="uc-role">{roleLabel}</div></div>
            </div>
            <div className="divider" />
            <button className="uc-item" onClick={() => { setOpen(false); onLogout(); }}>
              <Icon name="right" size={16} /> Đăng xuất
            </button>
          </div>
        </>
      )}
    </div>
  );
}

function App() {
  const store = useStore();
  const auth = useAuth();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = React.useState({ type: "dashboard" });

  React.useEffect(() => {
    const r = document.documentElement;
    r.setAttribute("data-theme", t.dark ? "dark" : "light");
    r.style.setProperty("--accent", t.accent);
    r.style.setProperty("--accent-soft", `color-mix(in oklch, ${t.accent} ${t.dark ? 22 : 14}%, transparent)`);
    r.style.setProperty("--accent-ink", `color-mix(in oklch, ${t.accent} 75%, ${t.dark ? "white 14%" : "black 12%"})`);
    const fp = FONT_PAIRS[t.font] || FONT_PAIRS.classic;
    r.style.setProperty("--font-display", fp.display);
    r.style.setProperty("--font-ui", fp.ui);
    r.style.setProperty("--thumb", t.thumb + "px");
  }, [t]);

  const openProject = (id) => setView({ type: "project", id });
  const home = () => setView({ type: "dashboard" });
  const logout = () => { auth.logout(); setView({ type: "dashboard" }); };

  if (!auth.user) {
    return (
      <>
        <LoginScreen store={store} auth={auth} />
        <TweaksDock t={t} setTweak={setTweak} store={store} />
      </>
    );
  }

  const role = auth.user.role;
  const configured = window.cpConfigured && window.cpConfigured();
  // Chế độ thật: RLS đã lọc nên project nào load được là project khách được phép.
  const allowedIds = role === "client"
    ? (configured ? store._data.projects.map((p) => p.id) : auth.user.projectIds)
    : null;
  // guard: client cannot open a project they weren't granted
  const safeView = view.type === "project" && allowedIds && !allowedIds.includes(view.id)
    ? { type: "dashboard" } : view;

  return (
    <div className="app">
      <header className="topbar">
        <div className="brand">
          <div className="brand-mark"><Icon name="camera" size={19} sw={1.9} /></div>
          <div>
            <div className="brand-name">Chọn Ảnh</div>
            <div className="brand-sub">{role === "studio" ? "Studio · Quản lý" : "Album của bạn"}</div>
          </div>
        </div>
        <div className="topbar-spacer" />
        <button className="icon-btn" title={t.dark ? "Chế độ sáng" : "Chế độ tối"} onClick={() => setTweak("dark", !t.dark)}>
          <Icon name={t.dark ? "sun" : "moon"} size={19} />
        </button>
        <UserChip user={auth.user} onLogout={logout} />
      </header>

      <main className="main">
        {role === "studio" ? (
          safeView.type === "dashboard"
            ? <StudioDashboard store={store} onOpen={openProject} />
            : <StudioProjectView projectId={safeView.id} store={store} onBack={home} />
        ) : (
          safeView.type === "dashboard"
            ? <ClientDashboard store={store} onOpen={openProject} allowedIds={allowedIds} auth={auth} />
            : <ClientProjectView projectId={safeView.id} store={store} onBack={home} />
        )}
      </main>

      <TweaksDock t={t} setTweak={setTweak} store={store} />
    </div>
  );
}

function TweaksDock({ t, setTweak, store }) {
  return (
    <TweaksPanel>
      <TweakSection label="Màu sắc" />
      <TweakColor label="Màu nhấn" value={t.accent}
        options={["#3d8a8c", "#3f6fb0", "#b08a4a", "#b5727a", "#6c7a52"]}
        onChange={(v) => setTweak("accent", v)} />
      <TweakToggle label="Chế độ tối" value={t.dark} onChange={(v) => setTweak("dark", v)} />
      <TweakSection label="Kiểu chữ" />
      <TweakRadio label="Cặp font" value={t.font}
        options={[{ value: "classic", label: "Cổ điển" }, { value: "magazine", label: "Tạp chí" }, { value: "modern", label: "Hiện đại" }]}
        onChange={(v) => setTweak("font", v)} />
      <TweakSection label="Lưới ảnh" />
      <TweakSlider label="Kích thước ô" value={t.thumb} min={150} max={320} step={10} unit="px"
        onChange={(v) => setTweak("thumb", v)} />
      <TweakSection label="Dữ liệu" />
      <TweakButton label="Khôi phục ảnh mẫu" onClick={() => store.resetAll()} />
    </TweaksPanel>
  );
}

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