import React, { useMemo, useState } from 'react';
import { Button, Radio, Space, Tag } from 'antd';
import { LeftOutlined, PlusOutlined, RightOutlined, SettingOutlined } from '@ant-design/icons';
import styles from './fgpsdsz.less';
import Component1 from '@/assets/basic_data/Component1.svg';
import Component2 from '@/assets/basic_data/Component2.svg';
import Component3 from '@/assets/basic_data/Component3.svg';

const TIME_LABELS = [
    '09:00',
    '11:00',
    '13:00',
    '15:00',
    '17:00',
    '19:00',
    '21:00',
    '23:00',
    '01:00',
    '03:00',
    '05:00',
    '07:00',
    '09:00',
];

const MONTH_LABEL = '2025年8月';

const Fgpsdsz = () => {
    const [activeEnergyKey, setActiveEnergyKey] = useState('electric');
    const [viewMode, setViewMode] = useState('month');
    const [periodType, setPeriodType] = useState('peak');

    const energyTypes = useMemo(
        () => [
            { key: 'electric', label: '电能', icon: Component1 },
            { key: 'water', label: '水', icon: Component2 },
            { key: 'gas', label: '天然气', icon: Component3 },
        ],
        [],
    );

    const cards = useMemo(() => {
        const byEnergyKey = {
            electric: [
                {
                    key: 'peak',
                    title: '高峰时段',
                    price: '1.58',
                    unit: '(元/度)',
                    tags: ['工作日', '周末', '节假日'],
                    periods: ['起止时刻1：09:00:00–12:00:00', '起止时刻2：09:00:00–12:00:00'],
                },
                {
                    key: 'flat',
                    title: '平时时段',
                    price: '0.58',
                    unit: '(元/度)',
                    tags: ['工作日', '周末', '节假日'],
                    periods: ['起止时刻1：09:00:00–12:00:00', '起止时刻2：09:00:00–12:00:00'],
                },
                {
                    key: 'valley',
                    title: '低谷时段',
                    price: '0.28',
                    unit: '(元/度)',
                    tags: ['工作日', '周末', '节假日'],
                    periods: ['起止时刻1：09:00:00–12:00:00', '起止时刻2：09:00:00–12:00:00'],
                },
            ],
            water: [
                {
                    key: 'peak',
                    title: '高峰时段',
                    price: '2.30',
                    unit: '(元/m³)',
                    tags: ['工作日', '周末', '节假日'],
                    periods: ['起止时刻1：09:00:00–12:00:00', '起止时刻2：09:00:00–12:00:00'],
                },
                {
                    key: 'flat',
                    title: '平时时段',
                    price: '1.30',
                    unit: '(元/m³)',
                    tags: ['工作日', '周末', '节假日'],
                    periods: ['起止时刻1：09:00:00–12:00:00', '起止时刻2：09:00:00–12:00:00'],
                },
                {
                    key: 'valley',
                    title: '低谷时段',
                    price: '0.80',
                    unit: '(元/m³)',
                    tags: ['工作日', '周末', '节假日'],
                    periods: ['起止时刻1：09:00:00–12:00:00', '起止时刻2：09:00:00–12:00:00'],
                },
            ],
            gas: [
                {
                    key: 'peak',
                    title: '高峰时段',
                    price: '3.80',
                    unit: '(元/m³)',
                    tags: ['工作日', '周末', '节假日'],
                    periods: ['起止时刻1：09:00:00–12:00:00', '起止时刻2：09:00:00–12:00:00'],
                },
                {
                    key: 'flat',
                    title: '平时时段',
                    price: '2.80',
                    unit: '(元/m³)',
                    tags: ['工作日', '周末', '节假日'],
                    periods: ['起止时刻1：09:00:00–12:00:00', '起止时刻2：09:00:00–12:00:00'],
                },
                {
                    key: 'valley',
                    title: '低谷时段',
                    price: '1.60',
                    unit: '(元/m³)',
                    tags: ['工作日', '周末', '节假日'],
                    periods: ['起止时刻1：09:00:00–12:00:00', '起止时刻2：09:00:00–12:00:00'],
                },
            ],
        };

        return byEnergyKey[activeEnergyKey] ?? byEnergyKey.electric;
    }, [activeEnergyKey]);

    const scheduleRows = useMemo(
        () => [
            { day: 1, weekday: '一', bars: [{ start: 0, end: 2, type: 'peak' }, { start: 9, end: 13, type: 'valley' }] },
            { day: 2, weekday: '二', bars: [{ start: 0, end: 5, type: 'peak' }, { start: 11, end: 13, type: 'valley' }] },
            { day: 3, weekday: '三', bars: [{ start: 0, end: 4, type: 'peak' }, { start: 10, end: 13, type: 'valley' }] },
            { day: 4, weekday: '四', bars: [{ start: 0, end: 4, type: 'peak' }, { start: 9, end: 13, type: 'valley' }] },
            { day: 5, weekday: '五', bars: [{ start: 0, end: 4, type: 'peak' }, { start: 8, end: 13, type: 'valley' }] },
            { day: 6, weekday: '六', bars: [{ start: 0, end: 5, type: 'peak' }, { start: 11, end: 13, type: 'valley' }] },
            { day: 7, weekday: '日', bars: [{ start: 0, end: 4, type: 'peak' }, { start: 9, end: 13, type: 'valley' }] },
            { day: 8, weekday: '一', bars: [{ start: 0, end: 3, type: 'peak' }, { start: 8, end: 13, type: 'valley' }] },
            { day: 9, weekday: '二', bars: [{ start: 0, end: 5, type: 'peak' }, { start: 10, end: 13, type: 'valley' }] },
            { day: 10, weekday: '三', bars: [{ start: 0, end: 2, type: 'peak' }, { start: 8, end: 13, type: 'valley' }] },
            { day: 11, weekday: '四', bars: [{ start: 0, end: 2, type: 'peak' }, { start: 8, end: 13, type: 'valley' }] },
            { day: 12, weekday: '五', bars: [{ start: 0, end: 2, type: 'peak' }, { start: 8, end: 13, type: 'valley' }] },
        ],
        [],
    );

    const renderBarStyle = (bar) => {
        const left = (bar.start / TIME_LABELS.length) * 100;
        const width = ((bar.end - bar.start) / TIME_LABELS.length) * 100;
        return { left: `${left}%`, width: `${width}%` };
    };

    return (
        <div className={styles.container}>
            <div className={styles.leftPanel}>
                <div className={styles.leftTitle}>能源类型</div>

                <div className={styles.leftList}>
                    {energyTypes.map((item) => {
                        const isActive = item.key === activeEnergyKey;
                        return (
                            <Button
                                key={item.key}
                                className={`${styles.leftItemBtn} ${isActive ? styles.leftItemActive : ''}`}
                                onClick={() => setActiveEnergyKey(item.key)}
                            >
                                <span className={styles.leftIconCircle}>
                                    <img className={styles.leftIconImg} src={item.icon} alt={item.label} />
                                </span>
                                <span className={styles.leftItemText}>{item.label}</span>
                            </Button>
                        );
                    })}

                    <Button className={styles.leftAddBtn} disabled icon={<PlusOutlined />}>
                        添加分类
                    </Button>
                </div>
            </div>

            <div className={styles.rightPanel}>
                <div className={styles.cardsRow}>
                    {cards.map((card) => (
                        <div key={card.key} className={`${styles.priceCard} ${styles[`priceCard_${card.key}`]}`}>
                            <div className={styles.priceCardCorner}>
                                <SettingOutlined />
                            </div>

                            <div className={styles.priceCardTop}>
                                <div className={styles.priceCardTitle}>{card.title}</div>
                                <div className={styles.priceCardTags}>
                                    {card.tags.map((tag) => (
                                        <Tag key={tag}>{tag}</Tag>
                                    ))}
                                </div>
                            </div>

                            <div className={styles.priceCardBody}>
                                <div className={styles.priceLeft}>
                                    <div className={styles.priceLabel}>单价</div>
                                    <div className={styles.priceValue}>{card.price}</div>
                                    <div className={styles.priceUnit}>{card.unit}</div>
                                </div>

                                <div className={styles.priceRight}>
                                    <div className={styles.pricePeriodBox}>
                                        {card.periods.map((text) => (
                                            <div key={text} className={styles.pricePeriodLine}>
                                                {text}
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>

                <div className={styles.scheduleSection}>
                    <div className={styles.scheduleTopBar}>
                        <div className={styles.scheduleTopLeft} />

                        <Space className={styles.monthSwitcher} size={8}>
                            <Button type="text" size="small" icon={<LeftOutlined />} />
                            <span className={styles.monthText}>{MONTH_LABEL}</span>
                            <Button type="text" size="small" icon={<RightOutlined />} />
                        </Space>

                        <Radio.Group
                            className={styles.periodRadios}
                            value={periodType}
                            onChange={(e) => setPeriodType(e.target.value)}
                        >
                            <Radio value="peak">高峰时段</Radio>
                            <Radio value="flat">平时时段</Radio>
                            <Radio value="valley">低谷时段</Radio>
                        </Radio.Group>
                    </div>

                    <div className={styles.scheduleGrid}>
                        <div className={styles.scheduleHeaderRow}>
                            <div className={styles.scheduleHeaderLeft}>
                                <Radio.Group
                                    size="small"
                                    value={viewMode}
                                    buttonStyle="solid"
                                    onChange={(e) => setViewMode(e.target.value)}
                                >
                                    <Radio.Button value="month">月</Radio.Button>
                                    <Radio.Button value="week">周</Radio.Button>
                                </Radio.Group>
                            </div>

                            <div className={styles.timeHeader}>
                                {TIME_LABELS.map((t) => (
                                    <div key={t} className={styles.timeHeaderCell}>
                                        {t}
                                    </div>
                                ))}
                            </div>
                        </div>

                        <div className={styles.scheduleBody}>
                            {scheduleRows.map((row) => (
                                <div key={row.day} className={styles.scheduleRow}>
                                    <div className={styles.dayCell}>{row.day}</div>
                                    <div className={styles.weekCell}>{row.weekday}</div>

                                    <div className={styles.timeArea}>
                                        {row.bars.map((bar, idx) => {
                                            const isDimmed = periodType && bar.type !== periodType;
                                            return (
                                                <div
                                                    key={`${bar.type}-${idx}`}
                                                    className={`${styles.timeBar} ${styles[`timeBar_${bar.type}`]} ${
                                                        isDimmed ? styles.timeBarDim : ''
                                                    }`}
                                                    style={renderBarStyle(bar)}
                                                />
                                            );
                                        })}
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Fgpsdsz;
