import DataTable from "../../_common/components/DataTable";
import SectionHeader from "../../_common/components/SectionHeader";

interface CertificationData {
  title: string;
  signer: string;
  date: string;
  signatureUrl?: string;
}

interface DualSignature {
  applicant: {
    signer: string;
    date: string;
    signatureUrl?: string;
  };
  coApplicant: {
    signer: string;
    date: string;
    signatureUrl?: string;
  };
}

interface FTHBCertificationStepProps {
  certifications: CertificationData[];
  bidResponsibility?: DualSignature;
}

export default function FTHBCertificationStep({ 
  certifications, 
  bidResponsibility 
}: FTHBCertificationStepProps) {
  return (
    <div className="p-6 min-h-[260px]">
      <SectionHeader title="Certifications & Authorizations" className="border-b pb-4 mb-4" />

      <div className="max-h-[500px] overflow-y-auto pr-2 space-y-10 custom-scrollbar">
        {certifications.map((cert, idx) => (
          <div key={idx} className="space-y-3">
            <p className="text-sm font-bold text-gray-700 uppercase tracking-tight">
              {cert.title}
            </p>
            <div className="flex flex-col md:flex-row items-start gap-6">
              <div className="shrink-0 border-2 border-dashed border-gray-200 rounded-md bg-white p-2">
                <img
                  src={cert.signatureUrl || "https://a.storyblok.com/f/191576/1176x882/0707bde47c/make_signature_hero_after.webp"}
                  alt="Signature"
                  className="h-16 w-32 object-contain"
                />
              </div>
              <div className="flex-1 w-full">
                <DataTable 
                  data={[
                    { label: "Legal Name", value: cert.signer },
                    { label: "Date & Time", value: cert.date },
                  ]} 
                />
              </div>
            </div>
          </div>
        ))}

        {bidResponsibility && (
          <div className="space-y-4">
            <p className="text-sm font-bold text-gray-700 uppercase tracking-tight border-t pt-6">
              BID Responsibility / Subordination of AHC Notes & Mortgages
            </p>

            <div className="grid grid-cols-1 gap-6">
              {/* Applicant Signature */}
              <div className="space-y-2">
                <SectionHeader subtitle="Applicant" />
                <div className="flex flex-col md:flex-row items-start gap-6">
                  <div className="shrink-0 border-2 border-dashed border-gray-200 rounded-md bg-white p-2">
                    <img
                      src={bidResponsibility.applicant.signatureUrl || "https://a.storyblok.com/f/191576/1176x882/0707bde47c/make_signature_hero_after.webp"}
                      alt="Signature"
                      className="h-16 w-32 object-contain"
                    />
                  </div>
                  <div className="flex-1 w-full">
                    <DataTable 
                      data={[
                        { label: "Legal Name", value: bidResponsibility.applicant.signer },
                        { label: "Date & Time", value: bidResponsibility.applicant.date },
                      ]} 
                    />
                  </div>
                </div>
              </div>

              {/* Co-Applicant Signature */}
              <div className="space-y-2">
                <SectionHeader subtitle="Co-Applicant" />
                <div className="flex flex-col md:flex-row items-start gap-6">
                  <div className="shrink-0 border-2 border-dashed border-gray-200 rounded-md bg-white p-2">
                    <img
                      src={bidResponsibility.coApplicant.signatureUrl || "https://a.storyblok.com/f/191576/1176x882/0707bde47c/make_signature_hero_after.webp"}
                      alt="Signature"
                      className="h-16 w-32 object-contain"
                    />
                  </div>
                  <div className="flex-1 w-full">
                    <DataTable 
                      data={[
                        { label: "Legal Name", value: bidResponsibility.coApplicant.signer },
                        { label: "Date & Time", value: bidResponsibility.coApplicant.date },
                      ]} 
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>

      <style jsx>{`
        .custom-scrollbar::-webkit-scrollbar {
          width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
          background: #f1f1f1;
          border-radius: 10px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
          background: #e2e8f0;
          border-radius: 10px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
          background: #cbd5e1;
        }
      `}</style>
    </div>
  );
}