import { getPlans, getPropertyMeta } from "../utils";
import { sapToEpc } from "@/app/utils";
import PlanCard from "./PlanCard";
import PlanHeroCard from "./PlanHeroCard";
import { WrenchScrewdriverIcon } from "@heroicons/react/24/outline";

export default async function RecommendationPlans(props: {
  params: Promise<{ slug: string; propertyId: string }>;
}) {
  const params = await props.params;
  const [propertyMeta, plans] = await Promise.all([
    getPropertyMeta(params.propertyId),
    getPlans(params.propertyId),
  ]);

  if (plans.length === 0) {
    return (
      <div className="max-w-7xl mx-auto py-10 space-y-8">
        <header>
          <p className="font-manrope text-xs font-bold text-brandmidblue uppercase tracking-widest mb-2">
            Retrofit Strategy
          </p>
        </header>
        <div className="bg-white rounded-2xl border border-dashed border-gray-200 p-16 flex flex-col items-center justify-center text-center gap-4">
          <div className="w-14 h-14 rounded-2xl bg-gray-50 border border-gray-200 flex items-center justify-center">
            <WrenchScrewdriverIcon className="w-7 h-7 text-gray-400" />
          </div>
          <div>
            <p className="font-manrope font-bold text-brandblue text-lg">
              No plans yet
            </p>
            <p className="text-sm text-gray-400 mt-1">
              Retrofit plans will appear here once they have been generated.
            </p>
          </div>
        </div>
      </div>
    );
  }

  function getPlanMetrics(plan: (typeof plans)[number]) {
    const totalEstimatedCost = plan.costOfWorks ?? 0;
    const totalSapPoints =
      (plan.postSapPoints ?? propertyMeta.currentSapPoints) -
      propertyMeta.currentSapPoints;
    const expectedSapPoints = Math.min(
      propertyMeta.currentSapPoints + totalSapPoints,
      100,
    );
    const expectedEpcRating = sapToEpc(expectedSapPoints);
    return { totalEstimatedCost, totalSapPoints, expectedEpcRating };
  }

  const defaultPlan = plans.find((p) => p.isDefault) ?? plans[0];
  const otherPlans = plans.filter((p) => p.id !== defaultPlan.id);
  const defaultMetrics = getPlanMetrics(defaultPlan);

  return (
    <div className="max-w-7xl mx-auto py-10 space-y-10">
      {/* Page header */}
      <header>
        <p className="font-manrope text-xs font-bold text-brandmidblue uppercase tracking-widest mb-2">
          Retrofit Strategy
        </p>
        <h1 className="font-manrope font-extrabold text-4xl text-brandblue tracking-tight">
          Retrofit Plans
        </h1>
      </header>

      {/* Hero — default plan + carbon impact card */}
      <PlanHeroCard
        planId={String(defaultPlan.id)}
        planName={defaultPlan.name}
        currentEpcRating={propertyMeta.currentEpcRating}
        expectedEpcRating={defaultMetrics.expectedEpcRating}
        totalEstimatedCost={defaultMetrics.totalEstimatedCost}
        totalSapPoints={defaultMetrics.totalSapPoints}
        co2Savings={defaultPlan.co2Savings ?? null}
        energyBillSavings={defaultPlan.energyBillSavings ?? null}
        valuationIncreaseLowerBound={
          defaultPlan.valuationIncreaseLowerBound ?? null
        }
        valuationIncreaseUpperBound={
          defaultPlan.valuationIncreaseUpperBound ?? null
        }
        createdAt={defaultPlan.createdAt}
      />

      {/* Secondary plans grid */}
      <section>
        {otherPlans.length > 0 && (
          <div className="flex items-center gap-3 mb-6">
            <p className="font-manrope text-xs font-bold text-brandmidblue uppercase tracking-widest">
              Other Plans
            </p>
            <span className="bg-gray-100 text-gray-500 text-[10px] font-bold px-2 py-0.5 rounded-full">
              {otherPlans.length}
            </span>
          </div>
        )}

        <div className="relative">
          {/* Gradient fade to indicate overflow */}
          <div className="pointer-events-none absolute right-0 inset-y-0 w-20 bg-gradient-to-l from-white to-transparent z-10" />
          <div className="flex gap-6 overflow-x-auto pb-4 scroll-smooth snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
            {otherPlans.map((plan) => {
              const { totalEstimatedCost, totalSapPoints, expectedEpcRating } =
                getPlanMetrics(plan);
              return (
                <div
                  key={String(plan.id)}
                  className="min-w-[300px] flex-shrink-0 snap-start"
                >
                  <PlanCard
                    expectedEpcRating={expectedEpcRating}
                    currentEpcRating={propertyMeta.currentEpcRating}
                    createdAt={plan.createdAt}
                    totalEstimatedCost={totalEstimatedCost}
                    totalSapPoints={totalSapPoints}
                    planName={plan.name}
                    planId={String(plan.id)}
                    isDefault={false}
                  />
                </div>
              );
            })}
          </div>
        </div>
      </section>
    </div>
  );
}
