import React, { useEffect, useState } from 'react';
import { PanelContainer, PanelTitle } from '../styled/DashboardStyles';
import styled from 'styled-components';
import { getMockDepartmentData } from '../../utils/mockData';

// 满意度评价卡片
const SatisfactionCard = styled.div`
  display: flex;
  flex-direction: column;
  width: 33%;
  height: 100%;
`;

// 满意度标题
const SatisfactionTitle = styled.div`
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #7e9bcc;
  margin-bottom: 10px;
  
  .icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
`;

// 满意度总数
const SatisfactionTotal = styled.div`
  font-size: 26px;
  font-weight: bold;
  color: #00b4ff;
  margin-bottom: 15px;
  margin-left: 28px;
`;

// 进度条容器
const ProgressBarsContainer = styled.div`
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
`;

// 单个进度条项
const ProgressItem = styled.div`
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  
  .label {
    width: 80px;
    font-size: 14px;
    color: #7e9bcc;
    text-align: right;
    padding-right: 10px;
  }
  
  .bar-container {
    flex: 1;
    height: 12px;
    /* background: rgba(6, 30, 93, 0.5); */
    border-radius: 6px;
    overflow: hidden;
    position: relative;
  }
  
  .bar {
    height: 100%;
    background: linear-gradient(to right, #0088ff, #00b4ff);
    border-radius: 6px;
  }
  
  .value {
    width: 30px;
    font-size: 14px;
    color: #00b4ff;
    text-align: right;
    margin-left: 10px;
  }
`;

// 满意度卡片容器
const SatisfactionCardsContainer = styled.div`
  display: flex;
  height: calc(100% - 40px);
  justify-content: space-between;
`;

const DepartmentSatisfactionChart: React.FC = () => {
  const [departmentData, setDepartmentData] = useState(getMockDepartmentData());
  
  useEffect(() => {
    const timer = setInterval(() => {
      setDepartmentData(getMockDepartmentData());
    }, 30000);
    
    return () => clearInterval(timer);
  }, []);
  
  // 渲染满意度卡片
  const renderSatisfactionCard = (title: string, total: number, icon: string) => {
    return (
      <SatisfactionCard>
        <SatisfactionTitle>
          <div className="icon">{icon}</div>
          {title} (人)
        </SatisfactionTitle>
        <SatisfactionTotal>{total}</SatisfactionTotal>
        <ProgressBarsContainer>
          {departmentData.map((dept, index) => (
            <ProgressItem key={index}>
              <div className="label">{dept.name}</div>
              <div className="bar-container">
                <div className="bar" style={{ width: `${(dept.value / 200) * 100}%` }}></div>
              </div>
              <div className="value">{dept.value}</div>
            </ProgressItem>
          ))}
        </ProgressBarsContainer>
      </SatisfactionCard>
    );
  };
  
  return (
    <PanelContainer>
      <PanelTitle>就诊满意度一览</PanelTitle>
      <SatisfactionCardsContainer>
        {renderSatisfactionCard('特评分', 3290, '👍')}
        {renderSatisfactionCard('问卷调查', 3290, '📝')}
        {renderSatisfactionCard('书面评价', 3290, '📃')}
      </SatisfactionCardsContainer>
    </PanelContainer>
  );
};

export default DepartmentSatisfactionChart; 