"use client";

import { Bar, BarChart, Cell, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
import type { TicketSalesAnalytics } from "@/types/analytics";

const CYCLE_COLORS = ["#FF4E00", "#6CA0C0", "#211A1D"];

function ChartTooltip({
  active,
  payload,
}: {
  active?: boolean;
  payload?: { payload: { name: string; sold: number } }[];
}) {
  if (!active || !payload?.length) return null;
  const point = payload[0].payload;
  return (
    <div className="rounded-lg border border-kolabora-neutral-dark/10 bg-kolabora-neutral-white px-3 py-2 text-xs shadow-lg">
      <p className="text-kolabora-neutral-dark/60">{point.name}</p>
      <p className="mt-0.5 font-semibold">{point.sold} tickets</p>
    </div>
  );
}

export function AdminTicketTypeChart({ data }: { data: TicketSalesAnalytics["by_ticket_type"] }) {
  const chartData = data.map((d) => ({ name: d.name, sold: d.sold }));

  return (
    <div className="rounded-xl border border-kolabora-neutral-dark/10 p-4">
      <p className="text-sm font-medium text-kolabora-neutral-dark">Sales per Ticket</p>
      {chartData.length === 0 ? (
        <p className="mt-8 text-center text-sm text-kolabora-neutral-dark/60">
          No tickets sold in this period yet.
        </p>
      ) : (
        <div className="mt-2 h-[220px]">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={chartData} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
              <XAxis
                dataKey="name"
                tick={{ fontSize: 11, fill: "#211A1D99" }}
                axisLine={{ stroke: "#211A1D1A" }}
                tickLine={false}
                interval={0}
                angle={chartData.length > 4 ? -20 : 0}
                textAnchor={chartData.length > 4 ? "end" : "middle"}
                height={chartData.length > 4 ? 50 : 30}
              />
              <YAxis
                allowDecimals={false}
                tick={{ fontSize: 12, fill: "#211A1D99" }}
                axisLine={false}
                tickLine={false}
                width={32}
              />
              <Tooltip content={<ChartTooltip />} cursor={{ fill: "#211A1D0D" }} />
              <Bar dataKey="sold" radius={[6, 6, 0, 0]} maxBarSize={48}>
                {chartData.map((_, i) => (
                  <Cell key={i} fill={CYCLE_COLORS[i % CYCLE_COLORS.length]} />
                ))}
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </div>
      )}
    </div>
  );
}