"use client";

import * as React from "react";
import {
  Area,
  AreaChart,
  CartesianGrid,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import { adminTexts } from "@/lib/i18n/admin";

export type OrdersChartPoint = {
  label: string;
  orders: number;
  revenue: number;
  profit: number;
};

const BLUE = "#2563eb";
const CYAN = "#06b6d4";

type TooltipPayload = {
  payload?: OrdersChartPoint;
};

function ChartTooltip({
  active,
  payload,
  label,
}: {
  active?: boolean;
  payload?: TooltipPayload[];
  label?: string | number;
}) {
  if (!active || !payload?.length) return null;
  const point = payload[0]?.payload;
  if (!point) return null;
  return (
    <div className="rounded-lg border bg-card px-2.5 py-2 text-xs text-foreground shadow-md">
      <p className="mb-1 font-medium">{label}</p>
      <p className="flex items-center gap-1.5">
        <span className="size-2 rounded-full" style={{ background: BLUE }} />
        {adminTexts.dashboard.chartOrders}
        <span className="ml-auto pl-3 font-mono tabular-nums">{point.orders}</span>
      </p>
      <p className="flex items-center gap-1.5">
        <span className="size-2 rounded-full" style={{ background: CYAN }} />
        {adminTexts.dashboard.chartRevenue}
        <span className="ml-auto pl-3 font-mono tabular-nums">
          ${point.revenue.toFixed(2)}
        </span>
      </p>
      <p className="flex items-center gap-1.5 text-muted-foreground">
        <span className="size-2 rounded-full bg-emerald-500" />
        {adminTexts.common.profit}
        <span className="ml-auto pl-3 font-mono tabular-nums">
          ${point.profit.toFixed(2)}
        </span>
      </p>
    </div>
  );
}

/** 14-day orders + revenue area chart (blue / cyan per the design system). */
export function AdminOrdersChart({ data }: { data: OrdersChartPoint[] }) {
  return (
    <div className="h-56 w-full text-muted-foreground">
      <ResponsiveContainer width="100%" height="100%">
        <AreaChart data={data} margin={{ top: 8, right: 8, bottom: 0, left: -18 }}>
          <defs>
            <linearGradient id="adminOrdersFill" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor={BLUE} stopOpacity={0.35} />
              <stop offset="100%" stopColor={BLUE} stopOpacity={0} />
            </linearGradient>
            <linearGradient id="adminRevenueFill" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor={CYAN} stopOpacity={0.3} />
              <stop offset="100%" stopColor={CYAN} stopOpacity={0} />
            </linearGradient>
          </defs>

          <CartesianGrid
            strokeDasharray="3 3"
            vertical={false}
            stroke="currentColor"
            strokeOpacity={0.15}
          />
          <XAxis
            dataKey="label"
            tickLine={false}
            axisLine={false}
            interval="preserveStartEnd"
            minTickGap={16}
            tick={{ fontSize: 11, fill: "currentColor" }}
          />
          <YAxis
            yAxisId="orders"
            tickLine={false}
            axisLine={false}
            width={38}
            allowDecimals={false}
            tick={{ fontSize: 11, fill: "currentColor" }}
          />
          <YAxis yAxisId="revenue" orientation="right" hide />
          <Tooltip content={<ChartTooltip />} cursor={{ stroke: BLUE, strokeOpacity: 0.2 }} />

          <Area
            yAxisId="revenue"
            type="monotone"
            dataKey="revenue"
            stroke={CYAN}
            strokeWidth={1.5}
            fill="url(#adminRevenueFill)"
            dot={false}
          />
          <Area
            yAxisId="orders"
            type="monotone"
            dataKey="orders"
            stroke={BLUE}
            strokeWidth={2}
            fill="url(#adminOrdersFill)"
            dot={false}
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}

export default AdminOrdersChart;