"use client";

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

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

type FooterLink = {
  id: string;
  label: string;
  href: string;
  groupLabel: string | null;
  sortOrder: number;
  isActive: boolean;
};

type FooterData = {
  id: string;
  companyName: string | null;
  description: string | null;
  address: string | null;
  phone: string | null;
  email: string | null;
  copyrightText: string | null;
  links: FooterLink[];
};

export default function SiteFooterPage() {
  const [footer, setFooter] = useState<FooterData | null>(null);
  const [err, setErr] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [form] = Form.useForm();
  const [linkForm] = Form.useForm();
  const [linkOpen, setLinkOpen] = useState(false);
  const [editingLink, setEditingLink] = useState<FooterLink | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    const res = await cmsSiteFetch<FooterData>("/cms/site/footer");
    if (!res.ok) {
      setErr(res.message);
      setFooter(null);
    } else {
      setFooter(res.data);
      form.setFieldsValue(res.data);
    }
    setLoading(false);
  }, [form]);

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

  const saveFooter = async () => {
    const values = await form.validateFields();
    const res = await cmsSiteFetch("/cms/site/footer", {
      method: "PATCH",
      body: JSON.stringify(values),
    });
    if (!res.ok) setErr(res.message);
    else void load();
  };

  const saveLink = async () => {
    const values = await linkForm.validateFields();
    const path = editingLink
      ? `/cms/site/footer/links/${editingLink.id}`
      : "/cms/site/footer/links";
    const res = await cmsSiteFetch(path, {
      method: editingLink ? "PATCH" : "POST",
      body: JSON.stringify(values),
    });
    if (!res.ok) setErr(res.message);
    else {
      setLinkOpen(false);
      void load();
    }
  };

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

  const openLinkModal = (row?: FooterLink) => {
    setEditingLink(row ?? null);
    linkForm.resetFields();
    if (row) linkForm.setFieldsValue(row);
    else linkForm.setFieldsValue({ isActive: true, sortOrder: footer?.links.length ?? 0 });
    setLinkOpen(true);
  };

  return (
    <Card className="cms-surface-card" loading={loading} styles={{ body: { padding: "24px 28px" } }}>
      <CmsSectionTitle
        icon={<LayoutOutlined />}
        title="Footer website"
        description="Thông tin công ty và liên kết chân trang."
      />
      {err ? <Alert type="warning" message={err} showIcon className="mb-4" /> : null}
      <Form form={form} layout="vertical" className="max-w-2xl">
        <Form.Item name="companyName" label="Tên công ty / thương hiệu">
          <Input />
        </Form.Item>
        <Form.Item name="description" label="Mô tả ngắn">
          <Input.TextArea rows={3} />
        </Form.Item>
        <Form.Item name="address" label="Địa chỉ">
          <Input />
        </Form.Item>
        <Form.Item name="phone" label="Điện thoại">
          <Input />
        </Form.Item>
        <Form.Item name="email" label="Email">
          <Input />
        </Form.Item>
        <Form.Item name="copyrightText" label="Copyright">
          <Input />
        </Form.Item>
      </Form>
      <Button type="primary" className="mb-6" onClick={() => void saveFooter()}>
        Lưu thông tin footer
      </Button>
      <Space className="mb-3">
        <Button onClick={() => openLinkModal()}>Thêm liên kết</Button>
      </Space>
      <Table
        rowKey="id"
        dataSource={footer?.links ?? []}
        pagination={false}
        columns={[
          { title: "Nhãn", dataIndex: "label" },
          { title: "Href", dataIndex: "href" },
          { title: "Nhóm", dataIndex: "groupLabel" },
          {
            title: "Active",
            dataIndex: "isActive",
            render: (v: boolean) => (v ? "Có" : "Không"),
          },
          {
            title: "",
            render: (_, row) => (
              <Space>
                <Button size="small" onClick={() => openLinkModal(row)}>
                  Sửa
                </Button>
                <Button size="small" danger onClick={() => void removeLink(row.id)}>
                  Xóa
                </Button>
              </Space>
            ),
          },
        ]}
      />
      <Modal
        title={editingLink ? "Sửa liên kết" : "Thêm liên kết"}
        open={linkOpen}
        onCancel={() => setLinkOpen(false)}
        onOk={() => void saveLink()}
        okText="Lưu"
      >
        <Form form={linkForm} 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 />
          </Form.Item>
          <Form.Item name="groupLabel" label="Nhóm">
            <Input />
          </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>
      </Modal>
    </Card>
  );
}