"use client";

import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
  LineChart,
  Line,
} from "recharts";

interface DailyRevenue {
  date: string;
  commission: number;
  total: number;
}

export default function CommissionChart({ data }: { data: DailyRevenue[] }) {
  if (!data.length) {
    return (
      <div className="bg-surface rounded-lg p-6 text-center text-text-muted">
        No revenue data available yet
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
      {/* Daily Commission Bar Chart */}
      <div className="bg-surface rounded-lg p-6">
        <h2 className="text-lg font-semibold text-white mb-4">
          Daily Commission (Last 30 Days)
        </h2>
        <div className="h-[300px]">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={data}>
              <XAxis
                dataKey="date"
                tick={{ fill: "#9ca3af", fontSize: 10 }}
                tickLine={false}
                axisLine={{ stroke: "#374151" }}
                angle={-45}
                textAnchor="end"
                height={60}
              />
              <YAxis
                tick={{ fill: "#9ca3af", fontSize: 11 }}
                tickLine={false}
                axisLine={{ stroke: "#374151" }}
                allowDecimals={false}
              />
              <Tooltip
                contentStyle={{
                  backgroundColor: "#1a1a2e",
                  border: "1px solid #374151",
                  borderRadius: "8px",
                  color: "#fff",
                }}
                formatter={(value) => [`${value} credits`, "Commission"]}
              />
              <Bar
                dataKey="commission"
                fill="#d4a843"
                radius={[4, 4, 0, 0]}
                maxBarSize={40}
              />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>

      {/* Total Revenue Line Chart */}
      <div className="bg-surface rounded-lg p-6">
        <h2 className="text-lg font-semibold text-white mb-4">
          Total Revenue Trend (Last 30 Days)
        </h2>
        <div className="h-[300px]">
          <ResponsiveContainer width="100%" height="100%">
            <LineChart data={data}>
              <XAxis
                dataKey="date"
                tick={{ fill: "#9ca3af", fontSize: 10 }}
                tickLine={false}
                axisLine={{ stroke: "#374151" }}
                angle={-45}
                textAnchor="end"
                height={60}
              />
              <YAxis
                tick={{ fill: "#9ca3af", fontSize: 11 }}
                tickLine={false}
                axisLine={{ stroke: "#374151" }}
                allowDecimals={false}
              />
              <Tooltip
                contentStyle={{
                  backgroundColor: "#1a1a2e",
                  border: "1px solid #374151",
                  borderRadius: "8px",
                  color: "#fff",
                }}
                formatter={(value) => [`${value} credits`, "Total Revenue"]}
              />
              <Line
                type="monotone"
                dataKey="total"
                stroke="#d4af37"
                strokeWidth={2}
                dot={{ fill: "#d4af37", r: 3 }}
                activeDot={{ r: 5, fill: "#d4af37" }}
              />
            </LineChart>
          </ResponsiveContainer>
        </div>
      </div>
    </div>
  );
}