"use client";

import { parseMeasures } from "@/app/lib/parseMeasures";
import type { ClassifiedDeal, PortfolioCapabilityType } from "../types";
import { PibiSection } from "../PibiSection";
import { SectionHeader, SECTION_TITLES } from "./primitives";
import { SurveyRequestSection } from "./SurveyRequestSection";
import { RemovalRequestSection } from "./RemovalRequestSection";

interface PibiSurveysTabContentProps {
  deal: ClassifiedDeal;
  portfolioId: string;
  userRole: string;
  userCapability: PortfolioCapabilityType;
}

export function PibiSurveysTabContent({
  deal,
  portfolioId,
  userRole,
  userCapability,
}: PibiSurveysTabContentProps) {
  const isApprover = userCapability.includes("approver");

  return (
    <>
      <div>
        <SectionHeader id="pibi" label={SECTION_TITLES.pibi} />
        <PibiSection
          dealId={deal.dealId}
          portfolioId={portfolioId}
          proposedMeasures={parseMeasures(deal.proposedMeasures ?? null)}
          canEdit={isApprover}
        />
      </div>
      <div className="border-t border-gray-100 pt-4">
        <h3 className="text-xs font-bold uppercase tracking-wider text-gray-400 mb-3">
          Survey Request
        </h3>
        <SurveyRequestSection
          dealId={deal.dealId}
          portfolioId={portfolioId}
          canEdit={isApprover}
        />
      </div>
      <div className="border-t border-gray-100 pt-4">
        <h3 className="text-xs font-bold uppercase tracking-wider text-gray-400 mb-3">
          Project Removal
        </h3>
        <RemovalRequestSection
          dealId={deal.dealId}
          portfolioId={portfolioId}
          userRole={userRole}
          userCapability={userCapability}
        />
      </div>
    </>
  );
}
