"use client";
import Link from "next/link";
import { useDraft } from "@/mocks/use-draft";
import { parseLocationDraft } from "@/mocks/drafts";
import { PageHeader } from "@/components/shared/page-header";
import { EmptyState } from "@/components/shared/panel";
import { LocationDetail } from "./location-detail";
import type { Location, LocationAnalytics } from "./types";
import { paginate } from "@/lib/list-query";
export function DraftLocationDetail({
  id,
  tab,
  locations,
  analytics,
}: {
  id: string;
  tab: string;
  locations: Location[];
  analytics: LocationAnalytics;
}) {
  const location = parseLocationDraft(useDraft(id));
  const { items, ...pagination } = paginate([], 1, 25);
  if (!location || location.id !== id)
    return (
      <>
        <EmptyState
          title="Preview location unavailable"
          description="This location draft is only available in the browser tab where it was created."
        />
        <Link href="/locations" className="text-primary underline">
          Back to locations
        </Link>
      </>
    );
  return (
    <>
      <PageHeader
        title={location.name}
        parent={{ label: "Locations", href: "/locations" }}
      />
      <LocationDetail
        analytics={analytics}
        location={location}
        tab={tab}
        chargepoints={items}
        sessions={items}
        locations={[
          ...locations.filter((row) => row.id !== location.id),
          location,
        ]}
        cpPagination={pagination}
        sessionPagination={pagination}
      />
    </>
  );
}