'use client';

import { usePathname, useRouter } from 'next/navigation';
import { useTranslation } from '@/hooks/useTranslation';
import {
  RefreshCw,
  MessageSquare,
  Users,
  FileText,
  Clock,
  Package,
  Shield,
  Calendar,
} from 'lucide-react';

export default function SyncCenterLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const router = useRouter();
  const { t } = useTranslation();

  const sb = t.syncCenter.sidebar;

  const tabs = [
    {
      id: 'entra-id',
      name: sb.entraId,
      path: '/sync-center/entra-id',
      icon: Shield,
    },
    {
      id: 'dingtalk',
      name: sb.dingtalk,
      path: '/sync-center/dingtalk',
      icon: MessageSquare,
      children: [
        { id: 'dingtalk-employees', name: sb.dingtalkEmployees, path: '/sync-center/dingtalk/employees', icon: Users },
        { id: 'dingtalk-quotas', name: sb.dingtalkQuotas, path: '/sync-center/dingtalk/annual-leave/quotas', icon: FileText },
        { id: 'dingtalk-release', name: sb.dingtalkRelease, path: '/sync-center/dingtalk/annual-leave/release-plan', icon: Clock },
        { id: 'dingtalk-sap', name: sb.dingtalkSap, path: '/sync-center/dingtalk/sap-purchases', icon: Package },
      ],
    },
    {
      id: 'adp',
      name: sb.adp,
      path: '/sync-center/adp',
      icon: Calendar,
      children: [
        { id: 'adp-pto', name: sb.adpPto, path: '/sync-center/adp/pto', icon: Calendar },
      ],
    },
  ];

  const isActive = (path: string) => {
    return pathname === path || pathname.startsWith(path + '/');
  };

  return (
    <div className="h-full flex">
      <div
        className="w-56 bg-white flex flex-col border-r shrink-0"
        style={{ borderColor: 'var(--border-color)' }}
      >
        <div className="border-b" style={{ borderColor: 'var(--border-color)' }}>
          <div className="h-12 flex items-center px-4">
            <RefreshCw className="w-5 h-5 mr-2 text-blue-600" />
            <h2 className="text-base font-semibold text-gray-900">
              {sb.title}
            </h2>
          </div>
        </div>

        <nav className="flex-1 py-4 px-2 overflow-y-auto">
          <div className="space-y-1">
            {tabs.map((tab) => {
              const Icon = tab.icon;
              const active = isActive(tab.path);
              const hasChildren = tab.children && tab.children.length > 0;
              const childActive = hasChildren && tab.children!.some(c => isActive(c.path));

              return (
                <div key={tab.id}>
                  <button
                    onClick={() => router.push(tab.path)}
                    className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors ${
                      active || childActive
                        ? 'bg-blue-50 text-blue-600 font-medium'
                        : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
                    }`}
                  >
                    <Icon className="w-4 h-4 shrink-0" />
                    <span className="truncate">{tab.name}</span>
                  </button>

                  {hasChildren && (active || childActive) && (
                    <div className="ml-4 mt-1 space-y-0.5">
                      {tab.children!.map((child) => {
                        const ChildIcon = child.icon;
                        const childIsActive = isActive(child.path);
                        return (
                          <button
                            key={child.id}
                            onClick={() => router.push(child.path)}
                            className={`w-full flex items-center gap-2.5 px-3 py-1.5 rounded-md text-xs transition-colors ${
                              childIsActive
                                ? 'bg-blue-50 text-blue-600 font-medium'
                                : 'text-gray-500 hover:bg-gray-50 hover:text-gray-700'
                            }`}
                          >
                            <ChildIcon className="w-3.5 h-3.5 shrink-0" />
                            <span className="truncate">{child.name}</span>
                          </button>
                        );
                      })}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </nav>
      </div>

      <div className="flex-1 overflow-auto">
        {children}
      </div>
    </div>
  );
}