"use client"

import { useLocale, useTranslations } from "next-intl"
import {
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts"

import { QueryState } from "@/components/api/query-state"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
import { useChartsGrandTotal, useChartsPaymentsCarriers } from "@/hooks/api/use-statistics"
import { chartColor } from "@/lib/chart-colors"
import type { ChartGrandTotal, ChartNameValue } from "@/lib/statistics-mock"

function formatTotal(value: number, locale: string) {
  return new Intl.NumberFormat(locale, {
    maximumFractionDigits: 2,
  }).format(value)
}

function OrdersBarChart({
  title,
  data,
  locale,
  emptyLabel,
}: {
  title: string
  data: ChartNameValue[]
  locale: string
  emptyLabel: string
}) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="font-medium text-sm">{title}</CardTitle>
      </CardHeader>
      <CardContent className="min-h-72 h-72">
        {data.length === 0 ? (
          <div className="flex justify-center items-center h-full text-muted-foreground text-sm">
            {emptyLabel}
          </div>
        ) : (
        <ResponsiveContainer width="100%" height="100%">
          <BarChart data={data} margin={{ top: 8, right: 12, left: 4, bottom: 72 }}>
            <CartesianGrid vertical={false} strokeDasharray="3 3" />
            <XAxis
              dataKey="name"
              tickLine={false}
              axisLine={false}
              interval={0}
              angle={-20}
              textAnchor="end"
              height={15}
              tickMargin={8}
              tick={{ fontSize: 11 }}
            />
            <YAxis tickLine={false} axisLine={false} width={56} />
            <Tooltip
              formatter={(value) =>
                typeof value === "number"
                  ? formatTotal(value, locale)
                  : String(value ?? "")
              }
            />
            <Bar dataKey="value" radius={[6, 6, 0, 0]}>
              {data.map((_, index) => (
                <Cell key={index} fill={chartColor(index)} />
              ))}
            </Bar>
          </BarChart>
        </ResponsiveContainer>
        )}
      </CardContent>
    </Card>
  )
}

function GrandTotalBarChart({
  title,
  data,
  locale,
  emptyLabel,
}: {
  title: string
  data: ChartGrandTotal[]
  locale: string
  emptyLabel: string
}) {
  const chartData = data.map((row) => ({ name: row.name, total: row.total }))

  return (
    <Card>
      <CardHeader>
        <CardTitle className="font-medium text-sm">{title}</CardTitle>
      </CardHeader>
      <CardContent className="min-h-72 h-72">
        {chartData.length === 0 ? (
          <div className="flex justify-center items-center h-full text-muted-foreground text-sm">
            {emptyLabel}
          </div>
        ) : (
        <ResponsiveContainer width="100%" height="100%">
          <BarChart
            data={chartData}
            layout="vertical"
            margin={{ top: 4, right: 12, left: 4, bottom: 4 }}
          >
            <CartesianGrid horizontal={false} strokeDasharray="3 3" />
            <XAxis
              type="number"
              tickLine={false}
              axisLine={false}
              tickFormatter={(value) => formatTotal(Number(value), locale)}
            />
            <YAxis
              type="category"
              dataKey="name"
              width={120}
              tickLine={false}
              axisLine={false}
              tick={{ fontSize: 11 }}
            />
            <Tooltip
              formatter={(value) =>
                typeof value === "number"
                  ? formatTotal(value, locale)
                  : String(value ?? "")
              }
            />
            <Bar dataKey="total" radius={[0, 6, 6, 0]}>
              {chartData.map((_, index) => (
                <Cell key={index} fill={chartColor(index, 1)} />
              ))}
            </Bar>
          </BarChart>
        </ResponsiveContainer>
        )}
      </CardContent>
    </Card>
  )
}

const chartsSkeleton = (
  <div className="gap-4 grid md:grid-cols-2 px-4 lg:px-6">
    <Skeleton className="h-72 w-full" />
    <Skeleton className="h-72 w-full" />
    <Skeleton className="h-72 w-full" />
    <Skeleton className="h-72 w-full" />
  </div>
)

export function StatisticsCharts() {
  const t = useTranslations("RealTenants.charts")
  const tc = useTranslations("Common")
  const locale = useLocale()
  const paymentsCarriersQuery = useChartsPaymentsCarriers()
  const grandTotalQuery = useChartsGrandTotal()

  const isLoading = paymentsCarriersQuery.isLoading || grandTotalQuery.isLoading
  const isError = paymentsCarriersQuery.isError || grandTotalQuery.isError
  const error = paymentsCarriersQuery.error ?? grandTotalQuery.error

  return (
    <QueryState
      isLoading={isLoading}
      isError={isError}
      error={error instanceof Error ? error : null}
      skeleton={chartsSkeleton}
    >
      <div className="gap-4 grid md:grid-cols-2 px-4 lg:px-6">
        <OrdersBarChart
          title={t("paymentMethodsOrders")}
          data={paymentsCarriersQuery.data?.paymentMethods ?? []}
          locale={locale}
          emptyLabel={tc("table.noResults")}
        />
        <OrdersBarChart
          title={t("carriersOrders")}
          data={paymentsCarriersQuery.data?.carriers ?? []}
          locale={locale}
          emptyLabel={tc("table.noResults")}
        />
        <GrandTotalBarChart
          title={t("paymentMethodsGrandTotal")}
          data={grandTotalQuery.data?.paymentMethods ?? []}
          locale={locale}
          emptyLabel={tc("table.noResults")}
        />
        <GrandTotalBarChart
          title={t("carriersGrandTotal")}
          data={grandTotalQuery.data?.carriers ?? []}
          locale={locale}
          emptyLabel={tc("table.noResults")}
        />
      </div>
    </QueryState>
  )
}