import React from 'react';

// 定义指标数据类型
interface MetricData {
  title: string;
  value: string;
  unit: string;
  digits: string[];
}

interface KeyMetricsProps {
  metrics?: MetricData[];
  title?: string;
  subtitle?: string;
}

// 数据卡片组件
const DataCard: React.FC<{
  title: string;
  value: string;
  unit: string;
  digits: string[];
}> = ({ title, value, unit, digits }) => {
  return (
    <div className="box-border content-stretch flex flex-col gap-[20px] items-start px-0 py-[20px] relative shrink-0 w-[278px]">
      <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0 w-full">
        <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[40px] text-white whitespace-nowrap">
          <p className="leading-[50px]">{title}</p>
        </div>
      </div>
      <div className="content-stretch flex gap-[10px] h-[80px] items-end relative shrink-0 w-full">
        <div className="content-stretch flex gap-[6px] items-center relative shrink-0">
          {digits.map((digit, index) => (
            <div key={index} className="h-[80px] relative shrink-0 w-[53.333px]">
              <div className="absolute bg-gradient-to-b border-2 border-[#5e697e] border-solid from-[#474e60] inset-0 rounded-[6px] to-[#2b2f39]" />
              <div className="absolute flex flex-col font-bold inset-[16.16%_13.74%] justify-center leading-[0] not-italic text-[#c5ff92] text-[60px] text-center tracking-[6px]">
                <p className="leading-[normal] whitespace-pre-wrap">{digit}</p>
              </div>
            </div>
          ))}
        </div>
        <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
          <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-white whitespace-nowrap">
            <p className="leading-[32px]">{unit}</p>
          </div>
        </div>
      </div>
    </div>
  );
};

const KeyMetrics: React.FC<KeyMetricsProps> = ({
  metrics = [],
  title = "优质稻米",
  subtitle = "产业链联合体"
}) => {
  // 默认指标数据
  const defaultMetrics: MetricData[] = [
    {
      title: "加工能力达",
      value: "200",
      unit: "万吨/年",
      digits: ['2', '0', '0']
    },
    {
      title: "自建优质水稻基地",
      value: "15",
      unit: "万亩",
      digits: ['1', '5']
    },
    {
      title: "储备仓容",
      value: "?000",
      unit: "万吨",
      digits: ['?', '0', '0', '0']
    }
  ];

  const displayMetrics = metrics.length > 0 ? metrics : defaultMetrics;

  return (
    <div className="absolute content-stretch flex flex-col gap-[11px] items-start left-[199.88px] top-[calc(50%+4.02px)] translate-y-[-50%] w-[330px]">
      {/* 标题区域 */}
      <div className="box-border content-stretch flex gap-[10px] h-[80px] items-center px-[26px] py-[4px] relative shrink-0 w-full">
        <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[0px] text-white whitespace-nowrap">
          <p>
            <span className="leading-[50px] text-[40px]">{title}</span>
            <span className="leading-[32px] text-[28px]">{subtitle}</span>
          </p>
        </div>
      </div>

      {/* 指标数据区域 */}
      <div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid justify-items-start leading-[0] relative shrink-0">
        <div className="box-border col-[1] content-stretch flex flex-col h-[700px] items-center justify-between ml-0 mt-0 px-0 py-[20px] relative row-[1] w-[330px]">
          {displayMetrics.map((metric, index) => (
            <DataCard
              key={index}
              title={metric.title}
              value={metric.value}
              unit={metric.unit}
              digits={metric.digits}
            />
          ))}
        </div>
      </div>

      {/* 数据来源说明 */}
      <div className="mt-4 text-center">
        <p className="text-[rgba(255,255,255,0.5)] text-sm">
          数据来源：省粮油集团统计年报
        </p>
        <p className="text-[rgba(255,255,255,0.5)] text-xs mt-1">
          更新时间：2025年11月
        </p>
      </div>
    </div>
  );
};

export default KeyMetrics;