import { useState, useContext } from "react";
import {
  IonHeader,
  IonToolbar,
  IonButtons,
  IonButton,
  IonTitle,
  IonIcon,
  IonContent,
  IonBadge,
  IonBackButton,
  useIonRouter,
} from "@ionic/react";
import { Context } from "../context/contex";
import Unlock from "../pages/authed/Unlock";
import NotLoggedIn from "./Noauth";

import {
  menuOutline,
  notificationsOutline,
  homeOutline,
  constructOutline,
  barChartOutline,
  settingsOutline,
  logOutOutline,
  callOutline,
  keyOutline,
  arrowBackOutline,
} from "ionicons/icons";

import ThemeToggle from "./ThemeToggle";

interface AppShellProps {
  children: React.ReactNode;
  showBack?: boolean;
  showLogo?: boolean;
  title?: string;
}

const AppShell: React.FC<AppShellProps> = ({
  children,
  showBack = true,
  showLogo = false,
  title = "",
}) => {
  const [open, setOpen] = useState(false);
  const context = useContext(Context);
  const router = useIonRouter();

  if (!context) {
    // 🔥 NEVER return plain divs in Ionic layout
    return <IonContent fullscreen />;
  }

  const { unreadAlerts, logOut, userInfo, auth } = context;

  /* 🔐 Decide what content to show */
  let pageContent: React.ReactNode;

  if (!userInfo) {
    pageContent = <NotLoggedIn />;
  } else if (!auth) {
    pageContent = <Unlock />;
  } else {
    pageContent = children;
   
  }

  return (
    <>
      {/* MENU (only when logged in & unlocked) */}
      {auth && userInfo && (
        <>
          <div className={`custom-menu ${open ? "open" : ""}`}>
            <div className="menu-header">
              <h2>Menu</h2>
              <button className="close-btn" onClick={() => setOpen(false)}>
                ✕
              </button>
            </div>

            <ul className="menu-list">
              <li
                onClick={() => {
                  setOpen(false);
                  router.push("/", "forward", "replace");
                }}
              >
                <IonIcon icon={homeOutline} /> Home
              </li>

              <li
                onClick={() => {
                  setOpen(false);
                  router.push("/services", "forward", "replace");
                }}
              >
                <IonIcon icon={constructOutline} /> Our Services
              </li>

              <li
                onClick={() => {
                  setOpen(false);
                  router.push("/transactions", "forward", "replace");
                }}
              >
                <IonIcon icon={barChartOutline} /> My Transactions
              </li>

              <li
                onClick={() => {
                  setOpen(false);
                  router.push("/settings", "forward", "replace");
                }}
              >
                <IonIcon icon={settingsOutline} /> Settings
              </li>

              <li
                onClick={() => {
                  setOpen(false);
                  router.push("/contact", "forward", "replace");
                }}
              >
                <IonIcon icon={callOutline} /> Contact
              </li>

              {userInfo?.is_admin === 1 && (
                <li
                  onClick={() => {
                    setOpen(false);
                    router.push("/admin", "forward", "replace");
                  }}
                >
                  <IonIcon icon={keyOutline} /> Admin
                </li>
              )}

              <li
                className="logout"
                onClick={() => {
                  setOpen(false);
                  logOut();
                }}
              >
                <IonIcon icon={logOutOutline} /> Logout
              </li>
            </ul>
          </div>

          {/* BACKDROP */}
          <div
            className={`menu-backdrop ${open ? "show" : ""}`}
            onClick={() => setOpen(false)}
          />
        </>
      )}

      {/* HEADER */}
      {auth && userInfo && (
        <IonHeader>
          <IonToolbar  style={{ padding: "10px"  }}>
            <IonButtons slot="start">
              {showBack ? (
                <IonBackButton
                  text=""
                  icon={arrowBackOutline}
                  defaultHref="/"
                />
              ) : (
                <IonButton onClick={() => setOpen(true)}>
                  <IonIcon icon={menuOutline} />
                </IonButton>
              )}
            </IonButtons>

            <IonTitle className="ion-text-center">
              {showLogo ? (
                <img
                 // src="/assets/logo.png"
                  className="paynaire-logo"
                  alt="Logo"
                />
              ) : (
                title
              )}
            </IonTitle>

            <IonButtons slot="end">
              <ThemeToggle iconOnly />

              <IonButton routerLink="/notifications">
                <IonIcon icon={notificationsOutline} />
                {unreadAlerts > 0 && (
                  <IonBadge
                    color="danger"
                    style={{
                      position: "absolute",
                      top: "-6px",
                      right: "-10px",
                      fontSize: "10px",
                      padding: "2px 5px",
                      borderRadius: "10px",
                    }}
                  >
                    {unreadAlerts > 9 ? "9+" : unreadAlerts}
                  </IonBadge>
                )}
              </IonButton>
            </IonButtons>
          </IonToolbar>
        </IonHeader>
      )}

      {/* ✅ IonContent is ALWAYS rendered */}
      <IonContent fullscreen className="ion-content-bg ion-padding">
        {pageContent}
      </IonContent>
    </>
  );
};

export default AppShell;