import { App, Button, Form, Input, Modal, Select } from "antd";
import type { ColumnsType } from "antd/es/table";
import { Plus, Search } from "lucide-react";
import { useCallback, useEffect, useState } from "react";

import { PaginationBar } from "@/components/layout/workspace-page";
import { useDebouncedValue } from "@/hooks/use-debounced-value";
import {
    closeAdminAnnouncement,
    createAdminAnnouncement,
    listAdminAnnouncements,
    updateAdminAnnouncement,
    type AnnouncementLevel,
    type AnnouncementStatus,
    type SystemAnnouncement,
} from "@/services/api/announcements";
import { AdminDataTable, AdminFilterChip, AdminRowActions, AdminStatusBadge, AdminTableEmpty } from "./admin-ui";

type AnnouncementFormValues = {
    title: string;
    content: string;
    level: AnnouncementLevel;
};

const levelOptions: Array<{ value: AnnouncementLevel; label: string }> = [
    { value: "info", label: "平台通知" },
    { value: "success", label: "状态恢复" },
    { value: "warning", label: "服务提醒" },
    { value: "critical", label: "重要通知" },
];

const levelMeta: Record<AnnouncementLevel, { label: string; tone: "info" | "success" | "warning" | "error" }> = {
    info: { label: "平台通知", tone: "info" },
    success: { label: "状态恢复", tone: "success" },
    warning: { label: "服务提醒", tone: "warning" },
    critical: { label: "重要通知", tone: "error" },
};

export default function AdminAnnouncementsPanel() {
    const { message } = App.useApp();
    const [form] = Form.useForm<AnnouncementFormValues>();
    const [announcements, setAnnouncements] = useState<SystemAnnouncement[]>([]);
    const [keyword, setKeyword] = useState("");
    const debouncedKeyword = useDebouncedValue(keyword);
    const [status, setStatus] = useState<"all" | AnnouncementStatus>("all");
    const [page, setPage] = useState(1);
    const [pageSize, setPageSize] = useState(20);
    const [total, setTotal] = useState(0);
    const [loading, setLoading] = useState(false);
    const [modalOpen, setModalOpen] = useState(false);
    const [editingAnnouncement, setEditingAnnouncement] = useState<SystemAnnouncement | null>(null);
    const [publishing, setPublishing] = useState(false);
    const [closingId, setClosingId] = useState("");

    const reload = useCallback(async () => {
        setLoading(true);
        try {
            const data = await listAdminAnnouncements({ keyword: debouncedKeyword || undefined, status: status === "all" ? undefined : status, page, limit: pageSize });
            setAnnouncements(data.announcements || []);
            setTotal(data.total || 0);
        } catch (error) {
            message.error(error instanceof Error ? error.message : "读取公告列表失败");
        } finally {
            setLoading(false);
        }
    }, [debouncedKeyword, message, page, pageSize, status]);

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

    const openPublishModal = () => {
        setEditingAnnouncement(null);
        form.setFieldsValue({ title: "", content: "", level: "info" });
        setModalOpen(true);
    };

    const openEditModal = (announcement: SystemAnnouncement) => {
        setEditingAnnouncement(announcement);
        form.setFieldsValue({ title: announcement.title, content: announcement.content, level: announcement.level });
        setModalOpen(true);
    };

    const publish = async () => {
        const values = await form.validateFields();
        setPublishing(true);
        try {
            const input = { title: values.title.trim(), content: values.content.trim(), level: values.level };
            if (editingAnnouncement) await updateAdminAnnouncement(editingAnnouncement.id, input);
            else await createAdminAnnouncement(input);
            setModalOpen(false);
            setEditingAnnouncement(null);
            setPage(1);
            await reload();
            message.success(editingAnnouncement ? "公告已更新并重新发布" : "公告已发布");
        } catch (error) {
            message.error(error instanceof Error ? error.message : editingAnnouncement ? "更新公告失败" : "发布公告失败");
        } finally {
            setPublishing(false);
        }
    };

    const closeAnnouncement = async (announcement: SystemAnnouncement) => {
        setClosingId(announcement.id);
        try {
            await closeAdminAnnouncement(announcement.id);
            await reload();
            message.success("公告已关闭");
        } catch (error) {
            message.error(error instanceof Error ? error.message : "关闭公告失败");
        } finally {
            setClosingId("");
        }
    };

    const columns: ColumnsType<SystemAnnouncement> = [
        {
            title: "公告内容",
            dataIndex: "title",
            minWidth: 360,
            render: (_, announcement) => (
                <div className="min-w-0 py-0.5">
                    <div className="truncate text-sm font-medium text-foreground" title={announcement.title}>{announcement.title}</div>
                    <div className="mt-1 line-clamp-2 whitespace-pre-wrap text-xs leading-5 text-foreground/50">{announcement.content}</div>
                </div>
            ),
        },
        {
            title: "级别",
            dataIndex: "level",
            width: 120,
            render: (level: AnnouncementLevel) => {
                const meta = levelMeta[level] || levelMeta.info;
                return <AdminStatusBadge label={meta.label} tone={meta.tone} />;
            },
        },
        {
            title: "状态",
            dataIndex: "status",
            width: 100,
            render: (value: AnnouncementStatus) => <AdminStatusBadge label={value === "active" ? "发布中" : "已关闭"} tone={value === "active" ? "success" : "neutral"} />,
        },
        {
            title: "发布时间",
            dataIndex: "publishedAt",
            width: 170,
            render: formatDateTime,
        },
        {
            title: "关闭时间",
            dataIndex: "closedAt",
            width: 170,
            render: (value?: string) => value ? formatDateTime(value) : "--",
        },
        {
            title: "操作",
            key: "actions",
            width: 160,
            render: (_, announcement) => <AdminRowActions primary={{ label: "编辑", onClick: () => openEditModal(announcement) }} actions={announcement.status === "active" ? [{ key: "close", label: "关闭", danger: true, disabled: closingId === announcement.id, onClick: () => void closeAnnouncement(announcement), confirm: { title: "关闭这条公告？", description: "关闭后用户公告中心将不再展示，历史记录会保留。", okText: "关闭公告" } }] : []} />,
        },
    ];

    return (
        <>
            <AdminDataTable
                toolbar={<Input allowClear className="app-list-search" prefix={<Search className="size-4 text-foreground/40" />} value={keyword} placeholder="搜索公告标题或正文" onChange={(event) => { setKeyword(event.target.value); setPage(1); }} />}
                toolbarActiveFilters={<>{keyword ? <AdminFilterChip label={`搜索：${keyword}`} onRemove={() => { setKeyword(""); setPage(1); }} /> : null}{status !== "all" ? <AdminFilterChip label={`状态：${status === "active" ? "发布中" : "已关闭"}`} onRemove={() => { setStatus("all"); setPage(1); }} /> : null}</>}
                toolbarActive={Boolean(keyword || status !== "all")}
                toolbarFilters={<Select className="w-32" value={status} onChange={(value) => { setStatus(value); setPage(1); }} options={[{ label: "全部状态", value: "all" }, { label: "发布中", value: "active" }, { label: "已关闭", value: "closed" }]} />}
                onReset={() => { setKeyword(""); setStatus("all"); setPage(1); }}
                trailing={<Button type="primary" size="small" icon={<Plus className="size-4" />} onClick={openPublishModal}>发布公告</Button>}
                table={{ rowKey: "id", size: "small", loading, pagination: false, columns, dataSource: announcements, scroll: { x: 1020 } }}
                empty={<AdminTableEmpty filtered={Boolean(keyword || status !== "all")} title="暂无公告" />}
                footer={<PaginationBar alwaysShow current={page} pageSize={pageSize} total={total} onChange={(nextPage, nextPageSize) => { setPage(nextPageSize !== pageSize ? 1 : nextPage); setPageSize(nextPageSize); }} />}
            />

            <Modal title={editingAnnouncement ? "编辑并重新发布公告" : "发布系统公告"} open={modalOpen} width={760} centered okText={editingAnnouncement ? "保存并重新发布" : "立即发布"} cancelText="取消" confirmLoading={publishing} onOk={() => void publish()} onCancel={() => { setModalOpen(false); setEditingAnnouncement(null); }} destroyOnHidden>
                <Form form={form} layout="vertical" className="pt-3" requiredMark={false}>
                    <Form.Item name="title" label="公告标题" rules={[{ required: true, whitespace: true, message: "请填写公告标题" }, { max: 120, message: "标题不能超过 120 个字符" }]}>
                        <Input maxLength={120} showCount placeholder="例如：视频模型已恢复正常使用" />
                    </Form.Item>
                    <Form.Item name="level" label="公告级别" rules={[{ required: true, message: "请选择公告级别" }]}>
                        <Select options={levelOptions} />
                    </Form.Item>
                    <Form.Item name="content" label="公告正文" rules={[{ required: true, whitespace: true, message: "请填写公告正文" }, { max: 4000, message: "正文不能超过 4000 个字符" }]}>
                        <Input.TextArea maxLength={4000} showCount autoSize={{ minRows: 6, maxRows: 12 }} placeholder="填写服务状态、影响范围和用户需要采取的操作" />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
}

function formatDateTime(value: string) {
    const date = new Date(value);
    if (Number.isNaN(date.getTime())) return "--";
    return new Intl.DateTimeFormat("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", hour12: false }).format(date).replaceAll("/", "-");
}