import { Badge } from "@workspace/ui/components/badge";
import {
  ProTable,
  type ProTableActions,
} from "@workspace/ui/composed/pro-table/pro-table";
import { getLotteryDrawList } from "@workspace/ui/services/admin/lottery";
import { useRef } from "react";
import { useTranslation } from "react-i18next";
import { formatDate } from "@/utils/common";

interface DrawsPanelProps {
  activity: API.LotteryActivity;
}

type TranslateFn = (key: string, defaultValue: string) => string;

const DISPATCH_META: Record<
  string,
  { labelKey: string; labelDefault: string; className: string }
> = {
  none: {
    labelKey: "draw.dispatchNone",
    labelDefault: "Pending",
    className: "bg-gray-100 text-gray-500 border-gray-200",
  },
  auto_claimed: {
    labelKey: "draw.dispatchAutoClaimed",
    labelDefault: "Auto-granted",
    className: "bg-emerald-100 text-emerald-700 border-emerald-200",
  },
  pending_claim: {
    labelKey: "draw.dispatchPendingClaim",
    labelDefault: "Awaiting claim",
    className: "bg-amber-100 text-amber-700 border-amber-200",
  },
  paid: {
    labelKey: "draw.dispatchPaid",
    labelDefault: "Fulfilled",
    className: "bg-emerald-100 text-emerald-700 border-emerald-200",
  },
  expired: {
    labelKey: "draw.dispatchExpired",
    labelDefault: "Expired",
    className: "bg-gray-100 text-gray-500 border-gray-200",
  },
  failed: {
    labelKey: "draw.dispatchFailed",
    labelDefault: "Failed",
    className: "bg-rose-100 text-rose-700 border-rose-200",
  },
};

function prizeTypeLabel(type: API.LotteryPrizeType, t: TranslateFn): string {
  const labels: Record<string, string> = {
    vpn_duration: t("prize.typeVpnDuration", "VPN Duration"),
    commission: t("prize.typeCommission", "Commission"),
    none: t("prize.typeNone", "No Prize (Thanks)"),
    crypto: t("prize.typeCrypto", "Crypto"),
    physical: t("prize.typePhysical", "Physical"),
    manual_other: t("prize.typeManualOther", "Manual (Other)"),
  };
  return labels[type] ?? type;
}

export default function DrawsPanel({ activity }: DrawsPanelProps) {
  const { t } = useTranslation("lottery");
  const ref = useRef<ProTableActions>(null);

  const dispatchOptions = Object.entries(DISPATCH_META).map(
    ([value, meta]) => ({
      value,
      label: t(meta.labelKey, meta.labelDefault),
    })
  );

  const winOptions = [
    { value: "1", label: t("draw.winOnly", "Won") },
    { value: "0", label: t("draw.loseOnly", "Not won") },
  ];

  return (
    <ProTable<
      API.AdminLotteryDraw,
      { win?: string; dispatch_state?: string; user_id?: string }
    >
      action={ref}
      columns={[
        { accessorKey: "draw_id", header: "ID" },
        {
          accessorKey: "user",
          header: t("draw.user", "User"),
          cell: ({ row }) => (
            <div className="text-sm">
              <div>#{row.original.user.id}</div>
              {row.original.user.email && (
                <div className="text-muted-foreground text-xs">
                  {row.original.user.email}
                </div>
              )}
            </div>
          ),
        },
        {
          accessorKey: "prize",
          header: t("draw.prize", "Prize"),
          cell: ({ row }) => {
            const prize = row.original.prize;
            if (!(row.original.is_win && prize)) {
              return (
                <span className="text-muted-foreground">
                  {t("prize.typeNone", "No Prize (Thanks)")}
                </span>
              );
            }
            return (
              <div className="text-sm">
                <div className="font-medium">{prize.name}</div>
                <Badge className="mt-0.5" variant="secondary">
                  {prizeTypeLabel(prize.type, t)}
                </Badge>
              </div>
            );
          },
        },
        {
          accessorKey: "dispatch_state",
          header: t("draw.dispatchState", "Dispatch"),
          cell: ({ row }) => {
            const meta = DISPATCH_META[row.original.dispatch_state];
            return (
              <Badge className={meta?.className} variant="outline">
                {meta
                  ? t(meta.labelKey, meta.labelDefault)
                  : row.original.dispatch_state}
              </Badge>
            );
          },
        },
        {
          accessorKey: "grant_message",
          header: t("draw.grant", "Grant result"),
          cell: ({ row }) => (
            <div className="max-w-[220px] break-all text-xs">
              {row.original.grant_message || "--"}
              {row.original.dispatch_error && (
                <div className="text-rose-600">
                  {row.original.dispatch_error}
                </div>
              )}
            </div>
          ),
        },
        {
          accessorKey: "drawn_at",
          header: t("draw.drawnAt", "Drawn at"),
          cell: ({ row }) =>
            row.original.drawn_at ? formatDate(row.original.drawn_at) : "--",
        },
      ]}
      header={{ title: t("draw.tableTitle", "Draw records") }}
      params={[
        {
          key: "win",
          options: winOptions,
          placeholder: t("draw.filterWin", "Won?"),
        },
        {
          key: "dispatch_state",
          options: dispatchOptions,
          placeholder: t("draw.filterDispatch", "Dispatch"),
        },
        {
          key: "user_id",
          placeholder: t("draw.filterUserId", "User ID"),
        },
      ]}
      request={async (pagination, filter) => {
        const { data } = await getLotteryDrawList({
          page: pagination.page,
          size: pagination.size,
          activity_id: activity.id,
          win: (filter.win as "1" | "0") || undefined,
          dispatch_state: filter.dispatch_state || undefined,
          user_id: filter.user_id ? Number(filter.user_id) : undefined,
        });
        return {
          list: data.data?.list || [],
          total: data.data?.total || 0,
        };
      }}
    />
  );
}
