"use client";

import { PageHeader } from "@/components/shared/page-header";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { CityTree } from "@/features/cities/city-tree";
import { EarningsReport } from "@/features/cities/earnings-report";
import { APP_CURRENCY } from "@/config/site";
import { useT } from "@/i18n";
import { useUrlState } from "@/lib/use-url-state";

/** Which half is on screen: what the areas pay, or what they have paid. */
type AreasTab = "areas" | "earnings";

/**
 * Where the company delivers, what a delivery there earns, and what that has cost.
 *
 * The two tabs are one subject read in both directions. A rate is a decision about the future; the
 * earnings report is what that decision has actually cost, per area — and the reason they sit on one
 * screen is that neither is answerable without the other: "is 8,000 right for Mezzeh" is a question
 * about the deliveries Mezzeh produced.
 */
export default function CitiesPage() {
  const t = useT();

  const [tab, setTab] = useUrlState<AreasTab>("tab", "areas", (value) =>
    value === "earnings" ? "earnings" : "areas",
  );

  return (
    <div>
      <PageHeader title={t("cities.title")} subtitle={t("cities.subtitle")} />

      <Tabs value={tab} onValueChange={(value) => setTab(value as AreasTab)}>
        <TabsList className="mb-4">
          <TabsTrigger value="areas">{t("cities.tab.areas")}</TabsTrigger>
          <TabsTrigger value="earnings">{t("cities.tab.earnings")}</TabsTrigger>
        </TabsList>

        <TabsContent value="areas">
          <CityTree currency={APP_CURRENCY} />
        </TabsContent>

        <TabsContent value="earnings">
          <EarningsReport />
        </TabsContent>
      </Tabs>
    </div>
  );
}