"use client";
import Link from "next/link";
import { usePathname, useSearchParams } from "next/navigation";
import { useState } from "react";

const NAV: [string, string, string][] = [
  ["Dashboard", "/admin", "▦"], ["Products", "/admin/products", "◫"], ["Categories", "/admin/categories", "▤"], ["Subcategories", "/admin/categories?sub=1", "↳"], ["Brands", "/admin/brands", "◈"],
  ["Inventory", "/admin/inventory", "▥"], ["Suppliers", "/admin/brands?view=suppliers", "⛟"], ["Orders", "/admin/orders", "🧾"], ["Customers", "/admin/customers", "👥"], ["Payments", "/admin/payments", "💳"],
  ["Shipping & Delivery", "/admin/shipping", "🚚"], ["Promotions & Coupons", "/admin/coupons", "🏷"], ["Rewards Management", "/admin/rewards", "★"], ["Prescription Management", "/admin/prescriptions", "℞"],
  ["Teleconsultations", "/admin/consultations", "☏"], ["Appointments", "/admin/consultations?view=schedule", "🗓"], ["Product Reviews", "/admin/reviews", "✎"], ["Website Editor", "/admin/content", "✦"],
  ["Homepage Editor", "/admin/content?tab=sections", "⌂"], ["Banner Manager", "/admin/content?tab=slides", "▭"], ["Media Library", "/admin/media", "🖼"], ["Pages & Sections", "/admin/pages", "📄"], ["Blog Manager", "/admin/blog", "✍"],
  ["Menu & Footer", "/admin/settings?tab=contact", "☰"], ["SEO Settings", "/admin/settings?tab=seo", "🔎"], ["Notifications", "/admin/messages", "🔔"], ["Email Templates", "/admin/settings?tab=email", "✉"],
  ["Reports & Analytics", "/admin/reports", "📈"], ["Admin Users", "/admin/users", "👤"], ["Roles & Permissions", "/admin/users?tab=roles", "🛡"], ["Security", "/admin/security", "🔒"], ["Advanced Settings", "/admin/settings", "⚙"], ["Backup & Restore", "/admin/backup", "⛁"],
];

export function Sidebar({ name, role }: { name: string; role: string }) {
  const path = usePathname(); const sp = useSearchParams();
  const [open, setOpen] = useState(false);
  const full = path + (sp.toString() ? "?" + sp.toString() : "");
  const isActive = (href: string) => (href.includes("?") ? full.startsWith(href) : href === "/admin" ? path === "/admin" : path.startsWith(href) && !NAV.some(([, h]) => h.includes("?") && full.startsWith(h)));
  return (
    <>
      <button onClick={() => setOpen(!open)} className="lg:hidden fixed top-3 left-3 z-50 w-10 h-10 rounded-xl bg-white shadow grid place-items-center">☰</button>
      <aside className={`fixed lg:sticky top-0 left-0 z-40 h-screen w-64 bg-white border-r flex flex-col transition-transform ${open ? "translate-x-0" : "-translate-x-full lg:translate-x-0"}`}>
        <div className="p-5 border-b"><div className="font-extrabold text-brand leading-none" style={{ fontFamily: "Georgia,serif" }}>MARHATAB</div><div className="text-[10px] tracking-[0.3em] font-bold text-royal mt-1">ADMIN PANEL</div></div>
        <nav className="flex-1 overflow-y-auto p-3 space-y-0.5">
          {NAV.map(([l, h, i]) => <Link key={l} href={h} onClick={() => setOpen(false)} className={`flex items-center gap-3 px-3 py-2 rounded-lg text-[13px] font-medium transition ${isActive(h) ? "bg-brand text-white shadow-sm" : "text-slate-600 hover:bg-mint hover:text-brand"}`}><span className="w-5 text-center">{i}</span>{l}</Link>)}
        </nav>
        <div className="p-4 border-t text-xs"><div className="font-bold">{name}</div><div className="text-slate-500 capitalize">{role}</div><Link href="/" target="_blank" className="text-brand font-semibold mt-1 inline-block">View store ↗</Link></div>
      </aside>
    </>
  );
}

export function Flash() {
  const sp = useSearchParams();
  const ok = sp.get("ok"); const err = sp.get("err"); const denied = sp.get("denied");
  if (!ok && !err && !denied) return null;
  return <div className={`mb-5 px-4 py-3 rounded-xl text-sm font-medium anim-fade-up ${err || denied ? "bg-red-50 text-red-700" : "bg-mint text-brand-dark"}`}>{err || (denied ? "You don't have permission for that page." : ok)}</div>;
}

export function BarChart({ data }: { data: { label: string; value: number }[] }) {
  const max = Math.max(1, ...data.map((d) => d.value));
  return (
    <div className="flex items-end gap-2 h-48">
      {data.map((d, i) => (
        <div key={i} className="flex-1 flex flex-col items-center gap-1 group">
          <div className="text-[10px] text-slate-500 opacity-0 group-hover:opacity-100">{d.value.toLocaleString()}</div>
          <div className="w-full rounded-t-md bg-gradient-to-t from-brand to-emerald-400 anim-fade-up" style={{ height: `${(d.value / max) * 100}%`, minHeight: 3, animationDelay: `${i * 40}ms` }} />
          <div className="text-[10px] text-slate-400">{d.label}</div>
        </div>
      ))}
    </div>
  );
}

export function ConfirmButton({ children, className = "", msg = "Are you sure?" }: { children: React.ReactNode; className?: string; msg?: string }) {
  return <button className={className} onClick={(e) => { if (!confirm(msg)) e.preventDefault(); }}>{children}</button>;
}