"use client";

import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";

import {
  getAdminJackpotPools,
  postAdminJackpotManualBurst,
  putAdminJackpotPool,
} from "@/api/admin-jackpot";
import { useConfirmAction } from "@/hooks/use-confirm-action";
import { adminHasAnyPermission } from "@/lib/admin-permissions";
import { PRD_JACKPOT_MANAGE, PRD_JACKPOT_MANUAL_BURST } from "@/lib/admin-prd";
import { ModuleScaffold } from "@/components/admin/module-scaffold";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { toast } from "sonner";
import { useAdminProfile } from "@/stores/admin-session";
import { LotteryApiBizError } from "@/types/api/errors";
import type { AdminJackpotPoolRow } from "@/types/api/admin-jackpot";

type Draft = {
  current_amount: string;
  contribution_rate: string;
  trigger_threshold: string;
  payout_rate: string;
  force_trigger_draw_gap: string;
  min_bet_amount: string;
  combo_trigger_play_codes: string;
  status: string;
  manual_burst_draw_id: string;
};

function toDraft(p: AdminJackpotPoolRow): Draft {
  return {
    current_amount: String(p.current_amount),
    contribution_rate: String(p.contribution_rate),
    trigger_threshold: String(p.trigger_threshold),
    payout_rate: String(p.payout_rate),
    force_trigger_draw_gap: String(p.force_trigger_draw_gap),
    min_bet_amount: String(p.min_bet_amount),
    combo_trigger_play_codes: p.combo_trigger_play_codes.join(","),
    status: String(p.status),
    manual_burst_draw_id: "",
  };
}

type JackpotPoolsConsoleProps = {
  /** 嵌入运营配置单页时去掉外层脚手架与重复标题 */
  embedded?: boolean;
};

export function JackpotPoolsConsole({ embedded = false }: JackpotPoolsConsoleProps) {
  const { t } = useTranslation(["jackpot", "common"]);
  const profile = useAdminProfile();
  const canManageJackpot = adminHasAnyPermission(profile?.permissions, [PRD_JACKPOT_MANAGE]);
  const canManualBurst = adminHasAnyPermission(profile?.permissions, [PRD_JACKPOT_MANUAL_BURST]);
  const { request: requestConfirm, ConfirmDialog: ConfirmActionDialog } = useConfirmAction();
  const [items, setItems] = useState<AdminJackpotPoolRow[]>([]);
  const [drafts, setDrafts] = useState<Record<number, Draft>>({});
  const [loading, setLoading] = useState(true);
  const [savingId, setSavingId] = useState<number | null>(null);
  const [burstingId, setBurstingId] = useState<number | null>(null);
  const [confirmBurstPoolId, setConfirmBurstPoolId] = useState<number | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const res = await getAdminJackpotPools();
      setItems(res.items);
      const d: Record<number, Draft> = {};
      for (const p of res.items) {
        d[p.id] = toDraft(p);
      }
      setDrafts(d);
    } catch (e) {
      toast.error(e instanceof LotteryApiBizError ? e.message : t("loadFailed"));
    } finally {
      setLoading(false);
    }
  }, [t]);

  useEffect(() => {
    queueMicrotask(() => {
      void load();
    });
  }, [load]);

  const updateDraft = (id: number, patch: Partial<Draft>) => {
    setDrafts((prev) => ({
      ...prev,
      [id]: { ...prev[id], ...patch },
    }));
  };

  const save = async (p: AdminJackpotPoolRow) => {
    const d = drafts[p.id];
    if (!d) return;
    setSavingId(p.id);
    try {
      await putAdminJackpotPool(p.id, {
        current_amount: Number.parseInt(d.current_amount, 10),
        contribution_rate: Number(d.contribution_rate),
        trigger_threshold: Number.parseInt(d.trigger_threshold, 10),
        payout_rate: Number(d.payout_rate),
        force_trigger_draw_gap: Number.parseInt(d.force_trigger_draw_gap, 10),
        min_bet_amount: Number.parseInt(d.min_bet_amount, 10),
        combo_trigger_play_codes: d.combo_trigger_play_codes
          .split(",")
          .map((v) => v.trim().toLowerCase())
          .filter(Boolean),
        status: Number.parseInt(d.status, 10),
      });
      toast.success(t("saveSuccess"));
      await load();
    } catch (e) {
      toast.error(e instanceof LotteryApiBizError ? e.message : t("saveFailed"));
    } finally {
      setSavingId(null);
    }
  };

  const manualBurst = async (p: AdminJackpotPoolRow) => {
    const d = drafts[p.id];
    if (!d) return;
    const drawId = Number.parseInt(d.manual_burst_draw_id, 10);
    if (!Number.isFinite(drawId) || drawId <= 0) {
      toast.error(t("invalidDrawId"));
      return;
    }

    setBurstingId(p.id);
    try {
      const res = await postAdminJackpotManualBurst(p.id, { draw_id: drawId });
      toast.success(
        `${t("manualBurstSuccess")} · ${res.draw_no} · ${res.winner_count} ${t("winnerCount")}`,
      );
      await load();
    } catch (e) {
      toast.error(e instanceof LotteryApiBizError ? e.message : t("manualBurstFailed"));
    } finally {
      setBurstingId(null);
      setConfirmBurstPoolId(null);
    }
  };

  const poolList = (
    <div className={embedded ? "space-y-4" : "space-y-8"}>
      {loading ? <p className="text-muted-foreground text-sm">{t("states.loading", { ns: "common" })}</p> : null}
      {!loading && items.length === 0 ? (
        <p className="text-muted-foreground text-sm">{t("noPoolData")}</p>
      ) : null}
      {items.map((p) => {
        const d = drafts[p.id] ?? toDraft(p);
        return (
          <div
            key={p.id}
            className="space-y-4 rounded-xl border border-border/60 bg-muted/10 p-4"
          >
            <h3 className="font-mono text-sm font-semibold">{p.currency_code}</h3>
            <fieldset disabled={!canManageJackpot} className="grid gap-4 border-0 p-0 sm:grid-cols-2 xl:grid-cols-4">
              <div className="space-y-1.5">
                <Label htmlFor={`amt-${p.id}`}>{t("currentAmount")}</Label>
                <Input
                  id={`amt-${p.id}`}
                  className="font-mono"
                  value={d.current_amount}
                  onChange={(e) => updateDraft(p.id, { current_amount: e.target.value })}
                />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor={`cr-${p.id}`}>{t("contributionRate")}</Label>
                <Input
                  id={`cr-${p.id}`}
                  className="font-mono"
                  value={d.contribution_rate}
                  onChange={(e) => updateDraft(p.id, { contribution_rate: e.target.value })}
                />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor={`th-${p.id}`}>{t("triggerThreshold")}</Label>
                <Input
                  id={`th-${p.id}`}
                  className="font-mono"
                  value={d.trigger_threshold}
                  onChange={(e) => updateDraft(p.id, { trigger_threshold: e.target.value })}
                />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor={`pr-${p.id}`}>{t("payoutRate")}</Label>
                <Input
                  id={`pr-${p.id}`}
                  className="font-mono"
                  value={d.payout_rate}
                  onChange={(e) => updateDraft(p.id, { payout_rate: e.target.value })}
                />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor={`gap-${p.id}`}>{t("forceTriggerGap")}</Label>
                <Input
                  id={`gap-${p.id}`}
                  className="font-mono"
                  value={d.force_trigger_draw_gap}
                  onChange={(e) => updateDraft(p.id, { force_trigger_draw_gap: e.target.value })}
                />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor={`min-${p.id}`}>{t("minBetAmount")}</Label>
                <Input
                  id={`min-${p.id}`}
                  className="font-mono"
                  value={d.min_bet_amount}
                  onChange={(e) => updateDraft(p.id, { min_bet_amount: e.target.value })}
                />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor={`combo-${p.id}`}>{t("comboTriggerPlays")}</Label>
                <Input
                  id={`combo-${p.id}`}
                  className="font-mono"
                  value={d.combo_trigger_play_codes}
                  placeholder="straight,ibox"
                  onChange={(e) => updateDraft(p.id, { combo_trigger_play_codes: e.target.value })}
                />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor={`status-${p.id}`}>{t("status")}</Label>
                <Select
                  value={d.status}
                  onValueChange={(v) => updateDraft(p.id, { status: v ?? "0" })}
                >
                  <SelectTrigger id={`status-${p.id}`} className="w-full">
                    <SelectValue>{d.status === "1" ? t("enabled") : t("disabled")}</SelectValue>
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="0">{t("disabled")}</SelectItem>
                    <SelectItem value="1">{t("enabled")}</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </fieldset>
            {canManageJackpot ? (
              <div className="flex justify-end border-t border-border/60 pt-3">
                <Button
                  type="button"
                  disabled={savingId === p.id}
                  onClick={() =>
                    requestConfirm({
                      title: t("confirmSavePoolTitle"),
                      description: t("confirmSavePoolDescription"),
                      confirmLabel: t("confirm.confirmSave", { ns: "common" }),
                      onConfirm: () => save(p),
                    })
                  }
                >
                  {savingId === p.id ? t("saving") : t("save")}
                </Button>
              </div>
            ) : null}
            {canManualBurst ? (
            <div className="rounded-lg border border-amber-200/80 bg-amber-50/80 p-4 dark:border-amber-900/50 dark:bg-amber-950/30">
              <p className="mb-1 text-xs font-medium text-amber-900 dark:text-amber-200">
                {t("manualBurst")}
              </p>
              <p className="mb-3 text-xs text-amber-800/90 dark:text-amber-300/90">{t("manualBurstHint")}</p>
              <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end">
                <div className="min-w-0 flex-1 space-y-1.5 sm:max-w-xs">
                  <Label htmlFor={`burst-draw-${p.id}`}>{t("manualBurstDrawId")}</Label>
                  <Input
                    id={`burst-draw-${p.id}`}
                    className="font-mono"
                    value={d.manual_burst_draw_id}
                    onChange={(e) => updateDraft(p.id, { manual_burst_draw_id: e.target.value })}
                  />
                </div>
                <Button
                  type="button"
                  variant="destructive"
                  className="shrink-0 sm:ml-auto"
                  disabled={burstingId === p.id}
                  onClick={() => setConfirmBurstPoolId(p.id)}
                >
                  {burstingId === p.id ? t("processing") : t("manualBurst")}
                </Button>
              </div>
            </div>
            ) : null}
          </div>
        );
      })}
    </div>
  );

  const confirmPool = confirmBurstPoolId !== null ? items.find((p) => p.id === confirmBurstPoolId) : null;
  const confirmDraft = confirmPool ? drafts[confirmPool.id] : null;

  const confirmDialog = (
    <Dialog open={confirmBurstPoolId !== null} onOpenChange={(open) => !open && setConfirmBurstPoolId(null)}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{t("manualBurstConfirmTitle")}</DialogTitle>
          <DialogDescription>
            {t("manualBurstConfirmDescription", {
              drawId: confirmDraft?.manual_burst_draw_id ?? "—",
            })}
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button type="button" variant="outline" onClick={() => setConfirmBurstPoolId(null)}>
            {t("cancel")}
          </Button>
          <Button
            type="button"
            variant="destructive"
            disabled={confirmPool === undefined || burstingId !== null}
            onClick={() => confirmPool && void manualBurst(confirmPool)}
          >
            {t("manualBurstConfirm")}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );

  if (embedded) {
    return (
      <>
        {poolList}
        {confirmDialog}
        <ConfirmActionDialog />
      </>
    );
  }

  return (
    <ModuleScaffold>
      <Card>
        <CardHeader>
          <CardTitle className="text-base">{t("configTitle")}</CardTitle>
        </CardHeader>
        <CardContent>{poolList}</CardContent>
      </Card>
      {confirmDialog}
      <ConfirmActionDialog />
    </ModuleScaffold>
  );
}