// 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"],
};

// Exposed so the admin screen can render its own role switcher.
Object.assign(window, { ROLES, RAIL_FOR_ROLE });

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 }}>{window.STORE_MARK}</div>
        <h1>{window.STORE_NAME}</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>
  );
}

// Live print-server status pill — polls /api/print-status every 30s.
function PrintStatus({ collapsed }) {
  const [state, setState] = React.useState("checking"); // "online" | "offline" | "disabled" | "checking"
  const [info, setInfo] = React.useState(null);

  React.useEffect(() => {
    if (window.PRINT_ENABLED === false) { setState("disabled"); return; }
    let cancelled = false;
    const check = async () => {
      try {
        const r = await fetch("/api/print-status", { cache: "no-store" });
        if (cancelled) return;
        const data = await r.json().catch(() => ({}));
        if (r.ok && data.ok) {
          setState("online");
          setInfo(data);
        } else {
          setState("offline");
          setInfo(data);
        }
      } catch (_) {
        if (!cancelled) { setState("offline"); setInfo(null); }
      }
    };
    check();
    const id = setInterval(check, 30000);
    return () => { cancelled = true; clearInterval(id); };
  }, []);

  const label = state === "online" ? "Printer online"
              : state === "offline" ? "Printer offline"
              : state === "disabled" ? "Printer disabled"
              : "Checking printer…";
  const tooltip = state === "online" && info?.printers
    ? `Printer online · ${Object.keys(info.printers).filter((k) => info.printers[k]).length} configured`
    : label;

  return (
    <div className={"print-status print-status-" + state} title={tooltip}>
      <span className="dot" />
      {!collapsed && <span className="mono">{label}</span>}
    </div>
  );
}

window.PrintStatus = PrintStatus;

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]);

  // Rail collapse — persisted per device. Display role (kiosk) defaults to
  // collapsed so the customer-facing screen uses the full width.
  const [railCollapsed, setRailCollapsed] = React.useState(() => {
    const stored = localStorage.getItem("railCollapsed");
    if (stored === "1") return true;
    if (stored === "0") return false;
    return role === "display";
  });
  React.useEffect(() => {
    localStorage.setItem("railCollapsed", railCollapsed ? "1" : "0");
  }, [railCollapsed]);

  const initials = (user.email || "").slice(0, 2).toUpperCase();
  // The customer display is a kiosk view. Kitchen and Floor screens are also
  // full-screen for staff who only ever use that one screen (their own role
  // matches the active role) — they get a sign-out button in the screen
  // header instead of needing the rail. Admin's Admin tab also hides the rail
  // (in-tab role switcher takes over).
  const isKiosk = activeRole === "display";
  const singleRole = (activeRole === "kitchen" && role === "kitchen")
                  || (activeRole === "waitress" && role === "waitress");
  const hideRail = isKiosk || singleRole || (activeRole === "admin" && role === "admin");

  return (
    <div className={"app role-" + activeRole + (hideRail ? " kiosk" : "") + (railCollapsed && !hideRail ? " rail-collapsed" : "")}>
      {!hideRail && (
        <aside className="role-rail">
          <button
            className="rail-toggle mono"
            onClick={() => setRailCollapsed((v) => !v)}
            title={railCollapsed ? "Expand sidebar" : "Collapse sidebar"}
            aria-label={railCollapsed ? "Expand sidebar" : "Collapse sidebar"}
          >{railCollapsed ? "›" : "‹"}</button>
          <div className="rail-brand">
            <div className="rail-mark mono">{window.STORE_MARK}</div>
            <div className="rail-brand-text">
              <div className="rail-brand-name">{window.STORE_NAME}</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)}
                title={r.label}
              >
                <div className="rail-tab-label">{r.label}</div>
                <div className="rail-tab-desc mono">{r.desc}</div>
              </button>
            ))}
          </nav>
          <div className="rail-foot mono">
            <PrintStatus collapsed={railCollapsed} />
            <div className="rail-user">
              <div className="rail-avatar" title={user.email}>{initials}</div>
              <div className="rail-user-text">
                <div>{user.email}</div>
                <div className="muted">{role}</div>
              </div>
            </div>
            <button className="rail-signout" onClick={() => firebase.auth().signOut()} title="Sign out">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 />);