"use client";

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

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

export function TopSearchQueriesChart({ data }: { data: OwnerQueryRow[] }) {
  if (!data.length) {
    return (
      <div className="flex h-[260px] items-center justify-center text-sm text-muted-foreground">
        Još nema podataka o pretragama. Pojaviće se kako budete dobijali posete.
      </div>
    );
  }

  return (
    <div className="h-[260px] w-full" style={{ fontFamily: "Manrope, sans-serif" }}>
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={data} layout="vertical" margin={{ top: 8, right: 16, left: 24, bottom: 8 }}>
          <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
          <XAxis type="number" tick={{ fontSize: 11, fill: "#64748b" }} />
          <YAxis
            type="category"
            dataKey="query"
            tick={{ fontSize: 11, fill: "#0c1828" }}
            width={140}
          />
          <Tooltip
            formatter={(value) => [
              new Intl.NumberFormat("sr-Latn-RS").format(Number(value) || 0),
              "Impresije",
            ]}
            contentStyle={{ borderRadius: 12, fontSize: 12 }}
          />
          <Bar dataKey="impressions" fill="#c2410c" radius={[0, 8, 8, 0]} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}