"use client";

import type { Region } from "@domainops/shared-types";
import { App, Button, Popconfirm, Table, Tooltip, Typography } from "antd";
import { DeleteOutlined, EditOutlined, HolderOutlined, PlusOutlined } from "@ant-design/icons";
import type { ColumnsType } from "antd/es/table";
import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import { archiveRegion, listRegions, reorderRegions } from "@/lib/api/domains";
import { ApiError } from "@/lib/api/client";
import { useRowDragReorder } from "@/lib/hooks/useRowDragReorder";
import { PageGuide } from "@/components/features/PageGuide";
import { REGIONS_GUIDES } from "@/lib/guides/domains";
import { RegionFormModal } from "./RegionFormModal";

export default function RegionsPage() {
  const { message } = App.useApp();
  const [regions, setRegions] = useState<Region[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingRegion, setEditingRegion] = useState<Region | null>(null);

  const load = useCallback(async () => {
    setIsLoading(true);
    try {
      setRegions(await listRegions());
    } catch (err) {
      message.error(err instanceof ApiError ? err.message : "Couldn't load regions.");
    } finally {
      setIsLoading(false);
    }
  }, [message]);

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

  async function handleArchive(region: Region) {
    try {
      await archiveRegion(region.id);
      message.success(`${region.name} archived.`);
      void load();
    } catch (err) {
      message.error(err instanceof ApiError ? err.message : "Couldn't archive that region.");
    }
  }

  async function handleReorder(ids: number[]) {
    const byId = new Map(regions.map((r) => [r.id, r]));
    setRegions(ids.map((id) => byId.get(id)!));

    try {
      setRegions(await reorderRegions(ids));
      message.success("Region order saved.");
    } catch (err) {
      message.error(err instanceof ApiError ? err.message : "Couldn't save that order.");
      void load();
    }
  }

  const { onRow } = useRowDragReorder<Region>({ items: regions, enabled: true, onReorder: handleReorder });

  const columns: ColumnsType<Region> = [
    {
      title: "",
      width: 48,
      render: () => (
        <Tooltip title="Drag to reorder">
          <HolderOutlined style={{ cursor: "grab", fontSize: 18 }} className="dms_regions_drag_handle" />
        </Tooltip>
      ),
    },
    { title: "Name", dataIndex: "name", render: (v: string) => <span className="font-semibold">{v}</span> },
    { title: "Country Code", dataIndex: "country_code", render: (v: string) => <span className="font-mono">{v}</span> },
    {
      title: "Domains",
      dataIndex: "domains_count",
      className: "dms_regions_col_domains",
      render: (v: number | undefined, region) => (
        <Link href={`/domains?region_id=${region.id}`} className="dms_regions_domains_link">
          {v ?? 0}
        </Link>
      ),
    },
    {
      title: "Actions",
      render: (_, region) => (
        <div className="flex gap-2">
          <Tooltip title="Edit">
            <Button
              size="small"
              icon={<EditOutlined />}
              onClick={() => {
                setEditingRegion(region);
                setIsModalOpen(true);
              }}
              className="dms_regions_edit_btn"
            />
          </Tooltip>
          <Popconfirm title={`Archive ${region.name}?`} onConfirm={() => handleArchive(region)}>
            <Tooltip title="Archive">
              <Button size="small" danger icon={<DeleteOutlined />} className="dms_regions_archive_btn" />
            </Tooltip>
          </Popconfirm>
        </div>
      ),
    },
  ];

  return (
    <div className="flex flex-col gap-4 page page-regions">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Typography.Title level={4} style={{ margin: 0 }}>
            Regions
          </Typography.Title>
          <PageGuide guides={REGIONS_GUIDES} label="Regions guide" />
        </div>
        <Button
          type="primary"
          icon={<PlusOutlined />}
          onClick={() => {
            setEditingRegion(null);
            setIsModalOpen(true);
          }}
          className="dms_regions_create_btn"
        >
          Create region
        </Button>
      </div>

      <Table<Region>
        rowKey="id"
        columns={columns}
        dataSource={regions}
        loading={isLoading}
        onRow={onRow}
        pagination={false}
        className="dms_regions_table"
      />

      <RegionFormModal
        open={isModalOpen}
        region={editingRegion}
        onClose={() => setIsModalOpen(false)}
        onSaved={() => {
          setIsModalOpen(false);
          void load();
        }}
      />
    </div>
  );
}