"use client";

import Link from "next/link";
import { useEffect, useRef } from "react";

/**
 * "More" sheet shown when the user taps the "More" tab in the mobile
 * bottom tab bar (src/components/admin/MobileTabBar.tsx).
 *
 * NOTE: The primary navigation tabs (Orders / Stops / Products / Dashboard)
 * live in the bottom tab bar itself, NOT in this sheet. This sheet
 * intentionally exposes only the secondary operations so the tab bar can
 * stay focused on the high-frequency workflows. If you need to add a
 * primary tab here, do it in MobileTabBar instead.
 *
 * (PR 6 cutover: the v1 /admin/orders, /admin/stops, /admin/products
 * paths now 307-redirect to /admin/v2/* via next.config.ts — see
 * `redirects()` there.)
 */
const MORE_SECTIONS = [
  {
    heading: "Operations",
    links: [
      { label: "Pickup", href: "/admin/pickup", icon: "📦" },
      { label: "Shipping", href: "/admin/shipping", icon: "🚚" },
      { label: "Reports", href: "/admin/reports", icon: "📊" },
      { label: "Analytics", href: "/admin/analytics", icon: "📈" },
    ],
  },
  {
    heading: "Marketing",
    links: [
      { label: "Communications", href: "/admin/communications", icon: "📧" },
      { label: "Sales", href: "/admin/sales", icon: "💵" },
    ],
  },
  {
    heading: "Settings",
    links: [
      { label: "Settings", href: "/admin/settings", icon: "⚙️" },
      { label: "Advanced", href: "/admin/advanced", icon: "🛠" },
    ],
  },
];

interface MoreSheetProps {
  open: boolean;
  onClose: () => void;
}

export function MoreSheet({ open, onClose }: MoreSheetProps) {
  const dialogRef = useRef<HTMLDialogElement>(null);
  const lastFocusedRef = useRef<HTMLElement | null>(null);

  useEffect(() => {
    const dialog = dialogRef.current;
    if (!dialog) return;
    if (open) {
      lastFocusedRef.current = document.activeElement as HTMLElement | null;
      if (!dialog.open) dialog.showModal();
    } else if (dialog.open) {
      dialog.close();
      lastFocusedRef.current?.focus();
    }
  }, [open]);

  useEffect(() => {
    const dialog = dialogRef.current;
    if (!dialog) return;
    const onCancel = (e: Event) => {
      e.preventDefault();
      onClose();
    };
    dialog.addEventListener("cancel", onCancel);
    return () => dialog.removeEventListener("cancel", onCancel);
  }, [onClose]);

  return (
    <dialog
      ref={dialogRef}
      aria-label="More navigation"
      className="w-full max-w-[640px] p-0 m-0 ml-auto h-full max-h-screen backdrop:bg-black/40"
      style={{
        backgroundColor: "var(--color-bg)",
        color: "var(--color-text)",
        borderLeft: "1px solid var(--color-surface-3)",
      }}
    >
      <div className="flex flex-col h-full overflow-y-auto">
        <div className="sticky top-0 px-6 py-4 border-b" style={{ backgroundColor: "var(--color-bg)", borderColor: "var(--color-surface-3)" }}>
          <h2 className="text-h1 font-display" style={{ fontWeight: 600 }}>More</h2>
        </div>
        <div className="px-6 py-6 space-y-8">
          {MORE_SECTIONS.map((section) => (
            <section key={section.heading}>
              <h3 className="text-label font-semibold mb-3" style={{ color: "var(--color-text-muted)", letterSpacing: "0.02em" }}>
                {section.heading.toUpperCase()}
              </h3>
              <ul className="space-y-1">
                {section.links.map((link) => (
                  <li key={link.href}>
                    <Link
                      href={link.href}
                      onClick={onClose}
                      className="flex items-center gap-3 px-4 py-4 rounded-xl active:bg-[var(--color-surface-2)] transition-colors"
                      style={{ minHeight: "56px" }}
                    >
                      <span aria-hidden="true" className="text-2xl">{link.icon}</span>
                      <span className="text-h2" style={{ fontWeight: 700 }}>{link.label}</span>
                    </Link>
                  </li>
                ))}
              </ul>
            </section>
          ))}
        </div>
      </div>
    </dialog>
  );
}

export default MoreSheet;