import Link from "next/link";
import { listContainers, listPlants } from "@/modules/garden/server/queries";
import { ContainerList } from "@/modules/garden/components/container-list";
import { PlantList } from "@/modules/garden/components/plant-list";
import { PushOverdueButton } from "@/modules/garden/components/push-overdue-button";

type Props = {
  searchParams: Promise<{ tab?: string }>;
};

export default async function GardenPage({ searchParams }: Props) {
  const { tab = "containers" } = await searchParams;
  const isPlants = tab === "plants";

  const [containers, plants] = await Promise.all([
    listContainers(),
    isPlants ? listPlants() : Promise.resolve([]),
  ]);

  return (
    <div className="page-content">
      <div className="flex items-center justify-between mb-1">
        <h1 className="page-title mb-0">Garden</h1>
        <PushOverdueButton />
      </div>

      <div className="flex gap-6 border-b border-[var(--ink-faint)] mb-6">
        <Link
          href="/garden?tab=containers"
          className={`pb-2 text-sm font-medium transition-colors ${
            !isPlants
              ? "border-b-2 border-[var(--ink)] text-[var(--ink)]"
              : "text-[var(--ink-mute)]"
          }`}
        >
          Containers
        </Link>
        <Link
          href="/garden?tab=plants"
          className={`pb-2 text-sm font-medium transition-colors ${
            isPlants ? "border-b-2 border-[var(--ink)] text-[var(--ink)]" : "text-[var(--ink-mute)]"
          }`}
        >
          Plants
        </Link>
      </div>

      {isPlants ? <PlantList plants={plants} /> : <ContainerList containers={containers} />}
    </div>
  );
}