"use client";

import { useCallback, useEffect, useState } from "react";
import {
  Alert,
  Button,
  Card,
  Form,
  Input,
  Modal,
  Select,
  Space,
  Switch,
  Table,
  Typography,
} from "antd";
import { MenuOutlined } from "@ant-design/icons";

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

type MenuItem = {
  id: string;
  label: string;
  href: string;
  type: "INTERNAL" | "EXTERNAL";
  target: "SELF" | "BLANK";
  parentId: string | null;
  sortOrder: number;
  isActive: boolean;
};

export default function SiteMenuPage() {
  const [items, setItems] = useState<MenuItem[]>([]);
  const [err, setErr] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [open, setOpen] = useState(false);
  const [editing, setEditing] = useState<MenuItem | null>(null);
  const [form] = Form.useForm();

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

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

  const openCreate = () => {
    setEditing(null);
    form.resetFields();
    form.setFieldsValue({ type: "INTERNAL", target: "SELF", isActive: true, sortOrder: items.length });
    setOpen(true);
  };

  const openEdit = (row: MenuItem) => {
    setEditing(row);
    form.setFieldsValue(row);
    setOpen(true);
  };

  const save = async () => {
    const values = await form.validateFields();
    const path = editing ? `/cms/site/menu/${editing.id}` : "/cms/site/menu";
    const res = await cmsSiteFetch(path, {
      method: editing ? "PATCH" : "POST",
      body: JSON.stringify(values),
    });
    if (!res.ok) {
      setErr(res.message);
      return;
    }
    setOpen(false);
    void load();
  };

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

  const move = async (row: MenuItem, dir: -1 | 1) => {
    const sorted = [...items].sort((a, b) => a.sortOrder - b.sortOrder);
    const idx = sorted.findIndex((i) => i.id === row.id);
    const swap = sorted[idx + dir];
    if (!swap) return;
    const res = await cmsSiteFetch("/cms/site/menu/reorder", {
      method: "POST",
      body: JSON.stringify({
        items: [
          { id: row.id, sortOrder: swap.sortOrder },
          { id: swap.id, sortOrder: row.sortOrder },
        ],
      }),
    });
    if (!res.ok) setErr(res.message);
    else void load();
  };

  return (
    <Card className="cms-surface-card" styles={{ body: { padding: "24px 28px" } }}>
      <CmsSectionTitle
        icon={<MenuOutlined />}
        title="Menu website"
        description="Quản lý điều hướng header trên trang công khai."
      />
      {err ? <Alert type="warning" message={err} showIcon className="mb-4" /> : null}
      <Space className="mb-4">
        <Button type="primary" onClick={openCreate}>
          Thêm mục menu
        </Button>
      </Space>
      <Table
        rowKey="id"
        loading={loading}
        dataSource={[...items].sort((a, b) => a.sortOrder - b.sortOrder)}
        pagination={false}
        columns={[
          { title: "Nhãn", dataIndex: "label" },
          { title: "Href", dataIndex: "href" },
          { title: "Loại", dataIndex: "type", width: 100 },
          {
            title: "Active",
            dataIndex: "isActive",
            width: 80,
            render: (v: boolean) => (v ? "Có" : "Không"),
          },
          { title: "Thứ tự", dataIndex: "sortOrder", width: 80 },
          {
            title: "",
            width: 220,
            render: (_, row) => (
              <Space>
                <Button size="small" onClick={() => void move(row, -1)}>
                  ↑
                </Button>
                <Button size="small" onClick={() => void move(row, 1)}>
                  ↓
                </Button>
                <Button size="small" onClick={() => openEdit(row)}>
                  Sửa
                </Button>
                <Button size="small" danger onClick={() => void remove(row.id)}>
                  Xóa
                </Button>
              </Space>
            ),
          },
        ]}
      />
      <Modal
        title={editing ? "Sửa mục menu" : "Thêm mục menu"}
        open={open}
        onCancel={() => setOpen(false)}
        onOk={() => void save()}
        okText="Lưu"
      >
        <Form form={form} layout="vertical">
          <Form.Item name="label" label="Nhãn" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="href" label="Href" rules={[{ required: true }]}>
            <Input placeholder="/tu-vi hoặc https://..." />
          </Form.Item>
          <Form.Item name="type" label="Loại" rules={[{ required: true }]}>
            <Select
              options={[
                { value: "INTERNAL", label: "Nội bộ" },
                { value: "EXTERNAL", label: "Ngoài" },
              ]}
            />
          </Form.Item>
          <Form.Item name="target" label="Target">
            <Select
              options={[
                { value: "SELF", label: "Cùng tab" },
                { value: "BLANK", label: "Tab mới" },
              ]}
            />
          </Form.Item>
          <Form.Item name="parentId" label="Parent ID">
            <Input placeholder="Để trống nếu mục gốc" />
          </Form.Item>
          <Form.Item name="sortOrder" label="Thứ tự">
            <Input type="number" />
          </Form.Item>
          <Form.Item name="isActive" label="Hiển thị" valuePropName="checked">
            <Switch />
          </Form.Item>
        </Form>
        <Typography.Text type="secondary" className="text-xs">
          Cần quyền site:menu:write (MANAGER / SUPER_ADMIN).
        </Typography.Text>
      </Modal>
    </Card>
  );
}