import React from 'react';
import { Card, Select, Spin, Empty, Row, Col } from 'antd';
import { Line, Bar, Pie, Heatmap } from '@ant-design/charts';

export const IndustryTrendCard = ({
  loading,
  currentIndustryData,
  config,
  availableIndustries,
  selectedIndustry,
  onIndustryChange,
}) => (
  <Card
    title="岗位趋势分析"
    style={{ marginBottom: 16 }}
    bodyStyle={{ padding: '12px', height: 250 }}
    extra={
      <Select
        value={selectedIndustry}
        onChange={onIndustryChange}
        style={{ width: 180 }}
        loading={loading}
        placeholder="选择行业"
        disabled={availableIndustries.length === 0}
      >
        {availableIndustries.map((industry: any) => (
          <Option key={industry} value={industry}>
            {industry}
          </Option>
        ))}
      </Select>
    }
  >
    <Spin spinning={loading}>
      {currentIndustryData.length > 0 ? (
        <Line {...config} />
      ) : (
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description={
            loading
              ? '数据加载中...'
              : selectedIndustry
                ? '当前时间段无数据'
                : '请先选择岗位'
          }
        />
      )}
    </Spin>
  </Card>
);

export const AreaAnalysisCard = ({ loading, areaData, config }) => (
  <Card
    title="人员区域分析"
    style={{ marginBottom: 16 }}
    bodyStyle={{
      padding: 12,
      height: 250,
      position: 'relative',
    }}
  >
    {loading ? (
      <Spin tip="数据加载中..." size="large" />
    ) : areaData.length > 0 ? (
      <div style={{ height: '100%', width: '100%', minHeight: 300 }}>
        <Heatmap {...config} />
      </div>
    ) : (
      <Empty description="暂无区域数据" />
    )}
  </Card>
);

export const SalaryTrendCard = ({
  loading,
  currentSalaryData,
  config,
  availableSalaryRanges,
  selectedSalaryRange,
  onSalaryRangeChange,
}) => (
  <Card
    title="薪资区间分析"
    style={{ marginBottom: 16 }}
    bodyStyle={{ padding: '12px', height: 250 }}
    extra={
      <Select
        value={selectedSalaryRange}
        onChange={onSalaryRangeChange}
        style={{ width: 180 }}
        loading={loading}
        placeholder="选择薪资区间"
        disabled={availableSalaryRanges.length === 0}
      >
        {availableSalaryRanges.map((range) => (
          <Option key={range} value={range}>
            {range}
          </Option>
        ))}
      </Select>
    }
  >
    <Spin spinning={loading}>
      {currentSalaryData.length > 0 ? (
        <Line {...config} />
      ) : (
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description={
            loading
              ? '数据加载中...'
              : selectedSalaryRange
                ? '当前时间段无数据'
                : '请先选择薪资区间'
          }
        />
      )}
    </Spin>
  </Card>
);

export const WorkYearCard = ({
  loading,
  workYearData,
  config,
  availableWorkYearRanges,
  selectedWorkYearRange,
  onWorkYearRangeChange,
}) => (
  <Card
    title="企业服务方向分布"
    style={{ marginBottom: 16 }}
    bodyStyle={{
      padding: '12px',
      height: 250,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      overflow: 'hidden',
    }}
    extra={
      <Select
        value={selectedWorkYearRange}
        onChange={onWorkYearRangeChange}
        style={{ width: 180 }}
        loading={loading}
        placeholder="选择服务方向"
        disabled={availableWorkYearRanges.length === 0}
      >
        {availableWorkYearRanges.map((range: any) => (
          <Option key={range} value={range}>
            {range}
          </Option>
        ))}
      </Select>
    }
  >
    <Spin spinning={loading}>
      {workYearData && workYearData.length > 0 ? (
        <div style={{ width: '100%', height: '100%', padding: 8 }}>
          <Pie {...config} />
        </div>
      ) : (
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description={loading ? '数据加载中...' : '暂无工作经验数据'}
        />
      )}
    </Spin>
  </Card>
);

export const EducationCard = ({
  loading,
  educationData,
  config,
  availableEducationLevels,
  selectedEducationLevel,
  onEducationLevelChange,
}) => (
  <Card
    title="企业学历分布"
    style={{ marginBottom: 16 }}
    bodyStyle={{ padding: '12px', height: 250 }}
    extra={
      <Select
        value={selectedEducationLevel}
        onChange={onEducationLevelChange}
        style={{ width: 180 }}
        loading={loading}
        placeholder="选择学历要求"
        disabled={availableEducationLevels.length === 0}
      >
        <Option value="">全部学历</Option>
        {availableEducationLevels.map((level) => (
          <Option key={level} value={level}>
            {level}
          </Option>
        ))}
      </Select>
    }
  >
    <Spin spinning={loading}>
      {educationData.length > 0 ? (
        <Bar {...config} />
      ) : (
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description={loading ? '数据加载中...' : '暂无学历数据'}
        />
      )}
    </Spin>
  </Card>
);