// App shell — login gate, then role rail + active screen.
const ROLES = [
  { id: "cashier",  label: "Cashier",  desc: "Take orders" },
  { id: "kitchen",  label: "Kitchen",  desc: "Make tickets" },
  { id: "waitress", label: "Floor",    desc: "Run orders" },
  { id: "display",  label: "Display",  desc: "Customer screen" },
  { id: "admin",    label: "Admin",    desc: "Manage" },
];

// Admin sees every rail; staff see their own role only.
const RAIL_FOR_ROLE = {
  admin:    ["cashier", "kitchen", "waitress", "display", "admin"],
  cashier:  ["cashier", "display"],
  kitchen:  ["kitchen"],
  waitress: ["waitress"],
  display:  ["display"],
};

function App() {
  return (
    <POSProvider>
      <Gate />
    </POSProvider>
  );
}

function Gate() {
  const { user, role, authReady } = usePOS();
  if (!authReady) return <div className="center"><div className="muted mono">Loading…</div></div>;
  if (!user) return <LoginScreen />;
  if (!role) return <NoRoleScreen />;
  return <AppShell />;
}

function LoginScreen() {
  const [email, setEmail] = React.useState("");
  const [pw, setPw] = React.useState("");
  const [err, setErr] = React.useState("");
  const [busy, setBusy] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setErr(""); setBusy(true);
    try { await firebase.auth().signInWithEmailAndPassword(email, pw); }
    catch (ex) { setErr(ex.message); }
    finally { setBusy(false); }
  };

  return (
    <div className="center">
      <form className="login-card" onSubmit={submit}>
        <div className="rail-mark mono" style={{ marginBottom: 16 }}>KON</div>
        <h1>Kedai Oma Nana</h1>
        <p className="muted">Sign in with your employee account.</p>
        <label className="field"><span className="field-label mono">Email</span>
          <input type="email" required value={email} onChange={(e) => setEmail(e.target.value)} />
        </label>
        <label className="field"><span className="field-label mono">Password</span>
          <input type="password" required value={pw} onChange={(e) => setPw(e.target.value)} />
        </label>
        <button className="btn-primary full" type="submit" disabled={busy}>{busy ? "…" : "Sign in"}</button>
        {err && <div className="login-err mono">{err}</div>}
        <p className="muted mono" style={{ marginTop: 18, fontSize: 12 }}>
          Customer pre-booking? <a href="prebook.html">Open the booking page</a>
        </p>
      </form>
    </div>
  );
}

function NoRoleScreen() {
  return (
    <div className="center">
      <div className="login-card">
        <h2>No role assigned</h2>
        <p className="muted">An admin must add a role document for your account before you can use the POS.</p>
        <button className="btn-ghost full" onClick={() => firebase.auth().signOut()}>Sign out</button>
      </div>
    </div>
  );
}

function AppShell() {
  const { activeRole, setActiveRole, toast, user, role } = usePOS();
  useTick(15000);
  const allowed = RAIL_FOR_ROLE[role] || [];
  const visibleRoles = ROLES.filter((r) => allowed.includes(r.id));
  React.useEffect(() => {
    if (visibleRoles.length && !allowed.includes(activeRole)) setActiveRole(visibleRoles[0].id);
  }, [role]);

  const initials = (user.email || "").slice(0, 2).toUpperCase();

  return (
    <div className={"app role-" + activeRole}>
      <aside className="role-rail">
        <div className="rail-brand">
          <div className="rail-mark mono">KON</div>
          <div className="rail-brand-text">
            <div className="rail-brand-name">Kedai Oma Nana</div>
            <div className="rail-brand-sub mono">POS · {fmtDay()}</div>
          </div>
        </div>
        <nav className="rail-nav">
          {visibleRoles.map((r) => (
            <button
              key={r.id}
              className={"rail-tab" + (activeRole === r.id ? " active" : "")}
              onClick={() => setActiveRole(r.id)}
            >
              <div className="rail-tab-label">{r.label}</div>
              <div className="rail-tab-desc mono">{r.desc}</div>
            </button>
          ))}
        </nav>
        <div className="rail-foot mono">
          <div className="rail-user">
            <div className="rail-avatar">{initials}</div>
            <div>
              <div>{user.email}</div>
              <div className="muted">{role}</div>
            </div>
          </div>
          <button className="rail-signout" onClick={() => firebase.auth().signOut()}>Sign out</button>
          <div className="rail-clock">{fmtClock()}</div>
        </div>
      </aside>

      <main className="screen" data-screen-label={activeRole}>
        {activeRole === "cashier"  && <CashierScreen />}
        {activeRole === "kitchen"  && <KitchenScreen />}
        {activeRole === "waitress" && <WaitressScreen />}
        {activeRole === "display"  && <CustomerDisplayScreen />}
        {activeRole === "admin"    && <AdminScreen />}
      </main>

      <ReceiptModal />
      {toast && <div className="toast mono">{toast.msg}</div>}
    </div>
  );
}

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