"use client";

import { useMemo } from "react";
import { ScenarioSelector } from "./scenarioSelector";

export function ScenarioSelectorWrapper({
  scenarios,
  portfolioId,
  selectedScenarioId,
  setSelectedScenarioId,
}: {
  scenarios: { id: number; name: string }[];
  portfolioId: number;
  selectedScenarioId: number | null | "default";
  setSelectedScenarioId: (id: number | null | "default") => void;
}) {
  function handleSelect(id: number | null | "default") {
    setSelectedScenarioId(id);
  }
  const selectionMeta = useMemo(() => {
    if (selectedScenarioId === null) {
      return {
        label: "Baseline",
        description: "Current portfolio performance",
        className: "bg-gray-100 text-gray-600 border border-gray-200",
      };
    }

    if (selectedScenarioId === "default") {
      return {
        label: "Recommended",
        description: "Best upgrade plan per property",
        className: "bg-brandmidblue text-white border border-brandblue",
      };
    }

    const scenario = scenarios.find((s) => s.id === selectedScenarioId);

    return {
      label: scenario?.name ?? "Scenario",
      description: "Custom upgrade scenario",
      className: "bg-white text-gray-700 border border-gray-300",
    };
  }, [selectedScenarioId, scenarios]);

  return (
    <div className="flex items-center gap-4">
      <ScenarioSelector
        scenarios={scenarios}
        selected={selectedScenarioId}
        onChange={handleSelect}
      />

      <div className="flex items-center gap-3">
        <div
          className={`
      inline-flex items-center rounded-full px-3 py-1 text-xs font-medium
      ${selectionMeta.className}
    `}
        >
          {selectionMeta.label}
        </div>

        <span className="text-xs text-gray-400">
          {selectionMeta.description}
        </span>
      </div>
    </div>
  );
}
