// CORE-03 · Role-based home redirect  (standalone interstitial — no admin shell)
// On login, route to the role's default landing screen.
const RedirectPage = () => {
  const Ic = window.Icons;
  // Signed-in user → resolved role + landing destination.
  const role = "Plant Manager";
  const dest = { label: "Procurement dashboard", href: "../procurement/ADM-PROC-01.html" };

  const ROUTES = [
    { role: "Plant Manager",       dest: "Procurement dashboard", icon: "Procurement" },
    { role: "Procurement Officer", dest: "Procurement dashboard", icon: "Procurement" },
    { role: "QC Inspector",        dest: "QC queue",              icon: "QC" },
    { role: "Gatekeeper",          dest: "Gate dashboard",        icon: "Truck" },
    { role: "Warehouse Lead",      dest: "Warehouse overview",    icon: "Box" },
    { role: "Maintenance Tech",    dest: "Maintenance board",     icon: "Maintenance" },
  ];

  const [count, setCount] = useState(3);
  useEffect(() => {
    if (count <= 0) { window.location.href = dest.href; return; }
    const id = setTimeout(() => setCount(c => c - 1), 800);
    return () => clearTimeout(id);
  }, [count]);

  return (
    <div className="auth-pane" style={{ minHeight: "100vh" }}>
      <div className="auth-redirect">
        <div className="auth-spinner"/>
        <div className="auth-h1">Signing you in…</div>
        <div className="auth-p">We're taking you to the home screen for your role.</div>

        <div className="auth-role-card">
          <span className="auth-role-ic"><Ic.User size={22}/></span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12, color: "var(--muted-foreground)" }}>Signed in as</div>
            <div style={{ fontSize: 16, fontWeight: 600 }}>Caroline Wanjala</div>
          </div>
          <span className="badge badge-avocado"><Ic.Shield size={11}/> {role}</span>
        </div>

        <div style={{ fontSize: 12, color: "var(--muted-foreground)", textAlign: "left", margin: "0 2px 6px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em" }}>Role → home screen</div>
        <div className="auth-route-list">
          {ROUTES.map(r => {
            const RI = Ic[r.icon] || Ic.Home;
            const on = r.role === role;
            return (
              <div key={r.role} className={`auth-route-item ${on ? "on" : ""}`}>
                <RI size={15} className="r"/>
                <span>{r.role}</span>
                <span className="dest">{on ? <><Ic.ArrowRight size={12} style={{ verticalAlign: "-2px" }}/> {r.dest}</> : r.dest}</span>
              </div>
            );
          })}
        </div>

        <div className="auth-form" style={{ marginTop: 20 }}>
          <Button variant="primary" className="auth-submit" icon={Ic.ArrowRight} onClick={()=> { window.location.href = dest.href; }}>
            Continue to {dest.label} {count > 0 ? `(${count})` : ""}
          </Button>
          <Button variant="ghost" onClick={()=> { window.location.href = "CORE-01.html"; }}>Not you? Sign out</Button>
        </div>
      </div>
    </div>
  );
};

const coreRedirectRoot = ReactDOM.createRoot(document.getElementById("root"));
coreRedirectRoot.render(<ToastProvider><RedirectPage/></ToastProvider>);