'use client';

import { usePathname } from 'next/navigation';
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { SidebarTrigger } from "@/components/ui/sidebar"
import Link from 'next/link';
import { ChevronRight } from 'lucide-react';

function getBreadcrumbs(pathname: string) {
  // Map routes to breadcrumb labels
  const routeMap: Record<string, { label: string; href: string }[]> = {
    '/dashboard': [{ label: 'Dashboard', href: '/dashboard' }],
    '/dashboard/liked-videos': [
      { label: 'Dashboard', href: '/dashboard' },
      { label: 'Liked Videos', href: '/dashboard/liked-videos' }
    ],
    '/dashboard/watch-history': [
      { label: 'Dashboard', href: '/dashboard' },
      { label: 'Watch History', href: '/dashboard/watch-history' }
    ],
    '/videoplayer': [
      { label: 'Dashboard', href: '/dashboard' },
      { label: 'Video Player', href: '/videoplayer' }
    ],
    '/admin': [{ label: 'Admin Panel', href: '/admin' }],
    '/admin/users': [
      { label: 'Admin Panel', href: '/admin' },
      { label: 'Users', href: '/admin/users' }
    ],
    '/admin/courses': [
      { label: 'Admin Panel', href: '/admin' },
      { label: 'Courses', href: '/admin/courses' }
    ],
    '/admin/playlists': [
      { label: 'Admin Panel', href: '/admin' },
      { label: 'Playlists', href: '/admin/playlists' }
    ],
    '/admin/videos': [
      { label: 'Admin Panel', href: '/admin' },
      { label: 'Videos', href: '/admin/videos' }
    ],
    '/admin/enrollments': [
      { label: 'Admin Panel', href: '/admin' },
      { label: 'Enrollments', href: '/admin/enrollments' }
    ],
    '/login': [{ label: 'Login', href: '/login' }],
  };

  // Check for exact match first
  if (routeMap[pathname]) {
    return routeMap[pathname];
  }

  // Check for prefix matches (like /admin/users/[userId])
  for (const [route, breadcrumbs] of Object.entries(routeMap)) {
    if (pathname.startsWith(route + '/')) {
      // For dynamic routes like /admin/users/[userId]/...
      if (route === '/admin/users' && pathname.match(/^\/admin\/users\/[^/]+/)) {
        return [
          { label: 'Admin Panel', href: '/admin' },
          { label: 'Users', href: '/admin/users' },
          { label: 'User Details', href: pathname.split('/').slice(0, 4).join('/') }
        ];
      }
      if (route === '/admin/videos' && pathname.match(/^\/admin\/videos\/[^/]+/)) {
        return [
          { label: 'Admin Panel', href: '/admin' },
          { label: 'Videos', href: '/admin/videos' },
          { label: 'Edit Video', href: pathname.split('/').slice(0, 4).join('/') }
        ];
      }
    }
  }

  // Default fallback
  return [{ label: 'Library', href: '/' }];
}

export function SiteHeader() {
  const pathname = usePathname();
  const breadcrumbs = getBreadcrumbs(pathname);

  return (
    <header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
        <SidebarTrigger className="-ml-1" />
        <Separator
          orientation="vertical"
          className="mx-2 data-[orientation=vertical]:h-4"
        />
        <nav className="flex items-center gap-1">
          {breadcrumbs.map((crumb, index) => (
            <div key={crumb.href} className="flex items-center gap-1">
              {index > 0 && (
                <ChevronRight className="w-4 h-4 text-muted-foreground" />
              )}
              {index === breadcrumbs.length - 1 ? (
                <span className="text-sm font-medium text-foreground">
                  {crumb.label}
                </span>
              ) : (
                <Link
                  href={crumb.href}
                  className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
                >
                  {crumb.label}
                </Link>
              )}
            </div>
          ))}
        </nav>
      </div>
    </header>
  )
}