import { useApiSWR } from '@/hooks/useSWR';
import { router } from '@inertiajs/react';
import {
  ArrowRightIcon,
  IdentificationCardIcon,
  LightningIcon,
  MoneyIcon,
  PiggyBankIcon,
  WarningIcon,
} from '@phosphor-icons/react';
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';

type PendingCounts = {
  kyc: number;
  deposits: number;
  withdrawals: number;
  tickets: number;
};

const actions = [
  {
    key: 'kyc' as const,
    label: 'KYC Verifications',
    href: '/admin/kyc/pending',
    icon: (
      <IdentificationCardIcon size={18} className="shrink-0 text-violet-500" />
    ),
  },
  {
    key: 'deposits' as const,
    label: 'Pending Deposits',
    href: '/admin/transactions/deposits',
    icon: <PiggyBankIcon size={18} className="shrink-0 text-emerald-500" />,
  },
  {
    key: 'withdrawals' as const,
    label: 'Pending Withdrawals',
    href: '/admin/transactions/withdraws',
    icon: <MoneyIcon size={18} className="shrink-0 text-orange-500" />,
  },
  {
    key: 'tickets' as const,
    label: 'Support Tickets',
    href: '/admin/support-ticket',
    icon: <LightningIcon size={18} className="shrink-0 text-blue-500" />,
  },
];

export default function ActionsRequired() {
  const { data } = useApiSWR<PendingCounts>('/admin/dashboard/pending-counts', {
    refreshInterval: 60_000,
  });

  const total = data
    ? (data.kyc ?? 0) +
      (data.deposits ?? 0) +
      (data.withdrawals ?? 0) +
      (data.tickets ?? 0)
    : 0;

  const pendingActions = actions.filter((a) => data && (data[a.key] ?? 0) > 0);

  return (
    <Popover>
      <PopoverTrigger className="relative cursor-pointer p-2">
        <WarningIcon weight="bold" className="size-6" />
        {total > 0 && (
          <span className="absolute top-1 right-1 flex size-4 items-center justify-center rounded-full bg-amber-500 text-[10px] font-bold text-white">
            {total > 9 ? '9+' : total}
          </span>
        )}
      </PopoverTrigger>

      <PopoverContent align="end" className="w-72 p-0">
        <div className="border-b px-4 py-3">
          <p className="text-sm font-semibold">Actions Required</p>
          <p className="text-xs text-muted-foreground">
            {total > 0
              ? `${total} item${total === 1 ? '' : 's'} need${total === 1 ? 's' : ''} attention`
              : 'Everything is up to date'}
          </p>
        </div>

        <div className="flex flex-col py-1">
          {pendingActions.length === 0 ? (
            <div className="flex flex-col items-center gap-2 px-4 py-6 text-center">
              <WarningIcon size={32} className="text-black/20" />
              <p className="text-sm text-muted-foreground">
                No pending actions
              </p>
            </div>
          ) : (
            pendingActions.map((action) => (
              <button
                key={action.key}
                onClick={() => router.visit(action.href)}
                className="flex cursor-pointer items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-muted"
              >
                {action.icon}
                <span className="flex-1 text-sm">{action.label}</span>
                <span className="flex items-center gap-1.5 text-xs font-semibold text-amber-600">
                  {data![action.key]}
                  <ArrowRightIcon size={12} className="shrink-0" />
                </span>
              </button>
            ))
          )}
        </div>
      </PopoverContent>
    </Popover>
  );
}