"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import {
  Alert,
  Badge,
  Button,
  Card,
  Col,
  Descriptions,
  Drawer,
  Form,
  Input,
  List,
  Row,
  Select,
  Space,
  Switch,
  Statistic,
  Table,
  Tag,
  Tabs,
  Tooltip,
  Typography,
  Empty,
  message,
} from "antd";
import type { ColumnsType, TablePaginationConfig } from "antd/es/table";
import {
  ExclamationCircleOutlined,
  ReloadOutlined,
  SearchOutlined,
  UserOutlined,
} from "@ant-design/icons";
import dayjs from "dayjs";

import DepartmentDropdown from "@/components/common/DepartmentDropdown";
import EmployeeDropdown from "@/components/common/EmployeeDropdown";
import { PageStateNotice } from "@/components/common/page-state-notice";
import {
  claimCaasmDomain,
  fetchCaasmDNSRecords,
  fetchCaasmDomainStats,
  fetchCaasmDomains,
  fetchCaasmRegistrars,
  fetchDNSRecordComments,
  updateDNSRecordOwner,
  addDNSRecordComment,
} from "@/lib/api/caasm";
import { fetchDepartments } from "@/lib/api/department";
import type {
  CaasmDNSRecord,
  CaasmDNSRecordComment,
  CaasmDomainAsset,
  CaasmDomainStats,
} from "@/types/models";

const { Title, Text, Paragraph } = Typography;

const recordTypeOptions = [
  "A",
  "AAAA",
  "CNAME",
  "TXT",
  "MX",
  "NS",
  "SRV",
  "PTR",
  "CAA",
  "SOA",
].map((v) => ({
  label: v,
  value: v,
}));

type DNSFilterState = {
  q?: string;
  type?: string;
  domain_id?: number;
  value?: string;
  owner_department_id?: string;
  has_alert?: boolean;
};

type DNSAlertFilterValue = "all" | "true" | "false";

type DomainFilterState = {
  q: string;
  status?: string;
  provider?: string;
  environment?: string;
  zone_type?: string;
  domain_class?: string;
  registrar: string;
  forwarding?: string;
  peering?: string;
  auto_renew?: string;
  sortBy: string;
  sortOrder: "asc" | "desc";
};

type DomainOption = { label: string; value: number };

const statusFilters = [
  { label: "Active", value: "active" },
  { label: "Inactive", value: "inactive" },
  { label: "Expired", value: "expired" },
  { label: "Expiring soon", value: "expiring" },
];

const providerOptions = [
  { label: "AWS", value: "aws" },
  { label: "GCP", value: "gcp" },
  { label: "Azure", value: "azure" },
  { label: "Alibaba", value: "alibaba" },
  { label: "GoDaddy", value: "godaddy" },
  { label: "Other", value: "other" },
];

const environmentOptions = [
  { label: "Prod", value: "prod" },
  { label: "Staging", value: "staging" },
  { label: "Dev", value: "dev" },
  { label: "Test", value: "test" },
  { label: "Other", value: "other" },
];

const zoneTypeOptions = [
  { label: "Public", value: "public" },
  { label: "Private", value: "private" },
];

const domainClassOptions = [
  { label: "Hosted Zone", value: "hosted_zone" },
  { label: "Record-derived Name", value: "record_derived_name" },
  { label: "Service Hostname", value: "service_hostname" },
  { label: "Mapped Custom Domain", value: "mapped_custom_domain" },
  { label: "Unknown", value: "unknown" },
];

const domainClassLabels: Record<string, string> = {
  hosted_zone: "Hosted Zone",
  authoritative_zone: "Hosted Zone",
  record_derived_name: "Record-derived Name",
  dns_record: "Record-derived Name",
  service_hostname: "Service Hostname",
  mapped_custom_domain: "Mapped Custom Domain",
  unknown: "Unknown",
};

function formatDomainClassLabel(value?: string) {
  return domainClassLabels[value || "unknown"] || value || "Unknown";
}

function formatRegistrarLabel(value?: string) {
  const normalized = (value || "").trim().toLowerCase();
  switch (normalized) {
    case "route53":
    case "amazon route 53":
      return "AMAZON ROUTE 53";
    case "aws":
      return "AWS-MANAGED";
    case "cloudfront":
      return "CLOUDFRONT";
    case "apigateway":
      return "API GATEWAY";
    case "s3":
      return "S3";
    case "s3-website":
      return "S3 WEBSITE";
    default:
      return normalized ? normalized.toUpperCase() : "—";
  }
}

function buildDomainOptionLabel(domain: CaasmDomainAsset) {
  return [
    domain.domain_name,
    domain.zone_id,
    domain.domain_class ? formatDomainClassLabel(domain.domain_class) : undefined,
  ]
    .filter(Boolean)
    .join(" · ");
}

function buildDNSParentSummary(record: CaasmDNSRecord) {
  return [
    record.domain_asset?.zone_id,
    record.domain_asset?.domain_class
      ? formatDomainClassLabel(record.domain_asset.domain_class)
      : undefined,
    record.domain_asset?.id ? `DomainAsset #${record.domain_asset.id}` : undefined,
  ]
    .filter(Boolean)
    .join(" · ");
}

function ExpandableValue({
  value,
  rows = 1,
}: {
  value?: string | number;
  rows?: number;
}) {
  const display =
    typeof value === "string"
      ? value.trim().length > 0
        ? value
        : "—"
      : typeof value === "number"
        ? String(value)
        : "—";
  const isExpandable = display !== "—" && display.length > 80;

  return (
    <div
      style={{ width: "100%" }}
      onClick={(event) => {
        event.stopPropagation();
      }}
    >
      {isExpandable ? (
        <Paragraph
          ellipsis={{
            rows,
            expandable: "collapsible",
            symbol: (expanded) => (expanded ? "Less" : "More"),
            tooltip: display,
          }}
          style={{
            marginBottom: 0,
            whiteSpace: "normal",
            wordBreak: "break-word",
          }}
        >
          {display}
        </Paragraph>
      ) : (
        <Text style={{ whiteSpace: "normal", wordBreak: "break-word" }}>
          {display}
        </Text>
      )}
    </div>
  );
}

function formatDnsRecordTtl(
  ttl?: number,
  aliasTarget?: string,
): string {
  if (typeof ttl === "number" && ttl > 0) {
    return `${ttl}s`;
  }
  if (aliasTarget && aliasTarget.trim().length > 0) {
    return "Alias record (TTL not applicable)";
  }
  return "—";
}

function normalizeDnsRecordName(value?: string): string | undefined {
  if (!value) {
    return value;
  }
  return value
    .replace(/\\\\052/g, "*")
    .replace(/\\052/g, "*");
}

const triStateOptions = [
  { label: "Any", value: "" },
  { label: "Yes", value: "true" },
  { label: "No", value: "false" },
];

const sortOptions = [
  { label: "Expiration (soonest)", value: "expires_at:asc" },
  { label: "Expiration (latest)", value: "expires_at:desc" },
  { label: "Last synced (newest)", value: "last_synced_at:desc" },
  { label: "Last synced (oldest)", value: "last_synced_at:asc" },
  { label: "Alphabetical", value: "name:asc" },
];

const createDefaultDomainFilters = (): DomainFilterState => ({
  q: "",
  status: undefined,
  provider: undefined,
  environment: undefined,
  zone_type: undefined,
  domain_class: undefined,
  registrar: "",
  forwarding: undefined,
  peering: undefined,
  auto_renew: undefined,
  sortBy: "expires_at",
  sortOrder: "asc",
});

type RecordRow = {
  key: string;
  name?: string;
  type?: string | number;
  ttl?: number;
  values?: string;
  routing?: string;
  alias?: string;
};

function DomainsTab() {
  const [records, setRecords] = useState<CaasmDomainAsset[]>([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);
  const [loadError, setLoadError] = useState<string | null>(null);
  const [stats, setStats] = useState<CaasmDomainStats | null>(null);
  const [filters, setFilters] = useState<DomainFilterState>(() =>
    createDefaultDomainFilters(),
  );
  const [pagination, setPagination] = useState<TablePaginationConfig>({
    current: 1,
    pageSize: 20,
  });
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [selectedDomain, setSelectedDomain] = useState<CaasmDomainAsset | null>(
    null,
  );
  const [searchInput, setSearchInput] = useState(filters.q);
  const [registrars, setRegistrars] = useState<string[]>([]);

  // Owner editing state
  const [isEditingOwner, setIsEditingOwner] = useState(false);
  const [selectedDepartmentId, setSelectedDepartmentId] = useState<
    string | undefined
  >(undefined);
  const [selectedOwnerEmployeeId, setSelectedOwnerEmployeeId] = useState<
    number | undefined
  >(undefined);

  useEffect(() => {
    fetchCaasmRegistrars().then(setRegistrars).catch(console.error);
  }, []);

  const updateFilters = useCallback((next: Partial<DomainFilterState>) => {
    setFilters((prev) => ({ ...prev, ...next }));
    setPagination((prev) => ({ ...prev, current: 1 }));
  }, []);

  const resetFilters = () => {
    setFilters(createDefaultDomainFilters());
    setSearchInput("");
    setPagination((prev) => ({ ...prev, current: 1 }));
  };

  const handleRefresh = () => {
    const current = pagination.current ?? 1;
    const size = pagination.pageSize ?? 20;
    loadData(current, size);
  };

  useEffect(() => {
    setSearchInput(filters.q);
  }, [filters.q]);

  const loadData = useCallback(
    async (page: number, pageSize: number) => {
      setLoading(true);
      try {
        const payload = await fetchCaasmDomains({
          page,
          page_size: pageSize,
          q: filters.q || undefined,
          status: filters.status,
          provider: filters.provider,
          environment: filters.environment,
          zone_type: filters.zone_type,
          domain_class: filters.domain_class,
          registrar: filters.registrar || undefined,
          forwarding: filters.forwarding || undefined,
          peering: filters.peering || undefined,
          auto_renew: filters.auto_renew || undefined,
          sort_by: filters.sortBy,
          sort_order: filters.sortOrder,
        });
        setRecords(payload.items ?? []);
        setTotal(payload.total ?? 0);
        setLoadError(null);
      } catch (error) {
        console.error("Failed to load domains", error);
        setLoadError("Domain inventory could not be loaded right now.");
        setRecords([]);
        setTotal(0);
      } finally {
        setLoading(false);
      }
    },
    [filters],
  );

  const loadStats = useCallback(async () => {
    try {
      const payload = await fetchCaasmDomainStats();
      setStats(payload);
    } catch (error) {
      console.error("Failed to load domain stats", error);
    }
  }, []);

  const currentPage = pagination.current ?? 1;
  const currentPageSize = pagination.pageSize ?? 20;

  useEffect(() => {
    loadData(currentPage, currentPageSize);
  }, [loadData, currentPage, currentPageSize]);

  useEffect(() => {
    loadStats();
  }, [loadStats]);

  const normalizedNameServers = (value?: unknown) => {
    if (Array.isArray(value)) {
      return value as string[];
    }
    return [];
  };

  const getDnsHealthStatus = useCallback((record?: CaasmDomainAsset | null) => {
    if (!record?.dns_health || typeof record.dns_health !== "object") {
      return undefined;
    }
    const health = record.dns_health as Record<string, unknown>;
    return typeof health.status === "string" ? health.status : undefined;
  }, []);

  const getDnsLatencyMs = useCallback((record?: CaasmDomainAsset | null) => {
    if (!record?.dns_health || typeof record.dns_health !== "object") {
      return undefined;
    }
    const latency = (record.dns_health as Record<string, unknown>).latency_ms;
    if (typeof latency === "number") return latency;
    if (typeof latency === "string") {
      const parsed = Number(latency);
      return Number.isFinite(parsed) ? parsed : undefined;
    }
    return undefined;
  }, []);

  const openDrawer = (domain: CaasmDomainAsset) => {
    setSelectedDomain(domain);
    setDrawerOpen(true);
    setIsEditingOwner(false);
  };

  useEffect(() => {
    if (!selectedDomain) {
      setSelectedDepartmentId(undefined);
      setSelectedOwnerEmployeeId(undefined);
      return;
    }
    setSelectedDepartmentId(
      selectedDomain.department_id ||
        selectedDomain.asset?.department_id ||
        undefined,
    );
    setSelectedOwnerEmployeeId(
      selectedDomain.owner_employee_id ??
        selectedDomain.asset?.owner_employee_id ??
        undefined,
    );
  }, [selectedDomain]);

  const columns: ColumnsType<CaasmDomainAsset> = useMemo(
    () => [
      {
        title: "Domain",
        dataIndex: "domain_name",
        width: 260,
        render: (value: string, record) => (
          <Space direction="vertical" size={0} style={{ maxWidth: "100%" }}>
            <Text
              strong
              ellipsis={{ tooltip: value }}
              style={{ maxWidth: "100%", display: "block" }}
            >
              {value}
            </Text>
            <Text type="secondary" style={{ fontSize: 12 }}>
              #{record.id}
            </Text>
          </Space>
        ),
      },
      {
        title: "Registrar",
        dataIndex: "registrar",
        width: 150,
        render: (value: string) => (
          <Text
            ellipsis={{ tooltip: formatRegistrarLabel(value) }}
            style={{ whiteSpace: "nowrap", maxWidth: "100%" }}
          >
            {formatRegistrarLabel(value)}
          </Text>
        ),
      },
      {
        title: "Zone",
        dataIndex: "zone_type",
        width: 90,
        render: (value: string | undefined) => (
          <span style={{ whiteSpace: "nowrap" }}>
            {value ? value.toUpperCase() : "PUBLIC"}
          </span>
        ),
      },
      {
        title: "Provider",
        dataIndex: ["asset", "cloud_account", "provider"],
        width: 120,
        render: (_, record) =>
          record.asset?.cloud_account ? (
            <span style={{ whiteSpace: "nowrap" }}>
              <Badge
                status={
                  record.asset.cloud_account.status === "active"
                    ? "success"
                    : "default"
                }
                text={record.asset.cloud_account.provider?.toUpperCase()}
              />
            </span>
          ) : (
            "—"
          ),
      },
      {
        title: "Status",
        dataIndex: "expires_at",
        width: 110,
        render: (value: string | undefined, record) => {
          if (record.status === "inactive")
            return <Tag color="default">INACTIVE</Tag>;
          if (!value) return <Tag color="blue">ACTIVE</Tag>;
          const expired = dayjs(value).isBefore(dayjs());
          const diff = dayjs(value).diff(dayjs(), "day");
          if (expired) return <Tag color="red">EXPIRED</Tag>;
          if (diff <= 30) return <Tag color="gold">EXPIRING</Tag>;
          return <Tag color="green">ACTIVE</Tag>;
        },
      },
      {
        title: "Owner",
        dataIndex: ["asset", "owner_employee_id"],
        width: 180,
        render: (_, record) => {
          const owner =
            record.owner_employee?.name ||
            record.owner_employee?.email ||
            record.asset?.owner_employee?.name ||
            record.asset?.owner_employee?.email ||
            "—";
          return (
            <Text
              ellipsis={{ tooltip: owner }}
              style={{ whiteSpace: "nowrap", maxWidth: "100%" }}
            >
              {owner}
            </Text>
          );
        },
      },
      {
        title: "Expires",
        dataIndex: "expires_at",
        width: 120,
        render: (value: string | undefined) => (
          <span style={{ whiteSpace: "nowrap" }}>
            {value ? dayjs(value).format("YYYY-MM-DD") : "—"}
          </span>
        ),
      },
      {
        title: "Tagged Environment",
        dataIndex: ["asset", "environment"],
        width: 120,
        render: (_, record) => (
          <span style={{ whiteSpace: "nowrap" }}>
            {record.asset?.environment?.toUpperCase() ?? "—"}
          </span>
        ),
      },
      {
        title: "Last sync",
        dataIndex: "last_synced_at",
        width: 150,
        render: (value: string | undefined) => (
          <span style={{ whiteSpace: "nowrap" }}>
            {value ? dayjs(value).format("YYYY-MM-DD HH:mm") : "—"}
          </span>
        ),
      },
      {
        title: "Resolver health",
        dataIndex: "dns_health",
        width: 110,
        render: (_, record) => {
          const status = getDnsHealthStatus(record);
          return status ? <Tag color="blue">{status.toUpperCase()}</Tag> : "—";
        },
      },
      {
        title: "Resolver lookup (ms)",
        dataIndex: "dns_health",
        width: 130,
        render: (_, record) => {
          const latency = getDnsLatencyMs(record);
          return latency !== undefined ? `${latency} ms` : "—";
        },
      },
      {
        title: "Actions",
        dataIndex: "actions",
        width: 100,
        render: (_, record) => (
          <Button size="small" onClick={() => openDrawer(record)}>
            Details
          </Button>
        ),
      },
    ],
    [getDnsHealthStatus, getDnsLatencyMs],
  );

  const normalizeDnsRecords = (
    dnsRecords: CaasmDomainAsset["dns_records"],
  ): RecordRow[] => {
    if (
      !dnsRecords ||
      typeof dnsRecords !== "object" ||
      Array.isArray(dnsRecords)
    )
      return [];
    const recs = (dnsRecords as { records?: any[] }).records;
    if (!Array.isArray(recs)) return [];
    return recs.map((rec, idx) => {
      const name = normalizeDnsRecordName(rec?.name as string | undefined);
      const type = rec?.type as string | number | undefined;
      const ttl = typeof rec?.ttl === "number" ? rec.ttl : undefined;
      const values = Array.isArray(rec?.values)
        ? (rec.values as any[]).join(", ")
        : undefined;
      const routingParts = [];
      if (rec?.set_identifier) routingParts.push(`id:${rec.set_identifier}`);
      if (rec?.weight !== undefined) routingParts.push(`w:${rec.weight}`);
      if (rec?.region) routingParts.push(`rgn:${rec.region}`);
      if (rec?.failover) routingParts.push(`fo:${rec.failover}`);
      const aliasTarget = rec?.alias_target?.dns_name as string | undefined;
      return {
        key: `${name || "record"}-${idx}`,
        name,
        type,
        ttl,
        values,
        routing: routingParts.length > 0 ? routingParts.join(" • ") : undefined,
        alias: aliasTarget,
      };
    });
  };

  const dnsRecordColumns: ColumnsType<RecordRow> = [
    {
      title: "Name",
      dataIndex: "name",
      width: 180,
      render: (val?: string) => <ExpandableValue value={val} />,
    },
    { title: "Type", dataIndex: "type", width: 70 },
    {
      title: "TTL",
      dataIndex: "ttl",
      width: 140,
      render: (ttl: number | undefined, record) =>
        formatDnsRecordTtl(ttl, record.alias),
    },
    {
      title: "Values",
      dataIndex: "values",
      render: (val: string | undefined) => <ExpandableValue value={val} />,
    },
    {
      title: "Alias target",
      dataIndex: "alias",
      render: (val: string | undefined) => <ExpandableValue value={val} />,
    },
    {
      title: "Routing",
      dataIndex: "routing",
      render: (val: string | undefined) => <ExpandableValue value={val} />,
    },
  ];

  const handleFilterChange = (
    field: keyof DomainFilterState,
    value?: string | null,
  ) => {
    const normalized = value && value.length > 0 ? value : undefined;
    updateFilters({ [field]: normalized } as Partial<DomainFilterState>);
  };

  const handleRegistrarChange = (value: string) => {
    updateFilters({ registrar: value });
  };

  const handleSaveOwner = async () => {
    if (!selectedDomain) return;
    try {
      if (!selectedOwnerEmployeeId) {
        message.error("Please select an owner");
        return;
      }
      await claimCaasmDomain(
        selectedDomain.id,
        selectedOwnerEmployeeId,
        selectedDepartmentId,
      );
      message.success("Owner updated successfully");
      setIsEditingOwner(false);
      const updated = {
        ...selectedDomain,
        owner_employee_id: selectedOwnerEmployeeId,
        department_id: selectedDepartmentId,
      };
      setSelectedDomain(updated);
      setRecords((prev) =>
        prev.map((r) => (r.id === updated.id ? updated : r)),
      );
    } catch (error) {
      console.error(error);
      message.error(
        getPermissionAwareErrorMessage(
          error,
          "You are not allowed to update this domain owner.",
          "Failed to update owner",
        ),
      );
    }
  };

  return (
    <Space direction="vertical" size="large" style={{ width: "100%" }}>
      <Row gutter={16}>
        <Col span={8}>
          <Card>
            <Statistic title="Total domains" value={stats?.total ?? 0} />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="Expiring soon"
              value={stats?.expiring_soon ?? 0}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic title="Expired" value={stats?.expired ?? 0} />
          </Card>
        </Col>
      </Row>

      <Card>
        {loadError ? (
          <Alert
            type="warning"
            showIcon
            message="Domain inventory unavailable"
            description="The domains API is currently returning an error. Domain inventory and DNS-backed rows cannot be loaded until the backend issue is fixed."
            style={{ marginBottom: 16 }}
          />
        ) : null}
        <Space wrap align="center">
          <Input
            allowClear
            placeholder="Search domains"
            prefix={<SearchOutlined />}
            value={searchInput}
            onChange={(e) => setSearchInput(e.target.value)}
            onPressEnter={() => updateFilters({ q: searchInput })}
            style={{ width: 240 }}
          />
          <Select
            allowClear
            placeholder="Status"
            options={statusFilters}
            style={{ width: 150 }}
            value={filters.status}
            onChange={(val) => handleFilterChange("status", val)}
          />
          <Select
            allowClear
            placeholder="Provider"
            options={providerOptions}
            style={{ width: 150 }}
            value={filters.provider}
            onChange={(val) => handleFilterChange("provider", val)}
          />
          <Select
            allowClear
            placeholder="Tagged Environment"
            options={environmentOptions}
            style={{ width: 150 }}
            value={filters.environment}
            onChange={(val) => handleFilterChange("environment", val)}
          />
          <Select
            allowClear
            placeholder="Zone type"
            options={zoneTypeOptions}
            style={{ width: 150 }}
            value={filters.zone_type}
            onChange={(val) => handleFilterChange("zone_type", val)}
          />
          <Select
            allowClear
            showSearch
            placeholder="Registrar"
            options={registrars.map((r) => ({ label: formatRegistrarLabel(r), value: r }))}
            style={{ width: 200 }}
            value={filters.registrar}
            onChange={handleRegistrarChange}
            optionFilterProp="label"
          />
          <Select
            placeholder="Forwarding"
            options={triStateOptions}
            style={{ width: 140 }}
            value={filters.forwarding}
            onChange={(val) => handleFilterChange("forwarding", val)}
          />
          <Select
            placeholder="Peering"
            options={triStateOptions}
            style={{ width: 140 }}
            value={filters.peering}
            onChange={(val) => handleFilterChange("peering", val)}
          />
          <Select
            placeholder="Auto renew"
            options={triStateOptions}
            style={{ width: 140 }}
            value={filters.auto_renew}
            onChange={(val) => handleFilterChange("auto_renew", val)}
          />
          <Select
            style={{ width: 200 }}
            value={`${filters.sortBy}:${filters.sortOrder}`}
            onChange={(val) => {
              const [sortBy, sortOrder] = val.split(":");
              updateFilters({ sortBy, sortOrder: sortOrder as "asc" | "desc" });
            }}
            options={sortOptions}
          />
          <Button
            type="primary"
            onClick={() => updateFilters({ q: searchInput })}
          >
            Apply
          </Button>
          <Button onClick={resetFilters}>Reset</Button>
          <Button icon={<ReloadOutlined />} onClick={handleRefresh} />
        </Space>
      </Card>

      <Card styles={{ body: { padding: 0 } }}>
        <Table<CaasmDomainAsset>
          rowKey="id"
          loading={loading}
          columns={columns}
          dataSource={records}
          locale={{
            emptyText: loadError ? (
              <PageStateNotice
                tone="error"
                compact
                title="Domain inventory unavailable"
                description="The domains API is currently unavailable. Retry the inventory or review DNS records directly."
                actions={
                  <Space wrap>
                    <Button icon={<ReloadOutlined />} onClick={handleRefresh}>
                      Retry inventory
                    </Button>
                    <Button type="primary" href="/dashboard/caasm/overview">
                      Open CAASM overview
                    </Button>
                  </Space>
                }
              />
            ) : loading ? (
              <PageStateNotice
                tone="loading"
                compact
                title="Loading hosted zones"
                description="Fetching the latest hosted zone inventory."
              />
            ) : (
              <PageStateNotice
                tone="empty"
                compact
                title="No hosted zones match the current filters"
                description="Clear or broaden the hosted zone filters to continue exploring domain inventory."
                actions={
                  <Space wrap>
                    <Button onClick={resetFilters}>Reset filters</Button>
                    <Button
                      type="primary"
                      href="/dashboard/caasm/cloud-accounts"
                    >
                      Review cloud accounts
                    </Button>
                  </Space>
                }
              />
            ),
          }}
          pagination={{
            ...pagination,
            total,
            showSizeChanger: true,
            pageSizeOptions: ["10", "20", "50", "100"],
          }}
          scroll={{ x: true }}
          onChange={(pager) => {
            setPagination(pager);
            loadData(pager.current || 1, pager.pageSize || 20);
          }}
          onRow={(record) => ({
            onClick: () => openDrawer(record),
            style: { cursor: "pointer" },
          })}
        />
      </Card>

      <Drawer
        title={selectedDomain ? selectedDomain.domain_name : "Domain details"}
        width={900}
        open={drawerOpen}
        onClose={() => setDrawerOpen(false)}
        destroyOnClose
        styles={{ body: { overflow: "auto", maxHeight: "80vh" } }}
      >
        {selectedDomain && (
          <Space direction="vertical" size="large" style={{ width: "100%" }}>
            <Descriptions
              size="small"
              bordered
              column={2}
              labelStyle={{ whiteSpace: "nowrap" }}
            >
              <Descriptions.Item label="Registrar">
                {formatRegistrarLabel(selectedDomain.registrar)}
              </Descriptions.Item>
              <Descriptions.Item label="Domain class">
                {domainClassLabels[selectedDomain.domain_class || "unknown"] ||
                  selectedDomain.domain_class ||
                  "Unknown"}
              </Descriptions.Item>
              <Descriptions.Item label="Zone type">
                {selectedDomain.zone_type?.toUpperCase() || "PUBLIC"}
              </Descriptions.Item>
              <Descriptions.Item label="Provider">
                {selectedDomain.asset?.cloud_account?.provider?.toUpperCase() ||
                  "—"}
              </Descriptions.Item>
              <Descriptions.Item label="Cloud account">
                {selectedDomain.asset?.cloud_account?.name ||
                  selectedDomain.asset?.cloud_account_id ||
                  "—"}
              </Descriptions.Item>
              <Descriptions.Item label="Tagged Environment">
                {selectedDomain.asset?.environment?.toUpperCase() || "—"}
              </Descriptions.Item>
              <Descriptions.Item label="Expires at">
                {selectedDomain.expires_at
                  ? dayjs(selectedDomain.expires_at).format("YYYY-MM-DD")
                  : "—"}
              </Descriptions.Item>
              <Descriptions.Item label="TTL default">
                {selectedDomain.ttl_default ?? "—"}
              </Descriptions.Item>
              <Descriptions.Item label="Auto renew">
                {selectedDomain.auto_renew ? "Yes" : "No"}
              </Descriptions.Item>
              <Descriptions.Item label="Resolver health">
                {getDnsHealthStatus(selectedDomain) ? (
                  <Tag color="blue">
                    {getDnsHealthStatus(selectedDomain)?.toUpperCase()}
                  </Tag>
                ) : (
                  "—"
                )}
              </Descriptions.Item>
              <Descriptions.Item label="Resolver lookup">
                {getDnsLatencyMs(selectedDomain) !== undefined
                  ? `${getDnsLatencyMs(selectedDomain)} ms`
                  : "—"}
              </Descriptions.Item>
            </Descriptions>

            <Card
              size="small"
              title="Ownership"
              extra={
                <Button
                  icon={<UserOutlined />}
                  size="small"
                  onClick={() => setIsEditingOwner((v) => !v)}
                >
                  {isEditingOwner ? "Cancel" : "Edit owner"}
                </Button>
              }
            >
              {isEditingOwner ? (
                <Space wrap>
                  <div style={{ minWidth: 260 }}>
                    <DepartmentDropdown
                      value={selectedDepartmentId}
                      onChange={(val) => setSelectedDepartmentId(val as string)}
                      placeholder="Department"
                      allowClear
                    />
                  </div>
                  <div style={{ minWidth: 360 }}>
                    <EmployeeDropdown
                      value={selectedOwnerEmployeeId}
                      onChange={(val) =>
                        setSelectedOwnerEmployeeId(val as number)
                      }
                      placeholder="Owner"
                      allowClear
                      filterDepartment={selectedDepartmentId}
                    />
                  </div>
                  <Button type="primary" onClick={handleSaveOwner}>
                    Save
                  </Button>
                </Space>
              ) : (
                <div>
                  <Text strong>Owner: </Text>
                  <Text>
                    {selectedDomain.owner_employee?.name ||
                      selectedDomain.owner_employee?.email ||
                      selectedDomain.asset?.owner_employee?.name ||
                      selectedDomain.asset?.owner_employee?.email ||
                      "—"}
                  </Text>
                </div>
              )}
            </Card>

            <Card
              size="small"
              title={
                <Space size={8} align="center">
                  <span>Name servers</span>
                  {selectedDomain?.name_servers_last_change_at ? (
                    <Tag color="orange">Alert</Tag>
                  ) : null}
                </Space>
              }
            >
              <Space wrap>
                {normalizedNameServers(selectedDomain.name_servers).map(
                  (ns) => (
                    <Tag key={ns}>{ns}</Tag>
                  ),
                )}
                {normalizedNameServers(selectedDomain.name_servers).length ===
                  0 && <Text type="secondary">No name servers</Text>}
              </Space>
            </Card>

            <Card size="small" title="DNS records">
              <Table<RecordRow>
                rowKey="key"
                columns={dnsRecordColumns}
                dataSource={normalizeDnsRecords(selectedDomain.dns_records)}
                pagination={false}
                size="small"
              />
            </Card>
          </Space>
        )}
      </Drawer>
    </Space>
  );
}

function RecordsTab() {
  const [form] = Form.useForm<DNSFilterState>();
  const [records, setRecords] = useState<CaasmDNSRecord[]>([]);
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState<TablePaginationConfig>({
    current: 1,
    pageSize: 20,
    total: 0,
  });
  const [domainOptions, setDomainOptions] = useState<DomainOption[]>([]);
  const [hostedZonesError, setHostedZonesError] = useState<string | null>(null);
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [selectedRecord, setSelectedRecord] = useState<CaasmDNSRecord | null>(
    null,
  );
  const [departmentOptions, setDepartmentOptions] = useState<
    { label: string; value: string }[]
  >([]);
  const [recordOwnerEmployeeId, setRecordOwnerEmployeeId] = useState<
    number | undefined
  >(undefined);
  const [ownerDepartment, setOwnerDepartment] = useState<string | undefined>(
    undefined,
  );
  const [ignoreChanges, setIgnoreChanges] = useState<boolean>(false);
  const [suppressPattern, setSuppressPattern] = useState<string>("");
  const [recordComments, setRecordComments] = useState<CaasmDNSRecordComment[]>(
    [],
  );
  const [commentsLoading, setCommentsLoading] = useState(false);
  const [commentSubmitting, setCommentSubmitting] = useState(false);
  const [newComment, setNewComment] = useState("");

  const departmentNameMap = useMemo(
    () => new Map(departmentOptions.map((dept) => [dept.value, dept.label])),
    [departmentOptions],
  );

  const loadDomainOptions = async () => {
    try {
      const payload = await fetchCaasmDomains({
        page: 1,
        page_size: 100,
        sort_by: "name",
        sort_order: "asc",
      });
      const opts = (payload.items || []).map((d) => ({
        label: buildDomainOptionLabel(d),
        value: d.id,
      }));
      setDomainOptions(opts);
      setHostedZonesError(null);
    } catch (error) {
      console.error("Failed to load domains", error);
      setHostedZonesError(
        "Hosted zone filter unavailable until the domains API recovers.",
      );
      setDomainOptions([]);
    }
  };

  const loadDepartments = async () => {
    try {
      const res = await fetchDepartments();
      const arr = Array.isArray(res) ? res : [];
      const opts =
        arr.length > 0
          ? arr.map((d: any) => ({
              label: d.name || d.department_name || d.id,
              value: d.lark_department_id || String(d.id),
            }))
          : [];
      setDepartmentOptions(opts);
    } catch (error) {
      console.error("Failed to load departments", error);
      setDepartmentOptions([]);
    }
  };

  const loadRecords = async (
    page = pagination.current ?? 1,
    pageSize = pagination.pageSize ?? 20,
  ) => {
    setLoading(true);
    try {
      const values = form.getFieldsValue();
      const hasAlertValue = values.has_alert as DNSAlertFilterValue | undefined;
      const payload = await fetchCaasmDNSRecords({
        page,
        page_size: pageSize,
        q: values.q?.trim() || undefined,
        type: values.type || undefined,
        domain_id: values.domain_id || undefined,
        value: values.value?.trim() || undefined,
        owner_department_id: values.owner_department_id || undefined,
        has_alert:
          hasAlertValue === "true"
            ? true
            : hasAlertValue === "false"
              ? false
              : undefined,
      });
      setRecords(payload.items || []);
      setPagination((prev) => ({
        ...prev,
        current: page,
        pageSize,
        total: payload.total ?? 0,
      }));
    } catch (error) {
      console.error("Failed to load DNS records", error);
      message.error("Failed to load DNS records");
    } finally {
      setLoading(false);
    }
  };

  const loadComments = useCallback(async (recordId: number) => {
    setCommentsLoading(true);
    try {
      const items = await fetchDNSRecordComments(recordId);
      setRecordComments(items || []);
    } catch (error) {
      console.error("Failed to load comments", error);
      message.error("Failed to load comments");
    } finally {
      setCommentsLoading(false);
    }
  }, []);

  useEffect(() => {
    loadDomainOptions();
    loadDepartments();
    loadRecords(1, pagination.pageSize ?? 20);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    if (selectedRecord) {
      loadComments(selectedRecord.id);
    } else {
      setRecordComments([]);
    }
  }, [loadComments, selectedRecord]);

  const handleTableChange = (next: TablePaginationConfig) => {
    const current = next.current ?? 1;
    const size = next.pageSize ?? 20;
    setPagination((prev) => ({ ...prev, current, pageSize: size }));
    loadRecords(current, size);
  };

  const handleReset = () => {
    form.resetFields();
    setPagination((prev) => ({ ...prev, current: 1 }));
    loadRecords(1, pagination.pageSize ?? 20);
  };

  const openDrawer = (record: CaasmDNSRecord) => {
    setNewComment("");
    setRecordComments([]);
    setSelectedRecord(record);
    setRecordOwnerEmployeeId(record.owner_employee_id ?? undefined);
    setOwnerDepartment(record.owner_department_id);
    setIgnoreChanges(!!record.ignore_changes);
    setSuppressPattern(record.suppress_pattern || "");
    setDrawerOpen(true);
  };

  const handleSaveRecordOwner = async () => {
    if (!selectedRecord) return;
    if (!ownerDepartment && !selectedRecord.owner_department_id) {
      message.error("Select an owner department");
      return;
    }
    if (!recordOwnerEmployeeId && !selectedRecord.owner_employee_id) {
      message.error("Select an owner employee");
      return;
    }
    try {
      const deptId = ownerDepartment ?? selectedRecord.owner_department_id;
      const employeeId =
        recordOwnerEmployeeId ?? selectedRecord.owner_employee_id;
      if (!deptId) return;
      await updateDNSRecordOwner(selectedRecord.id, {
        owner_department_id: deptId,
        owner_employee_id: employeeId,
        ignore_changes: ignoreChanges,
        suppress_pattern: suppressPattern || undefined,
      });
      message.success("Record owner updated");
      await loadRecords(pagination.current ?? 1, pagination.pageSize ?? 20);
      setSelectedRecord({
        ...selectedRecord,
        owner_department_id: deptId,
        owner_employee_id: employeeId,
        ignore_changes: ignoreChanges,
        suppress_pattern: suppressPattern,
      });
    } catch (error) {
      console.error(error);
      message.error(
        getPermissionAwareErrorMessage(
          error,
          "You are not allowed to update this DNS record owner.",
          "Failed to update record owner",
        ),
      );
    }
  };

  const handleAddComment = async () => {
    if (!selectedRecord) return;
    const content = newComment.trim();
    if (!content) {
      return;
    }
    setCommentSubmitting(true);
    try {
      const created = await addDNSRecordComment(selectedRecord.id, content);
      setRecordComments((prev) => [...prev, created]);
      setNewComment("");
      message.success("Comment added");
    } catch (error) {
      console.error("Failed to add comment", error);
      message.error("Failed to add comment");
    } finally {
      setCommentSubmitting(false);
    }
  };

  const tagsFromMetadata = (
    record?: CaasmDNSRecord,
  ): Record<string, string> => {
    const meta = record?.domain_asset?.asset?.metadata;
    if (!meta || typeof meta !== "object") return {};
    const tags = (meta as Record<string, unknown>).tags;
    if (tags && typeof tags === "object") {
      const output: Record<string, string> = {};
      Object.entries(tags as Record<string, unknown>).forEach(([k, v]) => {
        if (typeof v === "string") output[k] = v;
      });
      return output;
    }
    return {};
  };

  const columns: ColumnsType<CaasmDNSRecord> = useMemo(
    () => [
      {
        title: "Record",
        dataIndex: "name",
        width: 240,
        render: (value: string) => {
          const label = normalizeDnsRecordName(value) || "(root)";
          return (
            <Text
              strong
              ellipsis={{ tooltip: label }}
              style={{ maxWidth: 200, whiteSpace: "nowrap" }}
            >
              {label}
            </Text>
          );
        },
      },
      {
        title: "Type",
        dataIndex: "type",
        width: 80,
        render: (val?: string) => (
          <Tag color="blue" style={{ whiteSpace: "nowrap" }}>
            {val?.toUpperCase() || "—"}
          </Tag>
        ),
      },
      {
        title: "Zone Type",
        dataIndex: ["domain_asset", "zone_type"],
        width: 110,
        onHeaderCell: () => ({ style: { whiteSpace: "nowrap" } }),
        render: (_: unknown, record) => {
          const zoneType = (record.domain_asset?.zone_type || "").toLowerCase();
          if (!zoneType) return "—";
          const isPublic = zoneType === "public";
          const label = zoneType.charAt(0).toUpperCase() + zoneType.slice(1);
          return (
            <span style={{ whiteSpace: "nowrap" }}>
              <Tag
                color={isPublic ? "green" : "default"}
                style={{ whiteSpace: "nowrap" }}
              >
                {label}
              </Tag>
            </span>
          );
        },
      },
      {
        title: "Parent Scope",
        width: 260,
        onHeaderCell: () => ({ style: { whiteSpace: "nowrap" } }),
        render: (_: unknown, record) => {
          const summary = buildDNSParentSummary(record);
          return (
            <Space direction="vertical" size={2} style={{ width: "100%" }}>
              <Text
                ellipsis={{ tooltip: summary || "—" }}
                style={{ maxWidth: 240, whiteSpace: "nowrap" }}
              >
                {summary || "—"}
              </Text>
              {record.domain_asset?.asset_id ? (
                <Text type="secondary" style={{ fontSize: 12 }}>
                  Asset #{record.domain_asset.asset_id}
                </Text>
              ) : null}
            </Space>
          );
        },
      },
      {
        title: "Status",
        dataIndex: "status",
        width: 110,
        render: (value: string | undefined, record) => {
          const normalized = (
            value ||
            record.domain_asset?.status ||
            "active"
          ).toLowerCase();
          const color =
            normalized === "active"
              ? "green"
              : normalized === "inactive"
                ? "red"
                : normalized
                  ? "blue"
                  : "default";
          return (
            <Tag color={color} style={{ whiteSpace: "nowrap" }}>
              {normalized ? normalized.toUpperCase() : "—"}
            </Tag>
          );
        },
      },
      {
        title: "Values / Route to",
        dataIndex: "values",
        width: 280,
        onHeaderCell: () => ({ style: { whiteSpace: "nowrap" } }),
        render: (value: string[] | undefined, record) => {
          const values = Array.isArray(value) ? value : [];
          let display = values.join(", ");
          if (
            !display &&
            record.alias_target &&
            typeof record.alias_target === "object"
          ) {
            const alias = record.alias_target as Record<string, unknown>;
            display = typeof alias.dns_name === "string" ? alias.dns_name : "";
          }
          const hasAlert = !!record.last_change_at;
          return (
            <Space direction="vertical" size={4} style={{ width: "100%" }}>
              <div style={{ maxWidth: 420 }}>
                <ExpandableValue value={display || undefined} rows={1} />
              </div>
              {hasAlert && (
                <Tooltip
                  title={`DNS target changed: ${
                    Array.isArray(record.last_change_from)
                      ? record.last_change_from.join(", ")
                      : "—"
                  } → ${
                    Array.isArray(record.last_change_to)
                      ? record.last_change_to.join(", ")
                      : "—"
                  }`}
                >
                  <Tag
                    color="orange"
                    icon={<ExclamationCircleOutlined />}
                    style={{ fontSize: "12px" }}
                  >
                    Alert
                  </Tag>
                </Tooltip>
              )}
            </Space>
          );
        },
      },
      {
        title: "TTL",
        dataIndex: "ttl",
        width: 180,
        render: (val: number | undefined, record) => (
          <span style={{ whiteSpace: "nowrap" }}>
            {formatDnsRecordTtl(val, record.alias_target ? "alias" : undefined)}
          </span>
        ),
      },
      {
        title: "Owner",
        dataIndex: "owner_email",
        width: 200,
        render: (val: string | undefined, record) => {
          const deptLabel = record.owner_department_id
            ? departmentNameMap.get(record.owner_department_id)
            : undefined;
          return (
            <span style={{ whiteSpace: "nowrap" }}>{deptLabel || "—"}</span>
          );
        },
      },
      {
        title: "Updated",
        dataIndex: "updated_at",
        width: 170,
        render: (val?: string) => (
          <span style={{ whiteSpace: "nowrap" }}>
            {val ? dayjs(val).format("YYYY-MM-DD HH:mm") : "—"}
          </span>
        ),
      },
      {
        title: "Actions",
        dataIndex: "actions",
        width: 90,
        render: (_, record) => (
          <Button size="small" onClick={() => openDrawer(record)}>
            Details
          </Button>
        ),
      },
    ],
    [departmentNameMap],
  );

  return (
    <Space direction="vertical" size="large" style={{ width: "100%" }}>
      <Card>
        {hostedZonesError ? (
          <Alert
            type="warning"
            showIcon
            message="Hosted zone filter unavailable"
            description="The hosted zones list could not be loaded, so the filter is disabled. DNS records still load normally."
            style={{ marginBottom: 16 }}
          />
        ) : null}
        <Form
          form={form}
          layout="vertical"
          onFinish={() => loadRecords(1, pagination.pageSize ?? 20)}
        >
          <Space wrap align="end">
            <Form.Item name="q" label="Name or value">
              <Input
                allowClear
                placeholder="e.g. api.example.com or 1.2.3.4"
                prefix={<SearchOutlined />}
                style={{ width: 260 }}
              />
            </Form.Item>
            <Form.Item name="type" label="Record type">
              <Select
                allowClear
                options={recordTypeOptions}
                placeholder="Any"
                style={{ width: 160 }}
                showSearch
                optionFilterProp="label"
              />
            </Form.Item>
            <Form.Item name="domain_id" label="Hosted Zone">
              <Select
                allowClear
                showSearch
                options={domainOptions}
                placeholder={
                  hostedZonesError
                    ? "Hosted zones unavailable"
                    : "Any hosted zone"
                }
                style={{ width: 240 }}
                optionFilterProp="label"
                disabled={!!hostedZonesError}
              />
            </Form.Item>
            <Form.Item name="value" label="Value contains">
              <Input
                allowClear
                placeholder="Target, IP, or alias"
                style={{ width: 220 }}
              />
            </Form.Item>
            <Form.Item name="owner_department_id" label="Owner department">
              <Select
                allowClear
                showSearch
                options={departmentOptions}
                placeholder="Any department"
                style={{ width: 220 }}
                optionFilterProp="label"
              />
            </Form.Item>
            <Form.Item name="has_alert" label="Alert status">
              <Select
                allowClear
                placeholder="All records"
                style={{ width: 180 }}
                options={[
                  { label: "All records", value: "all" },
                  { label: "Has alerts", value: "true" },
                  { label: "No alerts", value: "false" },
                ]}
              />
            </Form.Item>
            <Form.Item label=" " colon={false}>
              <Space>
                <Button
                  type="primary"
                  htmlType="submit"
                  icon={<SearchOutlined />}
                >
                  Apply
                </Button>
                <Button onClick={handleReset}>Reset</Button>
                <Button
                  icon={<ReloadOutlined />}
                  onClick={() =>
                    loadRecords(
                      pagination.current ?? 1,
                      pagination.pageSize ?? 20,
                    )
                  }
                />
              </Space>
            </Form.Item>
          </Space>
        </Form>
      </Card>

      <Card styles={{ body: { padding: 0 } }}>
        <Table<CaasmDNSRecord>
          rowKey="id"
          loading={loading}
          columns={columns}
          dataSource={records}
          locale={{
            emptyText: loading ? (
              <PageStateNotice
                tone="loading"
                compact
                title="Loading DNS records"
                description="Fetching record-level DNS entries for the current filters."
              />
            ) : (
              <PageStateNotice
                tone="empty"
                compact
                title="No DNS records match the current filters"
                description="Adjust the DNS record filters or reset them to inspect a broader slice of record inventory."
                actions={
                  <Space wrap>
                    <Button onClick={handleReset}>Reset filters</Button>
                    <Button type="primary" href="/dashboard/caasm/overview">
                      Open CAASM overview
                    </Button>
                  </Space>
                }
              />
            ),
          }}
          pagination={{
            ...pagination,
            showSizeChanger: true,
            pageSizeOptions: ["10", "20", "50", "100"],
          }}
          scroll={{ x: true }}
          onChange={handleTableChange}
          onRow={(record) => ({
            onClick: () => openDrawer(record),
            style: { cursor: "pointer" },
          })}
        />
      </Card>

      <Drawer
        title={
          selectedRecord ? (
            <Space>
              <span>{`${normalizeDnsRecordName(selectedRecord.name) || "(root)"} (${selectedRecord.type?.toUpperCase() || "—"})`}</span>
              {selectedRecord.last_change_at && (
                <Tooltip
                  title={`DNS target changed: ${
                    Array.isArray(selectedRecord.last_change_from)
                      ? selectedRecord.last_change_from.join(", ")
                      : "—"
                  } -> ${
                    Array.isArray(selectedRecord.last_change_to)
                      ? selectedRecord.last_change_to.join(", ")
                      : "—"
                  }`}
                >
                  <Tag color="orange" style={{ whiteSpace: "nowrap" }}>
                    Changed
                  </Tag>
                </Tooltip>
              )}
            </Space>
          ) : (
            "DNS Record"
          )
        }
        width={900}
        open={drawerOpen}
        onClose={() => setDrawerOpen(false)}
        destroyOnClose
        styles={{ body: { overflow: "auto", maxHeight: "80vh" } }}
      >
        {selectedRecord && (
          <Space direction="vertical" size="large" style={{ width: "100%" }}>
            <Descriptions
              size="small"
              bordered
              column={2}
              labelStyle={{ whiteSpace: "nowrap" }}
              contentStyle={{ whiteSpace: "normal", wordBreak: "break-word" }}
            >
              <Descriptions.Item label="Record ID">
                <ExpandableValue value={selectedRecord.id} rows={2} />
              </Descriptions.Item>
              <Descriptions.Item label="Hosted zone name">
                <ExpandableValue
                  value={selectedRecord.domain_asset?.domain_name || undefined}
                  rows={2}
                />
              </Descriptions.Item>
              <Descriptions.Item label="Hosted zone ID">
                <ExpandableValue
                  value={selectedRecord.domain_asset?.zone_id || undefined}
                  rows={2}
                />
              </Descriptions.Item>
              <Descriptions.Item label="Parent domain asset ID">
                <ExpandableValue
                  value={selectedRecord.domain_asset?.id || undefined}
                  rows={2}
                />
              </Descriptions.Item>
              <Descriptions.Item label="Domain class">
                <ExpandableValue
                  value={formatDomainClassLabel(
                    selectedRecord.domain_asset?.domain_class,
                  )}
                  rows={2}
                />
              </Descriptions.Item>
              <Descriptions.Item label="Parent asset ID">
                <ExpandableValue
                  value={selectedRecord.domain_asset?.asset_id || undefined}
                  rows={2}
                />
              </Descriptions.Item>
              <Descriptions.Item label="Registrar">
                <ExpandableValue
                  value={formatRegistrarLabel(selectedRecord.domain_asset?.registrar)}
                  rows={2}
                />
              </Descriptions.Item>
              <Descriptions.Item label="Zone type">
                <span style={{ whiteSpace: "nowrap" }}>
                  {(() => {
                    const zoneType = (
                      selectedRecord.domain_asset?.zone_type || ""
                    ).toLowerCase();
                    if (!zoneType) return "—";
                    return zoneType.charAt(0).toUpperCase() + zoneType.slice(1);
                  })()}
                </span>
              </Descriptions.Item>
              <Descriptions.Item label="Status">
                <ExpandableValue
                  value={
                    selectedRecord.status
                      ? selectedRecord.status.toUpperCase()
                      : selectedRecord.domain_asset?.status || undefined
                  }
                  rows={2}
                />
              </Descriptions.Item>
              <Descriptions.Item label="Provider">
                <ExpandableValue
                  value={
                    selectedRecord.domain_asset?.asset?.cloud_account?.provider?.toUpperCase() ||
                    undefined
                  }
                  rows={2}
                />
              </Descriptions.Item>
              <Descriptions.Item label="Tagged Environment">
                <ExpandableValue
                  value={
                    selectedRecord.domain_asset?.asset?.environment?.toUpperCase() ||
                    tagsFromMetadata(selectedRecord).Environment ||
                    undefined
                  }
                  rows={2}
                />
              </Descriptions.Item>
              <Descriptions.Item label="Routing policy">
                <ExpandableValue
                  value={
                    [
                      selectedRecord.set_identifier &&
                        `Set ${selectedRecord.set_identifier}`,
                      typeof selectedRecord.weight === "number"
                        ? `Weight ${selectedRecord.weight}`
                        : null,
                      selectedRecord.region,
                      selectedRecord.failover &&
                        `Failover ${selectedRecord.failover}`,
                    ]
                      .filter(Boolean)
                      .join(" • ") || undefined
                  }
                  rows={2}
                />
              </Descriptions.Item>
              <Descriptions.Item label="Differentiator">
                <ExpandableValue
                  value={selectedRecord.set_identifier || undefined}
                  rows={2}
                />
              </Descriptions.Item>
              <Descriptions.Item label="Alias">
                <ExpandableValue
                  value={
                    selectedRecord.alias_target &&
                    typeof selectedRecord.alias_target.dns_name === "string"
                      ? (selectedRecord.alias_target.dns_name as string)
                      : undefined
                  }
                  rows={2}
                />
              </Descriptions.Item>
              <Descriptions.Item label="Value / Route traffic to">
                <ExpandableValue
                  value={
                    Array.isArray(selectedRecord.values) &&
                    selectedRecord.values.length > 0
                      ? selectedRecord.values.join(", ")
                      : selectedRecord.alias_target &&
                          typeof selectedRecord.alias_target.dns_name ===
                            "string"
                        ? (selectedRecord.alias_target.dns_name as string)
                        : undefined
                  }
                  rows={2}
                />
              </Descriptions.Item>
              <Descriptions.Item label="Health check ID">
                <ExpandableValue
                  value={selectedRecord.health_check_id || undefined}
                  rows={2}
                />
              </Descriptions.Item>
              <Descriptions.Item label="Evaluate target health">
                <ExpandableValue
                  value={
                    selectedRecord.evaluate_target_health === undefined
                      ? undefined
                      : selectedRecord.evaluate_target_health
                        ? "Yes"
                        : "No"
                  }
                  rows={2}
                />
              </Descriptions.Item>
              <Descriptions.Item label="Last target change">
                <ExpandableValue
                  value={
                    selectedRecord.last_change_at
                      ? `${dayjs(selectedRecord.last_change_at).format("YYYY-MM-DD HH:mm")} (old: ${
                          Array.isArray(selectedRecord.last_change_from)
                            ? selectedRecord.last_change_from.join(", ")
                            : "—"
                        } → new: ${
                          Array.isArray(selectedRecord.last_change_to)
                            ? selectedRecord.last_change_to.join(", ")
                            : "—"
                        })`
                      : undefined
                  }
                  rows={2}
                />
              </Descriptions.Item>
              <Descriptions.Item label="Owner department">
                <ExpandableValue
                  value={
                    selectedRecord.owner_department_id
                      ? departmentNameMap.get(
                          selectedRecord.owner_department_id,
                        ) || undefined
                      : undefined
                  }
                  rows={2}
                />
              </Descriptions.Item>
              <Descriptions.Item label="Owner employee ID">
                <ExpandableValue
                  value={selectedRecord.owner_employee_id ?? undefined}
                  rows={2}
                />
              </Descriptions.Item>
            </Descriptions>

            <Card size="small" title="Alerting / suppression">
              <Space
                direction="vertical"
                size="small"
                style={{ width: "100%" }}
              >
                <Space align="center">
                  <Text>Ignore target changes</Text>
                  <Switch
                    checked={ignoreChanges}
                    onChange={(val) => setIgnoreChanges(val)}
                  />
                </Space>
                <Space align="center" style={{ width: "100%" }}>
                  <Text style={{ minWidth: 140 }}>
                    Suppress when target matches
                  </Text>
                  <Input
                    placeholder="Regex or substring"
                    style={{ maxWidth: 320 }}
                    value={suppressPattern}
                    onChange={(e) => setSuppressPattern(e.target.value)}
                  />
                </Space>
              </Space>
            </Card>

            <Card size="small" title="Owner (department)">
              <Space wrap>
                <div style={{ width: 260 }}>
                  <EmployeeDropdown
                    placeholder="Owner employee"
                    value={
                      recordOwnerEmployeeId ??
                      selectedRecord.owner_employee_id ??
                      undefined
                    }
                    onChange={(val) =>
                      setRecordOwnerEmployeeId(
                        Array.isArray(val) ? val[0] : val,
                      )
                    }
                    filterDepartment={
                      ownerDepartment ??
                      selectedRecord.owner_department_id ??
                      undefined
                    }
                  />
                </div>
                <Select
                  placeholder="Owner department"
                  style={{ width: 260 }}
                  value={ownerDepartment ?? selectedRecord.owner_department_id}
                  onChange={(val) => setOwnerDepartment(val)}
                  options={departmentOptions}
                  showSearch
                  optionFilterProp="label"
                />
                <Button type="primary" onClick={handleSaveRecordOwner}>
                  Save owner
                </Button>
              </Space>
            </Card>

            <Card size="small" title="Hosted zone tags">
              <Space wrap>
                {Object.entries(tagsFromMetadata(selectedRecord)).map(
                  ([k, v]) => (
                    <Tag key={k}>{`${k}: ${v}`}</Tag>
                  ),
                )}
                {Object.keys(tagsFromMetadata(selectedRecord)).length === 0 && (
                  <Text type="secondary">No tags</Text>
                )}
              </Space>
            </Card>

            <Card size="small" title="Comments">
              <Space
                direction="vertical"
                style={{ width: "100%" }}
                size="small"
              >
                <List
                  loading={commentsLoading}
                  dataSource={recordComments}
                  locale={{
                    emptyText: commentsLoading
                      ? "Loading..."
                      : "No comments yet",
                  }}
                  renderItem={(item) => (
                    <List.Item style={{ paddingLeft: 0, paddingRight: 0 }}>
                      <Space
                        direction="vertical"
                        size={2}
                        style={{ width: "100%" }}
                      >
                        <Space size={8} align="baseline" wrap>
                          <Text strong>{item.author_name || "System"}</Text>
                          <Text type="secondary" style={{ fontSize: 12 }}>
                            {item.created_at
                              ? dayjs(item.created_at).format(
                                  "YYYY-MM-DD HH:mm",
                                )
                              : ""}
                          </Text>
                        </Space>
                        <Paragraph
                          style={{ marginBottom: 0, whiteSpace: "pre-wrap" }}
                        >
                          {item.content}
                        </Paragraph>
                      </Space>
                    </List.Item>
                  )}
                />
                <Input.TextArea
                  rows={3}
                  placeholder="Add a comment"
                  value={newComment}
                  onChange={(e) => setNewComment(e.target.value)}
                />
                <Space>
                  <Button
                    type="primary"
                    onClick={handleAddComment}
                    loading={commentSubmitting}
                    disabled={!newComment.trim()}
                  >
                    Add comment
                  </Button>
                  <Button
                    onClick={() => setNewComment("")}
                    disabled={!newComment}
                  >
                    Clear
                  </Button>
                </Space>
              </Space>
            </Card>
          </Space>
        )}
      </Drawer>
    </Space>
  );
}

function getPermissionAwareErrorMessage(
  error: unknown,
  forbiddenMessage: string,
  fallbackMessage: string,
) {
  if (typeof error === "object" && error !== null) {
    const status = (error as { response?: { status?: number } }).response
      ?.status;
    if (status === 403) {
      return forbiddenMessage;
    }
  }
  return fallbackMessage;
}

export default function DomainsPage() {
  return (
    <Space direction="vertical" size="large" style={{ width: "100%" }}>
      <div>
        <Title level={3} style={{ marginBottom: 4 }}>
          Domain Intelligence
        </Title>
        <Paragraph type="secondary" style={{ marginBottom: 0 }}>
          Hosted zones are the authoritative DNS containers. DNS records are the
          individual entries inside each zone. Switch tabs to browse zone
          inventory or record-level details.
        </Paragraph>
      </div>

      <Tabs
        defaultActiveKey="records"
        items={[
          {
            key: "records",
            label: "DNS Records",
            children: <RecordsTab />,
          },
          {
            key: "domains",
            label: "Hosted Zones",
            children: <DomainsTab />,
          },
        ]}
      />
    </Space>
  );
}