import { useEffect, useState } from 'react';
import { router, usePage } from '@inertiajs/react';
import { Plus, Clock } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel,
  DropdownMenuSeparator, DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

const RECENT_KEY = 'admin_recent_pages';
const MAX_RECENT = 5;

const quickActions = [
  { label: 'New Booking', path: '/admin/orders', icon: '🛒' },
  { label: 'New Course', path: '/admin/courses', icon: '📚' },
  { label: 'Add Company', path: '/admin/companies', icon: '🏢' },
];

const breadcrumbMap: Record<string, string> = {
  '': 'Dashboard',
  orders: 'Bookings',
  calendar: 'Calendar',
  trainers: 'Trainers',
  companies: 'Companies',
  availability: 'Availability',
  courses: 'Courses',
  'course-assignments': 'Assignments',
  venues: 'Locations',
  'location-overrides': 'Location Overrides',
  'e-learning': 'E-Learning',
  accounts: 'User Accounts',
  'user-roles': 'User Roles',
  'discount-codes': 'Discounts',
  sops: 'SOPs',
  'locktel-cms': 'Locktel CMS',
  'audit-log': 'Audit Log',
  prerequisites: 'Prerequisites',
  waitlist: 'Waitlist',
  certificates: 'Certificates',
  revenue: 'Revenue',
  'ar-assist': 'AR Assist',
  services: 'Services',
};

function getPageLabel(path: string): string {
  const seg = path.replace('/admin/', '').replace('/admin', '');
  if (!seg) return 'Dashboard';
  const first = seg.split('/')[0];
  return breadcrumbMap[first] || first.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
}

export function useRecentPages() {
  const { url } = usePage();

  useEffect(() => {
    const path = url.split('?')[0];
    if (!path.startsWith('/admin')) return;

    try {
      const stored = JSON.parse(localStorage.getItem(RECENT_KEY) || '[]') as string[];
      const filtered = stored.filter((p) => p !== path);
      filtered.unshift(path);
      localStorage.setItem(RECENT_KEY, JSON.stringify(filtered.slice(0, MAX_RECENT + 1)));
    } catch {
      localStorage.setItem(RECENT_KEY, JSON.stringify([path]));
    }
  }, [url]);
}

const AdminQuickActions = () => {
  const { url } = usePage();
  const [recentPages, setRecentPages] = useState<string[]>([]);

  useEffect(() => {
    try {
      const stored = JSON.parse(localStorage.getItem(RECENT_KEY) || '[]') as string[];
      setRecentPages(stored.filter((p) => p !== url.split('?')[0]).slice(0, MAX_RECENT));
    } catch {
      setRecentPages([]);
    }
  }, [url]);

  return (
    <div className="flex items-center gap-1">
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="outline" size="sm" className="h-8 gap-1.5 text-xs">
            <Plus className="h-3.5 w-3.5" />
            <span className="hidden sm:inline">Quick Action</span>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-48">
          <DropdownMenuLabel className="text-xs">Quick Actions</DropdownMenuLabel>
          <DropdownMenuSeparator />
          {quickActions.map((a) => (
            <DropdownMenuItem
              key={a.path}
              onClick={() => router.visit(a.path)}
              className="text-sm gap-2"
            >
              <span>{a.icon}</span>
              {a.label}
            </DropdownMenuItem>
          ))}
        </DropdownMenuContent>
      </DropdownMenu>

      {recentPages.length > 0 && (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="sm" className="h-8 gap-1.5 text-xs text-muted-foreground">
              <Clock className="h-3.5 w-3.5" />
              <span className="hidden sm:inline">Recent</span>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-48">
            <DropdownMenuLabel className="text-xs">Recent Pages</DropdownMenuLabel>
            <DropdownMenuSeparator />
            {recentPages.map((p) => (
              <DropdownMenuItem key={p} onClick={() => router.visit(p)} className="text-sm">
                {getPageLabel(p)}
              </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
      )}
    </div>
  );
};

export default AdminQuickActions;