'use client';

import { deleteCookie, getCookie } from 'cookies-next';
import { Building2, Fuel, User } from 'lucide-react';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import { Suspense } from 'react';

import { LoginForm } from '@/features/auth/login-form';

import { Container } from '@/shared/components/container';
import { useTextController } from '@/shared/language/hooks/use-text-controller';
import { Button } from '@/shared/shadcn-ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/shared/shadcn-ui/card';
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@/shared/shadcn-ui/tabs';

const tabs = [
  {
    label: 'auth.bonusClient',
    type: 'bonus' as const,
    title: 'auth.bonusLogin.title',
    description: 'auth.bonusLogin.description',
    Icon: User,
  },
  {
    label: 'auth.corporateClient',
    type: 'corporate' as const,
    title: 'auth.corporateLogin.title',
    description: 'auth.corporateLogin.description',
    Icon: Building2,
  },
];

function LoginPageTabs() {
  const { t } = useTextController();
  const router = useRouter();
  const searchParams = useSearchParams();

  const defaultTab = searchParams.get('tab') || 'bonus';

  const handleTabChange = (tabType: string) => {
    router.push(`?tab=${tabType}`, undefined);
  };

  return (
    <Tabs
      defaultValue={defaultTab}
      value={defaultTab}
      onValueChange={handleTabChange}
      className='w-full'
    >
      <TabsList className='mb-8 flex h-fit w-full flex-col sm:flex-row'>
        {tabs.map((tab) => {
          return (
            <TabsTrigger
              key={tab.label}
              value={tab.type}
              className='w-full cursor-pointer text-base'
            >
              <tab.Icon className='mr-2 h-4 w-4' /> {t(tab.label)}
            </TabsTrigger>
          );
        })}
      </TabsList>

      {tabs.map((tab) => {
        const tabCookieName = `${tab.type}__token`;

        const authenticationCookie = getCookie(tabCookieName);

        if (authenticationCookie) {
          return (
            <TabsContent key={tab.label} value={tab.type}>
              <Card>
                <CardHeader>
                  <CardTitle>{t(tab.title)}</CardTitle>
                </CardHeader>
                <CardContent className='flex justify-center gap-2 space-y-4'>
                  <Link
                    href={
                      tab.type === 'bonus'
                        ? '/customer-dashboard'
                        : '/corporate-dashboard'
                    }
                  >
                    <Button className='flex items-center'>Открыть</Button>
                  </Link>
                  <Button
                    variant='outline'
                    className='flex items-center gap-2'
                    onClick={() => {
                      deleteCookie(tabCookieName);
                      window.location.reload();
                    }}
                  >
                    Выйти
                  </Button>
                </CardContent>
              </Card>
            </TabsContent>
          );
        }

        return (
          <TabsContent key={tab.label} value={tab.type}>
            <Card>
              <CardHeader>
                <CardTitle>{t(tab.title)}</CardTitle>
                <CardDescription>{t(tab.description)}</CardDescription>
              </CardHeader>
              <CardContent className='space-y-4'>
                <LoginForm type={tab.type} />
              </CardContent>
            </Card>
          </TabsContent>
        );
      })}
    </Tabs>
  );
}

export default function LoginPage() {
  const { t } = useTextController();

  return (
    <main className='flex min-h-screen flex-col items-center justify-center'>
      <div className='flex-1'>
        <Container className='max-w-6xl'>
          <div className='mb-12 flex flex-col items-center text-center'>
            <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
              <Fuel className='h-6 w-6 text-red-600' />
            </div>
            <h1 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
              {t('auth.title')}
            </h1>
            <p className='max-w-2xl text-gray-600'>{t('auth.description')}</p>
          </div>

          <div data-aos='zoom-in' className='mx-auto max-w-lg'>
            <Suspense>
              <LoginPageTabs />
            </Suspense>

            <div className='mt-8 text-center text-sm text-gray-500'>
              <p>
                {t('auth.loginIssues')}{' '}
                <Link
                  href={`mailto:${t('auth.loginForm.contactUs.mail')}`}
                  className='text-red-600 hover:underline'
                >
                  {t('auth.contactLink')}
                </Link>
              </p>
            </div>
          </div>
        </Container>
      </div>
    </main>
  );
}
