"use client"

import dynamic from "next/dynamic"
import { useState } from "react"
import { useLocale, useTranslations } from "next-intl"

import { QueryState } from "@/components/api/query-state"
import { PageHeader } from "@/components/page-header"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
import { useDashboardStats, useTopCompanies } from "@/hooks/api/use-dashboard"
import { useThemeStatistics } from "@/hooks/api/use-themes"
import type { DashboardStats, TopCompanyRow } from "@/lib/api/dashboard"
import { topThemeUsageSlices, type ThemeStatistics } from "@/lib/api/themes"

const DEFAULT_TOP_COMPANIES_LIMIT = 15

const SuperDashboardCharts = dynamic(
  () =>
    import("@/components/super-dashboard-charts").then(
      (m) => m.SuperDashboardCharts
    ),
  { ssr: false }
)

function formatStat(value: number | string | null | undefined, fallback: string) {
  if (value === null || value === undefined) return fallback
  return String(value)
}

export function DashboardView({
  initialStats,
  initialTopCompanies,
  initialThemeUsage,
}: {
  initialStats?: DashboardStats
  initialTopCompanies?: TopCompanyRow[]
  initialThemeUsage?: ThemeStatistics
}) {
  const t = useTranslations("Dashboard")
  const locale = useLocale()
  const [topCompaniesLimit, setTopCompaniesLimit] = useState(DEFAULT_TOP_COMPANIES_LIMIT)
  const statsQuery = useDashboardStats(initialStats)
  const topCompaniesQuery = useTopCompanies(
    topCompaniesLimit,
    topCompaniesLimit === DEFAULT_TOP_COMPANIES_LIMIT ? initialTopCompanies : undefined
  )
  const themeUsageQuery = useThemeStatistics(initialThemeUsage)
  const rawRevenue = formatStat(statsQuery.data?.revenueMtd, "—")
  const revenueNumber = Number(rawRevenue)
  const formatedRevenue = Number.isFinite(revenueNumber)
    ? new Intl.NumberFormat(`${locale}-EG`, {
        style: "currency",
        currency: "EGP",
      }).format(revenueNumber)
    : rawRevenue

  const themeUsageFromApi = themeUsageQuery.data?.usage ?? []
  const themesChartData =
    themeUsageFromApi.length > 0
      ? topThemeUsageSlices(themeUsageFromApi, 10)
      : (statsQuery.data?.themes ?? [])

  const isLoading = statsQuery.isLoading || themeUsageQuery.isLoading
  const isError = statsQuery.isError || themeUsageQuery.isError
  const error = statsQuery.error ?? themeUsageQuery.error

  return (
    <div className="flex flex-col gap-4 md:gap-6 py-4 md:py-6">
      <PageHeader
        title={t("title")}
        actions={null}
      />

      <QueryState
        isLoading={isLoading}
        isError={isError}
        error={error}
        skeleton={
          <div className="gap-4 grid md:grid-cols-3 px-4 lg:px-6">
            {Array.from({ length: 3 }).map((_, index) => (
              <Skeleton key={index} className="w-full h-28" />
            ))}
            <Skeleton className="md:col-span-2 w-full h-72" />
            <Skeleton className="w-full h-72" />
          </div>
        }
      >
        <div className="gap-4 grid md:grid-cols-3 px-4 lg:px-6">
          <Card>
            <CardHeader>
              <CardTitle className="font-medium text-sm">{t("totalTenants")}</CardTitle>
            </CardHeader>
            <CardContent className="font-semibold text-2xl">
              {formatStat(statsQuery.data?.totalTenants, "—")}
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle className="font-medium text-sm">{t("companiesThisMonth")}</CardTitle>
            </CardHeader>
            <CardContent className="font-semibold text-2xl">
              {formatStat(statsQuery.data?.companiesThisMonth, "—")}
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle className="font-medium text-sm">{t("revenueMtd")}</CardTitle>
            </CardHeader>
            <CardContent className="font-semibold text-2xl">
              {formatedRevenue}
            </CardContent>
          </Card>
        </div>

        <SuperDashboardCharts
          topCompanies={topCompaniesQuery.data ?? []}
          topCompaniesLimit={topCompaniesLimit}
          onTopCompaniesLimitChange={setTopCompaniesLimit}
          isTopCompaniesLoading={topCompaniesQuery.isFetching}
          isTopCompaniesError={topCompaniesQuery.isError}
          plans={statsQuery.data?.plans ?? []}
          themes={themesChartData}
        />
      </QueryState>
    </div>
  )
}