const campusRoleTabs = {
  student: ["Home", "Timetable", "Attendance", "Profile"],
  lecturer: ["Session", "Roster", "Alerts", "Report"],
  admin: ["Dashboard", "Approvals", "Monitor", "Alerts"]
};

function MobileStat({ label, value, tone = "teal" }) {
  return (
    <div className={`mobile-stat ${tone}`}>
      <span>{label}</span>
      <strong>{value}</strong>
    </div>
  );
}

function MobileList({ items }) {
  return (
    <div className="mobile-list">
      {items.map((item) => (
        <div className="mobile-list-row" key={item.title}>
          <div>
            <strong>{item.title}</strong>
            <span>{item.detail}</span>
          </div>
          <Badge tone={item.tone || "blue"}>{item.state}</Badge>
        </div>
      ))}
    </div>
  );
}

function useLocalToast() {
  const [toast, setToast] = React.useState("");
  const timerRef = React.useRef(null);

  React.useEffect(() => () => {
    if (timerRef.current) clearTimeout(timerRef.current);
  }, []);

  function showToast(message) {
    if (timerRef.current) clearTimeout(timerRef.current);
    setToast(message);
    timerRef.current = setTimeout(() => setToast(""), 2400);
  }

  const toastElement = toast ? (
    <div className="mobile-toast-wrap">
      <div className="mobile-toast" role="status">{toast}</div>
    </div>
  ) : null;

  return [toastElement, showToast];
}

function SubViewHead({ onBack, title }) {
  return (
    <div className="mobile-detail-head">
      <button aria-label="Back" onClick={onBack} type="button"><Icon name="chevronleft" size={17} /></button>
      <strong>{title}</strong>
    </div>
  );
}

function WebPortalBanner({ note }) {
  return (
    <div className="web-portal-banner">
      <Icon name="grid" size={15} />
      <div>
        <strong>Web-first administration</strong>
        <span>{note || "Full admin tools live on the web portal — mobile is for quick actions."}</span>
      </div>
    </div>
  );
}

function CampusMobileApp({ dataset, checkedIn, onRunCheckIn, initialRole = "student" }) {
  const [authenticatedRole, setAuthenticatedRole] = React.useState(null);
  const [activeTab, setActiveTab] = React.useState(campusRoleTabs[initialRole][0]);
  const [showAccountSheet, setShowAccountSheet] = React.useState(false);
  const tabs = authenticatedRole ? campusRoleTabs[authenticatedRole] : [];

  function loginAs(role) {
    setAuthenticatedRole(role);
    setActiveTab(campusRoleTabs[role][0]);
    setShowAccountSheet(false);
  }

  function logout() {
    setAuthenticatedRole(null);
    setActiveTab(campusRoleTabs[initialRole][0]);
    setShowAccountSheet(false);
  }

  function changeTab(tab) {
    setActiveTab(tab);
    setShowAccountSheet(false);
  }

  if (!authenticatedRole) {
    return (
      <PhoneFrame product="CampusOS" hideNav>
        <CampusLoginView defaultRole={initialRole} onLogin={loginAs} />
      </PhoneFrame>
    );
  }

  let roleView = null;
  if (authenticatedRole === "student") {
    roleView = (
      <StudentMobileView
        checkedIn={checkedIn}
        dataset={dataset}
        activeTab={activeTab}
        onLogout={logout}
        onRunCheckIn={onRunCheckIn}
      />
    );
  } else if (authenticatedRole === "lecturer") {
    roleView = (
      <LecturerMobileView
        checkedIn={checkedIn}
        dataset={dataset}
        activeTab={activeTab}
        onLogout={logout}
        onRunCheckIn={onRunCheckIn}
        setActiveTab={changeTab}
      />
    );
  } else if (authenticatedRole === "admin") {
    roleView = <AdminMobileView dataset={dataset} checkedIn={checkedIn} activeTab={activeTab} onLogout={logout} setActiveTab={changeTab} />;
  }

  return (
    <PhoneFrame navItems={tabs} product="CampusOS" activeNav={activeTab} onNavChange={changeTab}>
      <MobileAccountHeader dataset={dataset} role={authenticatedRole} onAccount={() => setShowAccountSheet(!showAccountSheet)} />
      {showAccountSheet && (
        <MobileAccountSheet
          accountName={initialScopeName(authenticatedRole)}
          manageLabel={authenticatedRole === "student" ? "Open profile" : null}
          onLogout={logout}
          onManage={authenticatedRole === "student" ? () => changeTab("Profile") : null}
          role={authenticatedRole}
          scope={`${authenticatedRole} account`}
        />
      )}
      {roleView}
    </PhoneFrame>
  );
}

Object.assign(window, {
  CampusMobileApp,
  MobileList,
  MobileStat,
  SubViewHead,
  WebPortalBanner,
  useLocalToast,
  campusRoleTabs
});