'use client';
import React from 'react';
import Link from 'next/link';
import { useAuth } from '@/contexts/AuthContext';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { RmpAdminNav } from '@/components/admin/RmpAdminNav';

export default function RmpHubPage() {
  const { user, loading } = useAuth();
  const router = useRouter();

  useEffect(() => { if (!loading && !user) router?.push('/login'); }, [user, loading, router]);

  if (loading) return <div className="min-h-screen bg-[#0a0a0a] flex items-center justify-center"><div className="w-8 h-8 border-2 border-[#1D4ED8] border-t-transparent rounded-full animate-spin" /></div>;
  if (!user) return null;

  return (
    <div className="min-h-screen bg-[#0a0a0a] text-white p-6">
      <div className="max-w-5xl mx-auto space-y-6">
        <div>
          <h1 className="text-2xl font-bold">RMP Operations Hub</h1>
          <p className="text-[#888] text-sm mt-1">Relevant Media Properties, LLC — Accounting · Ad Operations · Email</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {[
            {
              title: 'Accounting',
              icon: '💰',
              description: 'Clients, orders, invoices, expenses, commissions, reconciliation, reports',
              href: '/admin/accounting',
              links: [
                { 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' },
              ],
            },
            {
              title: 'Ad Operations',
              icon: '📋',
              description: 'Flight management, IO extensions, product catalog, notifications',
              href: '/admin/adops',
              links: [
                { label: 'Dashboard', href: '/admin/adops' },
                { label: 'Products', href: '/admin/adops/products' },
                { label: 'Insertion Orders', href: '/admin/adops/ios' },
                { label: 'Notifications', href: '/admin/adops/notifications' },
              ],
            },
            {
              title: 'Email Infrastructure',
              icon: '📧',
              description: 'Sending domains, DNS health, suppressions, send log',
              href: '/admin/email',
              links: [
                { 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' },
              ],
            },
          ]?.map(section => (
            <div key={section?.title} className="bg-[#111] border border-[#DCE6F2] rounded-lg p-4 space-y-3">
              <div className="flex items-center gap-2">
                <span className="text-2xl">{section?.icon}</span>
                <div>
                  <h2 className="text-sm font-semibold text-white">{section?.title}</h2>
                  <p className="text-xs text-[#555] mt-0.5">{section?.description}</p>
                </div>
              </div>
              <div className="space-y-1">
                {section?.links?.map(l => (
                  <Link key={l?.href} href={l?.href} className="block px-2 py-1 rounded text-xs text-[#888] hover:text-white hover:bg-[#FFFFFF] transition-colors">
                    → {l?.label}
                  </Link>
                ))}
              </div>
              <Link href={section?.href} className="block w-full text-center px-3 py-1.5 bg-[#FFFFFF] border border-[#2a3a50] rounded text-xs text-[#1D4ED8] hover:bg-[#0d1a2d] transition-colors">
                Open {section?.title}
              </Link>
            </div>
          ))}
        </div>

        <div className="bg-[#0d1117] border border-[#FFFFFF] rounded-lg p-4">
          <p className="text-xs text-[#555] mb-3">Quick Navigation</p>
          <RmpAdminNav />
        </div>

        <div className="text-center">
          <Link href="/admin" className="text-xs text-[#555] hover:text-[#888]">← Back to Admin Dashboard</Link>
        </div>
      </div>
    </div>
  );
}
