import { useState } from "react";
import {
  BarChart,
  Bar,
  CartesianGrid,
  LineChart,
  Line,
  PieChart,
  Pie,
  Cell,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
  Legend,
} from "recharts";

type Row = {
  label: string;
  value: number;
};

type Props = {
  title?: string;
  data?: Row[];
};

const defaultData: Row[] = [
  { label: "Mon", value: 18 },
  { label: "Tue", value: 24 },
  { label: "Wed", value: 16 },
  { label: "Thu", value: 32 },
  { label: "Fri", value: 27 },
];

const colors = ["#2563eb", "#0f766e", "#d97706", "#9333ea", "#dc2626"];

export default function DashboardChart({
  title = "Weekly Activity",
  data = defaultData,
}: Props) {
  const [chartType, setChartType] = useState<"bar" | "line" | "pie">("bar");

  return (
    <section
      style={{
        width: "100%",
        border: "1px solid #e5e7eb",
        borderRadius: 16,
        padding: 16,
        background: "#ffffff",
      }}
    >
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          gap: 12,
          marginBottom: 16,
          flexWrap: "wrap",
        }}
      >
        <div>
          <h3 style={{ margin: 0, fontSize: 18 }}>{title}</h3>
          <p style={{ margin: "4px 0 0", color: "#6b7280", fontSize: 14 }}>
            Interactive chart with responsive layout, tooltip, legend, and axes
          </p>
        </div>

        <label style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <span style={{ fontSize: 14 }}>Chart</span>
          <select
            value={chartType}
            onChange={(event) =>
              setChartType(event.target.value as "bar" | "line" | "pie")
            }
            style={{ padding: "6px 10px", borderRadius: 8 }}
          >
            <option value="bar">Bar</option>
            <option value="line">Line</option>
            <option value="pie">Pie</option>
          </select>
        </label>
      </div>

      <div style={{ width: "100%", height: 320 }}>
        <ResponsiveContainer>
          {chartType === "bar" ? (
            <BarChart data={data} margin={{ top: 8, right: 12, left: 0, bottom: 8 }}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="label" label={{ value: "Category", position: "insideBottom", offset: -4 }} />
              <YAxis label={{ value: "Value", angle: -90, position: "insideLeft" }} />
              <Tooltip />
              <Legend />
              <Bar dataKey="value" name="Value" fill="#2563eb" radius={[6, 6, 0, 0]} />
            </BarChart>
          ) : chartType === "line" ? (
            <LineChart data={data} margin={{ top: 8, right: 12, left: 0, bottom: 8 }}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="label" label={{ value: "Category", position: "insideBottom", offset: -4 }} />
              <YAxis label={{ value: "Value", angle: -90, position: "insideLeft" }} />
              <Tooltip />
              <Legend />
              <Line type="monotone" dataKey="value" name="Value" stroke="#0f766e" strokeWidth={3} dot={{ r: 4 }} />
            </LineChart>
          ) : (
            <PieChart>
              <Tooltip />
              <Legend />
              <Pie
                data={data}
                dataKey="value"
                nameKey="label"
                name="Value"
                outerRadius={110}
                label
              >
                {data.map((entry, index) => (
                  <Cell key={entry.label} fill={colors[index % colors.length]} />
                ))}
              </Pie>
            </PieChart>
          )}
        </ResponsiveContainer>
      </div>
    </section>
  );
}