"use client";

import type { AuctionListing } from "@domainops/shared-types";
import { App, Form, InputNumber, Modal, Typography } from "antd";
import { useState } from "react";
import { placeAuctionBid } from "@/lib/api/auctions";
import { ApiError } from "@/lib/api/client";

interface FormValues {
  amount: number;
}

export function BidModal({
  listing,
  onClose,
  onUpdated,
}: {
  listing: AuctionListing | null;
  onClose: () => void;
  onUpdated: () => void;
}) {
  const { message } = App.useApp();
  const [form] = Form.useForm<FormValues>();
  const [isSubmitting, setIsSubmitting] = useState(false);

  async function handleSubmit(values: FormValues) {
    if (!listing) return;
    setIsSubmitting(true);
    try {
      await placeAuctionBid(listing.id, values.amount);
      message.success(`Bid recorded for ${listing.fqdn}.`);
      form.resetFields();
      onUpdated();
    } catch (err) {
      message.error(err instanceof ApiError ? err.message : "Couldn't record the bid.");
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    <Modal
      title={listing ? `Place Bid - ${listing.fqdn}` : "Place Bid"}
      open={!!listing}
      onCancel={onClose}
      onOk={() => form.submit()}
      confirmLoading={isSubmitting}
      okText="Confirm bid"
      destroyOnHidden
      className="dms_bid_modal"
    >
      <Typography.Paragraph type="secondary">
        This platform doesn&apos;t expose a public bidding API - place the bid directly on the
        platform&apos;s site first, then record what you bid here.
      </Typography.Paragraph>
      <Form<FormValues> form={form} layout="vertical" onFinish={handleSubmit} className="dms_bid_form">
        <Form.Item
          name="amount"
          label="Bid amount"
          rules={[{ required: true, message: "Enter the amount you bid" }]}
          className="dms_bid_amount_field"
        >
          <InputNumber<number> style={{ width: "100%" }} min={0.01} step={0.01} prefix="$" autoFocus />
        </Form.Item>
      </Form>
    </Modal>
  );
}