"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 { FeeLadders } from "@/features/cities/fee-ladders";
import { APP_CURRENCY } from "@/config/site";
import { useT } from "@/i18n";
import { useUrlState } from "@/lib/use-url-state";

/**
 * Which part is on screen: what the areas pay a captain, what they have paid, or what a delivery costs
 * the shop.
 *
 * The three sit together because they are the two sides of one delivery's money — what we charge for it
 * and what we pay for it — and a rate is only ever set by looking at both.
 */
type AreasTab = "areas" | "earnings" | "fees";

/**
 * 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" || value === "fees" ? (value as AreasTab) : "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>
          <TabsTrigger value="fees">{t("cities.tab.fees")}</TabsTrigger>
        </TabsList>

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

        <TabsContent value="earnings">
          <EarningsReport />
        </TabsContent>

        <TabsContent value="fees">
          <FeeLadders currency={APP_CURRENCY} />
        </TabsContent>
      </Tabs>
    </div>
  );
}