import { MaintenanceRequest, TenantPhoto } from "@/src/types/admin/types";
import SectionHeader from "../SectionHeader";
import DataTable from "../DataTable";

interface Props {
  maintenanceRequest: MaintenanceRequest;
  photos: TenantPhoto[];
}

export default function MaintenanceIssueStep({ maintenanceRequest, photos }: Props) {
  const maintenanceIssuesData = maintenanceRequest.maintenanceIssues.map(issue => ({
    label: issue.category,
    value: issue.description || "N/A"
  }));

  if (maintenanceRequest.otherRequests) {
    maintenanceIssuesData.push({
      label: "Other Issues",
      value: maintenanceRequest.otherRequests
    });
  }

  return (
    <>
      <div className="p-6 pb-0 min-h-[260px]">
        <SectionHeader title="Maintenance Issue" />
        <div className="space-y-4">
          <DataTable data={maintenanceIssuesData} />

          {maintenanceRequest.description && (
            <div>
              <SectionHeader subtitle="Detailed Description" />
              <div className="overflow-hidden border border-gray-200 rounded-xl bg-gray-50 p-4 text-sm text-gray-700 italic leading-relaxed">
                "{maintenanceRequest.description}"
              </div>
            </div>
          )}
        </div>
      </div>

      <div className="p-6 min-h-[260px]">
        <SectionHeader title="Photos" />
        {photos && photos.length > 0 ? (
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 bg-gray-50 p-4 rounded-xl border border-gray-200">
            {photos.map((photo, idx) => (
              <div key={idx} className="relative group aspect-square">
                <img
                  src={photo.fileUrl}
                  alt={`Maintenance ${idx}`}
                  className="w-full h-full object-cover rounded-lg border border-gray-200 shadow-sm transition group-hover:opacity-90"
                />
              </div>
            ))}
          </div>
        ) : (
          <div className="bg-gray-50 p-8 rounded-xl border border-gray-200 text-center">
            <p className="text-gray-500 text-sm">No photos uploaded</p>
          </div>
        )}
      </div>
    </>
  );
}