"use client";

import {
  Bar,
  BarChart,
  CartesianGrid,
  Legend,
  PolarAngleAxis,
  PolarGrid,
  PolarRadiusAxis,
  Radar,
  RadarChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";

interface ChartDataItem {
  name: string;
  [key: string]: string | number;
}

interface ShadcnChartProps {
  type: "bar" | "radar";
  title: string;
  description?: string;
  data: ChartDataItem[];
  dataKeys?: string[];
  colors?: string[];
  layout?: "horizontal" | "vertical";
}

const DEFAULT_COLORS = [
  "#ea580c", // orange-600 (brand)
  "#64748b", // slate-500
  "#0ea5e9", // sky-500
  "#10b981", // emerald-500
  "#8b5cf6", // violet-500
];

function ShadcnBarChart({
  data,
  dataKeys,
  colors,
  layout = "horizontal",
}: {
  data: ChartDataItem[];
  dataKeys: string[];
  colors: string[];
  layout?: "horizontal" | "vertical";
}) {
  const isVertical = layout === "vertical";

  return (
    <ResponsiveContainer width="100%" height={Math.max(300, data.length * 50)}>
      <BarChart
        data={data}
        layout={isVertical ? "vertical" : "horizontal"}
        margin={{ top: 5, right: 30, left: isVertical ? 20 : 5, bottom: 5 }}
      >
        <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
        {isVertical ? (
          <>
            <XAxis type="number" tick={{ fontSize: 12 }} />
            <YAxis
              dataKey="name"
              type="category"
              width={200}
              tick={{ fontSize: 12 }}
            />
          </>
        ) : (
          <>
            <XAxis dataKey="name" tick={{ fontSize: 12 }} />
            <YAxis tick={{ fontSize: 12 }} />
          </>
        )}
        <Tooltip
          contentStyle={{
            backgroundColor: "#fff",
            border: "1px solid #e2e8f0",
            borderRadius: "8px",
            fontSize: "13px",
          }}
        />
        {dataKeys.length > 1 && <Legend />}
        {dataKeys.map((key, i) => (
          <Bar
            key={key}
            dataKey={key}
            fill={colors[i % colors.length]}
            radius={[4, 4, 0, 0]}
          />
        ))}
      </BarChart>
    </ResponsiveContainer>
  );
}

function ShadcnRadarChart({
  data,
  dataKeys,
  colors,
}: {
  data: ChartDataItem[];
  dataKeys: string[];
  colors: string[];
}) {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <RadarChart cx="50%" cy="50%" outerRadius="80%" data={data}>
        <PolarGrid stroke="#e2e8f0" />
        <PolarAngleAxis dataKey="name" tick={{ fontSize: 11 }} />
        <PolarRadiusAxis
          angle={90}
          domain={[0, 100]}
          tick={{ fontSize: 10 }}
        />
        <Tooltip
          contentStyle={{
            backgroundColor: "#fff",
            border: "1px solid #e2e8f0",
            borderRadius: "8px",
            fontSize: "13px",
          }}
        />
        <Legend />
        {dataKeys.map((key, i) => (
          <Radar
            key={key}
            name={key}
            dataKey={key}
            stroke={colors[i % colors.length]}
            fill={colors[i % colors.length]}
            fillOpacity={0.15}
            strokeWidth={2}
          />
        ))}
      </RadarChart>
    </ResponsiveContainer>
  );
}

export default function ShadcnChart({
  type,
  title,
  description,
  data,
  dataKeys,
  colors = DEFAULT_COLORS,
  layout,
}: ShadcnChartProps) {
  // Auto-detect data keys if not provided
  const keys =
    dataKeys ||
    Object.keys(data[0] || {}).filter((k) => k !== "name" && typeof data[0][k] === "number");

  return (
    <figure className="my-8 rounded-lg border border-gray-200 bg-white p-4 sm:p-6">
      <figcaption className="mb-4">
        <p className="text-base font-semibold text-gray-900">{title}</p>
        {description && (
          <p className="mt-1 text-sm text-gray-500">{description}</p>
        )}
      </figcaption>
      {type === "bar" && (
        <ShadcnBarChart
          data={data}
          dataKeys={keys}
          colors={colors}
          layout={layout}
        />
      )}
      {type === "radar" && (
        <ShadcnRadarChart data={data} dataKeys={keys} colors={colors} />
      )}
    </figure>
  );
}