import React, {useMemo, useState} from 'react';
import {Badge, Button, DatePicker, Form, Row, Col, Select, Space} from 'antd';
import ReactECharts from 'echarts-for-react';
import StandardTable from '@/components/StandardTable';
import './LedgerCenter.less';

const {RangePicker} = DatePicker;

const LedgerCenter = () => {
	const [activeView, setActiveView] = useState('table');

	const viewConfigs = useMemo(
		() => ({
			table: {
				columns: [
					{title: '序号', dataIndex: 'order', width: 70},
					{title: '污染源名称/编号', dataIndex: 'source', width: 180},
					{title: '所属单位', dataIndex: 'department', width: 140},
					{title: '监测日期', dataIndex: 'date', width: 130},
					{title: '监测因子', dataIndex: 'factor', width: 120},
					{
						title: '治理设施状态',
						dataIndex: 'status',
						width: 140,
						render: status => (
							<Space size={6}>
								<Badge status={status === '异常' ? 'error' : 'success'} />
								{status}
							</Space>
						),
					},
					{
						title: '数据来源',
						dataIndex: 'sourceType',
						width: 140,
						render: type => (
							<Button size="small" ghost={type !== '在线监测设备'} type={type === '在线监测设备' ? 'primary' : 'dashed'}>
								{type}
							</Button>
						),
					},
					{
						title: '操作',
						dataIndex: 'actions',
						align: 'right',
						render: () => (
							<Space size={8}>
								<Button size="small" type="link">
									详情
								</Button>
								<Button size="small" type="link">
									查看报表
								</Button>
							</Space>
						),
					},
				],
				data: [
					{
						id: '1',
						order: 1,
						source: 'FQ-01 (部分烟气排口)',
						department: '能源动力车间',
						date: '2025-12-02',
						factor: 'SO₂',
						status: '异常',
						sourceType: '在线监测设备',
					},
					{
						id: '2',
						order: 2,
						source: 'FQ-01 (部分烟气排口)',
						department: '能源动力车间',
						date: '2025-12-01',
						factor: 'NOx',
						status: '正常',
						sourceType: '在线监测设备',
					},
					{
						id: '3',
						order: 3,
						source: 'FQ-01 (部分烟气排口)',
						department: '能源动力车间',
						date: '2025-11-24',
						factor: '颗粒物',
						status: '正常',
						sourceType: '手工录入',
					},
					{
						id: '4',
						order: 4,
						source: 'FS-03 (综合废水总排口)',
						department: '污水处理站',
						date: '2025-11-09',
						factor: 'COD',
						status: '正常',
						sourceType: '手工录入',
					},
					{
						id: '5',
						order: 5,
						source: 'FS-03 (综合废水总排口)',
						department: '污水处理站',
						date: '2025-11-06',
						factor: '氨氮',
						status: '正常',
						sourceType: '手工录入',
					},
				],
			},
			diff: {
				issues: [
					{id: 'd1', label: '问题1', type: 'error', text: '[错误] 生产线的废水流量数据缺失，无法计算排放量。'},
					{id: 'd2', label: '问题2', type: 'warning', text: '[警告] 谷S02排放浓度继续超标范围 (45/50 mg/m³)。'},
					{id: 'd3', label: '问题3', type: 'logic', text: '[逻辑错误] 报告期内的活性炭消耗量与废气处理时长不匹配。'},
				],
			},
		}),
		[],
	);

	const chartOption = useMemo(
		() => ({
			tooltip: {
				trigger: 'axis',
				axisPointer: {type: 'line'},
			},
			legend: {
				data: ['产生量', '库存量', '处置量'],
				top: 10,
				textStyle: {color: '#666'},
			},
			grid: {left: 50, right: 30, top: 50, bottom: 50},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
				axisLine: {lineStyle: {color: '#ccc'}},
				axisTick: {show: false},
			},
			yAxis: {
				type: 'value',
				axisLine: {show: false},
				axisTick: {show: false},
				splitLine: {lineStyle: {color: '#eee'}},
			},
			series: [
				{
					name: '产生量',
					type: 'line',
					smooth: true,
					data: [7, 12, 20, 21, 14, 10, 12, 13, 14, 13, 8, 6],
					symbol: 'circle',
					symbolSize: 6,
					lineStyle: {width: 2, color: '#ff8f55'},
					areaStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [
								{offset: 0, color: 'rgba(255, 143, 85, 0.35)'},
								{offset: 1, color: 'rgba(255, 143, 85, 0.05)'},
							],
						},
					},
				},
				{
					name: '库存量',
					type: 'line',
					smooth: true,
					data: [11, 13, 15, 19, 16, 10, 14, 19, 22, 25, 18, 16],
					symbol: 'circle',
					symbolSize: 6,
					lineStyle: {width: 2, color: '#f5c241'},
					areaStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [
								{offset: 0, color: 'rgba(245, 194, 65, 0.35)'},
								{offset: 1, color: 'rgba(245, 194, 65, 0.05)'},
							],
						},
					},
				},
				{
					name: '处置量',
					type: 'line',
					smooth: true,
					data: [23, 18, 17, 24, 28, 26, 20, 17, 18, 22, 20, 18],
					symbol: 'circle',
					symbolSize: 6,
					lineStyle: {width: 2, color: '#5ab0ff'},
					areaStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [
								{offset: 0, color: 'rgba(90, 176, 255, 0.35)'},
								{offset: 1, color: 'rgba(90, 176, 255, 0.05)'},
							],
						},
					},
				},
			],
		}),
		[],
	);

	const currentView = viewConfigs[activeView];
	const tablePagination = useMemo(
		() => {
			if (activeView !== 'table') return undefined;
			return {
				currentPage: 1,
				total: viewConfigs.table.data.length,
				pageSize: 8,
				showTotal: total => `共 ${total} 条`,
			};
		},
		[activeView, viewConfigs.table.data.length],
	);

	return (
		<div className="ledger-center">
			<div className="ledger-block filter-block">
				<Form layout="vertical">
					<Row gutter={16} className="filter-row">
						<Col span={8}>
							<Form.Item label="模版名称">
								<Select placeholder="请选择模版" options={[{label: '污染源排放台账', value: 'ledger1'}, {label: '废水排放台账', value: 'ledger2'}]} />
							</Form.Item>
						</Col>
						<Col span={10}>
							<Form.Item label="起止时间">
								<RangePicker style={{width: '100%'}} />
							</Form.Item>
						</Col>
						<Col span={6}>
							<Form.Item label="所属区域">
								<Select placeholder="请选择区域" options={[{label: '全部区域', value: 'all'}, {label: '能源车间', value: 'energy'}, {label: '污水处理站', value: 'water'}]} />
							</Form.Item>
						</Col>
					</Row>
					<Row gutter={16} className="filter-row">
						<Col span={16}>
							<Form.Item label="填报单位">
								<Select
									mode="multiple"
									allowClear
									placeholder="请选择填报单位"
									options={[
										{label: '单位1', value: 'unit1'},
										{label: '单位2', value: 'unit2'},
										{label: '单位3', value: 'unit3'},
										{label: '单位4', value: 'unit4'},
									]}
								/>
							</Form.Item>
						</Col>
					</Row>
					<div className="filter-actions">
						<Space size={10}>
							<Button>重新配置</Button>
							<Button type="primary">生成台账</Button>
						</Space>
					</div>
				</Form>
			</div>

			<div className="ledger-block table-block">
				<div className="table-toolbar">
					<Space size={8}>
						<Button type={activeView === 'table' ? 'primary' : 'default'} onClick={() => setActiveView('table')}>
							数据表格
						</Button>
						<Button type={activeView === 'chart' ? 'primary' : 'default'} onClick={() => setActiveView('chart')}>
							可视化图表
						</Button>
						<Button type={activeView === 'diff' ? 'primary' : 'default'} onClick={() => setActiveView('diff')}>
							数据差异报告
						</Button>
					</Space>
					<Space size={10}>
						<Button type="link">Excel 导出</Button>
						<Button>保存为快照</Button>
						<Button type="primary">发起报告</Button>
					</Space>
				</div>

				<div className="table-wrapper">
							{activeView === 'chart' ? (
								<div className="chart-wrapper">
									<ReactECharts option={chartOption} style={{width: '100%', height: 360}} notMerge lazyUpdate />
									<div className="chart-caption">固定产、存、处趋势分析</div>
								</div>
							) : activeView === 'diff' ? (
								<div className="diff-table">
									{viewConfigs.diff.issues.map(issue => (
										<div className="diff-row" key={issue.id}>
											<div className="diff-label">{issue.label}</div>
											<div className={`diff-text diff-${issue.type}`}>{issue.text}</div>
										</div>
									))}
								</div>
							) : (
								<StandardTable
									rowKey="id"
									columns={currentView.columns}
									data={{list: currentView.data, pagination: tablePagination}}
									showAlert={false}
								/>
							)}
				</div>
			</div>
		</div>
	);
};

export default LedgerCenter;
