Yaltopia-FIFA/components/manager/TeamCharts.tsx

"use client";

import {
  PieChart,
  Pie,
  Cell,
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  BarChart,
  Bar,
} from "recharts";
const COLORS = { W: "#34d399", D: "#fbbf24", L: "#f87171" };

export function FormDonutChart({
  data,
}: {
  data: { name: string; value: number }[];
}) {
  return (
    <div className="h-[180px] w-full">
      <ResponsiveContainer width="100%" height={180}>
        <PieChart>
          <Pie
            data={data}
            cx="50%"
            cy="50%"
            innerRadius={50}
            outerRadius={70}
            dataKey="value"
            nameKey="name"
          >
            {data.map((entry) => (
              <Cell key={entry.name} fill={COLORS[entry.name as keyof typeof COLORS] || "#8b95a8"} />
            ))}
          </Pie>
          <Tooltip />
        </PieChart>
      </ResponsiveContainer>
    </div>
  );
}

/** @deprecated Use FormDonutChart inside a Card */
export const FormDonut = FormDonutChart;

export function GoalsTrendChart({
  data,
}: {
  data: { matchday: number; gf: number; ga: number }[];
}) {
  return (
    <div className="h-[200px] w-full">
      <ResponsiveContainer width="100%" height={200}>
        <LineChart data={data}>
          <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.1)" />
          <XAxis dataKey="matchday" stroke="#8b95a8" fontSize={12} />
          <YAxis stroke="#8b95a8" fontSize={12} />
          <Tooltip contentStyle={{ background: "#12182b", border: "1px solid rgba(255,255,255,0.1)" }} />
          <Line type="monotone" dataKey="gf" stroke="#22d3ee" name="GF" strokeWidth={2} />
          <Line type="monotone" dataKey="ga" stroke="#f472b6" name="GA" strokeWidth={2} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

export function TopScorersChart({
  data,
  dataKey,
  title,
}: {
  data: { name: string; value: number }[];
  dataKey: string;
  title: string;
}) {
  return (
    <div className="h-[200px] w-full">
      <ResponsiveContainer width="100%" height={200}>
        <BarChart data={data} layout="vertical" margin={{ left: 60 }}>
          <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.1)" />
          <XAxis type="number" stroke="#8b95a8" fontSize={12} />
          <YAxis type="category" dataKey="name" stroke="#8b95a8" fontSize={11} width={55} />
          <Tooltip contentStyle={{ background: "#12182b", border: "1px solid rgba(255,255,255,0.1)" }} />
          <Bar dataKey={dataKey} fill="#a78bfa" radius={[0, 4, 4, 0]} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}

export function StatCards({
  stats,
}: {
  stats: { label: string; value: string | number }[];
}) {
  return (
    <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
      {stats.map((s) => (
        <div
          key={s.label}
          className="rounded-xl border border-border bg-card p-4"
        >
          <p className="text-xs text-muted-foreground">{s.label}</p>
          <p className="mt-1 text-2xl font-bold">{s.value}</p>
        </div>
      ))}
    </div>
  );
}