import { NavLink, Routes, Route, Navigate, useLocation } from 'react-router-dom';
import { Users, Settings2, LayoutDashboard, ShieldCheck } from 'lucide-react';
import { cn } from '@/lib/utils';
import IAMPage from './IAMPage';
import ConfigPage from './ConfigPage';
import AdminDashboardPage from './AdminDashboardPage';

const tabs = [
  { label: 'IAM Management', path: '/admin/iam', icon: Users },
  { label: 'Configuration', path: '/admin/config', icon: Settings2 },
  { label: 'Management Dashboard', path: '/admin/dashboard', icon: LayoutDashboard },
];

export default function AdminPortal() {
  const location = useLocation();

  return (
    <div className="flex flex-col h-full animate-fade-in">
      {/* Portal header with tab navigation */}
      <div className="shrink-0 border-b bg-card overflow-hidden">
        <div className="px-3 md:px-6 h-14 md:h-16 flex items-center gap-2 md:gap-4">
          <div className="flex items-center gap-2 shrink-0">
            <div className="p-1.5 rounded-md bg-red-500/10">
              <ShieldCheck className="h-5 w-5 text-red-400" />
            </div>
            <h1 className="font-heading text-base md:text-2xl font-bold tracking-tight">Admin</h1>
          </div>

          {/* Horizontal tab navigation */}
          <nav className="flex items-center justify-evenly flex-1 h-full min-w-0 overflow-x-auto">
            {tabs.map(({ label, path, icon: Icon }) => {
              const isActive = location.pathname.startsWith(path);
              return (
                <NavLink
                  key={path}
                  to={path}
                  title={label}
                  className={cn(
                    'flex items-center justify-center gap-1.5 px-2.5 md:px-4 h-full text-sm font-medium transition-colors duration-150 border-b-2 -mb-px whitespace-nowrap',
                    isActive
                      ? 'text-accent border-accent'
                      : 'text-muted-foreground hover:text-foreground border-transparent'
                  )}
                >
                  <Icon className="h-4 w-4 shrink-0" />
                  <span className="hidden sm:inline">{label}</span>
                </NavLink>
              );
            })}
          </nav>
        </div>
      </div>

      {/* Page content */}
      <div className="flex-1 overflow-y-auto">
        <Routes>
          <Route index element={<Navigate to="iam" replace />} />
          <Route path="iam" element={<IAMPage />} />
          <Route path="config" element={<ConfigPage />} />
          <Route path="dashboard" element={<AdminDashboardPage />} />
        </Routes>
      </div>
    </div>
  );
}