import React, { useMemo, useState } from 'react';
import { Button, DatePicker, Drawer, Select, Table, Tag } from 'antd';
import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
import detailImg from '@/assets/business_envmonitoring/Frame 427319803.png';
import './ReportTask.less';

const { Option } = Select;
const { RangePicker } = DatePicker;

const ReportTask = () => {
	const [status, setStatus] = useState();
	const [template, setTemplate] = useState();
	const [type, setType] = useState();
	const [period, setPeriod] = useState(null);
	const [createdAt, setCreatedAt] = useState(null);
	const [page, setPage] = useState(6);
	const [detailVisible, setDetailVisible] = useState(false);
	const [detailItem, setDetailItem] = useState(null);

	const statusMeta = {
		审核失败: { color: 'orange', text: '审核失败' },
		待提交: { color: 'gold', text: '待提交' },
		已提交: { color: 'green', text: '已提交' },
		校验失败: { color: 'red', text: '校验失败' },
	};

	const dataSource = useMemo(
		() => [
			{
				id: 1,
				name: '2024年5月污染物排放月报',
				template: '污染物排放台账',
				type: '月度',
				lastReport: '2025-11-15',
				nextReport: '2025-11-15',
				status: '审核失败',
				action: '提交',
			},
			{
				id: 2,
				name: '2024年Q2危险废物季报',
				template: '危险废物管理台账',
				type: '月度',
				lastReport: '2025-11-10',
				nextReport: '2025-11-10',
				status: '待提交',
				action: '催办',
			},
			{
				id: 3,
				name: '2024年累计间运行报',
				template: '污染物处理设施运行台账',
				type: '年度',
				lastReport: '2025-11-07',
				nextReport: '2025-11-07',
				status: '已提交',
				action: '提交',
			},
			{
				id: 4,
				name: '2024年4月排污许可执行报告',
				template: '排污许可证执行报告',
				type: '年度',
				lastReport: '2025-11-06',
				nextReport: '2025-11-06',
				status: '校验失败',
				action: '下载',
			},
		],
		[],
	);

	const columns = [
		{
			title: '序号',
			dataIndex: 'id',
			width: 70,
			align: 'center',
		},
		{
			title: '任务名称',
			dataIndex: 'name',
			ellipsis: true,
		},
		{
			title: '报送模板',
			dataIndex: 'template',
			ellipsis: true,
		},
		{
			title: '类型',
			dataIndex: 'type',
			width: 90,
			align: 'center',
			render: (value) => (
				<Tag className={`type-tag type-${value === '月度' ? 'monthly' : 'annual'}`}>{value}</Tag>
			),
		},
		{
			title: '上次报送时间',
			dataIndex: 'lastReport',
			width: 140,
			align: 'center',
		},
		{
			title: '下次报送时间',
			dataIndex: 'nextReport',
			width: 140,
			align: 'center',
		},
		{
			title: '状态',
			dataIndex: 'status',
			width: 120,
			align: 'center',
			render: (value) => {
				const meta = statusMeta[value] || {};
				return (
					<Tag color={meta.color} className="status-tag">
						<span className="status-dot" />
						{meta.text}
					</Tag>
				);
			},
		},
		{
			title: '操作',
			dataIndex: 'action',
			width: 160,
			align: 'center',
			render: (action, record) => {
				const isUrge = action === '催办';
				return (
					<div className="action-links">
						<Button
							type="link"
							size="small"
							onClick={() => {
								setDetailItem(record);
								setDetailVisible(true);
							}}
						>
							详情
						</Button>
						<Button type="link" size="small" danger={isUrge}>
							{action}
						</Button>
					</div>
				);
			},
		},
	];

	const handleSearch = () => {
		console.log('查找', { status, template, type, period, createdAt });
	};

	const handleCreate = () => {
		console.log('新建任务');
	};

	return (
		<div className="report-task">
			<div className="toolbar">
				<Button
					type="primary"
					icon={<PlusOutlined />}
					className="create-btn"
					onClick={handleCreate}
				>
					新建
				</Button>

				<div className="filter-group">
					<div className="filter-item">
						<span className="filter-label">任务状态</span>
						<Select
							placeholder="请选择"
							allowClear
							value={status}
							onChange={setStatus}
							className="filter-control"
						>
							<Option value="审核失败">审核失败</Option>
							<Option value="待提交">待提交</Option>
							<Option value="已提交">已提交</Option>
							<Option value="校验失败">校验失败</Option>
						</Select>
					</div>

					<div className="filter-item">
						<span className="filter-label">报送模板</span>
						<Select
							placeholder="请选择"
							allowClear
							value={template}
							onChange={setTemplate}
							className="filter-control"
						>
							<Option value="污染物排放台账">污染物排放台账</Option>
							<Option value="危险废物管理台账">危险废物管理台账</Option>
							<Option value="运行记录">运行记录</Option>
							<Option value="排污许可证">排污许可证</Option>
						</Select>
					</div>

					<div className="filter-item">
						<span className="filter-label">类型</span>
						<Select
							placeholder="请选择"
							allowClear
							value={type}
							onChange={setType}
							className="filter-control"
						>
							<Option value="月度">月度</Option>
							<Option value="年度">年度</Option>
						</Select>
					</div>

					<div className="filter-item">
						<span className="filter-label">报送周期</span>
						<RangePicker
							value={period}
							onChange={setPeriod}
							className="filter-control"
							allowClear
						/>
					</div>

					<div className="filter-item">
						<span className="filter-label">创建时间</span>
						<RangePicker
							value={createdAt}
							onChange={setCreatedAt}
							className="filter-control"
							allowClear
						/>
					</div>

					<Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>
						查找
					</Button>
				</div>
			</div>

			<div className="table-wrapper">
				<Table
					columns={columns}
					dataSource={dataSource}
					rowKey="id"
					pagination={{ current: page, pageSize: 5, total: 85, onChange: setPage }}
				/>
			</div>

			<Drawer
				title={detailItem ? `${detailItem.name} - 详情` : '详情'}
				placement="right"
				width={760}
				onClose={() => setDetailVisible(false)}
				open={detailVisible}
				destroyOnClose
			>
				<div className="detail-drawer">
					<img src={detailImg} alt="报告预览" />
				</div>
			</Drawer>
		</div>
	);
};

export default ReportTask;
