import { useContext } from "react"
import { AuthContext } from "../context/AuthContext"

export default function Sidebar({
  setPage,
  currentPage
}) {

  const { user, logout } =
    useContext(AuthContext)

  const role =
    user?.role?.toLowerCase()

  const menuUser = [
    {
      key: "dashboard",
      icon: "🏠",
      label: "Dashboard"
    },

    {
      key: "history",
      icon: "📜",
      label: "History Pembelian"
    },
  ]

  const menuAdmin = [
    {
      key: "admin",
      icon: "📊",
      label: "Admin Dashboard"
    },

    // {
    //   key: "history",
    //   icon: "📦",
    //   label: "Semua Pesanan"
    // },
  ]

  const menu =
    role === "admin"
      ? menuAdmin
      : menuUser

  return (

    <div style={s.sidebar}>

      {/* LOGO */}

      <div style={s.logoWrap}>

        <div style={s.logoIcon}>
          🥚
        </div>

        <div>

          <div style={s.logoText}>
            Sadewa
          </div>

          <div style={s.logoSub}>
            Egg Management
          </div>

        </div>

      </div>

      {/* USER CARD */}

      <div style={s.userCard}>

        <div style={s.avatar}>
          {
            (user?.nama || "G")[0]
              .toUpperCase()
          }
        </div>

        <div>

          <div style={s.userName}>
            {user?.nama || "Guest"}
          </div>

          <div style={s.userRole}>
            {role || "user"}
          </div>

        </div>

      </div>

      {/* NAVIGATION */}

      <nav style={s.nav}>

        {menu.map(m => (

          <button
            key={m.key}

            onClick={() =>
              setPage(m.key)
            }

            style={{
              ...s.menuBtn,

              ...(currentPage === m.key
                ? s.menuBtnActive
                : {})
            }}
          >

            <span style={s.menuIcon}>
              {m.icon}
            </span>

            <span style={s.menuLabel}>
              {m.label}
            </span>

            {currentPage === m.key && (

              <div style={s.activeWrap}>

                <span style={s.activeText}>
                  Active
                </span>

                <span style={s.activeDot} />

              </div>

            )}

          </button>

        ))}

      </nav>

      {/* FOOTER */}

      <div style={{ flex: 1 }} />

      <button
        onClick={logout}
        style={s.logoutBtn}
      >

        <span>
          🚪
        </span>

        Logout

      </button>

    </div>

  )
}

const s = {

  sidebar: {

    width: 260,

    minHeight: "100vh",

    padding: "22px 16px",

    boxSizing: "border-box",

    display: "flex",

    flexDirection: "column",

    background: `
      linear-gradient(
        180deg,
        rgba(124,45,18,0.98),
        rgba(154,52,18,0.96),
        rgba(194,65,12,0.95)
      )
    `,

    borderRight:
      "1px solid rgba(255,255,255,0.08)",

    backdropFilter: "blur(12px)",

    boxShadow:
      "10px 0 30px rgba(0,0,0,0.25)",
  },

  logoWrap: {

    display: "flex",

    alignItems: "center",

    gap: 12,

    marginBottom: 28,

    padding: "4px 6px",
  },

  logoIcon: {

    width: 50,

    height: 50,

    borderRadius: 16,

    background:
      "linear-gradient(135deg, #f59e0b, #fb923c)",

    display: "flex",

    alignItems: "center",

    justifyContent: "center",

    fontSize: 24,

    boxShadow:
      "0 10px 30px rgba(245,158,11,0.35)",
  },

  logoText: {

    color: "#fff7ed",

    fontSize: 20,

    fontWeight: 700,

    lineHeight: 1,
  },

  logoSub: {

    marginTop: 4,

    color: "#fed7aa",

    fontSize: 12,
  },

  userCard: {

    display: "flex",

    alignItems: "center",

    gap: 12,

    padding: "14px",

    marginBottom: 26,

    borderRadius: 18,

    background:
      "rgba(255,255,255,0.08)",

    border:
      "1px solid rgba(255,255,255,0.08)",

    backdropFilter: "blur(12px)",

    boxShadow:
      "0 10px 25px rgba(0,0,0,0.15)",
  },

  avatar: {

    width: 42,

    height: 42,

    borderRadius: "50%",

    background:
      "linear-gradient(135deg, #fbbf24, #f97316)",

    display: "flex",

    alignItems: "center",

    justifyContent: "center",

    fontWeight: 700,

    color: "white",

    fontSize: 15,

    flexShrink: 0,
  },

  userName: {

    color: "#fff7ed",

    fontSize: 14,

    fontWeight: 600,
  },

  userRole: {

    marginTop: 3,

    color: "#fdba74",

    fontSize: 12,

    textTransform: "capitalize",
  },

  nav: {

    display: "flex",

    flexDirection: "column",

    gap: 8,
  },

  menuBtn: {

    border: "none",

    background: "transparent",

    color: "#fed7aa",

    padding: "13px 14px",

    borderRadius: 14,

    display: "flex",

    alignItems: "center",

    gap: 12,

    cursor: "pointer",

    transition: "all 0.2s ease",

    position: "relative",

    fontSize: 14,

    boxShadow:
      "0 4px 10px rgba(0,0,0,0.08)",
  },

  menuBtnActive: {

    background:
      "linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08))",

    color: "#ffffff",

    fontWeight: 700,

    border:
      "1px solid rgba(255,255,255,0.12)",

    boxShadow:
      "0 10px 25px rgba(0,0,0,0.18)",

    transform: "translateX(4px)",
  },

  menuIcon: {
    fontSize: 17,
  },

  menuLabel: {
    flex: 1,
    textAlign: "left",
  },

  activeWrap: {

    marginLeft: "auto",

    display: "flex",

    alignItems: "center",

    gap: 8,
  },

  activeText: {

    fontSize: 11,

    color: "#fde68a",

    fontWeight: 700,

    letterSpacing: "0.03em",
  },

  activeDot: {

    width: 10,

    height: 10,

    borderRadius: "50%",

    background: "#fbbf24",

    boxShadow:
      "0 0 14px rgba(251,191,36,0.95)",
  },

  logoutBtn: {

    border:
      "1px solid rgba(255,255,255,0.12)",

    background:
      "rgba(255,255,255,0.06)",

    color: "#fff7ed",

    padding: "13px 14px",

    borderRadius: 14,

    display: "flex",

    alignItems: "center",

    gap: 10,

    cursor: "pointer",

    fontSize: 14,

    transition: "0.2s",

    backdropFilter: "blur(10px)",
  },
}