// Kotleto · ADMIN — full dashboard with tabs (overview, orders, menu, staff, reports, settings)

function Admin({ onExit, accent = "#D9461E" }) {
  const { lang } = useLang();
  const [tab, setTab] = useState("overview");

  const tabs = [
    { id: "overview",  fa: "داشبورد",        en: "Overview",   ic: <Ico.Chart/> },
    { id: "orders",    fa: "سفارش‌ها",        en: "Orders",     ic: <Ico.Bag/> },
    { id: "menu",      fa: "منو",             en: "Menu",       ic: <Ico.Sparkle/> },
    { id: "customers", fa: "مشتری‌ها",         en: "Customers",  ic: <Ico.Heart/> },
    { id: "staff",     fa: "کارمندان",        en: "Staff",      ic: <Ico.User/> },
    { id: "reports",   fa: "گزارش‌ها",         en: "Reports",    ic: <Ico.Chart/> },
    { id: "settings",  fa: "تنظیمات",         en: "Settings",   ic: <Ico.Cog/> },
  ];

  return (
    <div className="grid grid-admin" style={{
      minHeight: "100vh",
      background: "#0F0B08",
      color: "var(--paper)",
      fontFamily: "var(--fa)",
    }}>
      {/* Sidebar */}
      <aside className="admin-sidebar" style={{
        background: "#070504", borderInlineEnd: "1px solid rgba(255,244,226,0.08)",
        padding: "24px 18px", display: "flex", flexDirection: "column", gap: 20,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "0 6px" }}>
          <div style={{ width: 36, height: 36, borderRadius: 10, background: accent, color: "#fff", display: "grid", placeItems: "center", fontFamily: "var(--display)", fontSize: 18, paddingBottom: 2 }}>K</div>
          <div>
            <div className="display" style={{ fontSize: 16, color: "var(--paper)", lineHeight: 1 }}>کتلتُ</div>
            <div style={{ fontSize: 10, color: "rgba(255,244,226,0.4)", letterSpacing: "0.2em", marginTop: 3 }}>ADMIN</div>
          </div>
        </div>

        <div style={{ height: 1, background: "rgba(255,244,226,0.08)" }} />

        <nav className="admin-nav" style={{ display: "flex", flexDirection: "column", gap: 2 }}>
          {tabs.map(t => {
            const active = tab === t.id;
            return (
              <button key={t.id} onClick={() => setTab(t.id)} style={{
                display: "flex", alignItems: "center", gap: 12,
                padding: "11px 14px", borderRadius: 12,
                background: active ? accent : "transparent",
                color: active ? "#fff" : "rgba(255,244,226,0.7)",
                fontWeight: 600, fontSize: 14, textAlign: "start",
                transition: "all .15s ease",
              }}>{t.ic}{t[lang]}</button>
            );
          })}
        </nav>

        <div className="hide-mobile-md" style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: 12 }}>
          <div style={{
            background: "rgba(255,244,226,0.04)", border: "1px solid rgba(255,244,226,0.08)",
            borderRadius: 14, padding: "12px 14px", fontSize: 12,
          }}>
            <div style={{ color: accent, fontWeight: 700, marginBottom: 4 }}>● {lang === "fa" ? "آنلاین" : "Online"}</div>
            <div style={{ color: "rgba(255,244,226,0.6)" }}>{lang === "fa" ? `${toFa("۵")} نفر در حال کار` : "5 staff on shift"}</div>
          </div>
          <button onClick={onExit} className="btn btn-ghost" style={{ color: "rgba(255,244,226,0.7)", borderColor: "rgba(255,244,226,0.2)" }}>
            <Ico.Arrow style={{ transform: "rotate(180deg)" }} /> {lang === "fa" ? "خروج از پنل" : "Exit admin"}
          </button>
        </div>
      </aside>

      <main className="admin-main" style={{ padding: "26px 30px", overflowY: "auto" }}>
        <AdminHeader tab={tabs.find(t => t.id === tab)} onExit={onExit} />
        <div style={{ marginTop: 22 }}>
          {tab === "overview"  && <Overview accent={accent} />}
          {tab === "orders"    && <OrdersTab accent={accent} />}
          {tab === "menu"      && <MenuTab accent={accent} />}
          {tab === "customers" && <CustomersTab accent={accent} />}
          {tab === "staff"     && <StaffTab accent={accent} />}
          {tab === "reports"   && <ReportsTab accent={accent} />}
          {tab === "settings"  && <SettingsTab accent={accent} />}
        </div>
      </main>
      <style>{`
        @media (max-width: 1024px) {
          .admin-sidebar { padding: 14px 12px !important; gap: 12px !important; }
          .admin-nav { flex-direction: row !important; overflow-x: auto; gap: 6px !important; }
          .admin-nav button { white-space: nowrap; flex-shrink: 0; }
          .admin-main { padding: 18px 16px !important; }
        }
      `}</style>
    </div>
  );
}

function AdminHeader({ tab, onExit }) {
  const { lang } = useLang();
  const [notifOpen, setNotifOpen] = useState(false);
  const [profileOpen, setProfileOpen] = useState(false);
  const [notifs, setNotifs] = useState(NOTIFICATIONS);
  const unread = notifs.filter(n => n.unread).length;

  const markAllRead = () => setNotifs(notifs.map(n => ({ ...n, unread: false })));

  return (
    <header style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12, position: "relative" }}>
      <div>
        <div style={{ fontSize: 12, color: "rgba(255,244,226,0.5)", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700 }}>
          {lang === "fa" ? "مدیریت" : "Operations"} · کتلتُ
        </div>
        <h1 className="display" style={{ margin: "6px 0 0", fontSize: "clamp(26px, 4vw, 38px)" }}>{tab?.[lang]}</h1>
      </div>
      <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
        <div className="hide-mobile-md" style={{ position: "relative" }}>
          <Ico.Search style={{ position: "absolute", insetInlineStart: 14, top: "50%", transform: "translateY(-50%)", color: "rgba(255,244,226,0.5)" }}/>
          <input placeholder={lang === "fa" ? "جستجو سفارش، مشتری، آیتم..." : "Search orders, items..."} style={{
            padding: "11px 16px", paddingInlineStart: 40, width: 290,
            background: "rgba(255,244,226,0.06)", border: "1px solid rgba(255,244,226,0.1)",
            borderRadius: 12, color: "var(--paper)", fontSize: 13,
          }} />
        </div>
        <button onClick={onExit} className="show-mobile" style={{
          display: "none", padding: "8px 14px", borderRadius: 12,
          background: "rgba(255,244,226,0.06)", border: "1px solid rgba(255,244,226,0.1)",
          color: "var(--paper)", fontSize: 13, fontWeight: 700,
        }}>{lang === "fa" ? "← خروج" : "← Exit"}</button>

        {/* Notification bell */}
        <div style={{ position: "relative" }}>
          <button onClick={()=>{ setNotifOpen(!notifOpen); setProfileOpen(false); }} style={{
            width: 40, height: 40, borderRadius: 12, position: "relative",
            background: notifOpen ? "rgba(255,244,226,0.12)" : "rgba(255,244,226,0.06)",
            border: "1px solid rgba(255,244,226,0.1)",
            color: "var(--paper)", display: "grid", placeItems: "center",
          }}>
            <Ico.Bell/>
            {unread > 0 && (
              <span style={{ position: "absolute", top: -4, insetInlineEnd: -4, background: accentColor(), color: "#fff", borderRadius: 999, minWidth: 18, height: 18, fontSize: 10, fontWeight: 800, display: "grid", placeItems: "center", border: "2px solid #0F0B08" }}>{lang==="fa"?toFa(unread):unread}</span>
            )}
          </button>
          {notifOpen && <NotificationPanel notifs={notifs} onMarkAll={markAllRead} onClose={()=>setNotifOpen(false)}/>}
        </div>

        {/* Profile */}
        <div style={{ position: "relative" }}>
          <button onClick={()=>{ setProfileOpen(!profileOpen); setNotifOpen(false); }} style={{
            display: "flex", alignItems: "center", gap: 10, padding: "6px 12px 6px 6px",
            background: profileOpen ? "rgba(255,244,226,0.12)" : "rgba(255,244,226,0.06)",
            border: "1px solid rgba(255,244,226,0.1)", borderRadius: 999,
            color: "var(--paper)",
          }}>
            <div style={{ width: 30, height: 30, borderRadius: 999, background: "#5B6B3A", color: "#fff", display: "grid", placeItems: "center", fontWeight: 800, fontSize: 13 }}>گ</div>
            <div className="hide-mobile" style={{ textAlign: "start" }}>
              <div style={{ fontSize: 12, fontWeight: 700 }}>{lang === "fa" ? "گلپر صدری" : "Golpar S."}</div>
              <div style={{ fontSize: 10, opacity: 0.5 }}>{lang === "fa" ? "مالک" : "Owner"}</div>
            </div>
            <Ico.Arrow style={{ width: 14, height: 14, opacity: 0.5, transform: "rotate(90deg)" }}/>
          </button>
          {profileOpen && <ProfileMenu onExit={onExit} onClose={()=>setProfileOpen(false)}/>}
        </div>
      </div>
      {(notifOpen || profileOpen) && (
        <div onClick={()=>{ setNotifOpen(false); setProfileOpen(false); }} style={{
          position: "fixed", inset: 0, zIndex: 5,
        }}/>
      )}
    </header>
  );
}

// ────────── NotificationPanel
function NotificationPanel({ notifs, onMarkAll, onClose }) {
  const { lang } = useLang();
  const ICONS = {
    order:   "🛍️",
    review:  "⭐",
    stock:   "⚠️",
    staff:   "👤",
    payment: "💳",
    system:  "⚙️",
  };
  return (
    <div style={{
      position: "absolute", top: "calc(100% + 10px)", insetInlineEnd: 0,
      width: "min(380px, 92vw)", zIndex: 10,
      background: "#15100B", border: "1px solid rgba(255,244,226,0.12)",
      borderRadius: 16, overflow: "hidden",
      boxShadow: "0 30px 60px -10px rgba(0,0,0,0.6)",
      animation: "fadeDown .15s ease-out",
    }}>
      <header style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "14px 18px", borderBottom: "1px solid rgba(255,244,226,0.06)" }}>
        <div className="display" style={{ fontSize: 16 }}>{lang==="fa"?"اعلان‌ها":"Notifications"}</div>
        <button onClick={onMarkAll} style={{ fontSize: 11, color: "rgba(255,244,226,0.5)", fontWeight: 600 }}>
          {lang==="fa"?"همه رو خوندم":"Mark all read"}
        </button>
      </header>
      <div style={{ maxHeight: 380, overflowY: "auto" }}>
        {notifs.map(n => (
          <div key={n.id} style={{
            display: "flex", gap: 12, padding: "14px 18px",
            borderBottom: "1px solid rgba(255,244,226,0.05)",
            background: n.unread ? "rgba(217,70,30,0.05)" : "transparent",
            position: "relative",
          }}>
            <div style={{
              width: 38, height: 38, borderRadius: 10,
              background: n.color + "22", color: n.color,
              display: "grid", placeItems: "center", fontSize: 18, flexShrink: 0,
            }}>{ICONS[n.type] || "•"}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{ fontSize: 13, fontWeight: 700 }}>{n[lang].title}</span>
                {n.unread && <span style={{ width: 6, height: 6, borderRadius: 999, background: accentColor() }}/>}
              </div>
              <p style={{ margin: "3px 0 0", fontSize: 12, color: "rgba(255,244,226,0.65)", lineHeight: 1.5 }}>{n[lang].body}</p>
              <div style={{ fontSize: 10, color: "rgba(255,244,226,0.4)", marginTop: 5, fontWeight: 600 }}>{pick(n.time, lang)}</div>
            </div>
          </div>
        ))}
      </div>
      <footer style={{ padding: "12px 18px", borderTop: "1px solid rgba(255,244,226,0.06)", textAlign: "center" }}>
        <button onClick={() => { onMarkAll(); onClose(); notify(lang==="fa"?"همه اعلان‌ها خوانده شد":"All notifications marked read"); }} style={{ fontSize: 12, color: accentColor(), fontWeight: 700 }}>
          {lang==="fa"?"نمایش همه اعلان‌ها":"View all notifications"} →
        </button>
      </footer>
    </div>
  );
}

// ────────── ProfileMenu
function ProfileMenu({ onExit, onClose }) {
  const { lang } = useLang();
  const items = [
    { ic: <Ico.User/>,  fa: "پروفایل من",        en: "My profile",        sub: T("اطلاعات شخصی","Personal info") },
    { ic: <Ico.Cog/>,   fa: "تنظیمات حساب",      en: "Account settings",  sub: T("امنیت، رمز عبور","Security & password") },
    { ic: <Ico.Bell/>,  fa: "تنظیمات اعلان",     en: "Notification prefs", sub: T("کانال‌ها و اولویت","Channels & priority") },
    { ic: <Ico.Heart/>, fa: "تیم پشتیبانی",      en: "Support team",       sub: T("راهنما و سوال","Help & support") },
  ];
  return (
    <div style={{
      position: "absolute", top: "calc(100% + 10px)", insetInlineEnd: 0,
      width: "min(320px, 92vw)", zIndex: 10,
      background: "#15100B", border: "1px solid rgba(255,244,226,0.12)",
      borderRadius: 16, overflow: "hidden",
      boxShadow: "0 30px 60px -10px rgba(0,0,0,0.6)",
      animation: "fadeDown .15s ease-out",
    }}>
      {/* profile head */}
      <div style={{ padding: "20px 18px", background: "linear-gradient(135deg, rgba(217,70,30,0.15), transparent)", borderBottom: "1px solid rgba(255,244,226,0.06)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{ width: 52, height: 52, borderRadius: 999, background: "#5B6B3A", color: "#fff", display: "grid", placeItems: "center", fontFamily: "var(--display)", fontSize: 20 }}>گ</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="display" style={{ fontSize: 17 }}>{lang === "fa" ? "گلپر صدری" : "Golpar Sadri"}</div>
            <div style={{ fontSize: 11, color: "rgba(255,244,226,0.55)", marginTop: 2 }}>{lang === "fa" ? "مالک · شعبهٔ بلوار سرباز" : "Owner · Sarbaz Boulevard branch"}</div>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 10, fontWeight: 700, color: "#7FCB5A", marginTop: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: "#7FCB5A" }}/> {lang==="fa"?"آنلاین":"Online"}
            </div>
          </div>
        </div>
      </div>
      <div style={{ padding: "6px 8px" }}>
        {items.map((it, i) => (
          <button key={i} onClick={() => { onClose(); notify(lang==="fa"?it.fa:it.en); }} style={{
            display: "flex", alignItems: "center", gap: 12,
            width: "100%", padding: "10px 12px", borderRadius: 10,
            color: "var(--paper)", fontSize: 13, textAlign: "start",
            transition: "background .15s ease",
          }} onMouseEnter={e=>{e.currentTarget.style.background="rgba(255,244,226,0.06)";}}
             onMouseLeave={e=>{e.currentTarget.style.background="transparent";}}>
            <span style={{ color: "rgba(255,244,226,0.6)" }}>{it.ic}</span>
            <span style={{ flex: 1 }}>
              <div style={{ fontWeight: 600 }}>{it[lang]}</div>
              <div style={{ fontSize: 11, color: "rgba(255,244,226,0.45)", marginTop: 1 }}>{pick(it.sub, lang)}</div>
            </span>
            <Ico.Arrow style={{ width: 14, height: 14, opacity: 0.4 }}/>
          </button>
        ))}
      </div>
      <div style={{ borderTop: "1px solid rgba(255,244,226,0.06)", padding: 10 }}>
        <button onClick={()=>{ onClose(); onExit(); }} style={{
          display: "flex", alignItems: "center", gap: 12,
          width: "100%", padding: "10px 12px", borderRadius: 10,
          color: "#FF6B5A", fontSize: 13, fontWeight: 700, textAlign: "start",
        }}>
          <Ico.Arrow style={{ transform: "rotate(180deg)" }}/>
          {lang === "fa" ? "خروج از پنل ادمین" : "Exit admin panel"}
        </button>
      </div>
    </div>
  );
}

function accentColor() { return "#D9461E"; }

// ────────── animation
if (!document.getElementById("admin-anim-styles")) {
  const s = document.createElement("style");
  s.id = "admin-anim-styles";
  s.textContent = `@keyframes fadeDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }`;
  document.head.appendChild(s);
}

window.Admin = Admin;
window.NotificationPanel = NotificationPanel;
window.ProfileMenu = ProfileMenu;