"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { useTable, EditButton, CreateButton } from "@refinedev/antd";
import type { CrudFilter, LogicalFilter } from "@refinedev/core";
import { FolderOpenOutlined, FolderOutlined } from "@ant-design/icons";
import { Card, Flex, Table, Input, Typography } from "antd";
import type { ColumnsType, TableProps } from "antd/es/table";
import type { CategoryRecord } from "@/types/category";

import { CmsSectionTitle } from "@/components/admin/CmsSectionTitle";
import { PageContainer } from "@/components/admin/PageContainer";

function readLogical(filters: CrudFilter[], field: string): string {
  const f = filters.find(
    (x): x is LogicalFilter => "field" in x && x.field === field,
  );
  const v = f?.value;
  if (v === undefined || v === null || v === "") return "";
  return String(v);
}

function withoutField(filters: CrudFilter[], field: string): CrudFilter[] {
  return filters.filter((x) => !("field" in x && x.field === field));
}

export default function CategoriesListPage() {
  const { tableProps, filters, setFilters, result } = useTable<CategoryRecord>({
    resource: "categories",
    syncWithLocation: true,
    pagination: { mode: "client", pageSize: 10 },
  });

  const qVal = readLogical(filters, "q");
  const [qInput, setQInput] = useState(qVal);
  useEffect(() => {
    setQInput(qVal);
  }, [qVal]);

  const setQ = useCallback(
    (value: string) => {
      const rest = withoutField(filters, "q");
      const next: CrudFilter[] =
        value.trim() === ""
          ? rest
          : [...rest, { field: "q", operator: "contains", value: value.trim() }];
      setFilters(next, "replace");
    },
    [filters, setFilters],
  );

  const columns: ColumnsType<CategoryRecord> = useMemo(
    () => [
      {
        title: "Name",
        dataIndex: "name",
        key: "name",
        ellipsis: true,
        width: "38%",
      },
      {
        title: "Slug",
        dataIndex: "slug",
        key: "slug",
        ellipsis: true,
        width: "46%",
      },
      {
        title: "Actions",
        key: "actions",
        align: "right" as const,
        width: 108,
        render: (_: unknown, record: CategoryRecord) => (
          <Flex justify="end" align="center" className="min-h-[40px]">
            <EditButton hideText size="middle" recordItemId={record.id} />
          </Flex>
        ),
      },
    ],
    [],
  );

  return (
    <PageContainer className="flex flex-col gap-6">
      <header className="flex shrink-0 gap-3.5">
        <span className="cms-page-heading-icon mt-0.5" aria-hidden>
          <FolderOutlined />
        </span>
        <div className="min-w-0">
          <Typography.Title
            level={3}
            className="!mb-1 !mt-0 !text-2xl !font-semibold !tracking-tight text-[rgba(15,23,42,0.92)]"
          >
            Categories
          </Typography.Title>
          <Typography.Text className="text-[15px] leading-relaxed text-[rgba(15,23,42,0.52)]">
            Organize posts with topics and URL-friendly slugs. Search below or add a new category.
          </Typography.Text>
        </div>
      </header>

      <Card
        className="cms-surface-card border-[rgba(15,23,42,0.08)]"
        styles={{ body: { padding: "18px 22px" } }}
      >
        <Flex
          vertical
          gap="middle"
          className="w-full sm:flex-row sm:items-center sm:justify-between sm:gap-4"
        >
          <Flex wrap="wrap" align="center" gap="middle" className="min-w-0 flex-1">
            <Input.Search
              allowClear
              placeholder="Search by name or slug"
              value={qInput}
              onChange={(e) => setQInput(e.target.value)}
              onSearch={(v) => setQ(v)}
              className="w-full max-w-[320px]"
              size="large"
            />
            <Typography.Text type="secondary" className="whitespace-nowrap text-sm">
              {result.total ?? 0} {result.total === 1 ? "category" : "categories"}
            </Typography.Text>
          </Flex>
          <span className="cms-toolbar-create shrink-0">
            <CreateButton resource="categories" size="large" type="primary">
              New category
            </CreateButton>
          </span>
        </Flex>
      </Card>

      <Card
        className="cms-surface-card cms-data-table border-[rgba(15,23,42,0.08)]"
        styles={{ body: { padding: 0 } }}
      >
        <div className="border-b border-[rgba(15,23,42,0.08)] px-6 py-5">
          <CmsSectionTitle
            icon={<FolderOpenOutlined />}
            title="All categories"
            description="Edit a row to change its name or slug."
          />
        </div>
        <Table<CategoryRecord>
          {...(tableProps as unknown as TableProps<CategoryRecord>)}
          rowKey="id"
          columns={columns}
          className="cms-data-table [&_.ant-table-cell]:align-middle [&_.ant-pagination]:!px-6 [&_.ant-pagination]:!py-4 [&_.ant-pagination]:!mb-0 [&_.ant-pagination]:border-t [&_.ant-pagination]:border-[rgba(15,23,42,0.06)]"
          size="middle"
        />
      </Card>
    </PageContainer>
  );
}