'use client';

import { PageHeader } from '@/components/entity-list';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '@/components/ui/tooltip';
import {
  Link,
  Lock,
  LucideIcon,
  Mail,
  Shield,
  Smartphone,
  User,
} from 'lucide-react';
import { useTranslations } from 'next-intl';
import { usePathname, useRouter } from 'next/navigation';
import { ReactNode } from 'react';

type LayoutProps = {
  children: ReactNode;
};

type TabConfig = {
  value: string;
  label: string;
  icon: LucideIcon;
};

export default function AccountLayout({ children }: LayoutProps) {
  const pathname = usePathname();
  const router = useRouter();
  const t = useTranslations('core.Profile');

  const tabs: TabConfig[] = [
    { value: 'profile', label: t('tabProfile'), icon: User },
    { value: 'password', label: t('tabPassword'), icon: Lock },
    { value: 'email', label: t('tabEmail'), icon: Mail },
    { value: '2fa', label: t('tab2fa'), icon: Shield },
    { value: 'accounts', label: t('tabAccounts'), icon: Link },
    { value: 'sessions', label: t('tabSessions'), icon: Smartphone },
  ];

  const getCurrentTab = () => {
    if (pathname.includes('/profile')) return 'profile';
    if (pathname.includes('/password')) return 'password';
    if (pathname.includes('/email')) return 'email';
    if (pathname.includes('/2fa')) return '2fa';
    if (pathname.includes('/accounts')) return 'accounts';
    if (pathname.includes('/sessions')) return 'sessions';
    return 'profile';
  };

  const handleTabChange = (value: string) => {
    router.push(`/core/account/${value}`);
  };

  return (
    <div className="flex flex-col pl-4 h-screen">
      <PageHeader
        breadcrumbs={[
          { label: 'Home', href: '/' },
          { label: t('breadcrumbLabel') },
        ]}
        title={t('title')}
        description={t('description')}
      />
      <div className="py-2">
        <Tabs value={getCurrentTab()} onValueChange={handleTabChange}>
          <TabsList className="grid w-full grid-cols-6 lg:w-fit gap-1 rounded-sm">
            {tabs.map((tab) => {
              const Icon = tab.icon;
              const isActive = getCurrentTab() === tab.value;

              return (
                <Tooltip key={tab.value}>
                  <TooltipTrigger asChild>
                    <TabsTrigger
                      value={tab.value}
                      className={`gap-2 cursor-pointer hover:bg-primary/10 active:bg-primary/20 rounded-sm ${isActive ? 'text-primary' : 'text-primary/50'}`}
                    >
                      <Icon className="size-4" />
                      <span
                        className={`hidden sm:inline ${isActive ? 'text-primary' : 'text-primary/50'}`}
                      >
                        {tab.label}
                      </span>
                    </TabsTrigger>
                  </TooltipTrigger>
                  <TooltipContent side="bottom" className="block sm:hidden">
                    {tab.label}
                  </TooltipContent>
                </Tooltip>
              );
            })}
          </TabsList>
          <div className="mt-2">{children}</div>
        </Tabs>
      </div>
    </div>
  );
}
