// RMP Admin Navigation Extension
// This file provides the RMP nav items to be rendered in admin pages.
// It does NOT modify any existing nav component.
'use client';
import React, { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

interface NavSection {
  label: string;
  href: string;
  icon: string;
  sub: { label: string; href: string }[];
}

const RMP_NAV: NavSection[] = [
  {
    label: 'Accounting',
    href: '/admin/accounting',
    icon: '💰',
    sub: [
      { label: 'Dashboard', href: '/admin/accounting' },
      { label: 'Clients', href: '/admin/accounting/clients' },
      { label: 'Orders', href: '/admin/accounting/orders' },
      { label: 'Invoices', href: '/admin/accounting/invoices' },
      { label: 'Staff', href: '/admin/accounting/staff' },
      { label: 'Expenses', href: '/admin/accounting/expenses' },
      { label: 'Reconciliation', href: '/admin/accounting/reconciliation' },
      { label: 'Commissions', href: '/admin/accounting/commissions' },
      { label: 'Reports', href: '/admin/accounting/reports' },
      { label: 'Documents', href: '/admin/accounting/documents' },
    ],
  },
  {
    label: 'Ad Operations',
    href: '/admin/adops',
    icon: '📋',
    sub: [
      { label: 'Dashboard', href: '/admin/adops' },
      { label: 'Products', href: '/admin/adops/products' },
      { label: 'Insertion Orders', href: '/admin/adops/ios' },
      { label: 'Notifications', href: '/admin/adops/notifications' },
    ],
  },
  {
    label: 'Email',
    href: '/admin/email',
    icon: '📧',
    sub: [
      { label: 'Dashboard', href: '/admin/email' },
      { label: 'Sending Domains', href: '/admin/email/domains' },
      { label: 'Suppressions', href: '/admin/email/suppressions' },
      { label: 'Send Log', href: '/admin/email/send-log' },
    ],
  },
];

export function RmpAdminNav() {
  const pathname = usePathname();
  const [openSection, setOpenSection] = useState<string | null>(() => {
    for (const s of RMP_NAV) {
      if (pathname.startsWith(s.href)) return s.label;
    }
    return null;
  });

  return (
    <div className="bg-[#0d1117] border border-[#FFFFFF] rounded-lg p-3 space-y-1">
      <p className="text-xs font-bold text-[#1D4ED8] uppercase tracking-wider px-2 pb-1">RMP Operations</p>
      {RMP_NAV.map(section => {
        const isOpen = openSection === section.label;
        const isActive = pathname.startsWith(section.href);
        return (
          <div key={section.label}>
            <button
              onClick={() => setOpenSection(isOpen ? null : section.label)}
              className={`w-full flex items-center justify-between px-2 py-1.5 rounded text-xs font-medium transition-colors ${isActive ? 'bg-[#FFFFFF] text-[#1D4ED8]' : 'text-[#888] hover:text-white hover:bg-[#111]'}`}
            >
              <span className="flex items-center gap-2">
                <span>{section.icon}</span>
                {section.label}
              </span>
              <span className="text-[#555]">{isOpen ? '▲' : '▼'}</span>
            </button>
            {isOpen && (
              <div className="ml-4 mt-1 space-y-0.5">
                {section.sub.map(item => (
                  <Link
                    key={item.href}
                    href={item.href}
                    className={`block px-2 py-1 rounded text-xs transition-colors ${pathname === item.href ? 'bg-[#1D4ED8]/10 text-[#1D4ED8]' : 'text-[#666] hover:text-white hover:bg-[#111]'}`}
                  >
                    {item.label}
                  </Link>
                ))}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

/** Flat list of RMP nav links for embedding in header/topbar */
export function RmpAdminNavLinks() {
  return (
    <>
      <Link href="/admin/accounting" className="text-[#777] hover:text-[#1D4ED8] transition-colors text-xs font-body font-bold uppercase tracking-wider">
        Accounting
      </Link>
      <Link href="/admin/adops" className="text-[#777] hover:text-[#1D4ED8] transition-colors text-xs font-body font-bold uppercase tracking-wider">
        Ad Ops
      </Link>
      <Link href="/admin/email" className="text-[#777] hover:text-[#1D4ED8] transition-colors text-xs font-body font-bold uppercase tracking-wider">
        Email
      </Link>
    </>
  );
}
