import { TenantInfo } from "@/src/types/admin/types";
import SectionHeader from "../SectionHeader";
import DataTable from "../DataTable";

interface Props {
  tenantInfo: TenantInfo;
}

export default function AccessPermissionStep({ tenantInfo }: Props) {
  const getPreferredContactMethods = () => {
    const methods = [];
    if (tenantInfo.preferredContact.phone) methods.push("Phone");
    if (tenantInfo.preferredContact.text) methods.push("Text");
    if (tenantInfo.preferredContact.email) methods.push("Email");
    return methods.length > 0 ? methods.join(", ") : "None";
  };

  const accessPermissionData = [
    { 
      label: "Authorize Maintenance Staff", 
      value: tenantInfo.authorizeMaintenance ? "Yes" : "No" 
    },
    { 
      label: "Contact Me to Schedule", 
      value: tenantInfo.contactToSchedule ? "Yes" : "No" 
    },
    { 
      label: "Preferred Contact Method", 
      value: getPreferredContactMethods() 
    },
  ];

  const petInfoData = [
    { 
      label: "Pets in Unit", 
      value: tenantInfo.hasPets ? "Yes" : "No" 
    },
    ...(tenantInfo.hasPets ? [{ 
      label: "Type of Pet", 
      value: tenantInfo.petType || "N/A" 
    }] : [])
  ];

  return (
    <>
      <div className="p-6 pb-0">
        <SectionHeader title="Access Permission" />
        <DataTable data={accessPermissionData} />
      </div>
      <div className="p-6 min-h-[260px]">
        <SectionHeader title="Pet Information" />
        <div className="space-y-4">
          <DataTable data={petInfoData} />

          {tenantInfo.hasPets && tenantInfo.petSecurityPlan && (
            <div>
              <SectionHeader subtitle="Pet Security Plan" />
              <div className="overflow-hidden border border-teal-100 rounded-xl bg-teal-50/30 p-4 text-sm font-semibold text-gray-700">
                {tenantInfo.petSecurityPlan}
              </div>
            </div>
          )}
        </div>
      </div>
    </>
  );
}