"use client";

import type { CloudflareAccount, CloudflareZone } from "@domainops/shared-types";
import { App, Modal, Table } from "antd";
import type { ColumnsType } from "antd/es/table";
import { useEffect, useState } from "react";
import { listCloudflareZones } from "@/lib/api/cloudflare";
import { ApiError } from "@/lib/api/client";

export function ZonesModal({
  open,
  account,
  onClose,
}: {
  open: boolean;
  account: CloudflareAccount | null;
  onClose: () => void;
}) {
  const { message } = App.useApp();
  const [zones, setZones] = useState<CloudflareZone[]>([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    if (!open || !account) return;
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setIsLoading(true);
    listCloudflareZones(account.id)
      .then(setZones)
      .catch((err) => message.error(err instanceof ApiError ? err.message : "Couldn't load zones."))
      .finally(() => setIsLoading(false));
  }, [open, account, message]);

  const columns: ColumnsType<CloudflareZone> = [
    { title: "Zone", dataIndex: "name", render: (v: string) => <span className="font-mono">{v}</span> },
    { title: "Zone ID", dataIndex: "id", render: (v: string) => <span className="font-mono text-xs">{v}</span> },
  ];

  return (
    <Modal
      title={account ? `Zones - ${account.label}` : "Zones"}
      open={open}
      onCancel={onClose}
      footer={null}
      width={640}
      destroyOnHidden
      className="dms_cloudflare_zones_modal"
    >
      <Table<CloudflareZone>
        rowKey="id"
        size="small"
        columns={columns}
        dataSource={zones}
        loading={isLoading}
        pagination={false}
        locale={{ emptyText: "No zones under this account, or it hasn't been tested/synced yet." }}
        className="dms_cloudflare_zones_table"
      />
    </Modal>
  );
}