'use client';

import { ReactNode } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { motion } from 'framer-motion';
import { Shield, Users, Building2, Settings, Activity } from 'lucide-react';

import { cn } from '@/lib/utils';

interface AdminLayoutProps {
  children: ReactNode;
  params: { locale: string };
}

const adminTabs = [
  { key: 'overview', href: '/admin', icon: Shield },
  { key: 'users', href: '/admin/users', icon: Users },
  { key: 'departments', href: '/admin/departments', icon: Building2 },
  { key: 'auditLog', href: '/admin/audit-log', icon: Activity },
  { key: 'settings', href: '/admin/settings', icon: Settings },
];

/**
 * Admin layout with tab navigation
 */
export default function AdminLayout({ children, params: { locale } }: AdminLayoutProps) {
  const pathname = usePathname();
  const t = useTranslations('admin');

  const isActive = (href: string) => {
    const localePath = `/${locale}${href}`;
    if (href === '/admin') {
      return pathname === localePath;
    }
    return pathname.startsWith(localePath);
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <motion.div
        initial={{ opacity: 0, y: -10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.3 }}
      >
        <h1 className="text-3xl font-bold tracking-tight">{t('title')}</h1>
        <p className="text-muted-foreground">Systemverwaltung und Benutzeradministration</p>
      </motion.div>

      {/* Tab Navigation */}
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.3, delay: 0.1 }}
        className="border-b"
      >
        <nav className="flex gap-1 overflow-x-auto pb-px">
          {adminTabs.map((tab) => {
            const Icon = tab.icon;
            const active = isActive(tab.href);

            return (
              <Link
                key={tab.key}
                href={`/${locale}${tab.href}`}
                className={cn(
                  'relative flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors',
                  'hover:text-foreground focus-visible:outline-none',
                  active ? 'text-foreground' : 'text-muted-foreground'
                )}
              >
                <Icon className="h-4 w-4" />
                <span className="hidden sm:inline">{t(tab.key)}</span>

                {/* Active indicator */}
                {active && (
                  <motion.div
                    layoutId="admin-tab-indicator"
                    className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary"
                    transition={{ duration: 0.2 }}
                  />
                )}
              </Link>
            );
          })}
        </nav>
      </motion.div>

      {/* Content */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.3, delay: 0.2 }}
      >
        {children}
      </motion.div>
    </div>
  );
}
