'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { LayoutDashboard, Building2, Users, KanbanSquare } from 'lucide-react'

interface SubItem {
  href: string
  label: string
  icon: typeof LayoutDashboard
  match: (pathname: string) => boolean
}

const items: SubItem[] = [
  {
    href: '/admin/crm',
    label: 'Overview',
    icon: LayoutDashboard,
    match: (p) => p === '/admin/crm',
  },
  {
    href: '/admin/crm/pipeline',
    label: 'Pipeline',
    icon: KanbanSquare,
    match: (p) => p.startsWith('/admin/crm/pipeline'),
  },
  {
    href: '/admin/crm/contacts',
    label: 'Contacts',
    icon: Users,
    match: (p) => p.startsWith('/admin/crm/contacts'),
  },
  {
    href: '/admin/crm/properties',
    label: 'Properties',
    icon: Building2,
    match: (p) => p.startsWith('/admin/crm/properties'),
  },
]

interface Props {
  basePath?: string  // '/admin/crm' or '/agent/crm'
  variant?: 'admin' | 'agent'
}

export function CRMSubNav({ basePath = '/admin/crm', variant = 'admin' }: Props) {
  const pathname = usePathname() ?? ''
  const filtered = items.filter((i) => i.href.startsWith(basePath))

  return (
    <div className="bg-white border-b mb-6 -mx-8 px-8">
      <nav className="flex gap-1 overflow-x-auto">
        {filtered.map(({ href, label, icon: Icon, match }) => {
          const isActive = match(pathname)
          return (
            <Link
              key={href}
              href={href}
              className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition whitespace-nowrap ${
                isActive
                  ? 'border-[#374527] text-[#374527]'
                  : 'border-transparent text-gray-600 hover:text-gray-900 hover:border-gray-300'
              }`}
            >
              <Icon size={16} />
              {label}
            </Link>
          )
        })}
      </nav>
      {variant === 'agent' && (
        <p className="text-xs text-gray-500 py-2">Read-only view of your CRM data.</p>
      )}
    </div>
  )
}