"use client";

import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip as RechartsTooltip,
  ResponsiveContainer,
  Legend,
} from "recharts";
import type { TrendData } from "./types";

type ForecastTrendChartProps = {
  trend: TrendData;
  period: string;
};

export function ForecastTrendChart({ trend, period }: ForecastTrendChartProps) {
  const chartData = trend.labels.map((label, i) => ({
    name: label,
    actual: trend.actual[i] ?? 0,
    target: trend.target[i] ?? 0,
    projected: trend.projected[i] ?? 0,
  }));

  if (chartData.length === 0) {
    return (
      <div className="bg-white rounded-xl border border-border p-6 shadow-sm">
        <h3 className="text-[13px] font-extrabold text-text font-['Lexend'] mb-1">
          Revenue Trend
        </h3>
        <p className="text-[11px] text-gray-700 font-medium mb-4 uppercase tracking-tight">
          {period} · Actual vs target vs projected
        </p>
        <p className="text-sm text-gray-600">No trend data for this period.</p>
      </div>
    );
  }

  return (
    <div className="bg-white rounded-xl border border-border p-6 shadow-sm flex flex-col min-h-[320px]">
      <h3 className="text-[13px] font-extrabold text-text font-['Lexend'] mb-1">
        Revenue Trend
      </h3>
      <p className="text-[11px] text-gray-700 font-medium mb-5 uppercase tracking-tight">
        {period} · Actual vs target vs projected
      </p>
      <div className="flex-1 min-h-[240px]">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart data={chartData}>
            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#E4E6EF88" />
            <XAxis
              dataKey="name"
              axisLine={false}
              tickLine={false}
              tick={{ fontSize: 10, fill: "#6B7280", fontWeight: "bold" }}
              dy={5}
            />
            <YAxis
              axisLine={false}
              tickLine={false}
              tick={{ fontSize: 10, fill: "#6B7280" }}
              dx={-5}
              tickFormatter={(v) => `$${v}M`}
            />
            <RechartsTooltip
              cursor={{ fill: "#6C63FF08" }}
              contentStyle={{
                borderRadius: "12px",
                border: "none",
                boxShadow: "0 4px 14px rgba(0,0,0,0.15)",
                padding: "12px",
                backgroundColor: "#0F1117",
                color: "#fff",
              }}
              itemStyle={{ color: "#fff", fontSize: "12px", fontWeight: "bold" }}
              labelStyle={{ color: "#fff", fontSize: "11px", marginBottom: 4 }}
              formatter={(value: number, name: string) => [`$${value}M`, name]}
            />
            <Legend wrapperStyle={{ fontSize: 10 }} />
            <Bar
              dataKey="actual"
              fill="#6C63FF"
              radius={[5, 5, 0, 0]}
              barSize={22}
              name="Actual"
            />
            <Bar
              dataKey="target"
              fill="#E2E8F0"
              radius={[5, 5, 0, 0]}
              barSize={22}
              name="Target"
            />
            <Bar
              dataKey="projected"
              fill="#A99EFF"
              radius={[5, 5, 0, 0]}
              barSize={22}
              name="Projected"
            />
          </BarChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}