'use client'

import React, { useEffect, useState } from 'react'
import { format } from 'date-fns'
import { Bar } from 'react-chartjs-2'
import { toast } from 'react-toastify'
import { DateType } from 'react-tailwindcss-datepicker'
import { FiDollarSign } from 'react-icons/fi'
import {
  Chart as ChartJS,
  ArcElement,
  Tooltip,
  Legend,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
} from 'chart.js'

import FullPageLoader from '@/lib/components/FullPageLoader'
import { useAuth } from '@/lib/context/AuthContext'
import DatePicker, { FormattedDate } from '@/lib/components/DatePicker'
import { getKualaLumpurDate } from '@/lib/utils/date'
import { CommissionStat } from '@/lib/types/commission'
import { formatIDR } from '@/lib/utils/currency'
import { useScreenSize } from '@/lib/hooks/useScreenSize'
import AchievementLevelCard from './AchievementLevelCard'
import Timer from './Timer'
import CardStats from './CardStats'
import {
  CardStatsLoader,
  BarChartLoader,
  AchievementLevelCardLoader,
} from './ShimmerLoader'
import { getCommissionStats } from '@/lib/services/commission-stats-services'
import { cn } from '@/lib/utils/tw-merge'

// Register chart js
ChartJS.register(
  ArcElement,
  Tooltip,
  Legend,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
)

export default function MainContent() {
  const { user } = useAuth()
  const screenSize = useScreenSize()
  const [searchParams, setSearchParams] = useState<{
    startDate: DateType
    endDate: DateType
  }>({
    startDate: getKualaLumpurDate(),
    endDate: getKualaLumpurDate(),
  })
  const [commissionStats, setCommissionStats] = useState<CommissionStat | null>(
    null,
  )
  const [isLoading, setIsLoading] = useState(false)

  function getTimeBasedGreeting() {
    const hours = getKualaLumpurDate().getHours()

    if (hours < 12) return 'Good Morning'
    if (hours < 18) return 'Good Afternoon'

    return 'Good Evening'
  }

  function formatDate(dateStr: string) {
    const date = getKualaLumpurDate(new Date(`${dateStr}-01`))

    return new Intl.DateTimeFormat('en-US', {
      month: 'long',
      year: 'numeric',
    }).format(date)
  }

  function handleChangeDate(formattedDate: FormattedDate) {
    const startDate = formattedDate?.startDate
      ? new Date(formattedDate.startDate)
      : null
    const endDate = formattedDate?.endDate
      ? new Date(formattedDate.endDate)
      : null

    setSearchParams({
      startDate: startDate,
      endDate: endDate,
    })
  }

  useEffect(() => {
    async function fetchCommissionStats(date: string) {
      setIsLoading(true)

      try {
        const commissionStats = await getCommissionStats(date)
        setCommissionStats(commissionStats)
      } catch (error) {
        toast.error('Failed to fetch commission stats. Please try again later.')
        console.error('Error fetching commission stats:', error)
      } finally {
        setIsLoading(false)
      }
    }

    fetchCommissionStats(format(searchParams.startDate as Date, 'yyyy-MM-dd'))
  }, [searchParams])

  if (!user) return <FullPageLoader />

  return (
    <article className="max-w-7xl mx-auto">
      <section className="mt-10 flex sm:flex-row flex-col justify-between w-full">
        <div>
          <span
            className={cn(
              'inline-flex items-center rounded-full px-2.5 py-1 text-xs font-bold uppercase tracking-wider',
              user?.partner_type === 'affiliate'
                ? 'bg-amber-100 text-amber-700'
                : 'bg-blue-100 text-primary',
            )}
          >
            {user?.partner_type === 'affiliate'
              ? 'Affiliate Partner'
              : 'Travel Partner'}
          </span>
          <h1 className="text-3xl font-bold mt-3">
            {getTimeBasedGreeting()},{' '}
            <b>
              {user.business?.business_name ??
                user.driver?.name ??
                user?.affiliate?.name}
            </b>
          </h1>
          <p className="font-medium mt-2 text-sm text-gray-500">
            Welcome back to your dashboard.
          </p>
        </div>

        <Timer />
      </section>

      <div className="mt-10 w-full">
        <DatePicker
          inputId="date"
          displayFormat="MMMM YYYY"
          asSingle
          value={{
            startDate: searchParams.startDate as DateType,
            endDate: searchParams.endDate as DateType,
          }}
          onDateChange={handleChangeDate}
        />
      </div>

      <hr className="mt-5 mb-10 border-slate-200" />

      <section className="mt-10 grid lg:grid-cols-2 xl:grid-cols-3 gap-5 overflow-x-hidden">
        {isLoading ? (
          <React.Fragment>
            <CardStatsLoader />
            <CardStatsLoader />
            <CardStatsLoader />
          </React.Fragment>
        ) : (
          <React.Fragment>
            <CardStats
              color="blue"
              title="Total Commission"
              value={formatIDR(commissionStats?.total_commission ?? 0)}
              icon={<FiDollarSign className="text-blue-500 text-md" />}
            >
              <p className="font-normal text-subtitle text-sm">
                From the selected month
              </p>
            </CardStats>
            <CardStats
              color="amber"
              title="Pending Commission"
              value={formatIDR(commissionStats?.pending_balance ?? 0)}
              icon={<FiDollarSign className="text-amber-500 text-md" />}
            />
            <CardStats
              color="green"
              title="Available Commission"
              value={formatIDR(commissionStats?.available_balance ?? 0)}
              icon={<FiDollarSign className="text-green-500 text-md" />}
            >
              {Number(commissionStats?.locked_balance ?? 0) > 0 && (
                <p className="font-normal text-subtitle text-sm">
                  Your total funds of{' '}
                  {formatIDR(commissionStats?.locked_balance)} are in the
                  process of being withdrawn.
                </p>
              )}
            </CardStats>
          </React.Fragment>
        )}
      </section>

      <div className="grid grid-cols-12 sm:gap-10 mt-12 w-full">
        {isLoading ? (
          <React.Fragment>
            {screenSize >= 1278 && (
              <section
                className={cn('col-span-12', {
                  'xl:col-span-8': user?.partner_type === 'affiliate',
                })}
              >
                <BarChartLoader />
              </section>
            )}

            <section
              className={cn('col-span-12', {
                'xl:col-span-4': user?.partner_type === 'affiliate',
              })}
            >
              <AchievementLevelCardLoader />
            </section>
          </React.Fragment>
        ) : (
          <React.Fragment>
            {screenSize >= 1278 && (
              <section
                className={cn('col-span-12', {
                  'xl:col-span-8': user?.partner_type === 'affiliate',
                })}
              >
                <Bar
                  className="w-full"
                  data={{
                    labels: commissionStats?.commissions?.map((commission) =>
                      formatDate(commission.month),
                    ),
                    datasets: [
                      {
                        label: 'Total Commission',
                        barPercentage: 0.8,
                        borderRadius: 10,
                        data: commissionStats?.commissions?.map(
                          (commission) => commission.total_commission,
                        ),
                        backgroundColor: 'rgb(63 131 248)',
                      },
                    ],
                  }}
                  options={{
                    plugins: {
                      legend: {
                        labels: {
                          font: {
                            family: 'Figtree',
                            size: 12,
                          },
                        },
                      },
                    },
                    scales: {
                      y: {
                        beginAtZero: true,
                      },
                    },
                  }}
                />
              </section>
            )}

            {commissionStats?.affiliate_level &&
              user?.partner_type === 'affiliate' && (
                <section
                  className={cn('col-span-12', {
                    'xl:col-span-4': user?.partner_type === 'affiliate',
                  })}
                >
                  <AchievementLevelCard
                    affiliateLevel={commissionStats.affiliate_level}
                  />
                </section>
              )}
          </React.Fragment>
        )}
      </div>
    </article>
  )
}