"use client";

import { use, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useQuery } from "@tanstack/react-query";
import { Alert, Button, Chip, Modal, Spinner } from "@heroui/react";
import { ArrowLeft, ArrowRotateRight, TrashBin } from "@gravity-ui/icons";
import { APIError, api } from "@/lib/api";
import { useSession } from "@/lib/auth-client";
import dayjs from "@/lib/dayjs";
import InfoSection from "@/components/info-section";
import MetricIndicator from "@/components/metric-indicator";
import { BanknoteArrowUp, Clock, EvCharger } from "lucide-react";

const stopReasonLabelMap: Record<string, string> = {
  EmergencyStop: "紧急停止",
  EVDisconnected: "车辆断开",
  HardReset: "硬重启",
  Local: "本地结束",
  Other: "其他原因",
  PowerLoss: "断电结束",
  Reboot: "重启结束",
  Remote: "远程结束",
  SoftReset: "软重启",
  UnlockCommand: "解锁结束",
  DeAuthorized: "鉴权拒绝",
};

const idTagRejectLabelMap: Record<string, string> = {
  Blocked: "卡片不可用或余额不足",
  Expired: "卡片已过期",
  Invalid: "卡片无效",
  ConcurrentTx: "该卡已有进行中的订单",
};

function formatDuration(start: string, stop: string | null): string {
  if (!stop) return "进行中";
  const min = dayjs(stop).diff(dayjs(start), "minute");
  if (min < 60) return `${min} 分钟`;
  const h = Math.floor(min / 60);
  const m = min % 60;
  return `${h}h ${m}m`;
}

function formatDateTime(iso: string | null | undefined): string {
  if (!iso) return "—";
  return dayjs(iso).format("YYYY/M/D HH:mm:ss");
}

function formatEnergy(wh: number | null | undefined): string {
  if (wh == null) return "—";
  return `${(wh / 1000).toFixed(3)} kWh`;
}

function formatAmount(fen: number | null | undefined): string {
  if (fen == null) return "—";
  return `¥${(fen / 100).toFixed(2)}`;
}

export default function TransactionDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params);
  const router = useRouter();
  const txId = Number(id);
  const isValidId = Number.isInteger(txId) && txId > 0;

  const [stopping, setStopping] = useState(false);
  const [deleting, setDeleting] = useState(false);

  const { data: sessionData } = useSession();
  const isAdmin = sessionData?.user?.role === "admin";

  const {
    data: tx,
    isPending,
    isFetching,
    isError,
    error,
    refetch,
  } = useQuery({
    queryKey: ["transaction", txId],
    queryFn: () => api.transactions.get(txId),
    enabled: isValidId,
    refetchInterval: 3_000,
    retry: false,
  });

  const handleStop = async () => {
    if (!tx) return;
    setStopping(true);
    try {
      await api.transactions.stop(tx.id);
      await refetch();
    } finally {
      setStopping(false);
    }
  };

  const handleDelete = async () => {
    if (!tx) return;
    setDeleting(true);
    try {
      await api.transactions.delete(tx.id);
      router.push("/dashboard/transactions");
    } finally {
      setDeleting(false);
    }
  };

  if (!isValidId) {
    return (
      <div className="space-y-4">
        <Link
          href="/dashboard/transactions"
          className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-foreground"
        >
          <ArrowLeft className="size-4" />
          充电记录
        </Link>
        <p className="text-sm text-danger">无效的交易编号。</p>
      </div>
    );
  }

  if (isPending) {
    return (
      <div className="flex h-48 items-center justify-center">
        <Spinner />
      </div>
    );
  }

  if (isError || !tx) {
    const notFound = error instanceof APIError && error.status === 404;
    return (
      <div className="space-y-4">
        <Link
          href="/dashboard/transactions"
          className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-foreground"
        >
          <ArrowLeft className="size-4" />
          充电记录
        </Link>
        <p className="text-sm text-danger">
          {notFound ? "交易记录不存在。" : "加载交易记录失败。"}
        </p>
      </div>
    );
  }

  const energyWh = tx.energyWh ?? tx.liveEnergyWh;
  const amountFen = tx.chargeAmount ?? tx.estimatedCost;
  const isEstimatedEnergy = tx.energyWh == null && tx.liveEnergyWh != null;
  const isEstimatedAmount = tx.chargeAmount == null && tx.estimatedCost != null;
  const isRejected = tx.stopReason === "DeAuthorized";
  const stopReasonLabel = tx.stopReason
    ? (stopReasonLabelMap[tx.stopReason] ?? tx.stopReason)
    : "—";
  const rejectReason =
    tx.idTagStatus && tx.idTagStatus !== "Accepted"
      ? (idTagRejectLabelMap[tx.idTagStatus] ?? tx.idTagStatus)
      : "鉴权失败";

  return (
    <div className="space-y-6">
      <Link
        href="/dashboard/transactions"
        className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-foreground"
      >
        <ArrowLeft className="size-4" />
        充电记录
      </Link>

      <div className="flex flex-wrap items-start justify-between gap-4">
        <div className="space-y-1.5">
          <div className="flex flex-wrap items-center gap-2">
            <h1 className="font-mono text-2xl font-semibold text-foreground">订单 #{tx.id}</h1>
            {isRejected ? (
              <Chip color="danger" size="sm" variant="soft">
                已拒绝
              </Chip>
            ) : tx.stopTimestamp ? (
              <Chip color="success" size="sm" variant="soft">
                已完成
              </Chip>
            ) : (
              <Chip color="warning" size="sm" variant="soft">
                进行中
              </Chip>
            )}
            {isEstimatedAmount && (
              <Chip color="warning" size="sm" variant="soft">
                费用预估
              </Chip>
            )}
            {tx.stopReason && !isRejected && (
              <Chip color="default" size="sm" variant="soft">
                {stopReasonLabel}
              </Chip>
            )}
          </div>
          <p className="text-sm text-muted">
            开始于 {formatDateTime(tx.startTimestamp)} · {tx.stopTimestamp ? "时长 " : ""}
            {formatDuration(tx.startTimestamp, tx.stopTimestamp)}
          </p>
        </div>

        <div className="flex items-center gap-2">
          <Button
            isIconOnly
            size="sm"
            variant="ghost"
            isDisabled={isFetching}
            onPress={() => refetch()}
            aria-label="刷新"
          >
            <ArrowRotateRight className={`size-4 ${isFetching ? "animate-spin" : ""}`} />
          </Button>

          {!tx.stopTimestamp && (
            <Modal>
              <Button size="sm" variant="danger-soft" isDisabled={stopping}>
                {stopping ? <Spinner size="sm" /> : "中止充电"}
              </Button>
              <Modal.Backdrop>
                <Modal.Container scroll="outside">
                  <Modal.Dialog className="sm:max-w-96">
                    <Modal.CloseTrigger />
                    <Modal.Header>
                      <Modal.Heading>确认中止充电</Modal.Heading>
                    </Modal.Header>
                    <Modal.Body>
                      <p className="text-sm text-muted">
                        将远程中止充电交易{" "}
                        <span className="font-mono text-foreground">#{tx.id}</span>。
                      </p>
                    </Modal.Body>
                    <Modal.Footer className="flex justify-end gap-2">
                      <Button slot="close" variant="ghost">
                        取消
                      </Button>
                      <Button
                        slot="close"
                        variant="danger"
                        isDisabled={stopping}
                        onPress={handleStop}
                      >
                        {stopping ? <Spinner size="sm" /> : "确认中止"}
                      </Button>
                    </Modal.Footer>
                  </Modal.Dialog>
                </Modal.Container>
              </Modal.Backdrop>
            </Modal>
          )}

          {isAdmin && (
            <Modal>
              <Button isIconOnly size="sm" variant="tertiary" isDisabled={deleting}>
                {deleting ? <Spinner size="sm" /> : <TrashBin className="size-4" />}
              </Button>
              <Modal.Backdrop>
                <Modal.Container scroll="outside">
                  <Modal.Dialog className="sm:max-w-96">
                    <Modal.CloseTrigger />
                    <Modal.Header>
                      <Modal.Heading>确认删除记录</Modal.Heading>
                    </Modal.Header>
                    <Modal.Body>
                      <p className="text-sm text-muted">
                        将永久删除交易 <span className="font-mono text-foreground">#{tx.id}</span>。
                      </p>
                    </Modal.Body>
                    <Modal.Footer className="flex justify-end gap-2">
                      <Button slot="close" variant="ghost">
                        取消
                      </Button>
                      <Button
                        slot="close"
                        variant="danger"
                        isDisabled={deleting}
                        onPress={handleDelete}
                      >
                        {deleting ? <Spinner size="sm" /> : "确认删除"}
                      </Button>
                    </Modal.Footer>
                  </Modal.Dialog>
                </Modal.Container>
              </Modal.Backdrop>
            </Modal>
          )}
        </div>
      </div>

      <Alert status={isRejected ? "danger" : tx.stopTimestamp ? "success" : "accent"}>
        <Alert.Indicator />
        <Alert.Content>
          <Alert.Title>
            {isRejected ? "交易已被系统拒绝" : tx.stopTimestamp ? "本次交易已结束" : "充电进行中"}
          </Alert.Title>
          <Alert.Description>
            {isRejected
              ? rejectReason
              : tx.stopTimestamp
                ? `结束原因：${stopReasonLabel}`
                : "充电进行中，实际充电量和费用以结束时系统计算为准。"}
          </Alert.Description>
        </Alert.Content>
      </Alert>

      <div className="grid gap-4 md:grid-cols-4">
        <MetricIndicator
          title="充电量"
          color="border-success"
          icon={<EvCharger className="size-5 text-success" />}
          value={
            <span className="inline-flex items-center gap-1.5">
              {formatEnergy(energyWh)}
              {isEstimatedEnergy && (
                <span className="rounded bg-warning-soft px-1 py-0.5 text-[10px] font-semibold text-warning leading-none text-nowrap">
                  预估
                </span>
              )}
            </span>
          }
        />
        <MetricIndicator
          title="总费用"
          color="border-accent"
          icon={<BanknoteArrowUp className="size-5 text-accent" />}
          value={
            <span className="inline-flex items-center gap-1.5">
              {formatAmount(amountFen)}
              {isEstimatedAmount && (
                <span className="rounded bg-warning-soft px-1 py-0.5 text-[10px] font-semibold text-warning leading-none text-nowrap">
                  预估
                </span>
              )}
            </span>
          }
        />
        <MetricIndicator
          title="订单状态"
          icon={<Clock className="size-5 text-foreground" />}
          color={
            isRejected ? "border-danger" : tx.stopTimestamp ? "border-success" : "border-warning"
          }
          value={isRejected ? "已拒绝" : tx.stopTimestamp ? "已完成" : "进行中"}
        />
        <MetricIndicator title="停止原因" value={isRejected ? rejectReason : stopReasonLabel} />
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        <InfoSection title="交易信息">
          <dl className="divide-y divide-border">
            <div className="flex items-center justify-between gap-4 py-2">
              <dt className="shrink-0 text-sm text-muted">交易编号</dt>
              <dd className="font-mono text-sm text-foreground">#{tx.id}</dd>
            </div>
            <div className="flex items-center justify-between gap-4 py-2">
              <dt className="shrink-0 text-sm text-muted">储值卡</dt>
              <dd className="font-mono text-sm text-foreground">{tx.idTag}</dd>
            </div>
            <div className="flex items-center justify-between gap-4 py-2">
              <dt className="shrink-0 text-sm text-muted">桩编号</dt>
              <dd className="font-mono text-sm text-foreground">
                {tx.chargePointIdentifier ?? "—"}
              </dd>
            </div>
            <div className="flex items-center justify-between gap-4 py-2">
              <dt className="shrink-0 text-sm text-muted">连接器</dt>
              <dd className="text-sm text-foreground">{tx.connectorNumber ?? "—"}</dd>
            </div>
            <div className="flex items-center justify-between gap-4 py-2">
              <dt className="shrink-0 text-sm text-muted">开始时间</dt>
              <dd className="text-right text-sm text-foreground">
                {formatDateTime(tx.startTimestamp)}
              </dd>
            </div>
            <div className="flex items-center justify-between gap-4 py-2">
              <dt className="shrink-0 text-sm text-muted">结束时间</dt>
              <dd className="text-right text-sm text-foreground">
                {formatDateTime(tx.stopTimestamp)}
              </dd>
            </div>
            <div className="flex items-center justify-between gap-4 py-2">
              <dt className="shrink-0 text-sm text-muted">持续时长</dt>
              <dd className="text-sm text-foreground">
                {formatDuration(tx.startTimestamp, tx.stopTimestamp)}
              </dd>
            </div>
          </dl>
        </InfoSection>

        <InfoSection title="计量与费用">
          <dl className="divide-y divide-border">
            <div className="flex items-center justify-between gap-4 py-2">
              <dt className="shrink-0 text-sm text-muted">起始表计</dt>
              <dd className="text-sm text-foreground">
                {tx.startMeterValue != null ? `${tx.startMeterValue} Wh` : "—"}
              </dd>
            </div>
            <div className="flex items-center justify-between gap-4 py-2">
              <dt className="shrink-0 text-sm text-muted">结束表计</dt>
              <dd className="text-sm text-foreground">
                {tx.stopMeterValue != null ? `${tx.stopMeterValue} Wh` : "—"}
              </dd>
            </div>
            <div className="flex items-center justify-between gap-4 py-2">
              <dt className="shrink-0 text-sm text-muted">消耗电量</dt>
              <dd className="text-sm text-foreground">
                <span className="inline-flex items-center gap-1">
                  {formatEnergy(energyWh)}
                  {isEstimatedEnergy && (
                    <span className="rounded bg-warning-soft px-1 py-0.5 text-[10px] font-semibold text-warning leading-none text-nowrap">
                      预估
                    </span>
                  )}
                </span>
              </dd>
            </div>
            <div className="flex items-center justify-between gap-4 py-2">
              <dt className="shrink-0 text-sm text-muted">电费</dt>
              <dd className="text-sm text-foreground">{formatAmount(tx.electricityFee)}</dd>
            </div>
            <div className="flex items-center justify-between gap-4 py-2">
              <dt className="shrink-0 text-sm text-muted">服务费</dt>
              <dd className="text-sm text-foreground">{formatAmount(tx.serviceFee)}</dd>
            </div>
            <div className="flex items-center justify-between gap-4 py-2">
              <dt className="shrink-0 text-sm text-muted">总费用</dt>
              <dd className="text-sm text-foreground">
                <span className="inline-flex items-center gap-1">
                  {formatAmount(amountFen)}
                  {isEstimatedAmount && (
                    <span className="rounded bg-warning-soft px-1 py-0.5 text-[10px] font-semibold text-warning leading-none text-nowrap">
                      预估
                    </span>
                  )}
                </span>
              </dd>
            </div>
          </dl>
        </InfoSection>
      </div>
    </div>
  );
}