import { useEffect, useState } from "react";
import type { TravelPaymentChannel, TravelPaymentOrder } from "../../api/travelPayments";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "../ui/dialog";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { Label } from "../ui/label";

const PAYMENT_CHANNEL_OPTIONS: Array<{ value: TravelPaymentChannel; label: string }> = [
  { value: "bank_transfer", label: "银行转账" },
  { value: "corporate_card", label: "企业卡" },
  { value: "virtual_card", label: "虚拟卡" },
  { value: "manual", label: "手工录入" },
  { value: "other", label: "其他" },
];

export type TravelOrderMarkPaidDialogProps = {
  open: boolean;
  order: TravelPaymentOrder | null;
  pending?: boolean;
  onOpenChange: (open: boolean) => void;
  onConfirm: (payload: {
    paymentVoucherNo: string | null;
    paymentDate: string | null;
    paymentChannel: TravelPaymentChannel | null;
  }) => void;
};

export function TravelOrderMarkPaidDialog({
  open,
  order,
  pending = false,
  onOpenChange,
  onConfirm,
}: TravelOrderMarkPaidDialogProps) {
  const [paymentVoucherNo, setPaymentVoucherNo] = useState("");
  const [paymentDate, setPaymentDate] = useState("");
  const [paymentChannel, setPaymentChannel] = useState<TravelPaymentChannel | "">("bank_transfer");

  useEffect(() => {
    if (!open) {
      return;
    }
    setPaymentVoucherNo(order?.paymentVoucherNo ?? "");
    setPaymentDate(order?.paymentDate ?? "");
    setPaymentChannel((order?.paymentChannel as TravelPaymentChannel | null) ?? "bank_transfer");
  }, [open, order]);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>标记差旅订单已支付</DialogTitle>
          <DialogDescription>
            确认订单 `{order?.externalOrderNo ?? "-"}` 已完成对公支付；系统会按幂等键复用现有财务交接记录。
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <Label htmlFor="travel-order-payment-voucher">付款凭证号</Label>
              <Input
                id="travel-order-payment-voucher"
                className="mt-1"
                placeholder="可留空"
                value={paymentVoucherNo}
                onChange={(event) => setPaymentVoucherNo(event.target.value)}
              />
            </div>
            <div>
              <Label htmlFor="travel-order-payment-date">付款日期</Label>
              <Input
                id="travel-order-payment-date"
                className="mt-1"
                type="date"
                value={paymentDate}
                onChange={(event) => setPaymentDate(event.target.value)}
              />
            </div>
          </div>

          <div>
            <Label htmlFor="travel-order-payment-channel">付款渠道</Label>
            <select
              id="travel-order-payment-channel"
              className="select-std mt-1"
              value={paymentChannel}
              onChange={(event) => setPaymentChannel(event.target.value as TravelPaymentChannel | "")}
            >
              {PAYMENT_CHANNEL_OPTIONS.map((item) => (
                <option key={item.value} value={item.value}>
                  {item.label}
                </option>
              ))}
            </select>
          </div>
        </div>

        <DialogFooter>
          <Button type="button" variant="secondary" onClick={() => onOpenChange(false)} disabled={pending}>
            取消
          </Button>
          <Button
            type="button"
            onClick={() =>
              onConfirm({
                paymentVoucherNo: paymentVoucherNo.trim() || null,
                paymentDate: paymentDate || null,
                paymentChannel: paymentChannel || null,
              })
            }
            disabled={pending}
          >
            {pending ? "提交中..." : "确认已支付"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}