'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Users, User, FileText, Receipt, CheckSquare, BookText, Calendar } from 'lucide-react';
import { useSession } from "next-auth/react";

export default function MainTabsBar() {
  const pathname = usePathname() || '';
  const { data: session } = useSession();
  let currentTab = 'dashboard';
  if (pathname.startsWith('/clients')) currentTab = 'clients';
  else if (pathname.startsWith('/identity')) currentTab = 'identity';
  else if (pathname.startsWith('/documents')) currentTab = 'documents';
  else if (pathname.startsWith('/factures')) currentTab = 'invoices';
  else if (pathname.startsWith('/tasks')) currentTab = 'tasks';
  else if (pathname.startsWith('/admin/journal')) currentTab = 'journal';
  else if (pathname.startsWith('/calendar')) currentTab = 'calendar';
  else if (pathname.startsWith('/partners')) currentTab = 'partners';
  else if (pathname.startsWith('/admin-dashboard')) currentTab = 'admin-dashboard';

  return (
    <div className="w-full bg-yellow-100 flex items-center gap-1 px-4 py-1 shadow-sm sticky top-0 z-30 min-h-8 overflow-x-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent">
      <div className="flex gap-1 flex-1 min-w-max">
        <Link href="/" className={`px-2 py-1 rounded font-semibold flex items-center gap-1 text-sm ${currentTab === 'dashboard' ? 'bg-yellow-200' : ''}`}><Users className="w-4 h-4" /> Dashboard</Link>
        <Link href="/clients" className={`px-2 py-1 rounded font-semibold flex items-center gap-1 text-sm ${currentTab === 'clients' ? 'bg-yellow-200' : ''}`}><Users className="w-4 h-4" /> All in one</Link>
        <Link href="/identity" className={`px-2 py-1 rounded font-semibold flex items-center gap-1 text-sm ${currentTab === 'identity' ? 'bg-yellow-200' : ''}`}><User className="w-4 h-4" /> Identité</Link>
        <Link href="/documents" className={`px-2 py-1 rounded font-semibold flex items-center gap-1 text-sm ${currentTab === 'documents' ? 'bg-yellow-200' : ''}`}><FileText className="w-4 h-4" /> Documents</Link>
        <Link href="/factures" className={`px-2 py-1 rounded font-semibold flex items-center gap-1 text-sm ${currentTab === 'invoices' ? 'bg-yellow-200' : ''}`}><Receipt className="w-4 h-4" /> Factures</Link>
        <Link href="/tasks" className={`px-2 py-1 rounded font-semibold flex items-center gap-1 text-sm ${currentTab === 'tasks' ? 'bg-yellow-200' : ''}`}><CheckSquare className="w-4 h-4" /> Tâches</Link>
        <Link href="/admin/journal" className={`px-2 py-1 rounded font-semibold flex items-center gap-1 text-sm ${currentTab === 'journal' ? 'bg-yellow-200' : ''}`}><BookText className="w-4 h-4" /> Journal</Link>
        <Link href="/calendar" className={`px-2 py-1 rounded font-semibold flex items-center gap-1 text-sm ${currentTab === 'calendar' ? 'bg-yellow-200' : ''}`}><Calendar className="w-4 h-4" /> Calendrier</Link>
        <Link href="/partners" className={`px-2 py-1 rounded font-semibold flex items-center gap-1 text-sm ${currentTab === 'partners' ? 'bg-yellow-200' : ''}`}><Users className="w-4 h-4" /> Partenaires</Link>
        {session?.user?.role === "ADMIN" && (
          <Link href="/admin-dashboard" className={`px-2 py-1 rounded font-semibold flex items-center gap-1 text-sm ${currentTab === 'admin-dashboard' ? 'bg-yellow-200' : ''}`}><Users className="w-4 h-4" /> Admin</Link>
        )}
      </div>
      {currentTab !== 'dashboard' && (
        <Link href="/" className="ml-2 px-2 py-1 rounded bg-yellow-300 hover:bg-yellow-400 text-yellow-900 font-bold text-xs">Retour au dashboard</Link>
      )}
    </div>
  );
}