import Link from "next/link";
import { notFound } from "next/navigation";
import { createCaller } from "~/server/trpc.js";
import { ScenarioPlanner } from "~/components/projects/ScenarioPlanner.js";

interface ScenarioPageProps {
  params: Promise<{ id: string }>;
}

export default async function ScenarioPage({ params }: ScenarioPageProps) {
  const { id } = await params;
  const trpc = await createCaller();

  let baseline: Awaited<ReturnType<typeof trpc.scenario.getProjectBaseline>>;
  try {
    baseline = await trpc.scenario.getProjectBaseline({ projectId: id });
  } catch {
    notFound();
  }

  // Load resources and roles for the pickers
  const [resources, roles] = await Promise.all([
    trpc.resource.list({ isActive: true }),
    trpc.role.list({ isActive: true }),
  ]);

  return (
    <div className="p-6 max-w-7xl mx-auto space-y-6">
      <Link
        href={`/projects/${id}`}
        className="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-800 transition-colors"
      >
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
        </svg>
        Back to {baseline.project.name}
      </Link>

      <div>
        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
          What-If Scenario Planner
        </h1>
        <p className="mt-1 text-sm text-gray-500">
          Explore alternate staffing configurations for{" "}
          <span className="font-medium text-gray-700 dark:text-gray-300">{baseline.project.name}</span>{" "}
          and see instant cost/schedule impact.
        </p>
      </div>

      <ScenarioPlanner
        projectId={id}
        baseline={baseline}
        resources={((resources as any)?.resources ?? resources) as never}
        roles={(Array.isArray(roles) ? roles : []) as never}
      />
    </div>
  );
}