'use client';

import { ArrowUpRight, Clock, CreditCard, LogOut, User } from 'lucide-react';

import { useFetchMyBonusInfoQuery } from '@/entities/bonus/api/bonus.api';

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 { TransactionsTable } from '@/widgets/transactions-table';
import Loader from '@/shared/components/loader';

export function CustomerDashboard() {
  const { t } = useTextController();

  const { data, isLoading } = useFetchMyBonusInfoQuery({});

  return (
    <div className='flex min-h-screen flex-col px-2.5'>
      <main className='flex-1 py-10'>
        <div className='container mx-auto max-w-6xl'>
          <div className='mb-8 flex items-center justify-between'>
            <h1 className='text-3xl font-bold'>{t('customer.pageTitle')}</h1>
            <Button variant='outline' className='gap-2'>
              <LogOut className='h-4 w-4' />
              {t('customer.logoutButton')}
            </Button>
          </div>

          <div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
            <Card data-aos="zoom-in"  data-aos-mirror="true" className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
              {!data || isLoading ? (
                <Loader/>
              ) : (
                <>
                  <CardHeader>
                    <CardTitle className='flex items-center gap-2'>
                      <CreditCard className='h-5 w-5' />
                      {t('customer.bonusCard.title')}
                    </CardTitle>
                    <CardDescription className='text-white/80'>
                      {t('customer.bonusCard.description')}
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className='text-center'>
                      <p className='mb-2 text-4xl font-bold'>{data.bonuses}</p>
                      <p className='text-white/80'>
                        {t('customer.bonusCard.points')}
                      </p>
                    </div>
                    <div className='mt-6 flex items-center justify-between'>
                      <div className='flex items-center gap-1 text-sm text-white/80'>
                        <Clock className='h-4 w-4' />
                        <span>
                          {t('customer.bonusCard.validUntil')}{' '}
                          {new Date(data.end_date).toLocaleDateString('en-GB')}
                        </span>
                      </div>
                      <ArrowUpRight className='h-5 w-5 text-white/60' />
                    </div>
                  </CardContent>
                </>
              )}
            </Card>

            {/* Bonus Card */}
            {/* Customer Card */}
            <Card data-aos="zoom-in" data-aos-mirror="true"  className='md:col-span-2'>
              <CardHeader className='pb-2'>
                <CardTitle className='flex items-center gap-2'>
                  <User className='h-5 w-5 text-red-600' />
                  {t('customer.infoCard.title')}
                </CardTitle>
              </CardHeader>
              <CardContent>
                {!data || isLoading ? (
                  <Loader/>
                ) : (
                  <div className='grid gap-6 md:grid-cols-2'>
                    <div>
                      <div className='mb-4 space-y-1'>
                        <p className='text-sm text-gray-500'>
                          {t('customer.infoCard.regDateLabel')}
                        </p>
                        <p className='font-medium'>{data.fullname}</p>
                      </div>
                      <div className='space-y-1'>
                        <p className='text-sm text-gray-500'>
                          {t('customer.infoCard.regDateLabel')}
                        </p>
                        <p className='font-medium'>
                          {new Date(data.reg_date).toLocaleDateString('en-GB')}
                        </p>
                      </div>
                    </div>
                    <div>
                      <div className='mb-4 space-y-1'>
                        <p className='text-sm text-gray-500'>
                          {t('customer.infoCard.cardNumberLabel')}
                        </p>
                        <p className='font-medium'>{data.cardno}</p>
                      </div>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>

          <TransactionsTable />
        </div>
      </main>
    </div>
  );
}