"use client";

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

import type { OwnerTrendPoint } from "@/lib/owner/dashboard";

function formatTickDate(value: string) {
  const date = new Date(value);
  return new Intl.DateTimeFormat("sr-Latn-RS", { day: "2-digit", month: "short" }).format(date);
}

export function ImpressionsTrendChart({ data }: { data: OwnerTrendPoint[] }) {
  return (
    <div className="h-[280px] w-full" style={{ fontFamily: "Manrope, sans-serif" }}>
      <ResponsiveContainer width="100%" height="100%">
        <LineChart data={data} margin={{ top: 8, right: 16, left: 8, bottom: 8 }}>
          <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
          <XAxis
            dataKey="date"
            tickFormatter={formatTickDate}
            tick={{ fontSize: 11, fill: "#64748b" }}
            interval="preserveStartEnd"
            minTickGap={32}
          />
          <YAxis tick={{ fontSize: 11, fill: "#64748b" }} />
          <Tooltip
            labelFormatter={(label) => formatTickDate(String(label))}
            formatter={(value, name) => [
              new Intl.NumberFormat("sr-Latn-RS").format(Number(value) || 0),
              String(name) === "impressions" ? "Impresije" : "Klikovi",
            ]}
            contentStyle={{ borderRadius: 12, fontSize: 12 }}
          />
          <Line
            type="monotone"
            dataKey="impressions"
            stroke="#c2410c"
            strokeWidth={2.5}
            dot={false}
            activeDot={{ r: 4 }}
          />
          <Line type="monotone" dataKey="clicks" stroke="#94a3b8" strokeWidth={2} dot={false} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}