"use client";

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

import { getAdminDrawResultBatches, postAdminCreateManualResultBatch } from "@/api/admin-draws";
import { Button, buttonVariants } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { useConfirmAction } from "@/hooks/use-confirm-action";
import { cn } from "@/lib/utils";
import { adminHasAnyPermission } from "@/lib/admin-permissions";
import { useAdminProfile } from "@/stores/admin-session";
import { LotteryApiBizError } from "@/types/api/errors";
import type { AdminDrawBatchesData } from "@/types/api/admin-draws";

import { drawStatusLabel } from "./draw-display";
import { PRD_DRAW_RESULT_MANAGE } from "./draw-prd";
import { DrawStatusBadge } from "./draw-status-badge";

const RESULT_SLOTS = [
  { prize_type: "first", prize_index: 0, label: "resultSlots.first" },
  { prize_type: "second", prize_index: 0, label: "resultSlots.second" },
  { prize_type: "third", prize_index: 0, label: "resultSlots.third" },
  ...Array.from({ length: 10 }, (_, i) => ({
    prize_type: "starter",
    prize_index: i,
    label: `resultSlots.starter`,
    labelIndex: i + 1,
  })),
  ...Array.from({ length: 10 }, (_, i) => ({
    prize_type: "consolation",
    prize_index: i,
    label: `resultSlots.consolation`,
    labelIndex: i + 1,
  })),
] as const;

export function DrawReviewConsole({ drawId }: { drawId: string }) {
  const { t } = useTranslation(["draws", "common"]);
  const profile = useAdminProfile();
  const canManageDraw = adminHasAnyPermission(profile?.permissions, [
    PRD_DRAW_RESULT_MANAGE,
  ]);
  const idNum = Number(drawId);
  const [data, setData] = useState<AdminDrawBatchesData | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [savingManual, setSavingManual] = useState(false);
  const { request: requestConfirm, ConfirmDialog } = useConfirmAction();
  const [manualNumbers, setManualNumbers] = useState<string[]>(
    () => RESULT_SLOTS.map(() => ""),
  );

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

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

  const pending = useMemo(() => data?.batches.filter((b) => b.status === "pending_review") ?? [], [
    data,
  ]);

  async function saveManualDraft(): Promise<void> {
    if (!Number.isFinite(idNum)) return;
    const invalid = manualNumbers.some((n) => !/^[0-9]{4}$/.test(n));
    if (invalid) {
      toast.error(t("enter23Numbers"));
      return;
    }

    setSavingManual(true);
    try {
      const res = await postAdminCreateManualResultBatch(idNum, {
        items: RESULT_SLOTS.map((slot, i) => ({
          prize_type: slot.prize_type,
          prize_index: slot.prize_index,
          number_4d: manualNumbers[i],
        })),
      });
      toast.success(t("draftSaved", { version: res.batch.result_version }));
      setManualNumbers(RESULT_SLOTS.map(() => ""));
      await load();
    } catch (e) {
      toast.error(e instanceof LotteryApiBizError ? e.message : t("saveFailed"));
    } finally {
      setSavingManual(false);
    }
  }

  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>
        <CardHeader>
          <CardTitle className="text-lg">{t("manualResultEntry")}</CardTitle>
          <p className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
            <span>{t("currentStatusLabel")}</span>
            <DrawStatusBadge
              status={data.draw_status}
              label={drawStatusLabel(data.draw_status, t)}
            />
            <span>· {t("currentStatusDraftHint")}</span>
          </p>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            {RESULT_SLOTS.map((slot, i) => (
              <label key={`${slot.prize_type}-${slot.prize_index}`} className="space-y-1.5">
                <span className="text-xs font-medium text-muted-foreground">
                  {t(slot.label, { index: "labelIndex" in slot ? slot.labelIndex : undefined })}
                </span>
                <Input
                  inputMode="numeric"
                  maxLength={4}
                  value={manualNumbers[i]}
                  disabled={!canManageDraw || savingManual}
                  placeholder="0000"
                  className="font-mono"
                  onChange={(e) => {
                    const next = e.target.value.replace(/\D/g, "").slice(0, 4);
                    setManualNumbers((old) => old.map((v, idx) => (idx === i ? next : v)));
                  }}
                />
              </label>
            ))}
          </div>
          <div className="flex flex-wrap items-center justify-end gap-2">
            <Button
              type="button"
              variant="outline"
              disabled={savingManual}
              onClick={() => setManualNumbers(RESULT_SLOTS.map(() => ""))}
            >
              {t("clear")}
            </Button>
            <Button
              type="button"
              disabled={!canManageDraw || savingManual || !["closed", "review"].includes(data.draw_status)}
              onClick={() =>
                requestConfirm({
                  title: t("confirm.saveManualDraftTitle"),
                  description: t("confirm.saveManualDraftDescription"),
                  onConfirm: () => saveManualDraft(),
                })
              }
            >
              {savingManual ? t("saving") : t("saveDraft")}
            </Button>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">{t("pendingBatches")}</CardTitle>
        </CardHeader>
        <CardContent>
        {pending.length === 0 ? (
          <p className="text-sm text-muted-foreground py-6 text-center">
            {t("noPendingBatches")}
          </p>
        ) : (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>{t("batchId")}</TableHead>
                <TableHead>{t("version", { version: "" }).replace(" v", "").trim()}</TableHead>
                <TableHead>{t("numberCount")}</TableHead>
                <TableHead className="text-center">{t("actions")}</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {pending.map((b) => (
                <TableRow key={b.id}>
                  <TableCell className="font-mono text-xs">{b.id}</TableCell>
                  <TableCell>v{b.result_version}</TableCell>
                  <TableCell>{b.items.length}</TableCell>
                  <TableCell className="text-center">
                    {canManageDraw ? (
                      <Link
                        href={`/admin/draws/${drawId}/publish/${b.id}`}
                        className={cn(buttonVariants({ size: "sm" }))}
                      >
                        {t("reviewAndPublishAction")}
                      </Link>
                    ) : (
                      <span className="text-xs text-muted-foreground">{t("noPublishPermission")}</span>
                    )}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        )}
        </CardContent>
      </Card>
      <ConfirmDialog />
    </div>
  );
}
