"use client"

import { useTranslations } from "next-intl"
import { BarChart3 } from "lucide-react"
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from "recharts"

import { EmptyState } from "@/shared/components/ui/empty-state"

interface UserGrowthChartProps {
  data: Array<{ date: string; count: number }>
  /** Translation key for the line/tooltip label (e.g. "chart.newUsers" or "chart.newSubmissions") */
  labelKey?: "chart.newUsers" | "chart.newSubmissions"
}

export function UserGrowthChart({ data, labelKey = "chart.newUsers" }: UserGrowthChartProps) {
  const t = useTranslations("dashboard")

  if (data.length === 0) {
    return (
      <EmptyState
        icon={BarChart3}
        title={t("empty.noData")}
        description={t("empty.noDataDesc")}
        className="border-none h-[240px]"
      />
    )
  }

  return (
    <ResponsiveContainer width="100%" height={240}>
      <LineChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
        <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
        <XAxis
          dataKey="date"
          className="text-xs"
          tick={{ fontSize: 12 }}
        />
        <YAxis className="text-xs" tick={{ fontSize: 12 }} />
        <Tooltip
          contentStyle={{
            backgroundColor: "hsl(var(--background))",
            border: "1px solid hsl(var(--border))",
            borderRadius: "6px",
          }}
        />
        <Line
          type="monotone"
          dataKey="count"
          stroke="hsl(var(--primary))"
          strokeWidth={2}
          dot={{ fill: "hsl(var(--primary))", r: 3 }}
          name={t(labelKey)}
        />
      </LineChart>
    </ResponsiveContainer>
  )
}
