"use client"

import { useTranslations } from "next-intl"

import { Link } from "@/i18n/navigation"
import { PageHeader } from "@/components/page-header"
import { CompanyStatisticsTable } from "@/components/statistics/company-statistics-table"
import { StatisticsCharts } from "@/components/statistics/statistics-charts"
import { TenantsSyncControl } from "@/components/tenants/tenants-sync-control"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function StatisticsPageContent() {
  const t = useTranslations("RealTenants")

  return (
    <Tabs defaultValue="charts" className="flex flex-col gap-4 md:gap-6 py-4 md:py-6">
      <PageHeader
        title={t("title")}
        actions={
          <div className="flex flex-wrap items-center gap-2">
            <TenantsSyncControl />
            <TabsList>
              <TabsTrigger value="charts">{t("tabs.charts")}</TabsTrigger>
              <TabsTrigger value="tenants">{t("tabs.tenants")}</TabsTrigger>
            </TabsList>
            <Button variant="outline" asChild>
              <Link href="/real-stores/carriers">{t("actions.carriersPerTenant")}</Link>
            </Button>
            <Button variant="outline" asChild>
              <Link href="/real-stores/payment-methods">
                {t("actions.paymentsPerTenant")}
              </Link>
            </Button>
          </div>
        }
      />

      <TabsContent value="charts">
        <StatisticsCharts />
      </TabsContent>

      <TabsContent value="tenants">
        <CompanyStatisticsTable />
      </TabsContent>
    </Tabs>
  )
}