"use client";

import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";

import {
  getAdminDraw,
  postAdminCancelDraw,
  postAdminManualCloseDraw,
  postAdminReopenDraw,
  postAdminRunDrawRng,
} from "@/api/admin-draws";
import { postAdminRunDrawSettlement } from "@/api/admin-settlement";
import { Button, buttonVariants } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { useAdminDateTimeFormatter } from "@/hooks/use-admin-datetime-formatter";
import { useConfirmAction } from "@/hooks/use-confirm-action";
import { LotteryApiBizError } from "@/types/api/errors";
import type { AdminDrawShowData } from "@/types/api/admin-draws";
import { adminHasAnyPermission } from "@/lib/admin-permissions";
import { useAdminProfile } from "@/stores/admin-session";

import { cn } from "@/lib/utils";

import {
  drawResultSourceLabel,
  drawStatusLabel,
  hallPreviewDiffersFromDbStatus,
} from "./draw-display";
import { DrawStatusBadge } from "./draw-status-badge";
import {
  PRD_DRAW_REOPEN_MANAGE,
  PRD_DRAW_RESULT_MANAGE,
  PRD_PAYOUT_MANAGE,
  PRD_PAYOUT_REVIEW,
} from "./draw-prd";

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="grid gap-1 sm:grid-cols-[10rem_1fr] sm:items-start">
      <Label className="text-muted-foreground">{label}</Label>
      <div className="text-sm">{children}</div>
    </div>
  );
}

export function DrawDetailConsole({ drawId }: { drawId: string }) {
  const { t } = useTranslation(["draws", "common"]);
  const idNum = Number(drawId);
  const profile = useAdminProfile();
  const canManageDraw = adminHasAnyPermission(profile?.permissions, [PRD_DRAW_RESULT_MANAGE]);
  const canReopenDraw = adminHasAnyPermission(profile?.permissions, [PRD_DRAW_REOPEN_MANAGE]);
  const canRunSettlement = adminHasAnyPermission(profile?.permissions, [
    PRD_PAYOUT_MANAGE,
    PRD_PAYOUT_REVIEW,
  ]);
  const formatDt = useAdminDateTimeFormatter();
  const [data, setData] = useState<AdminDrawShowData | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [acting, setActing] = useState<string | null>(null);
  const { request: requestConfirm, ConfirmDialog } = useConfirmAction();

  const load = useCallback(async () => {
    if (!Number.isFinite(idNum)) {
      setError(t("invalidDrawId"));
      setLoading(false);
      return;
    }
    setLoading(true);
    setError(null);
    try {
      setData(await getAdminDraw(idNum));
    } catch (e) {
      setData(null);
      setError(e instanceof LotteryApiBizError ? e.message : t("errors.loadFailed", { ns: "common" }));
    } finally {
      setLoading(false);
    }
  }, [idNum, t]);

  async function runAction(name: string, action: () => Promise<unknown>): Promise<void> {
    if (!Number.isFinite(idNum)) return;
    setActing(name);
    try {
      await action();
      toast.success(t("actionSuccess", { name }));
      await load();
    } catch (e) {
      toast.error(e instanceof LotteryApiBizError ? e.message : t("actionFailed", { name }));
    } finally {
      setActing(null);
    }
  }

  useEffect(() => {
    const timer = window.setTimeout(() => {
      void load();
    }, 0);
    return () => window.clearTimeout(timer);
  }, [load]);

  if (loading && !data) {
    return <p className="text-sm text-muted-foreground">{t("states.loading", { ns: "common" })}</p>;
  }

  if (error || !data) {
    return <p className="text-sm text-destructive">{error ?? t("states.noData", { ns: "common" })}</p>;
  }

  return (
    <div className="space-y-6">
      <Card className="overflow-hidden">
        <CardHeader className="border-b bg-muted/30 pb-4">
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div>
              <CardTitle className="text-xl">{data.draw_no}</CardTitle>
              <p className="mt-1 text-sm text-muted-foreground">{t("drawDetail")}</p>
            </div>
            <div className="flex flex-col items-end gap-1 text-right">
              <DrawStatusBadge
                status={data.status}
                label={drawStatusLabel(data.status, t)}
              />
              {hallPreviewDiffersFromDbStatus(data.status, data.hall_preview_status) ? (
                <p className="flex flex-wrap items-center justify-end gap-2 text-sm text-muted-foreground">
                  <span>{t("hallPreviewStatusLabel")}</span>
                  <DrawStatusBadge
                    status={data.hall_preview_status}
                    label={drawStatusLabel(data.hall_preview_status, t)}
                  />
                </p>
              ) : null}
            </div>
          </div>
        </CardHeader>
        <CardContent className="grid gap-6 p-6 lg:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)]">
          <div className="space-y-4">
            <div className="grid gap-4 sm:grid-cols-2">
              <Field label={t("businessDate")}>{data.business_date}</Field>
              <Field label={t("sequenceNo")}>{data.sequence_no}</Field>
              <Field label={t("startTime")}>{formatDt(data.start_time)}</Field>
              <Field label={t("closeTime")}>{formatDt(data.close_time)}</Field>
              <Field label={t("plannedDraw")}>{formatDt(data.draw_time)}</Field>
              <Field label={t("coolingEndTime")}>{formatDt(data.cooling_end_time)}</Field>
            </div>
            <Separator />
            <div className="grid gap-4 sm:grid-cols-2">
              <Field label={t("resultSource")}>{drawResultSourceLabel(data.result_source, t)}</Field>
              <Field label={t("currentResultVersion")}>{data.current_result_version}</Field>
              <Field label={t("settleVersion")}>{data.settle_version}</Field>
              <Field label={t("isReopened")}>{data.is_reopened ? t("yes") : t("no")}</Field>
            </div>
          </div>

          <div className="rounded-xl border bg-muted/20 p-4">
            <p className="text-sm font-medium text-muted-foreground">{t("batchStats")}</p>
            <div className="mt-3 grid gap-3 text-sm">
              <div className="flex items-center justify-between rounded-lg bg-background px-3 py-2">
                <span>{t("batchTotal")}</span>
                <span className="font-semibold">{data.result_batch_counts.total}</span>
              </div>
              <div className="flex items-center justify-between rounded-lg bg-background px-3 py-2 text-amber-600 dark:text-amber-400">
                <span>{t("pendingReview")}</span>
                <span className="font-semibold">{data.result_batch_counts.pending_review}</span>
              </div>
              <div className="flex items-center justify-between rounded-lg bg-background px-3 py-2 text-emerald-600 dark:text-emerald-400">
                <span>{t("published")}</span>
                <span className="font-semibold">{data.result_batch_counts.published}</span>
              </div>
            </div>
            <Link
              href={`/admin/draws/${drawId}/finance`}
              className={cn(buttonVariants({ variant: "outline", size: "sm" }), "mt-4 w-full")}
            >
              {t("viewFinance")}
            </Link>
          </div>
        </CardContent>
      </Card>

      {(canManageDraw || canReopenDraw || canRunSettlement) ? (
        <Card>
          <CardHeader>
            <CardTitle className="text-base">{t("drawActions")}</CardTitle>
          </CardHeader>
          <CardContent className="flex flex-wrap gap-2">
          <Button
            type="button"
            variant="outline"
            size="sm"
            disabled={!canManageDraw || acting !== null || !["pending", "open"].includes(data.status)}
            onClick={() =>
              requestConfirm({
                title: t("confirm.manualCloseTitle"),
                description: t("confirm.manualCloseDescription"),
                onConfirm: () => runAction(t("manualClose"), () => postAdminManualCloseDraw(idNum)),
              })
            }
          >
            {acting === t("manualClose") ? t("processing") : t("manualClose")}
          </Button>
          <Button
            type="button"
            variant="outline"
            size="sm"
            disabled={!canManageDraw || acting !== null || !["pending", "open", "closing", "closed"].includes(data.status)}
            onClick={() =>
              requestConfirm({
                title: t("confirm.cancelDrawTitle"),
                description: t("confirm.cancelDrawDescription"),
                onConfirm: () => runAction(t("cancelDraw"), () => postAdminCancelDraw(idNum)),
              })
            }
          >
            {acting === t("cancelDraw") ? t("processing") : t("cancelBeforeDraw")}
          </Button>
          <Button
            type="button"
            variant="outline"
            size="sm"
            disabled={!canManageDraw || acting !== null || data.status !== "closed"}
            onClick={() =>
              requestConfirm({
                title: t("confirm.rngDrawTitle"),
                description: t("confirm.rngDrawDescription"),
                onConfirm: () => runAction(t("rngDraw"), () => postAdminRunDrawRng(idNum)),
              })
            }
          >
            {acting === t("rngDraw") ? t("generating") : t("rngAutoGenerate")}
          </Button>
          {canReopenDraw ? (
            <Button
              type="button"
              variant="destructive"
              size="sm"
              disabled={acting !== null || data.status !== "cooldown"}
              onClick={() =>
                requestConfirm({
                  title: t("confirm.reopenTitle"),
                  description: t("confirm.reopenDescription"),
                  confirmVariant: "destructive",
                  onConfirm: () => runAction(t("reopen"), () => postAdminReopenDraw(idNum)),
                })
              }
            >
              {acting === t("reopen") ? t("processing") : t("cooldownReopen")}
            </Button>
          ) : null}
          <Button
            type="button"
            variant="outline"
            size="sm"
            disabled={!canRunSettlement || acting !== null || data.status !== "settling"}
            onClick={() =>
              requestConfirm({
                title: t("confirm.runSettlementTitle"),
                description: t("confirm.runSettlementDescription"),
                onConfirm: () => runAction(t("runSettlement"), () => postAdminRunDrawSettlement(idNum)),
              })
            }
          >
            {acting === t("runSettlement") ? t("processing") : t("runSettlement")}
          </Button>
          </CardContent>
        </Card>
      ) : null}
      <ConfirmDialog />
    </div>
  );
}