"use client";

import { Eye } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";

import {
  getAdminReconcileJobItems,
  getAdminReconcileJobs,
  postAdminReconcileJob,
} from "@/api/admin-reconcile";
import { getAdminPlayers } from "@/api/admin-player";
import { AdminDateRangeField } from "@/components/admin/admin-date-range-field";
import { AdminListPaginationFooter } from "@/components/admin/admin-list-pagination-footer";
import { AdminRowActionsMenu } from "@/components/admin/admin-row-actions-menu";
import { AdminStatusBadge } from "@/components/admin/admin-status-badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { useConfirmAction } from "@/hooks/use-confirm-action";
import { useAdminDateTimeFormatter } from "@/hooks/use-admin-datetime-formatter";
import { adminHasAnyPermission } from "@/lib/admin-permissions";
import { cn } from "@/lib/utils";
import { useAdminProfile } from "@/stores/admin-session";
import { LotteryApiBizError } from "@/types/api/errors";
import type { AdminPlayerRow } from "@/types/api/admin-player";
import type {
  AdminReconcileItemsData,
  AdminReconcileJobListData,
} from "@/types/api/admin-reconcile";

const MANAGE = ["prd.wallet_reconcile.manage"] as const;

/** 与后端 reconcile_type 对齐；扩展时在 API 与下拉同步增加 */
const RECONCILE_TYPE = "wallet_transfer" as const;

function jobStatusLabel(status: string, t: (key: string) => string): string {
  switch (status) {
    case "completed":
      return t("statusCompleted");
    case "running":
      return t("statusRunning");
    case "failed":
      return t("statusFailed");
    default:
      return status;
  }
}

function itemStatusLabel(status: string, t: (key: string) => string): string {
  switch (status) {
    case "mismatch":
      return t("itemMismatch");
    case "matched":
      return t("itemMatched");
    case "pending_check":
      return t("itemPendingCheck");
    default:
      return status;
  }
}

function reconcileTypeLabel(type: string, t: (key: string) => string): string {
  switch (type) {
    case "wallet_transfer":
      return t("reconcileTypeWalletTransfer");
    default:
      return type;
  }
}

export function ReconcileConsole(): React.ReactElement {
  const { t } = useTranslation(["reconcile", "common"]);
  const { request: requestConfirm, ConfirmDialog } = useConfirmAction();
  const profile = useAdminProfile();
  const canCreate = adminHasAnyPermission(profile?.permissions, [...MANAGE]);
  const formatTs = useAdminDateTimeFormatter();

  const [jobs, setJobs] = useState<AdminReconcileJobListData | null>(null);
  const [jobsLoading, setJobsLoading] = useState(true);
  const [jobsErr, setJobsErr] = useState<string | null>(null);
  const [page, setPage] = useState(1);
  const [perPage, setPerPage] = useState(10);

  const [selectedId, setSelectedId] = useState<number | null>(null);
  const [detailOpen, setDetailOpen] = useState(false);
  const [items, setItems] = useState<AdminReconcileItemsData | null>(null);
  const [itemsPage, setItemsPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(10);
  const [itemsLoading, setItemsLoading] = useState(false);

  const [dateFrom, setDateFrom] = useState("");
  const [dateTo, setDateTo] = useState("");
  const [playerSearch, setPlayerSearch] = useState("");
  const [playerResults, setPlayerResults] = useState<AdminPlayerRow[]>([]);
  const [playerLoading, setPlayerLoading] = useState(false);
  const [selectedPlayer, setSelectedPlayer] = useState<AdminPlayerRow | null>(null);
  const [submitting, setSubmitting] = useState(false);

  const loadJobs = useCallback(async () => {
    setJobsLoading(true);
    setJobsErr(null);
    try {
      const d = await getAdminReconcileJobs({ page, per_page: perPage });
      setJobs(d);
    } catch (e) {
      setJobsErr(e instanceof LotteryApiBizError ? e.message : t("loadFailed"));
      setJobs(null);
    } finally {
      setJobsLoading(false);
    }
  }, [page, perPage, t]);

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

  const loadItems = useCallback(async () => {
    if (selectedId == null) {
      setItems(null);
      return;
    }
    setItemsLoading(true);
    try {
      const d = await getAdminReconcileJobItems(selectedId, {
        page: itemsPage,
        per_page: itemsPerPage,
      });
      setItems(d);
    } catch (e) {
      toast.error(e instanceof LotteryApiBizError ? e.message : t("loadItemsFailed"));
      setItems(null);
    } finally {
      setItemsLoading(false);
    }
  }, [selectedId, itemsPage, itemsPerPage, t]);

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

  const loadPlayers = useCallback(async (keyword: string) => {
    const q = keyword.trim();
    if (q === "") {
      setPlayerResults([]);
      return;
    }
    setPlayerLoading(true);
    try {
      const data = await getAdminPlayers({ page: 1, per_page: 8, keyword: q });
      setPlayerResults(data.items);
    } catch {
      setPlayerResults([]);
    } finally {
      setPlayerLoading(false);
    }
  }, []);

  useEffect(() => {
    const q = playerSearch.trim();
    if (q === "") {
      return;
    }
    const timer = window.setTimeout(() => {
      void loadPlayers(q);
    }, 250);
    return () => window.clearTimeout(timer);
  }, [loadPlayers, playerSearch]);

  async function onCreate(): Promise<void> {
    if (!dateFrom.trim() || !dateTo.trim()) {
      toast.error(t("periodRequired"));
      return;
    }
    if (dateFrom > dateTo) {
      toast.error(t("periodOrderInvalid"));
      return;
    }

    setSubmitting(true);
    try {
      await postAdminReconcileJob({
        reconcile_type: RECONCILE_TYPE,
        date_from: dateFrom,
        date_to: dateTo,
        player_id: selectedPlayer ? selectedPlayer.id : null,
      });
      toast.success(t("createSuccess"));
      setPage(1);
      setDateFrom("");
      setDateTo("");
      setPlayerSearch("");
      setSelectedPlayer(null);
      setPlayerResults([]);
      await loadJobs();
    } catch (e) {
      toast.error(e instanceof LotteryApiBizError ? e.message : t("createFailed"));
    } finally {
      setSubmitting(false);
    }
  }

  const jm = jobs?.meta;
  const im = items?.meta;
  const selectedJob = jobs?.items.find((job) => job.id === selectedId) ?? null;

  return (
    <div className="flex w-full max-w-none flex-col gap-6">
      {canCreate ? (
        <Card className="admin-list-card">
          <CardHeader className="admin-list-header">
            <CardTitle className="admin-list-title">{t("createTitle")}</CardTitle>
          </CardHeader>
          <CardContent className="admin-list-content pt-4">
            <div className="grid gap-4 lg:grid-cols-[minmax(220px,0.9fr)_minmax(220px,0.95fr)_auto] lg:items-end">
              <div className="grid gap-1.5">
                <Label htmlFor="rc-type">{t("reconcileType")}</Label>
                <Input id="rc-type" value={t("reconcileTypeFixed")} readOnly className="bg-muted/30" />
              </div>
              <div className="grid gap-1.5">
                <AdminDateRangeField
                  id="rc-date-range"
                  label={t("dateRange")}
                  from={dateFrom}
                  to={dateTo}
                  onRangeChange={({ from, to }) => {
                    setDateFrom(from);
                    setDateTo(to);
                  }}
                />
              </div>
              <Button
                type="button"
                className="w-full lg:w-auto"
                disabled={submitting}
                onClick={() =>
                  requestConfirm({
                    title: t("confirmCreateTitle"),
                    description: t("confirmCreateDescription", {
                      playerHint: selectedPlayer
                        ? t("confirmCreatePlayer")
                        : t("confirmCreateAllPlayers"),
                    }),
                    onConfirm: () => onCreate(),
                  })
                }
              >
                {submitting ? t("submitting") : t("createTask")}
              </Button>
            </div>
            <div className="grid gap-1.5 pt-4">
              <Label htmlFor="rc-player-search">{t("playerSearch")}</Label>
              <Input
                id="rc-player-search"
                value={playerSearch}
                onChange={(e) => setPlayerSearch(e.target.value)}
                placeholder={t("playerSearchPlaceholder")}
              />
              {selectedPlayer ? (
                <div className="flex items-center justify-between gap-3 rounded-lg border bg-muted/20 px-3 py-2 text-sm">
                  <div className="min-w-0">
                    <div className="truncate font-medium text-foreground">
                      {selectedPlayer.site_player_id}
                      {selectedPlayer.nickname ? ` · ${selectedPlayer.nickname}` : ""}
                      {selectedPlayer.username ? ` · ${selectedPlayer.username}` : ""}
                    </div>
                  </div>
                  <Button
                    type="button"
                    size="sm"
                    variant="outline"
                    onClick={() => {
                      setSelectedPlayer(null);
                      setPlayerSearch("");
                      setPlayerResults([]);
                    }}
                  >
                    {t("playerClear")}
                  </Button>
                </div>
              ) : null}
              {playerSearch.trim() !== "" || playerResults.length > 0 || playerLoading ? (
                <div className="rounded-lg border bg-background">
                  <div className="max-h-56 overflow-y-auto">
                    {playerLoading ? (
                      <div className="px-3 py-2 text-sm text-muted-foreground">{t("loadingPlayers")}</div>
                    ) : playerResults.length === 0 ? (
                      <div className="px-3 py-2 text-sm text-muted-foreground">{t("playerNoResults")}</div>
                    ) : (
                      <div className="divide-y">
                        {playerResults.map((player) => {
                          const active = selectedPlayer?.id === player.id;
                          return (
                            <button
                              key={player.id}
                              type="button"
                              className={cn(
                                "flex w-full items-start justify-between gap-3 px-3 py-2.5 text-left text-sm transition-colors hover:bg-muted/25",
                                active && "bg-muted/30",
                              )}
                              onClick={() => {
                                setSelectedPlayer(player);
                                setPlayerSearch(player.site_player_id);
                              }}
                            >
                              <div className="min-w-0">
                                <div className="truncate font-medium text-foreground">
                                  {player.site_player_id}
                                  {player.nickname ? ` · ${player.nickname}` : ""}
                                </div>
                                <div className="truncate text-xs text-muted-foreground">
                                  {player.username ?? "—"} · {player.site_code}
                                </div>
                              </div>
                              <span className="shrink-0 text-xs text-muted-foreground">
                                {active ? t("playerSelectedShort") : t("playerChoose")}
                              </span>
                            </button>
                          );
                        })}
                      </div>
                    )}
                  </div>
                </div>
              ) : null}
            </div>
          </CardContent>
        </Card>
      ) : (
        <p className="text-muted-foreground text-sm">{t("noCreatePermission")}</p>
      )}

      <Card className="admin-list-card">
        <CardHeader className="admin-list-header flex flex-row flex-wrap items-end justify-between gap-4">
          <div>
            <CardTitle className="admin-list-title">{t("jobsTitle")}</CardTitle>
          </div>
          <Button type="button" variant="secondary" size="sm" onClick={() => void loadJobs()}>
            {t("refresh")}
          </Button>
        </CardHeader>
        <CardContent className="admin-list-content pt-4">
          {jobsErr ? <p className="text-sm text-red-600 dark:text-red-400">{jobsErr}</p> : null}
          {jobsLoading && !jobs ? (
            <p className="text-muted-foreground text-sm">{t("states.loading", { ns: "common" })}</p>
          ) : null}
          {jobs ? (
            <>
              <div className="admin-table-shell">
                <Table id="reconcile-jobs-table">
                  <TableHeader>
                    <TableRow>
                      <TableHead className="sticky left-0 z-20 w-24 bg-muted/20 shadow-[1px_0_0_rgba(203,213,225,0.7)]">
                        {t("table.id", { ns: "common" })}
                      </TableHead>
                      <TableHead className="sticky left-24 z-20 min-w-[14rem] bg-muted/20 shadow-[1px_0_0_rgba(203,213,225,0.7)]">
                        {t("jobNo")}
                      </TableHead>
                      <TableHead>{t("type")}</TableHead>
                      <TableHead>{t("status")}</TableHead>
                      <TableHead>{t("period")}</TableHead>
                      <TableHead>{t("createdAt")}</TableHead>
                      <TableHead className="sticky right-0 z-20 w-14 bg-muted/20 text-center shadow-[-1px_0_0_rgba(203,213,225,0.7)]">
                        {t("operate")}
                      </TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {jobs.items.length === 0 ? (
                      <TableRow>
                        <TableCell colSpan={7} className="text-muted-foreground">
                          {t("states.noData", { ns: "common" })}
                        </TableCell>
                      </TableRow>
                    ) : (
                      jobs.items.map((row) => (
                        <TableRow key={row.id}>
                          <TableCell className="sticky left-0 z-10 bg-card tabular-nums shadow-[1px_0_0_rgba(226,232,240,0.9)]">
                            {row.id}
                          </TableCell>
                          <TableCell className="sticky left-24 z-10 min-w-[14rem] bg-card font-mono text-xs shadow-[1px_0_0_rgba(226,232,240,0.9)]">
                            {row.job_no}
                          </TableCell>
                          <TableCell className="text-sm">{reconcileTypeLabel(row.reconcile_type, t)}</TableCell>
                          <TableCell>
                            <AdminStatusBadge status={row.status}>
                              {jobStatusLabel(row.status, t)}
                            </AdminStatusBadge>
                          </TableCell>
                          <TableCell className="max-w-[16rem] text-xs text-muted-foreground">
                            <span className="line-clamp-2">
                              {row.period_start ? formatTs(row.period_start) : "—"} ~{" "}
                              {row.period_end ? formatTs(row.period_end) : "—"}
                            </span>
                          </TableCell>
                          <TableCell className="whitespace-nowrap font-mono text-[11px] text-muted-foreground">
                            {formatTs(row.created_at)}
                          </TableCell>
                          <TableCell className="sticky right-0 z-10 bg-card text-center shadow-[-1px_0_0_rgba(226,232,240,0.9)]">
                            <AdminRowActionsMenu
                              actions={[
                                {
                                  key: "view",
                                  label: t("view"),
                                  icon: Eye,
                                  onClick: () => {
                                    setSelectedId(row.id);
                                    setItemsPage(1);
                                    setDetailOpen(true);
                                  },
                                },
                              ]}
                            />
                          </TableCell>
                        </TableRow>
                      ))
                    )}
                  </TableBody>
                </Table>
              </div>
              {jm ? (
                <AdminListPaginationFooter
                  selectId="reconcile-jobs-per-page"
                  total={jm.total}
                  page={jm.current_page}
                  lastPage={Math.max(1, jm.last_page)}
                  perPage={jm.per_page}
                  loading={jobsLoading}
                  onPerPageChange={(n) => {
                    setPerPage(n);
                    setPage(1);
                  }}
                  onPageChange={setPage}
                />
              ) : null}
            </>
          ) : null}
        </CardContent>
      </Card>

      <Dialog
        open={detailOpen}
        onOpenChange={(open) => {
          setDetailOpen(open);
          if (!open) {
            setSelectedId(null);
            setItems(null);
          }
        }}
      >
        <DialogContent
          showCloseButton
          className="flex h-[min(86vh,780px)] !max-w-[min(920px,calc(100vw-2rem))] flex-col gap-0 overflow-hidden p-0"
        >
          <DialogHeader className="shrink-0 space-y-1 border-b bg-background px-5 py-4 pr-12">
            <DialogTitle className="text-base">{t("detailsTitle")}</DialogTitle>
            <DialogDescription className="font-mono text-xs">
              {selectedJob ? `${selectedJob.job_no} · #${selectedJob.id}` : selectedId != null ? `#${selectedId}` : ""}
            </DialogDescription>
          </DialogHeader>
          <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain bg-muted/15 px-5 py-4">
            {itemsLoading && !items ? (
              <p className="text-sm text-muted-foreground">{t("states.loading", { ns: "common" })}</p>
            ) : null}
            {items ? (
              <>
                <div className="mb-3 flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
                  <span>{t("jobNo")} {items.job_no}</span>
                  <span>·</span>
                  <span className="inline-flex items-center gap-1.5">
                    {t("status")}
                    {selectedJob ? (
                      <AdminStatusBadge status={selectedJob.status}>
                        {jobStatusLabel(selectedJob.status, t)}
                      </AdminStatusBadge>
                    ) : (
                      "—"
                    )}
                  </span>
                  <span>·</span>
                  <span>{t("period")} {selectedJob ? `${selectedJob.period_start ? formatTs(selectedJob.period_start) : "—"} ~ ${selectedJob.period_end ? formatTs(selectedJob.period_end) : "—"}` : "—"}</span>
                </div>
                <div className="rounded-lg border bg-background">
                  <Table id={`reconcile-items-table-${selectedId ?? "none"}`}>
                    <TableHeader>
                      <TableRow>
                        <TableHead className="w-20">{t("table.id", { ns: "common" })}</TableHead>
                        <TableHead>{t("sideARef")}</TableHead>
                        <TableHead>{t("sideBRef")}</TableHead>
                        <TableHead>{t("differenceAmount")}</TableHead>
                        <TableHead>{t("status")}</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {items.items.length === 0 ? (
                        <TableRow>
                          <TableCell colSpan={5} className="text-muted-foreground">
                            {t("noDetails")}
                          </TableCell>
                        </TableRow>
                      ) : (
                        items.items.map((r) => (
                          <TableRow key={r.id}>
                            <TableCell>{r.id}</TableCell>
                            <TableCell className="font-mono text-xs">{r.side_a_ref ?? "—"}</TableCell>
                            <TableCell className="font-mono text-xs">{r.side_b_ref ?? "—"}</TableCell>
                            <TableCell className="tabular-nums">{r.difference_amount}</TableCell>
                            <TableCell>
                              <AdminStatusBadge status={r.status}>
                                {itemStatusLabel(r.status, t)}
                              </AdminStatusBadge>
                            </TableCell>
                          </TableRow>
                        ))
                      )}
                    </TableBody>
                  </Table>
                </div>
                {im ? (
                  <div className="pt-4">
                    <AdminListPaginationFooter
                      selectId="reconcile-items-per-page"
                      total={im.total}
                      page={im.current_page}
                      lastPage={Math.max(1, im.last_page)}
                      perPage={im.per_page}
                      loading={itemsLoading}
                      onPerPageChange={(n) => {
                        setItemsPerPage(n);
                        setItemsPage(1);
                      }}
                      onPageChange={setItemsPage}
                    />
                  </div>
                ) : null}
              </>
            ) : null}
          </div>
        </DialogContent>
      </Dialog>
      <ConfirmDialog />
    </div>
  );
}
