import DataTable from '@/components/common/data-table';
import PageHeading from '@/components/common/page-heading';
import LoaderIcon from '@/components/icons/loader-icon';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { Switch } from '@/components/ui/switch';
import { toggleStatus } from '@/data/request/toggle-status';
import { useTableData } from '@/data/useTableData';
import { SharedData } from '@/types';
import { ReferralBonus } from '@/types/admin/referral-type';
import { replaceDashesWithSpaces } from '@/utils/strHelpers';
import { router, usePage } from '@inertiajs/react';
import { PencilSimpleIcon } from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

const Referrals = () => {
  const { branding } = usePage<SharedData>().props;
  const { data, isLoading } = useTableData<ReferralBonus[]>(
    '/admin/referral-bonuses',
  );

  const { t } = useTranslation();

  const handleStatusChange = (id: number) => {
    toast.promise(
      toggleStatus(`/api/admin/referral-bonuses/${id}/toggle-status`),
      {
        loading: t('Updating status...'),
        success: (res) => {
          if (!res.message) throw new Error(res.message);
          return res.message;
        },
        error: t('Failed to update status'),
      },
    );
  };

  if (isLoading)
    return (
      <div className="flex h-96 w-full items-center justify-center gap-2">
        <LoaderIcon />
        {t('Loading...')}
      </div>
    );

  return (
    <>
      <PageHeading
        title={t('Multi Level Referrals')}
        description={t('Manage your referral bonus structures and settings.')}
      />

      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
        {data?.map((item: ReferralBonus) => (
          <div key={item.id} className="rounded-xl bg-white p-4 shadow-box">
            <div className="mb-4 flex items-center justify-between">
              <h4 className="text-lg font-medium capitalize">
                {replaceDashesWithSpaces(item?.type)}
              </h4>
              <div className="flex items-center gap-2">
                <Switch
                  id={String(item?.id)}
                  defaultChecked={item?.is_active}
                  onCheckedChange={() => handleStatusChange(item?.id)}
                />
                <Button
                  variant="ghostPrimary"
                  onClick={() =>
                    router.visit(
                      `/admin/referrals/${item?.id}/update?type=${item?.type}`,
                    )
                  }
                  size="sm"
                >
                  <PencilSimpleIcon weight="bold" className="size-5" />
                </Button>
              </div>
            </div>

            <Separator className="mb-4" />

            <DataTable
              data={item?.referral_bonus_levels}
              isLoading={isLoading}
              rounded={true}
              shadow={false}
              structure={[
                {
                  accessorKey: 'level',
                  header: t('Level'),
                },
                {
                  accessorKey: 'amount',
                  header: t('Bonus'),
                  cell: ({ row }) => (
                    <div>
                      {row.original?.amount}
                      {row.original?.type === 'percentage'
                        ? '%'
                        : branding?.branding?.site_currency}
                    </div>
                  ),
                },
              ]}
            />
          </div>
        ))}
      </div>
    </>
  );
};

Referrals.title = 'Referrals';

export default Referrals;