"use client";

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

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));
}

function StatusBadge({ status }: { status: string | undefined | null }) {
  const s = (status ?? "").toUpperCase();
  if (s === "PUBLISHED") {
    return (
      <span className="inline-flex items-center rounded-full border border-emerald-300/70 bg-gradient-to-b from-emerald-50 to-emerald-100/90 px-2.5 py-0.5 text-[11px] font-bold uppercase tracking-[0.12em] text-emerald-900 shadow-[0_1px_2px_rgba(5,150,105,0.12)]">
        Published
      </span>
    );
  }
  if (s === "DRAFT") {
    return (
      <span className="inline-flex items-center rounded-full border border-amber-300/80 bg-gradient-to-b from-amber-50 to-amber-100/85 px-2.5 py-0.5 text-[11px] font-bold uppercase tracking-[0.12em] text-amber-950 shadow-[0_1px_2px_rgba(217,119,6,0.1)]">
        Draft
      </span>
    );
  }
  return (
    <span className="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-2.5 py-0.5 text-[11px] font-semibold text-slate-600">
      {status ?? "—"}
    </span>
  );
}

export default function PostsListPage() {
  const { tableProps, filters, setFilters, setCurrentPage, result } = useTable<PostRecord>({
    resource: "posts",
    syncWithLocation: true,
  });

  const qVal = readLogical(filters, "q");
  const statusVal = readLogical(filters, "status");
  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");
      setCurrentPage?.(1);
    },
    [filters, setFilters, setCurrentPage],
  );

  const setStatus = useCallback(
    (value: string | undefined) => {
      const rest = withoutField(filters, "status");
      const next: CrudFilter[] =
        !value || value === ""
          ? rest
          : [...rest, { field: "status", operator: "eq", value }];
      setFilters(next, "replace");
      setCurrentPage?.(1);
    },
    [filters, setFilters, setCurrentPage],
  );

  const columns: ColumnsType<PostRecord> = useMemo(
    () => [
      {
        title: "Title",
        dataIndex: "title",
        key: "title",
        ellipsis: true,
        width: "26%",
      },
      {
        title: "Slug",
        dataIndex: "slug",
        key: "slug",
        ellipsis: true,
        responsive: ["md"] as const,
        width: "20%",
      },
      {
        title: "Status",
        dataIndex: "status",
        key: "status",
        width: 132,
        render: (status: string) => <StatusBadge status={status} />,
      },
      {
        title: "Published at",
        dataIndex: "publishedAt",
        key: "publishedAt",
        responsive: ["lg"] as const,
        width: 188,
        render: (v: string | null) => {
          if (!v) return <span className="text-[rgba(15,23,42,0.35)]">—</span>;
          const d = new Date(v);
          if (Number.isNaN(d.getTime())) return "—";
          return new Intl.DateTimeFormat(undefined, {
            dateStyle: "medium",
            timeStyle: "short",
          }).format(d);
        },
      },
      {
        title: "Actions",
        key: "actions",
        align: "right" as const,
        width: 120,
        render: (_: unknown, record: PostRecord) => (
          <Flex justify="end" align="center" gap="small" wrap="wrap" className="min-h-[40px]">
            <EditButton hideText size="middle" recordItemId={record.id} />
            <DeleteButton hideText size="middle" recordItemId={record.id} />
          </Flex>
        ),
      },
    ],
    [],
  );

  return (
    <PageContainer className="flex flex-col gap-6">
      <header className="shrink-0">
        <Typography.Title
          level={3}
          className="!mb-1 !mt-0 !text-2xl !font-semibold !tracking-tight text-[rgba(15,23,42,0.92)]"
        >
          Posts
        </Typography.Title>
        <Typography.Text className="text-[15px] leading-relaxed text-[rgba(15,23,42,0.52)]">
          Search and filter drafts and published articles for Co Thu Ky Pho. Create a post or open a row
          to edit.
        </Typography.Text>
      </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 lg:flex-row lg:items-center lg:justify-between lg:gap-4"
        >
          <Flex wrap="wrap" align="center" gap="middle" className="min-w-0 flex-1">
            <Input.Search
              allowClear
              placeholder="Search title or excerpt"
              value={qInput}
              onChange={(e) => setQInput(e.target.value)}
              onSearch={(v) => setQ(v)}
              className="w-full max-w-[300px]"
              size="large"
            />
            <Select
              allowClear
              placeholder="Status"
              value={statusVal || undefined}
              onChange={(v) => setStatus(v)}
              className="min-w-[160px]"
              size="large"
              options={[
                { value: "DRAFT", label: "Draft" },
                { value: "PUBLISHED", label: "Published" },
              ]}
            />
            <Typography.Text type="secondary" className="whitespace-nowrap text-sm">
              {result.total ?? 0} {(result.total ?? 0) === 1 ? "post" : "posts"}
            </Typography.Text>
          </Flex>
          <span className="cms-toolbar-create shrink-0">
            <CreateButton resource="posts" size="large" type="primary">
              New post
            </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={<UnorderedListOutlined />}
            title="All posts"
            description="Edit or delete from the actions column. Status uses draft vs published labels."
          />
        </div>
        <Table<PostRecord>
          {...(tableProps as unknown as TableProps<PostRecord>)}
          rowKey="id"
          columns={columns}
          className="cms-data-table [&_.ant-table-cell]:align-middle"
          size="middle"
        />
      </Card>
    </PageContainer>
  );
}