import * as React from 'react';
import { useState, useEffect } from 'react';
import { Table, Button, Input, Space, Modal, Form, Drawer, message, Pagination, Tag } from 'antd';
import { SearchOutlined, EyeOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
import { useAuditStore } from './store';
import './style.scss';

interface AuditItem {
    id: string;
    appId: string;
    appName: string;
    appDescription: string;
    creatorId: string;
    creator: string;
    department: string;
    submitTime: string;
    auditStatus: 'pending' | 'approved' | 'rejected';
    auditor: string | null;
    auditTime: string | null;
    auditOpinion: string | null;
    knowledgeBaseCount: number;
    documentCount: number;
    sliceCount: number;
}

const AuditPage: React.FC = () => {
    const {
        listLoading,
        list,
        page,
        stats,
        fetchAuditList,
        fetchAuditStats,
        onAuditPass,
        onAuditReject,
        setQuery,
    } = useAuditStore();

    const [detailVisible, setDetailVisible] = useState(false);
    const [auditModalVisible, setAuditModalVisible] = useState(false);
    const [currentAudit, setCurrentAudit] = useState<AuditItem | null>(null);
    const [auditActionType, setAuditActionType] = useState<'approve' | 'reject'>('approve');
    const [auditForm] = Form.useForm();
    const [keyword, setKeyword] = useState('');
    const [statusFilter, setStatusFilter] = useState<string>('all');

    useEffect(() => {
        fetchAuditList();
        fetchAuditStats();
    }, [page.pageNum, page.pageSize]);

    // 处理审核操作
    const handleAudit = async () => {
        try {
            const values = await auditForm.validateFields();
            if (auditActionType === 'approve') {
                await onAuditPass(currentAudit?.id || '', values.opinion || '');
            } else {
                await onAuditReject(currentAudit?.id || '', values.opinion || '');
            }
            setAuditModalVisible(false);
        } catch (error: any) {
            if (error?.response?.status !== 200) {
                console.error('审核操作失败:', error);
            }
        }
    };

    // 查看详情
    const handleViewDetail = (record: AuditItem) => {
        setCurrentAudit(record);
        setDetailVisible(true);
    };

    // 打开审核弹窗
    const handleOpenAuditModal = (record: AuditItem, action: 'approve' | 'reject') => {
        setCurrentAudit(record);
        setAuditActionType(action);
        auditForm.resetFields();
        setAuditModalVisible(true);
    };

    // 状态标签渲染
    const renderStatusBadge = (status: string) => {
        const statusMap: Record<string, { text: string; color: string }> = {
            pending: { text: '待审核', color: '#F59E0B' },
            approved: { text: '已通过', color: '#059669' },
            rejected: { text: '已拒绝', color: '#DC2626' },
        };
        const config = statusMap[status] || { text: status, color: '#6B7280' };
        return <Tag color={config.color}>{config.text}</Tag>;
    };

    // 表格列定义
    const columns = [
        {
            title: '应用名称',
            dataIndex: 'appName',
            key: 'appName',
            width: 200,
            render: (text: string, record: AuditItem) => (
                <div>
                    <div style={{ fontWeight: 500, color: '#1F2937' }}>{text}</div>
                    <div style={{ fontSize: '12px', color: '#6B7280', marginTop: '4px' }}>
                        {record.appDescription}
                    </div>
                </div>
            ),
        },
        {
            title: '创建人',
            dataIndex: 'creator',
            key: 'creator',
            width: 100,
            render: (text: string, record: AuditItem) => (
                <div>
                    <div>{text}</div>
                    <div style={{ fontSize: '12px', color: '#9CA3AF' }}>{record.department}</div>
                </div>
            ),
        },
        {
            title: '提交时间',
            dataIndex: 'submitTime',
            key: 'submitTime',
            width: 160,
        },
        {
            title: '知识库',
            key: 'knowledgeBase',
            width: 80,
            render: (_: any, record: AuditItem) => (
                <span>{record.knowledgeBaseCount} 个</span>
            ),
        },
        {
            title: '文档',
            key: 'document',
            width: 70,
            render: (_: any, record: AuditItem) => (
                <span>{record.documentCount} 篇</span>
            ),
        },
        {
            title: '切片',
            key: 'slice',
            width: 70,
            render: (_: any, record: AuditItem) => (
                <span>{record.sliceCount} 条</span>
            ),
        },
        {
            title: '审核状态',
            dataIndex: 'auditStatus',
            key: 'auditStatus',
            width: 100,
            render: renderStatusBadge,
        },
        {
            title: '审核人',
            dataIndex: 'auditor',
            key: 'auditor',
            width: 90,
            render: (text: string | null) => text || '-',
        },
        {
            title: '审核时间',
            dataIndex: 'auditTime',
            key: 'auditTime',
            width: 160,
            render: (text: string | null) => text || '-',
        },
        {
            title: '操作',
            key: 'action',
            width: 200,
            render: (_: any, record: AuditItem) => (
                <Space>
                    <Button
                        size="small"
                        icon={<EyeOutlined />}
                        onClick={() => handleViewDetail(record)}
                    >
                        详情
                    </Button>
                    {record.auditStatus === 'pending' && (
                        <>
                            <Button
                                size="small"
                                type="primary"
                                icon={<CheckCircleOutlined />}
                                style={{ background: '#059669', borderColor: '#059669' }}
                                onClick={() => handleOpenAuditModal(record, 'approve')}
                            >
                                通过
                            </Button>
                            <Button
                                size="small"
                                danger
                                icon={<CloseCircleOutlined />}
                                onClick={() => handleOpenAuditModal(record, 'reject')}
                            >
                                拒绝
                            </Button>
                        </>
                    )}
                </Space>
            ),
        },
    ];

    return (
        <div className="page-container audit-page">
            {/* 统计卡片 */}
            <div className="audit-stats">
                <div className="content-section" style={{ textAlign: 'center' }}>
                    <div style={{ fontSize: '28px', fontWeight: 'bold', color: '#1F2937' }}>
                        {stats?.total || 0}
                    </div>
                    <div style={{ fontSize: '13px', color: '#6B7280', marginTop: '4px' }}>
                        总审核数
                    </div>
                </div>
                <div className="content-section" style={{ textAlign: 'center' }}>
                    <div style={{ fontSize: '28px', fontWeight: 'bold', color: '#F59E0B' }}>
                        {stats?.pending || 0}
                    </div>
                    <div style={{ fontSize: '13px', color: '#6B7280', marginTop: '4px' }}>
                        待审核
                    </div>
                </div>
                <div className="content-section" style={{ textAlign: 'center' }}>
                    <div style={{ fontSize: '28px', fontWeight: 'bold', color: '#059669' }}>
                        {stats?.approved || 0}
                    </div>
                    <div style={{ fontSize: '13px', color: '#6B7280', marginTop: '4px' }}>
                        已通过
                    </div>
                </div>
                <div className="content-section" style={{ textAlign: 'center' }}>
                    <div style={{ fontSize: '28px', fontWeight: 'bold', color: '#DC2626' }}>
                        {stats?.rejected || 0}
                    </div>
                    <div style={{ fontSize: '13px', color: '#6B7280', marginTop: '4px' }}>
                        已拒绝
                    </div>
                </div>
            </div>

            {/* 审核列表 */}
            <div className="audit-table content-section">
                <div className="table-header">
                    <div className="header-title">
                        <h3>审核列表</h3>
                        <p>管理和审核 RAG 应用上线申请</p>
                    </div>
                    <div className="header-actions">
                        <Input
                            className="search-input"
                            placeholder="搜索应用名称或创建人"
                            prefix={<SearchOutlined />}
                            value={keyword}
                            onChange={(e) => setKeyword(e.target.value)}
                            onPressEnter={() => fetchAuditList()}
                            allowClear
                        />
                    </div>
                </div>

                <div className="filter-tags">
                    <span
                        className={`filter-tag ${statusFilter === 'all' ? 'active' : ''}`}
                        onClick={() => {
                            setStatusFilter('all');
                            setQuery({ status: '' });
                        }}
                    >
                        全部
                    </span>
                    <span
                        className={`filter-tag ${statusFilter === 'pending' ? 'active' : ''}`}
                        onClick={() => {
                            setStatusFilter('pending');
                            setQuery({ status: 'pending' });
                            fetchAuditList();
                        }}
                    >
                        待审核
                    </span>
                    <span
                        className={`filter-tag ${statusFilter === 'approved' ? 'active' : ''}`}
                        onClick={() => {
                            setStatusFilter('approved');
                            setQuery({ status: 'approved' });
                            fetchAuditList();
                        }}
                    >
                        已通过
                    </span>
                    <span
                        className={`filter-tag ${statusFilter === 'rejected' ? 'active' : ''}`}
                        onClick={() => {
                            setStatusFilter('rejected');
                            setQuery({ status: 'rejected' });
                            fetchAuditList();
                        }}
                    >
                        已拒绝
                    </span>
                </div>

                <Table
                    columns={columns}
                    dataSource={list}
                    rowKey="id"
                    loading={listLoading}
                    pagination={false}
                    scroll={{ x: 1400 }}
                />

                <div className="pagination-container" style={{ marginTop: '16px', display: 'flex', justifyContent: 'flex-end' }}>
                    <Pagination
                        current={page.pageNum}
                        pageSize={page.pageSize}
                        total={page.total}
                        onChange={(pageNum, pageSize) => {
                            useAuditStore.getState().setPage({ ...page, pageNum, pageSize });
                            fetchAuditList();
                        }}
                        showSizeChanger
                        showTotal={(t) => `共 ${t} 条`}
                        pageSizeOptions={['10', '20', '50', '100']}
                    />
                </div>
            </div>

            {/* 审核操作弹窗 */}
            <Modal
                title={auditActionType === 'approve' ? '审核通过' : '审核拒绝'}
                open={auditModalVisible}
                onOk={handleAudit}
                onCancel={() => setAuditModalVisible(false)}
                okText="确认"
                cancelText="取消"
                okButtonProps={{
                    danger: auditActionType === 'reject',
                    style: auditActionType === 'reject' ? {} : { background: '#059669', borderColor: '#059669' },
                }}
            >
                <div style={{ marginBottom: '16px' }}>
                    <strong>应用名称：</strong>{currentAudit?.appName}
                </div>
                <div style={{ marginBottom: '16px' }}>
                    <strong>创建人：</strong>{currentAudit?.creator} ({currentAudit?.department})
                </div>
                <div style={{ marginBottom: '16px' }}>
                    <strong>应用描述：</strong>
                    <p style={{ color: '#6B7280', fontSize: '13px' }}>{currentAudit?.appDescription}</p>
                </div>
                <Form form={auditForm} layout="vertical">
                    <Form.Item
                        label="审核意见"
                        name="opinion"
                        rules={[{ required: true, message: `请输入${auditActionType === 'approve' ? '通过' : '拒绝'}意见` }]}
                    >
                        <Input.TextArea
                            rows={4}
                            placeholder={auditActionType === 'reject'
                                ? '请输入拒绝原因（必填）'
                                : '请输入审核意见（必填）'}
                        />
                    </Form.Item>
                </Form>
            </Modal>

            {/* 详情抽屉 */}
            <Drawer
                title="应用详情"
                placement="right"
                width={600}
                open={detailVisible}
                onClose={() => setDetailVisible(false)}
                className="detail-drawer"
            >
                {currentAudit && (
                    <>
                        <div className="detail-section">
                            <h4 className="section-title">基本信息</h4>
                            <div className="detail-row">
                                <span className="label">应用名称：</span>
                                <span className="value">{currentAudit.appName}</span>
                            </div>
                            <div className="detail-row">
                                <span className="label">应用描述：</span>
                                <span className="value">{currentAudit.appDescription}</span>
                            </div>
                            <div className="detail-row">
                                <span className="label">创建人：</span>
                                <span className="value">{currentAudit.creator}</span>
                            </div>
                            <div className="detail-row">
                                <span className="label">所属部门：</span>
                                <span className="value">{currentAudit.department}</span>
                            </div>
                            <div className="detail-row">
                                <span className="label">提交时间：</span>
                                <span className="value">{currentAudit.submitTime}</span>
                            </div>
                            <div className="detail-row">
                                <span className="label">审核状态：</span>
                                <span className="value">{renderStatusBadge(currentAudit.auditStatus)}</span>
                            </div>
                        </div>

                        <div className="detail-section">
                            <h4 className="section-title">资源统计</h4>
                            <div className="detail-row">
                                <span className="label">知识库：</span>
                                <span className="value">{currentAudit.knowledgeBaseCount} 个</span>
                            </div>
                            <div className="detail-row">
                                <span className="label">文档：</span>
                                <span className="value">{currentAudit.documentCount} 篇</span>
                            </div>
                            <div className="detail-row">
                                <span className="label">切片：</span>
                                <span className="value">{currentAudit.sliceCount} 条</span>
                            </div>
                        </div>

                        {currentAudit.auditOpinion && (
                            <div className="detail-section">
                                <h4 className="section-title">审核意见</h4>
                                <p style={{ color: '#6B7280', fontSize: '13px' }}>
                                    {currentAudit.auditOpinion}
                                </p>
                            </div>
                        )}
                    </>
                )}
            </Drawer>
        </div>
    );
};

export default AuditPage;
