"use client";

import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import { Alert, Button, Card, Space, Table, Tag } from "antd";
import { FileTextOutlined } from "@ant-design/icons";

import { CmsSectionTitle } from "@/components/admin/CmsSectionTitle";
import { cmsSiteFetch } from "@/lib/site-cms-api";

type PageRow = {
  id: string;
  title: string;
  slug: string;
  status: "DRAFT" | "PUBLISHED";
  updatedAt: string;
};

export default function SitePagesListPage() {
  const [items, setItems] = useState<PageRow[]>([]);
  const [err, setErr] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  const load = useCallback(async () => {
    setLoading(true);
    const res = await cmsSiteFetch<{ items: PageRow[] }>("/cms/site/pages");
    if (!res.ok) setErr(res.message);
    else setItems(res.data.items);
    setLoading(false);
  }, []);

  useEffect(() => {
    void load();
  }, [load]);

  const publish = async (id: string) => {
    const res = await cmsSiteFetch(`/cms/site/pages/${id}/publish`, { method: "POST" });
    if (!res.ok) setErr(res.message);
    else void load();
  };

  const unpublish = async (id: string) => {
    const res = await cmsSiteFetch(`/cms/site/pages/${id}/unpublish`, { method: "POST" });
    if (!res.ok) setErr(res.message);
    else void load();
  };

  const remove = async (id: string) => {
    const res = await cmsSiteFetch(`/cms/site/pages/${id}`, { method: "DELETE" });
    if (!res.ok) setErr(res.message);
    else void load();
  };

  return (
    <Card className="cms-surface-card" styles={{ body: { padding: "24px 28px" } }}>
      <CmsSectionTitle
        icon={<FileTextOutlined />}
        title="Trang website"
        description="Nội dung trang tĩnh công khai (slug → /pages/[slug])."
      />
      {err ? <Alert type="warning" message={err} showIcon className="mb-4" /> : null}
      <Space className="mb-4">
        <Link href="/dashboard/site/pages/new">
          <Button type="primary">Tạo trang mới</Button>
        </Link>
      </Space>
      <Table
        rowKey="id"
        loading={loading}
        dataSource={items}
        pagination={false}
        columns={[
          { title: "Tiêu đề", dataIndex: "title" },
          { title: "Slug", dataIndex: "slug" },
          {
            title: "Trạng thái",
            dataIndex: "status",
            render: (s: string) => (
              <Tag color={s === "PUBLISHED" ? "green" : "default"}>{s}</Tag>
            ),
          },
          {
            title: "",
            width: 320,
            render: (_, row) => (
              <Space wrap>
                <Link href={`/dashboard/site/pages/${row.id}/edit`}>
                  <Button size="small">Sửa</Button>
                </Link>
                {row.status === "DRAFT" ? (
                  <Button size="small" type="primary" onClick={() => void publish(row.id)}>
                    Xuất bản
                  </Button>
                ) : (
                  <Button size="small" onClick={() => void unpublish(row.id)}>
                    Gỡ xuất bản
                  </Button>
                )}
                <Button size="small" danger onClick={() => void remove(row.id)}>
                  Xóa
                </Button>
              </Space>
            ),
          },
        ]}
      />
    </Card>
  );
}