'use client';

import {
  Bar,
  BarChart,
  CartesianGrid,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts';

type XGPoint = {
  minute: number;
  xgHome: number;
  xgAway: number;
};

type ZonePoint = {
  zone: string;
  pct: number;
};

type 球員道具盤 = {
  timeline: {
    minute: number;
    label: string;
  }[];
  xgSeries: XGPoint[];
  heatZones: ZonePoint[];
};

export function LiveMatchCenter({ timeline, xgSeries, heatZones }: 球員道具盤) {
  return (
    <section className="space-y-4">
      <article className="panel-glow rounded-2xl p-4">
        <h3 className="dot-matrix text-xl text-[#7d2a15]">比賽事件時間軸</h3>
        <ul className="mt-2 space-y-1 text-sm text-[#7a5b46]">
          {timeline.map((item) => (
            <li key={item.minute}>
              {item.minute}’ {item.label}
            </li>
          ))}
        </ul>
      </article>

      <article className="panel-glow rounded-2xl p-4">
        <h3 className="dot-matrix text-xl text-[#7d2a15]">預期進球累積走勢</h3>
        <div className="mt-2 h-72 w-full">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={xgSeries}>
              <CartesianGrid strokeDasharray="4 4" stroke="#eadcb9" />
              <XAxis dataKey="minute" tick={{ fill: '#6d4d39' }} />
              <YAxis tick={{ fill: '#6d4d39' }} />
              <Tooltip
                contentStyle={{ background: '#fff8e6', borderColor: '#d8b58c' }}
                itemStyle={{ color: '#5f4031' }}
              />
              <Bar dataKey="xgHome" fill="#b83822" name="主隊預期進球" />
              <Bar dataKey="xgAway" fill="#7a4a2c" name="客隊預期進球" />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </article>

      <article className="panel-glow rounded-2xl p-4">
        <h3 className="dot-matrix text-xl text-[#7d2a15]">控球熱區</h3>
        <div className="mt-3 space-y-2">
          {heatZones.map((zone) => (
            <div key={zone.zone}>
              <p className="text-xs text-[#8a6b58]">{zone.zone}</p>
              <div className="mt-1 h-3 overflow-hidden rounded-full bg-[#ece0ca]">
                <div
                  className="h-full bg-[#b83822]"
                  style={{ width: `${Math.max(0, Math.min(zone.pct, 100))}%` }}
                />
              </div>
            </div>
          ))}
        </div>
      </article>
    </section>
  );
}