import Link from "next/link";
import { apiFetch } from "@/lib/api";
import type { GraftCombination, Plant, SoilProfile } from "@/types/api";
import DatabaseBrowser from "./_components/DatabaseBrowser";

async function getData() {
  try {
    const [plants, soils, grafts] = await Promise.all([
      apiFetch<Plant[]>("/api/plants"),
      apiFetch<SoilProfile[]>("/api/soils"),
      apiFetch<GraftCombination[]>("/api/grafts"),
    ]);
    return { plants, soils, grafts };
  } catch {
    return { plants: [], soils: [], grafts: [] };
  }
}

export default async function DatabasePage() {
  const { plants, soils, grafts } = await getData();

  return (
    <div className="min-h-screen bg-stone-50">
      {/* Header */}
      <div className="border-b border-stone-200 bg-white">
        <div className="mx-auto max-w-7xl px-4 py-5 sm:px-6 sm:py-6 lg:px-8">
          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
            <div>
              <div className="mb-1.5 flex items-center gap-2 text-sm font-medium text-stone-500">
                <Link href="/" className="hover:text-stone-700">
                  ACI Platform
                </Link>
                <span>/</span>
                <span>Database</span>
              </div>
              <h1 className="text-lg sm:text-2xl font-bold tracking-tight text-stone-900">
                Plant & Soil Database
              </h1>
              <p className="mt-1 text-xs sm:text-sm text-stone-500">
                Browse all plant varieties, soil profiles, and graft
                combinations available for scenario modelling.
              </p>
            </div>
            <Link
              href="/scenarios/new"
              className="inline-flex w-full items-center justify-center rounded-lg bg-emerald-800 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-700 sm:w-auto"
            >
              New Scenario →
            </Link>
          </div>
        </div>
      </div>

      {/* Browser */}
      <div className="mx-auto max-w-7xl px-4 py-6 sm:px-6 sm:py-8 lg:px-8">
        <DatabaseBrowser plants={plants} soils={soils} grafts={grafts} />
      </div>
    </div>
  );
}