"use client";

import type { CloudflareAccount, CloudflareLinkedDomain, DomainStatus } from "@domainops/shared-types";
import { App, Table } from "antd";
import type { ColumnsType } from "antd/es/table";
import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import { listCloudflareLinkedDomains } from "@/lib/api/cloudflare";
import { ApiError } from "@/lib/api/client";
import { DomainStatusTag } from "@/components/features/DomainStatusTag";

/**
 * The expanded-row content under a Cloudflare account, not a separate
 * modal - matches Servers' account drill-down (ServerAccountDrawer),
 * keeping the linked-domains view in place next to the row it belongs to
 * instead of a click-away popup.
 */
export function LinkedDomainsPanel({ account }: { account: CloudflareAccount }) {
  const { message } = App.useApp();
  const [domains, setDomains] = useState<CloudflareLinkedDomain[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  const load = useCallback(async () => {
    setIsLoading(true);
    try {
      setDomains(await listCloudflareLinkedDomains(account.id));
    } catch (err) {
      message.error(err instanceof ApiError ? err.message : "Couldn't load linked domains.");
    } finally {
      setIsLoading(false);
    }
  }, [account.id, message]);

  useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect
    void load();
  }, [load]);

  const columns: ColumnsType<CloudflareLinkedDomain> = [
    {
      title: "Domain",
      dataIndex: "fqdn",
      render: (v: string, row) => (
        <Link href={`/domains/${row.id}`} className="font-mono">
          {v}
        </Link>
      ),
    },
    { title: "Project", render: (_, row) => row.brand?.name ?? "—" },
    { title: "Status", dataIndex: "status", render: (v: DomainStatus) => <DomainStatusTag status={v} /> },
  ];

  return (
    <Table<CloudflareLinkedDomain>
      rowKey="id"
      size="small"
      columns={columns}
      dataSource={domains}
      loading={isLoading}
      pagination={false}
      locale={{ emptyText: "No domains linked to this account yet." }}
      className="dms_cloudflare_linked_domains_table"
    />
  );
}