import AdminTableUser from '@/components/common/admin-table-user';
import DataTable from '@/components/common/data-table';
import PageHeading from '@/components/common/page-heading';
import { TableBar } from '@/components/common/table-bar';
import { useTableData } from '@/data/useTableData';
import { useCurrency } from '@/hooks/use-currency';
import QueryBuilder from '@/lib/query-builder';
import { User } from '@/types';
import { MedalIcon } from '@phosphor-icons/react';
import { SortingState } from '@tanstack/react-table';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';

dayjs.extend(relativeTime);

type ReferralEarning = {
  id: number;
  user: User;
  from_user: User;
  level: number;
  amount: number;
  created_at: string;
};

const LEVEL_COLORS: Record<number, string> = {
  1: 'bg-yellow-100 text-yellow-700',
  2: 'bg-slate-100 text-slate-600',
  3: 'bg-orange-100 text-orange-600',
};

const ReferralEarnings = () => {
  const builder = QueryBuilder();
  builder.sort('created_at', 'desc');
  const [sorting, setSorting] = useState<SortingState>([]);
  const { items, isLoading, meta } = useTableData(
    `/admin/referral-earnings${builder.build()}`,
  );
  const { format } = useCurrency();
  const { t } = useTranslation();

  return (
    <>
      <PageHeading
        title={t('Referral Earnings')}
        description={t('All referral bonuses earned across the platform.')}
      />
      <TableBar
        dateFilter={false}
        builder={builder}
        searchFields={[
          'user.email',
          'user.first_name',
          'user.last_name',
          'fromUser.email',
          'fromUser.first_name',
          'fromUser.last_name',
        ]}
      />
      <DataTable
        data={items}
        sorting={sorting}
        setSorting={setSorting}
        isLoading={isLoading}
        pagination={meta}
        onPageChange={(p) => builder.page(p)}
        onLimitChange={(l) => builder.limit(l)}
        structure={[
          {
            accessorKey: 'id',
            header: t('ID'),
            cell: ({ row }) => (
              <span className="text-black/40">
                #{String(row.original.id).padStart(2, '0')}
              </span>
            ),
          },
          {
            accessorKey: 'user',
            header: t('Earner'),
            cell: ({ row }) => {
              const earning = row.original as ReferralEarning;
              return <AdminTableUser user={earning.user} />;
            },
          },
          {
            accessorKey: 'from_user',
            header: t('From User'),
            cell: ({ row }) => {
              const earning = row.original as ReferralEarning;
              return <AdminTableUser user={earning.from_user} />;
            },
          },
          {
            accessorKey: 'level',
            header: t('Level'),
            cell: ({ row }) => {
              const earning = row.original as ReferralEarning;
              const color =
                LEVEL_COLORS[earning.level] ?? 'bg-black/5 text-black/50';
              return (
                <span
                  className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold ${color}`}
                >
                  <MedalIcon weight="fill" className="size-3.5" />
                  {t('Level')} {earning.level}
                </span>
              );
            },
          },
          {
            accessorKey: 'amount',
            header: t('Amount'),
            cell: ({ row }) => {
              const earning = row.original as ReferralEarning;
              return (
                <span className="font-semibold text-success">
                  +{format(earning.amount)}
                </span>
              );
            },
          },
          {
            accessorKey: 'created_at',
            header: t('Date'),
            cell: ({ row }) => {
              const earning = row.original as ReferralEarning;
              return (
                <div>
                  <p>{dayjs(earning.created_at).format('MMM D, YYYY')}</p>
                  <p className="text-sm text-black/40">
                    {dayjs(earning.created_at).fromNow()}
                  </p>
                </div>
              );
            },
          },
        ]}
      />
    </>
  );
};

ReferralEarnings.title = 'Referral Earnings';

export default ReferralEarnings;