"use client";

import { useState } from "react";
import ClickablePaginationStepper from "@/src/components/admin/ClickablePaginationStepper";
import { TenantMaintenanceDetails } from "@/src/types/admin/types";

// Import step components from _common
import {
  TenantInformationStep,
  AccessPermissionStep,
  MaintenanceIssueStep,
  UrgencyTimingStep,
  TenantSignatureStep
} from "../_common/components";

interface Props {
  data: TenantMaintenanceDetails;
}

export default function TenantMaintenanceRequestDetailList({ data }: Props) {
  const [activeStep, setActiveStep] = useState(1);

  const steps = [
    { id: 1, title: "Applicant Information", subtitle: "Tenant contact details and property address" },
    { id: 2, title: "Authorization & Pets", subtitle: "Maintenance authorization, contact preferences, and pet info" },
    { id: 3, title: "Maintenance Issues & Photos", subtitle: "maintenance categories, describe issues, and upload photos" },
    { id: 4, title: "Issue Details", subtitle: "When the issue started and urgency level" },
    { id: 5, title: "Signature", subtitle: "Digital signature and tenant certification" },
  ]

  const renderStepContent = () => {
    switch (activeStep) {
      case 1:
        return <TenantInformationStep applicantInfo={data.applicantInfo} />;
      case 2:
        return <AccessPermissionStep tenantInfo={data.tenantInfo} />;
      case 3:
        return <MaintenanceIssueStep maintenanceRequest={data.maintenanceRequest} photos={data.photos} />;
      case 4:
        return <UrgencyTimingStep maintenanceRequest={data.maintenanceRequest} />;
      case 5:
        return <TenantSignatureStep signature={data.signature} />;
      default:
        return null;
    }
  };

  return (
    <div className="space-y-6">
      <ClickablePaginationStepper
        steps={steps}
        activeStep={activeStep}
        onStepClick={(id) => setActiveStep(id)}
      />

      <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
        {renderStepContent()}
      </div>
    </div>
  );
}