"use client";

import type { Region } from "@domainops/shared-types";
import { App, Form, Input, Modal } from "antd";
import { useEffect, useState } from "react";
import { createRegion, updateRegion } from "@/lib/api/domains";
import { ApiError } from "@/lib/api/client";

interface RegionFormValues {
  name: string;
  country_code: string;
}

export function RegionFormModal({
  open,
  region,
  onClose,
  onSaved,
}: {
  open: boolean;
  region?: Region | null;
  onClose: () => void;
  onSaved: (region: Region) => void;
}) {
  const { message } = App.useApp();
  const [form] = Form.useForm<RegionFormValues>();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const isEditing = !!region;

  useEffect(() => {
    if (open) form.setFieldsValue({ name: region?.name ?? "", country_code: region?.country_code ?? "" });
  }, [open, region, form]);

  async function handleSubmit(values: RegionFormValues) {
    setIsSubmitting(true);
    try {
      const saved = isEditing ? await updateRegion(region!.id, values) : await createRegion(values);
      message.success(isEditing ? `${saved.name} updated.` : `${saved.name} added.`);
      form.resetFields();
      onSaved(saved);
    } catch (err) {
      message.error(err instanceof ApiError ? err.message : "Couldn't save that region.");
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    <Modal
      title={isEditing ? "Edit Region" : "Create Region"}
      open={open}
      onCancel={onClose}
      onOk={() => form.submit()}
      confirmLoading={isSubmitting}
      okText={isEditing ? "Save" : "Create region"}
      destroyOnHidden
      className="dms_region_form_modal"
    >
      <Form<RegionFormValues> form={form} layout="vertical" onFinish={handleSubmit} className="dms_region_form_form">
        <Form.Item
          name="name"
          label="Region name"
          rules={[{ required: true, message: "Give it a name" }]}
          className="dms_region_form_name_field"
        >
          <Input placeholder="Singapore" autoFocus />
        </Form.Item>
        <Form.Item
          name="country_code"
          label="Country code"
          rules={[
            { required: true, message: "Enter a 2-letter country code" },
            { len: 2, message: "Must be exactly 2 letters" },
          ]}
          className="dms_region_form_country_code_field"
        >
          <Input placeholder="SG" maxLength={2} style={{ textTransform: "uppercase" }} />
        </Form.Item>
      </Form>
    </Modal>
  );
}