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

const { Option } = Select;

export const IndustryTrendCard = ({
  loading,
  currentIndustryData,
  config,
  availableIndustries,
  selectedIndustry,
  onIndustryChange,
}) => (
  <Card
    title={
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span>📊 行业趋势分析</span>
        <Tag color="blue" >
          趋势图
        </Tag>
      </div>
    }
    style={{ 
      borderRadius: 12,
      boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
    }}
    bodyStyle={{ 
      padding: '16px', 
      height: 280,
      background: 'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)',
      borderRadius: 8
    }}
    extra={
      <Select
        value={selectedIndustry}
        onChange={onIndustryChange}
        style={{ width: 200 }}
        loading={loading}
        placeholder="选择行业"
        disabled={availableIndustries.length === 0}
        suffixIcon="🏢"
      >
        {availableIndustries.map((industry: any) => (
          <Option key={industry} value={industry}>
            {industry}
          </Option>
        ))}
      </Select>
    }
  >
    <Spin spinning={loading} tip="数据加载中...">
      {currentIndustryData.length > 0 ? (
        <Line {...config} />
      ) : (
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description={
            loading ? '数据加载中...' : selectedIndustry ? '当前时间段无数据' : '请先选择行业'
          }
          style={{ margin: '40px 0' }}
        />
      )}
    </Spin>
  </Card>
);

export const AreaAnalysisCard = ({ loading, areaData, config }) => (
  <Card
    title={
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span>🌍 区域分析</span>
        <Tag color="green">热力图</Tag>
      </div>
    }
    style={{ 
      borderRadius: 12,
      boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
    }}
    bodyStyle={{
      padding: 16,
      height: 280,
      background: 'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)',
      borderRadius: 8,
      position: 'relative',
    }}
  >
    <Spin spinning={loading} tip="数据加载中...">
      {areaData.length > 0 ? (
        <div style={{ height: '100%', width: '100%' }}>
          <Heatmap {...config} />
        </div>
      ) : (
        <Empty 
          description="暂无区域数据" 
          style={{ margin: '40px 0' }}
        />
      )}
    </Spin>
  </Card>
);

export const SalaryTrendCard = ({
  loading,
  currentSalaryData,
  config,
  availableSalaryRanges,
  selectedSalaryRange,
  onSalaryRangeChange,
}) => (
  <Card
    title={
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span>💰 薪资区间趋势分析</span>
        <Tag color="orange">趋势图</Tag>
      </div>
    }
    style={{ 
      borderRadius: 12,
      boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
    }}
    bodyStyle={{ 
      padding: '16px', 
      height: 280,
      background: 'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)',
      borderRadius: 8
    }}
    extra={
      <Select
        value={selectedSalaryRange}
        onChange={onSalaryRangeChange}
        style={{ width: 180 }}
        loading={loading}
        placeholder="选择薪资区间"
        disabled={availableSalaryRanges.length === 0}
        suffixIcon="💵"
      >
        {availableSalaryRanges.map((range) => (
          <Option key={range} value={range}>
            {range}
          </Option>
        ))}
      </Select>
    }
  >
    <Spin spinning={loading} tip="数据加载中...">
      {currentSalaryData.length > 0 ? (
        <Line {...config} />
      ) : (
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description={
            loading
              ? '数据加载中...'
              : selectedSalaryRange
                ? '当前时间段无数据'
                : '请先选择薪资区间'
          }
          style={{ margin: '40px 0' }}
        />
      )}
    </Spin>
  </Card>
);

export const WorkYearCard = ({
  loading,
  workYearData,
  config,
  availableWorkYearRanges,
  selectedWorkYearRange,
  onWorkYearRangeChange,
}) => (
  <Card
    title={
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span>⏳ 工作经验要求分布</span>
        <Tag color="purple">饼图</Tag>
      </div>
    }
    style={{ 
      borderRadius: 12,
      boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
    }}
    bodyStyle={{
      padding: '16px',
      height: 280,
      background: 'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)',
      borderRadius: 8,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      overflow: 'hidden',
    }}
    extra={
      <Select
        value={selectedWorkYearRange}
        onChange={onWorkYearRangeChange}
        style={{ width: 140 }}
        loading={loading}
        placeholder="选择经验要求"
        disabled={availableWorkYearRanges.length === 0}
        suffixIcon="👔"
      >
        {availableWorkYearRanges.map((range: any) => (
          <Option key={range} value={range}>
            {range}
          </Option>
        ))}
      </Select>
    }
  >
    <Spin spinning={loading} tip="数据加载中...">
      {workYearData && workYearData.length > 0 ? (
        <div style={{ width: '100%', height: '100%', padding: 8 }}>
          <Pie {...config} />
        </div>
      ) : (
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description={loading ? '数据加载中...' : '暂无工作经验数据'}
          style={{ margin: '40px 0' }}
        />
      )}
    </Spin>
  </Card>
);

export const EducationCard = ({
  loading,
  educationData,
  config,
  availableEducationLevels,
  selectedEducationLevel,
  onEducationLevelChange,
}) => (
  <Card
    title={
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span>🎓 学历要求分布</span>
        <Tag color="red">柱状图</Tag>
      </div>
    }
    style={{ 
      borderRadius: 12,
      boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
    }}
    bodyStyle={{ 
      padding: '16px', 
      height: 280,
      background: 'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)',
      borderRadius: 8
    }}
    extra={
      <Select
        value={selectedEducationLevel}
        onChange={onEducationLevelChange}
        style={{ width: 140 }}
        loading={loading}
        placeholder="选择学历要求"
        disabled={availableEducationLevels.length === 0}
        suffixIcon="📚"
      >
        {availableEducationLevels.map((level) => (
          <Option key={level} value={level}>
            {level}
          </Option>
        ))}
      </Select>
    }
  >
    <Spin spinning={loading} tip="数据加载中...">
      {educationData.length > 0 ? (
        <Bar {...config} />
      ) : (
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description={loading ? '数据加载中...' : '暂无学历数据'}
          style={{ margin: '40px 0' }}
        />
      )}
    </Spin>
  </Card>
);