import React, { useState, useEffect } from 'react';
import { Flex, Popover, Space } from 'antd';
import dayjs from 'dayjs';
import classNames from 'classnames';
import services from '@/services';
import { useInterval } from 'ahooks';
import styles from './index.less';

require('dayjs/locale/zh-cn');
dayjs.locale('zh-cn');

const Header: React.FC = () => {
  const [date, setDate] = useState<any>({
    time: dayjs().format('HH:mm:ss'),
    day: dayjs().format('YYYY-MM-DD'),
    week: dayjs().format('dddd'),
  });

  const [personData, setPersonData] = useState<any>([]);
  
  // Weather data mock - replace with actual API call
  const [weather, setWeather] = useState({
    city: '成都',
    temperature: '17',
    condition: 'sunny', // Corresponds to the icon name
    high: '19',
    low: '12'
  });

  // Update time every second
  useInterval(() => {
    setDate({
      time: dayjs().format('HH:mm:ss'),
      day: dayjs().format('YYYY-MM-DD'),
      week: dayjs().format('dddd'),
    });
  }, 1000);

  const getData = async () => {
    const resp = await services.DataBase.getSjdzInfoData({
      typeCode: 'zzcc-zhzh-zbqk',
      params: {
        zbrq: dayjs().format('YYYY-MM-DD'),
      },
    });
    if (resp.code === 200) {
      setPersonData(resp.data?.data?.records || []);
    }
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <div className={styles.container}>
      <img
        src={require('@/assets/images/common/title.png')}
        className={styles.title}
        alt=""
      />
      <Space
        size={33}
        className={styles.leftSpace}
      >
        <div className={styles.leftCard}>
          <Popover
            placement="bottom"
            title={
              <div className={styles.popoverTitle}>
                副指挥长
              </div>
            }
            arrow={false}
            overlayInnerStyle={{
              backgroundColor: 'rgba(8, 24, 63, 0.9)',
              border: '1px solid rgb(19, 101, 150)',
              boxShadow: 'inset 0px 0px 20px 0px rgba(59, 215, 243, 0.2)',
              backdropFilter: 'blur(5px)',
              borderRadius: 15,
            }}
            content={
              <Flex vertical style={{ padding: '10px 15px' }}>
                <div className={styles.popoverContent}>
                  {personData?.find((item: any) => item.jsmc === '副指挥长')
                    ?.zbry[0]?.xm}
                  {personData?.find((item: any) => item.jsmc === '副指挥长')
                    ?.zbry[0]?.zbdh}
                </div>
              </Flex>
            }
          >
            <Flex
              justify="space-between"
              align="center"
              style={{ width: '100%' }}
            >
              <div style={{ color: '#A2C9FF' }}>副指挥长</div>
              <div className={styles.personName}>
                {personData?.find((item: any) => item.jsmc === '副指挥长')?.zbry[0]
                  ?.xm}
              </div>
              <img src={require('@/assets/images/common/phone.png')} alt="" />
            </Flex>
          </Popover>
        </div>
        <div className={styles.leftCard}>
          <Popover
            placement="bottom"
            title={<div className={styles.popoverTitle}>专职值班长</div>}
            arrow={false}
            overlayInnerStyle={{
              backgroundColor: 'rgba(8, 24, 63, 0.9)',
              border: '1px solid rgb(19, 101, 150)',
              boxShadow: 'inset 0px 0px 20px 0px rgba(59, 215, 243, 0.2)',
              backdropFilter: 'blur(5px)',
              borderRadius: 15,
            }}
            content={
              <Flex vertical style={{ padding: '10px 15px' }}>
                <div className={styles.popoverContent}>
                  {personData?.find((item: any) => item.jsmc === '专职值班长')
                    ?.zbry[0]?.xm}
                  {personData?.find((item: any) => item.jsmc === '专职值班长')
                    ?.zbry[0]?.zbdh}
                </div>
              </Flex>
            }
          >
            <Flex
              justify="space-between"
              align="center"
              style={{ width: '100%' }}
            >
              <div style={{ color: '#A2C9FF' }}>专职值班长</div>
              <div className={styles.personName}>
                {personData?.find((item: any) => item.jsmc === '专职值班长')
                  ?.zbry[0]?.xm}
              </div>
              <img src={require('@/assets/images/common/phone.png')} alt="" />
            </Flex>
          </Popover>
        </div>
        <div className={styles.leftCard}>
          <Popover
            placement="bottom"
            title={
              <div className={styles.popoverTitle}>
                值班员
              </div>
            }
            arrow={false}
            overlayInnerStyle={{
              backgroundColor: 'rgba(8, 24, 63, 0.9)',
              border: '1px solid rgb(19, 101, 150)',
              boxShadow: 'inset 0px 0px 20px 0px rgba(59, 215, 243, 0.2)',
              backdropFilter: 'blur(5px)',
              borderRadius: 15,
            }}
            content={
              <Flex vertical>
                {personData
                  ?.find((item: any) => item.jsmc === '值班员')
                  ?.zbry?.filter(
                    (item: any) => item.jsmc === '值班员' && item.sdmc === '白班',
                  )
                  ?.map((v: any) => (
                    <div
                      key={v.zbdh}
                      className={styles.popoverContent}
                    >
                      {v.xm} {v.zbdh}
                    </div>
                  ))}
              </Flex>
            }
          >
            <Flex
              justify="space-between"
              align="center"
              style={{ width: '100%' }}
            >
              <div style={{ color: '#A2C9FF' }}>值班员</div>
              <div className={styles.personName}>
                {personData
                  ?.find((item: any) => item.jsmc === '值班员')
                  ?.zbry?.filter(
                    (item: any) => item.jsmc === '值班员' && item.sdmc === '白班',
                  )
                  ?.map((v: any) => v.xm)
                  ?.join('、')}
              </div>
              <img src={require('@/assets/images/common/phone.png')} alt="" />
            </Flex>
          </Popover>
        </div>
      </Space>

      <div className={styles.weatherContainer}>
        <div className={styles.dateTimeContainer}>
          <div className={styles.date}>{date.day}</div>
          <div className={styles.week}>{date.week}</div>
          <div className={styles.time}>
            <span className={styles.timeDigits}>{date.time}</span>
          </div>
          <div className={styles.divider}></div>
        </div>
        <div className={styles.weatherInfoContainer}>
          <div className={styles.city}>{weather.city}</div>
          <img 
            src={require(`@/assets/images/V-2504/${weather.condition}.png`)} 
            alt="weather" 
            className={styles.weatherIcon}
          />
          <div className={styles.temperature}>
            {weather.temperature}<span className={styles.temperatureUnit}>°C</span>
          </div>
          <div className={styles.tempRange}>
            <div className={styles.highTemp}>
              <span>最高</span>
              <span className={styles.tempValue}>{weather.high}°</span>
            </div>
            <div className={styles.lowTemp}>
              <span>最低</span>
              <span className={styles.tempValue}>{weather.low}°</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Header; 