"use client";

import dynamic from "next/dynamic";
import { MapPinnedIcon } from "lucide-react";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { EmptyState } from "@/components/ui/empty-state";
import { Skeleton } from "@/components/ui/skeleton";
import { Typography } from "@/components/ui/typography";
import { useTranslation } from "@/hooks/useTranslation";
import type { GeoJSONPolygon } from "@/types/provider";

import {
  countBoundaryPoints,
  getAreaKm2,
  getCenter,
  hasDrawableArea,
} from "./lib/geo";

/**
 * Leaflet reads `window` at import time, so the map can only load in the
 * browser. `ssr: false` also keeps it out of the server bundle entirely — the
 * map is behind a tab most page views never open.
 */
const CoverageMap = dynamic(
  () => import("./CoverageMap").then((mod) => mod.CoverageMap),
  {
    ssr: false,
    loading: () => <Skeleton className="h-[320px] w-full sm:h-[420px]" />,
  },
);

export function ProviderCoverageTab({
  coverageArea,
}: {
  coverageArea: GeoJSONPolygon | null;
}) {
  const { t, language } = useTranslation();

  if (!hasDrawableArea(coverageArea)) {
    return (
      <Card>
        <CardContent>
          <EmptyState
            icon={<MapPinnedIcon />}
            title={t("providers.detail.coverage.emptyTitle")}
            description={t("providers.detail.coverage.emptyDescription")}
          />
        </CardContent>
      </Card>
    );
  }

  // hasDrawableArea() already rejected null and degenerate rings.
  const polygon = coverageArea as GeoJSONPolygon;
  const center = getCenter(polygon);
  const areaKm2 = getAreaKm2(polygon);
  const points = countBoundaryPoints(polygon);

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t("providers.detail.coverage.title")}</CardTitle>
        <CardDescription>
          {t("providers.detail.coverage.description")}
        </CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <CoverageMap polygon={polygon} />

        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
          <CoverageStat
            label={t("providers.detail.coverage.areaLabel")}
            value={t("providers.detail.coverage.areaValue", {
              value: new Intl.NumberFormat(language, {
                maximumFractionDigits: 1,
              }).format(areaKm2),
            })}
          />
          <CoverageStat
            label={t("providers.detail.coverage.pointsLabel")}
            value={String(points)}
          />
          {center && (
            <CoverageStat
              label={t("providers.detail.coverage.centerLabel")}
              value={`${center[0].toFixed(4)}, ${center[1].toFixed(4)}`}
            />
          )}
        </div>
      </CardContent>
    </Card>
  );
}

function CoverageStat({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex flex-col gap-1">
      <Typography as="span" variant="caption" color="secondary">
        {label}
      </Typography>
      <Typography as="span" variant="number">
        {value}
      </Typography>
    </div>
  );
}