import { ContentPage } from './ContentPage';
import { ChinaMap } from './ChinaMap';
import type { RegionData, MapItem } from '../types/data';

interface Page02IndustryProps {
  mapData: MapItem[];
  tableData: RegionData[];
}

const geoNameMap: Record<string, string> = {
  '北京': '北京市', '天津': '天津市', '河北': '河北省', '山西': '山西省', '内蒙古': '内蒙古自治区',
  '辽宁': '辽宁省', '吉林': '吉林省', '黑龙江': '黑龙江省', '上海': '上海市', '江苏': '江苏省',
  '浙江': '浙江省', '安徽': '安徽省', '福建': '福建省', '江西': '江西省', '山东': '山东省',
  '河南': '河南省', '湖北': '湖北省', '湖南': '湖南省', '广东': '广东省', '广西': '广西壮族自治区',
  '海南': '海南省', '重庆': '重庆市', '四川': '四川省', '贵州': '贵州省', '云南': '云南省',
  '西藏': '西藏自治区', '陕西': '陕西省', '甘肃': '甘肃省', '青海': '青海省', '宁夏': '宁夏回族自治区',
  '新疆': '新疆维吾尔自治区', '台湾': '台湾省', '香港': '香港特别行政区', '澳门': '澳门特别行政区',
};

const cityToGeoProvince: Record<string, string> = {
  '大连市': '辽宁省', '大连': '辽宁省', '青岛市': '山东省', '青岛': '山东省',
  '深圳市': '广东省', '深圳': '广东省', '厦门市': '福建省', '厦门': '福建省',
  '宁波市': '浙江省', '宁波': '浙江省'
};

export const Page02Industry = ({ mapData = [], tableData = [] }: Page02IndustryProps) => {
  // Aggregate mapData to find real max value per province
  const aggregatedMax = () => {
    const dataMap: Record<string, number> = {};
    mapData.forEach(item => {
      let geoName = '';
      const rawName = item.name;
      if (cityToGeoProvince[rawName]) {
        geoName = cityToGeoProvince[rawName];
      } else {
        const shortName = rawName.replace(/(省|市|自治区|维吾尔|壮族|回族|特别行政区)/g, '');
        geoName = geoNameMap[shortName] || geoNameMap[rawName] || rawName;
      }
      dataMap[geoName] = (dataMap[geoName] || 0) + item.value;
    });
    const values = Object.values(dataMap);
    return values.length > 0 ? Math.max(...values) : 1;
  };

  const maxCount = aggregatedMax();

  return (
    <ContentPage pageNumber={2} hidePageNumber={true}>
      <div className="flex flex-col space-y-8 -mx-[20px] px-[20px]">
        <div className="title-container mb-4">
          <span className="blue-bar-title h-[22px]"></span>
          <h3 className="text-[22px] font-semibold text-[#333333] tracking-tight">重点地区采集数据统计</h3>
        </div>
        <div className="relative w-full h-[400px] overflow-hidden bg-white break-inside-avoid mb-4">
          {/* Legend */}
          <div className="absolute bottom-[20px] left-[20px] flex flex-col items-center z-10 pointer-events-none">
            <div className="text-[10px] text-gray-400 mb-[4px]">高</div>
            <div className="text-[12px] text-gray-600 font-bebas font-bold mb-[4px]">{maxCount}</div>
            <div 
              className="w-[12px] h-[80px] rounded-sm shadow-inner border border-gray-100"
              style={{ 
                background: 'linear-gradient(to top, #F0F7FF, #BAE0FF, #69B1FF, #1677FF, #003A8C)' 
              }}
            ></div>
            <div className="text-[12px] text-gray-400 font-bebas font-bold mt-[4px]">0</div>
            <div className="text-[10px] text-gray-400 mt-[4px]">低</div>
          </div>
          
          {/* Real ECharts Map */}
          <ChinaMap data={mapData} />
        </div>

        {/* Table Section */}
        <div className="rounded-xl overflow-hidden border border-gray-100 break-inside-avoid shadow-sm">
          <table className="w-full text-[14px] border-collapse">
            <thead>
              <tr className="bg-[#ECF5FF] text-gray-700">
                <th className="py-3 px-6 font-semibold text-left border-r border-white last:border-r-0">地区</th>
                <th className="py-3 px-6 font-semibold text-center border-r border-white last:border-r-0">采集数量</th>
                <th className="py-3 px-6 font-semibold text-center border-r border-white last:border-r-0">转换率</th>
                <th className="py-3 px-6 font-semibold text-center border-r border-white last:border-r-0">成功率</th>
                <th className="py-3 px-6 font-semibold text-center border-r border-white last:border-r-0">采集时长</th>
              </tr>
            </thead>
            <tbody>
              {tableData.slice(0, 10).map((row, index) => (
                <tr key={index} className="border-b border-gray-50 last:border-b-0 hover:bg-gray-50 transition-colors">
                  <td className="py-3 px-6 text-gray-600 text-left border-r border-gray-50 last:border-r-0">{row.region}</td>
                  <td className="py-3 px-6 text-gray-800 font-medium text-center border-r border-gray-50 last:border-r-0">{row.count}</td>
                  <td className="py-3 px-6 text-gray-600 text-center border-r border-gray-50 last:border-r-0">{row.conversion}</td>
                  <td className="py-3 px-6 text-gray-600 text-center border-r border-gray-50 last:border-r-0">{row.success}</td>
                  <td className="py-3 px-6 text-gray-600 text-center border-r border-gray-50 last:border-r-0">{row.duration}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </ContentPage>
  );
};
