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

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 NewScenarioPage() {
  const { plants, soils, grafts } = await getData();

  return (
    <div className="min-h-screen bg-stone-50">
      <div className="border-b border-stone-200 bg-white">
        <div className="mx-auto max-w-5xl px-4 py-4 sm:px-6 sm:py-5 lg:px-8">
          <div className="flex items-center gap-2 text-sm font-medium text-stone-500">
            <Link href="/" className="hover:text-stone-700">ACI Platform</Link>
            <span>/</span>
            <Link href="/scenarios" className="hover:text-stone-700">Scenarios</Link>
            <span>/</span>
            <span className="text-stone-900">New Scenario</span>
          </div>
          <h1 className="mt-1.5 text-lg sm:mt-2 sm:text-2xl font-bold tracking-tight text-stone-900">
            Scenario Builder
          </h1>
          <p className="mt-1 text-xs sm:text-sm text-stone-500">
            Configure your grafting scenario step by step and run an AI analysis.
          </p>
        </div>
      </div>

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