import React from 'react';
import { 
  Table, 
  Typography, 
  Box,
  Paper,
  Grid,
  makeStyles 
} from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
  root: {
    padding: theme.spacing(2),
  },
  section: {
    marginBottom: theme.spacing(3),
  },
  title: {
    color: '#1976d2',
    marginBottom: theme.spacing(2),
    display: 'flex',
    alignItems: 'center',
    '&::before': {
      content: '""',
      width: 4,
      height: 16,
      backgroundColor: '#1976d2',
      marginRight: theme.spacing(1),
    },
  },
  table: {
    minWidth: 400,
    '& th': {
      // backgroundColor: '#f5f5f5',
      fontWeight: 'bold',
    textAlign: 'left',

    },
  },
  statusChip: {
    padding: '2px 8px',
    borderRadius: 4,
    display: 'inline-block',
    textAlign: 'center',
    width: 50,
  },
  danger: {
    backgroundColor: '#ffebee',
    color: '#d32f2f',
  },
  warning: {
    backgroundColor: '#fff3e0',
    color: '#ef6c00',
  },
  info: {
    backgroundColor: '#e3f2fd',
    color: '#1976d2',
  },
  statItem: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'column',
    padding: theme.spacing(2),
    '& .icon': {
      fontSize: 40,
      color: '#1976d2',
      marginBottom: theme.spacing(1),
    },
    '& .value': {
      fontSize: 24,
      color: '#1976d2',
      fontWeight: 'bold',
    },
    '& .label': {
      color: '#fff',
      width: 130,
      marginLeft:30
    },
  },
}));

// 测试数据
const townData = [
  {
    name: '七里坪社区',
    district: '七里坪社区',
    manager: '谢磊',
    population: 35,
    riskLevel: '危险',
  },
  {
    name: '七里坪社区',
    district: '七里坪社区',
    manager: '刘家军',
    population: 24,
    riskLevel: '警戒',
  },
  {
    name: '七里坪社区',
    district: '七里坪社区',
    manager: '刘家军',
    population: 49,
    riskLevel: '关注',
  },
];

const enterpriseData = [
  {
    name: '国电广润',
    department: '',
    manager: '谢磊',
    affectedPopulation: 44,
    riskLevel: '危险',
  },
  {
    name: '建始七里',
    department: '',
    manager: '刘家军',
    affectedPopulation: 22,
    riskLevel: '警戒',
  },
  {
    name: '建始县业',
    department: '',
    manager: '刘家军',
    affectedPopulation: 50,
    riskLevel: '关注',
  },
];

const statistics = {
  floodArea: 3.57,
  affectedVillages: 2,
  affectedHouseholds: 310,
  affectedPopulation: 940,
};

const FloodImpactMonitor = () => {
  const classes = useStyles();

  const getRiskLevelStyle = (level) => {
    switch (level) {
      case '危险':
        return classes.danger;
      case '警戒':
        return classes.warning;
      case '关注':
        return classes.info;
      default:
        return '';
    }
  };

  return (
    <div className={classes.root}>
      <div className={classes.section}>
        <Typography variant="h6" className={classes.title}>
          城镇、集镇、村庄
        </Typography>
        <Paper>
          <Table className={classes.table}>
            <thead>
              <tr>
                <th>名称</th>
                <th>所属乡镇</th>
                <th>负责人</th>
                <th>人口数</th>
                <th>风险等级</th>
              </tr>
            </thead>
            <tbody>
              {townData.map((item, index) => (
                <tr key={index}>
                  <td>{item.name}</td>
                  <td>{item.district}</td>
                  <td>{item.manager}</td>
                  <td>{item.population}</td>
                  <td>
                    <span className={`${classes.statusChip} ${getRiskLevelStyle(item.riskLevel)}`}>
                      {item.riskLevel}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </Table>
        </Paper>
      </div>

      <div className={classes.section}>
        <Typography variant="h6" className={classes.title}>
          企事业单位影响情况
        </Typography>
        <Paper>
          <Table className={classes.table}>
            <thead>
              <tr>
                <th>基础设施名称</th>
                <th>所属行政单元</th>
                <th>负责人</th>
                <th>影响人数</th>
                <th>风险等级</th>
              </tr>
            </thead>
            <tbody>
              {enterpriseData.map((item, index) => (
                <tr key={index}>
                  <td>{item.name}</td>
                  <td>{item.department}</td>
                  <td>{item.manager}</td>
                  <td>{item.affectedPopulation}</td>
                  <td>
                    <span className={`${classes.statusChip} ${getRiskLevelStyle(item.riskLevel)}`}>
                      {item.riskLevel}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </Table>
        </Paper>
      </div>

      <div className={classes.section}>
        <Typography variant="h6" className={classes.title}>
          汛情统计
        </Typography>
        <Grid container spacing={3}>
          <Grid item xs={3}>
            <Paper className={classes.statItem}>
              <span className="icon">🌊</span>
              <span className="value">{statistics.floodArea}</span>
              <span className="label">淹没面积(km²)</span>
            </Paper>
          </Grid>
          <Grid item xs={3}>
            <Paper className={classes.statItem}>
              <span className="icon">🏘️</span>
              <span className="value">{statistics.affectedVillages}</span>
              <span className="label">影响村庄(个)</span>
            </Paper>
          </Grid>
          <Grid item xs={3}>
            <Paper className={classes.statItem}>
              <span className="icon">🏠</span>
              <span className="value">{statistics.affectedHouseholds}</span>
              <span className="label">影响户数(户)</span>
            </Paper>
          </Grid>
          <Grid item xs={3}>
            <Paper className={classes.statItem}>
              <span className="icon">👥</span>
              <span className="value">{statistics.affectedPopulation}</span>
              <span className="label">影响人口(人)</span>
            </Paper>
          </Grid>
        </Grid>
      </div>
    </div>
  );
};

export default FloodImpactMonitor;