"use client";

import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
import type { RevenueAnalytics } from "@/types/analytics";
import { formatCompactCurrency, formatCurrency, formatDate } from "@/lib/format";

function shortDate(value: string) {
  // timeZone pinned explicitly — see the comment on formatDate() in lib/format.ts.
  return new Date(value).toLocaleDateString("en-US", {
    day: "numeric",
    month: "short",
    timeZone: "Asia/Jakarta",
  });
}

function ChartTooltip({
  active,
  payload,
}: {
  active?: boolean;
  payload?: { payload: { date: string; revenue: 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">{formatDate(point.date)}</p>
      <p className="mt-0.5 font-semibold">{formatCurrency(point.revenue)}</p>
    </div>
  );
}

export function AdminRevenueTrendChart({ data }: { data: RevenueAnalytics["daily"] }) {
  const chartData = data.map((d) => ({ date: d.date, revenue: Number(d.revenue) }));
  const tickInterval = Math.max(0, Math.ceil(chartData.length / 6) - 1);

  return (
    <div className="rounded-xl border border-kolabora-neutral-dark/10 p-4">
      <p className="text-sm font-medium text-kolabora-neutral-dark">Revenue Trend</p>
      {chartData.length === 0 ? (
        <p className="mt-8 text-center text-sm text-kolabora-neutral-dark/60">
          No revenue data for this period yet.
        </p>
      ) : (
        <div className="mt-2 h-[200px]">
          <ResponsiveContainer width="100%" height="100%">
            <AreaChart data={chartData} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
              <defs>
                <linearGradient id="admin-revenue-fill" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#FF4E00" stopOpacity={0.08} />
                  <stop offset="100%" stopColor="#FF4E00" stopOpacity={0.08} />
                </linearGradient>
              </defs>
              <XAxis
                dataKey="date"
                tickFormatter={shortDate}
                interval={tickInterval}
                tick={{ fontSize: 12, fill: "#211A1D99" }}
                axisLine={{ stroke: "#211A1D1A" }}
                tickLine={false}
              />
              <YAxis
                tickFormatter={(v) => formatCompactCurrency(v)}
                tick={{ fontSize: 12, fill: "#211A1D99" }}
                axisLine={false}
                tickLine={false}
                width={70}
              />
              <Tooltip content={<ChartTooltip />} />
              <Area
                type="monotone"
                dataKey="revenue"
                stroke="#FF4E00"
                strokeWidth={2}
                fill="url(#admin-revenue-fill)"
              />
            </AreaChart>
          </ResponsiveContainer>
        </div>
      )}
    </div>
  );
}