import React, { useEffect, useState } from "react";
import { createJurors, getAllJurors, importJurors } from "@/services/jurorsService";
import { assignJurorToCase, alreadyAssignedToCase } from "@/services/caseService";
import CustomSelect from "../../../common/CustomSelect";
import { toast } from "react-toastify";

export default function AddJurorsBackup({ data }) {
  const [availableJurors, setAvailableJurors] = useState([]);
  const [selectedJurors, setSelectedJurors] = useState([]);
  const [currentStep, setCurrentStep] = useState(1);
  const [loading, setLoading] = useState(true);
  const [assignedJurors, setAssignedJurors] = useState([]);


  const fetchJurors = async () => {
    try {
      const { data } = await getAllJurors();
      setAvailableJurors(data.results || []);
    } catch {
      // toast.error("Failed to load jurors");
    } finally {
      setLoading(false);
    }
  };


  const fetchAssignedJurors = async () => {
    try {
      const response = await alreadyAssignedToCase(data.id);
      setAssignedJurors(response.data.jurors.map(j => j.id));
    } catch (error) {
      // toast.error("Failed to load assigned jurors");
    }
  };

  useEffect(() => {
    fetchJurors();
    fetchAssignedJurors();
  }, []);


  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    age: "",
    maritalStatus: "",
    hasChildren: false,
    educationLevel: "",
    profilePicture: null,
    profilePictureSource: "",
    phoneNumbers: [""],
    emails: [""],
    addresses: [
      {
        streetAddress: "",
        city: "",
        state: "",
        zipCode: "",
        startDate: "",
        endDate: ""
      }
    ],
    employmentHistory: [
      {
        empName: "",
        empAddress: "",
        jobTitle: "",
        zipCode: "",
        startDate: "",
        endDate: ""
      }
    ],
    socialMedia: [
      {
        platform: "",
        url: "",
        analystComments: ""
      }
    ],
    notes: ""
  });


  const handleCheckbox = (id) => {
    setSelectedJurors((prev) =>
      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
    );
  };

  // const handleInput = (e) => {
  //   setFormData({ ...formData, [e.target.name]: e.target.value });
  // };

  const handleInput = (e) => {
    const { name, value, files, type, checked } = e.target;

    setFormData((prev) => ({
      ...prev,
      [name]:
        type === "file"
          ? files[0]
          : type === "checkbox"
            ? checked
            : value,
    }));
  };

  const handleNext = () => {
    if (currentStep < 8) setCurrentStep(currentStep + 1);
  };

  const handlePrev = () => {
    if (currentStep > 1) setCurrentStep(currentStep - 1);
  };

  const handleAddJuror = async (e) => {
    e.preventDefault();

    try {
      const payload = new FormData();

      payload.append("first_name", formData.firstName);
      payload.append("last_name", formData.lastName);
      payload.append("age", formData.age);
      payload.append("marital_status", formData.maritalStatus);
      payload.append("has_children", formData.hasChildren);
      payload.append("education_level", formData.educationLevel);
      payload.append("notes", formData.notes);
      payload.append("phone_numbers", JSON.stringify(formData.phoneNumbers));
      payload.append("emails", JSON.stringify(formData.emails));
      const formattedAddresses = formData.addresses.map(addr => ({
        street_address: addr.streetAddress,
        city: addr.city,
        state: addr.state,
        zip_code: addr.zipCode,
        start_date: addr.startDate,
        end_date: addr.endDate
      }));
      payload.append("addresses", JSON.stringify(formattedAddresses));
      const formattedEmployment = formData.employmentHistory.map(job => ({
        emp_name: job.empName,
        emp_address: job.empAddress,
        job_title: job.jobTitle,
        zip_code: job.zipCode,
        start_date: job.startDate,
        end_date: job.endDate
      }));
      payload.append("employment_history", JSON.stringify(formattedEmployment));
      const formattedSocial = formData.socialMedia.map(sm => ({
        platform: sm.platform,
        url: sm.url,
        analyst_comments: sm.analystComments
      }));
      payload.append("social_media", JSON.stringify(formattedSocial));
      if (formData.profilePicture) {
        payload.append("profile_picture", formData.profilePicture);
      }

      await createJurors(payload);

      toast.success("Juror Added Successfully!");

      // Reset form
      setFormData({
        firstName: "",
        lastName: "",
        age: "",
        maritalStatus: "",
        hasChildren: false,
        educationLevel: "",
        profilePicture: null,
        profilePictureSource: "",
        phoneNumbers: [""],
        emails: [""],
        addresses: [
          {
            streetAddress: "",
            city: "",
            state: "",
            zipCode: "",
            startDate: "",
            endDate: ""
          }
        ],
        employmentHistory: [
          {
            empName: "",
            empAddress: "",
            jobTitle: "",
            zipCode: "",
            startDate: "",
            endDate: ""
          }
        ],
        socialMedia: [
          {
            platform: "",
            url: "",
            analystComments: ""
          }
        ],
        notes: ""
      });

    } catch (error) {
      console.error("Error while creating juror:", error);
      toast.error("Failed to add juror. Please try again.");
    }
  };


  const handleChange = (e) => {
    const { name, value } = e.target;

    setFormData((prev) => ({
      ...prev,
      [name]: value
    }));
  };

  const handleCsvUpload = async (event) => {
    const file = event.target.files[0];
    if (!file) return;

    const formData = new FormData();
    formData.append("file", file);

    try {
      await importJurors(formData);

      toast.success("CSV Imported Successfully!");
      const { data } = await getAllJurors();
      setAvailableJurors(data.results || []);

      event.target.value = "";

    } catch (error) {
      console.error("CSV Import Error:", error);
      toast.error("Failed to import CSV. Check CSV format.");
    }
  };

  const handleAssignJurors = async () => {
    if (selectedJurors.length === 0) {
      toast.warn("Select at least one juror");
      return;
    }

    try {
      await assignJurorToCase(data.id, { juror_ids: selectedJurors });
      toast.success("Jurors Assigned Successfully!");

      // Refresh UI
      fetchAssignedJurors();
      setSelectedJurors([]);
    } catch (error) {
      toast.error("Failed to assign jurors");
    }
  };




  return (
    <div className="profilefrmtabopen">
      <div className="tab-content" id="myTabContent">

        <div
          className="tab-pane fade show active"
          id="ViewCaseInfo-tab-pane"
          role="tabpanel"
          aria-labelledby="ViewCaseInfo-tab"
          tabIndex="0"
        >
          <div className="profilefrmshowsd">

            <div className="profilefrmhder">
              <h3>Juror Selection Status</h3>
              <p>
                {selectedJurors.length} juror(s) selected from {availableJurors.length} available • {availableJurors.length} currently
              </p>
            </div>

            <div className="row">

              {/* Left side Available Jurors */}
              <div className="col-xl-6 col-lg-6 col-sm-12 col-12 mt-3 mt-md-4">
                {/* <div className="col-xl-12 col-lg-12 col-sm-12 col-12 mt-3 mt-md-4"> */}
                <div className="casetabnx">

                  <div className="d-flex justify-content-between gap-2 mb-2 mb-md-3">
                    <div className="w-100">
                      <h4>Available Jurors ({availableJurors.length})</h4>
                      <p>Select jurors from the available pool to add to this case.</p>
                    </div>

                    <button
                      className="import-btn"
                      type="button"
                      onClick={() => document.getElementById("uploadCsv").click()}
                    >
                      <svg width="13" height="15" viewBox="0 0 13 15" fill="none">
                        <path
                          d="M7.4987 0.5V3.29948C7.4987 3.67071 7.64617 4.02674 7.90867 4.28924C8.17117 4.55175 8.5272 4.69922 8.89844 4.69922H11.6979M3.29948 8.19857H4.69922M7.4987 8.19857H8.89844M3.29948 10.998H4.69922M7.4987 10.998H8.89844M8.19857 0.5H1.89974C1.52851 0.5 1.17248 0.647472 0.909974 0.909974C0.647472 1.17248 0.5 1.52851 0.5 1.89974V13.0977C0.5 13.4689 0.647472 13.8249 0.909974 14.0874C1.17248 14.3499 1.52851 14.4974 1.89974 14.4974H10.2982C10.6694 14.4974 11.0254 14.3499 11.2879 14.0874C11.5504 13.8249 11.6979 13.4689 11.6979 13.0977V3.99935L8.19857 0.5Z"
                          stroke="currentColor"
                        />
                      </svg>
                      <span>Import CSV</span>
                    </button>

                    <input
                      type="file"
                      id="uploadCsv"
                      accept=".csv"
                      style={{ display: "none" }}
                      onChange={handleCsvUpload}
                    />

                  </div>

                  <div className="importedlistouter">
                    {availableJurors.map((juror) => (
                      <div className="importedlist" key={juror.id}>
                        <div className="form-check">
                          <input
                            className="form-check-input"
                            type="checkbox"
                            id={`juror-${juror.id}`}
                            disabled={assignedJurors.includes(juror.id)}
                            checked={
                              assignedJurors.includes(juror.id) || selectedJurors.includes(juror.id)
                            }
                            onChange={() => handleCheckbox(juror.id)}
                          />

                        </div>

                        <div className="importedmediabx">
                          <div className="importedmedia">
                            {`${juror.first_name?.[0] || ""}${juror.last_name?.[0] || ""}`.toUpperCase()}
                          </div>
                          <div className="importedmediact">

                            <h5 className="">
                              {juror.first_name} {juror.last_name}
                              {assignedJurors.includes(juror.id) && (
                                <span className="importedbadge">Already in case</span>
                              )}
                            </h5>
                            <p>
                              {juror.employment_history && juror.employment_history.length > 0
                                ? juror.employment_history
                                  .map(
                                    (emp) =>
                                      `${emp.emp_name} (${emp.job_title}, ${emp.emp_address})`
                                  )
                                  .join(", ")
                                : "No employment info"}
                            </p>
                          </div>
                        </div>

                        <div className="importedlistbtm">
                          <p>
                            {juror.addresses?.[0]?.street_address}, {juror.addresses?.[0]?.city},
                            {juror.addresses?.[0]?.state} {juror.addresses?.[0]?.zip_code}
                          </p>

                          <p>{juror.phone_numbers?.[0] || "No phone"}</p>

                        </div>
                      </div>
                    ))}
                  </div>

                  <div className="text-end">
                    <button className="adduser d-inline-flex gap-2 mt-3" type="button" onClick={handleAssignJurors}>
                      <svg width="15" height="13" viewBox="0 0 15 13" fill="none">
                        <path
                          d="M9.76002 12.4057V11.0829C9.76002 10.3812 9.48128 9.70824 8.98511 9.21207C8.48894 8.7159 7.81599 8.43716 7.1143 8.43716H3.14572C2.44403 8.43716 1.77108 8.7159 1.27491 9.21207C0.778745 9.70824 0.5 10.3812 0.5 11.0829V12.4057M12.3633 3.97656V6.11328M12.3633 6.11328V8.25M12.3633 6.11328H14.5M12.3633 6.11328H10.2266M7.77573 3.14572C7.77573 4.60691 6.5912 5.79144 5.13001 5.79144C3.66882 5.79144 2.48429 4.60691 2.48429 3.14572C2.48429 1.68453 3.66882 0.5 5.13001 0.5C6.5912 0.5 7.77573 1.68453 7.77573 3.14572Z"
                          stroke="currentColor"
                        />
                      </svg>
                      <span>Assign Analyst</span>
                    </button>
                  </div>
                </div>
              </div>

              {/* Right side Step Form */}
              <div className="col-xl-6 col-lg-6 col-sm-12 col-12 mt-3 mt-md-4">
                <div className="casetabnx">

                  <div className="d-flex justify-content-between gap-2 mb-2 mb-md-3">
                    <div className="w-100">
                      <h4>Add New Juror</h4>
                      <p>Create a new juror profile and add them to this case.</p>
                    </div>
                    <span className="step-label">Step {currentStep} of 8</span>
                  </div>

                  <div className="step-progress-wrapper">
                    <div className="step-progress">
                      {[1, 2, 3, 4, 5, 6, 7, 8].map((step) => (
                        <div
                          key={step}
                          className={`step-item ${currentStep >= step ? "active" : ""}`}
                        ></div>
                      ))}
                    </div>
                  </div>


                  <div className="row gx-2">
                    {currentStep === 1 && (
                      <>
                        <div className="col-lg-12 col-sm-12 col-12">
                          <div className="datafrm">
                            <label>Step 1: Indentification </label>
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>ID <span style={{ color: "red" }}>*</span></label>
                            <input type="text" placeholder="Enter ID" name="id" value={formData.id} onChange={handleInput} />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Jury Number <span style={{ color: "red" }}>*</span></label>
                            <input type="text" placeholder="Enter Jury Number" name="juryNumber" value={formData.juryNumber} onChange={handleInput} />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Case Number <span style={{ color: "red" }}>*</span></label>
                            <input type="text" placeholder="Enter Case Number" name="caseNumber" value={formData.caseNumber} onChange={handleInput} />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>First Name <span style={{ color: "red" }}>*</span></label>
                            <input type="text" placeholder="Enter first name" name="firstName" value={formData.firstName} onChange={handleInput} />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Middle Name</label>
                            <input type="text" placeholder="Enter middle name" name="middleName" value={formData.middleName} onChange={handleInput} />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Last Name <span style={{ color: "red" }}>*</span></label>
                            <input type="text" placeholder="Enter last name" name="lastName" value={formData.lastName} onChange={handleInput} />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>
                              Photo
                            </label>
                            <input
                              type="file"
                              name="photo"
                              accept="image/*"
                              onChange={handleInput}
                            />
                            {formData.photo && (
                              <div style={{ marginTop: "10px" }}>
                                <img
                                  src={
                                    typeof formData.photo === "string"
                                      ? formData.photo
                                      : URL.createObjectURL(formData.photo)
                                  }
                                  alt="Preview"
                                  width="100"
                                  height="100"
                                  style={{ objectFit: "cover", borderRadius: "8px" }}
                                />
                              </div>
                            )}
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrm">
                            <label className="required">* Required fields</label>
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrmbtn">
                            <ul>
                              <li><button className="canselbtn">Cancel</button></li>
                              <li><button onClick={handleNext}>Save & Next</button></li>
                            </ul>
                          </div>
                        </div>
                      </>
                    )}

                    {currentStep === 2 && (
                      <>
                        <div className="col-lg-12 col-sm-12 col-12">
                          <div className="datafrm d-flex justify-content-between align-items-center">
                            <label>Step 2: Contact Information</label>

                            <button
                              type="button"
                              className="add-btn"
                              onClick={() => {
                                setFormData({
                                  ...formData,
                                  addresses: [
                                    ...formData.addresses,
                                    {
                                      primaryEmail: "",
                                      streetAddress: "",
                                      city: "",
                                      state: "",
                                      county: "",
                                      zipCode: "",
                                      houseOwnership: "",
                                      primaryPhone: "",
                                      mobilePhone: "",
                                    }
                                  ]
                                });
                              }}
                            >
                              + Add Address
                            </button>
                          </div>
                        </div>

                        {formData.addresses.map((addr, index) => (
                          <div className="col-12" key={index}>
                            <div className="row gx-2">

                              {index > 0 && (
                                <div className="col-12 d-flex justify-content-end mt-4">
                                  <button
                                    type="button"
                                    className="remove-btn"
                                    style={{ color: "red" }}
                                    onClick={() => {
                                      const updated = formData.addresses.filter(
                                        (_, i) => i !== index
                                      );

                                      setFormData({
                                        ...formData,
                                        addresses: updated
                                      });
                                    }}
                                  >
                                    - Remove Address
                                  </button>
                                </div>
                              )}

                              <div className="col-lg-6 col-sm-6 col-12">
                                <div className="datafrm">
                                  <label>Primary Email</label>
                                  <input
                                    type="email"
                                    placeholder="Enter email"
                                    value={addr.primaryEmail}
                                    onChange={(e) => {
                                      const updated = [...formData.addresses];
                                      updated[index].primaryEmail = e.target.value;
                                      setFormData({
                                        ...formData,
                                        addresses: updated
                                      });
                                    }}
                                  />
                                </div>
                              </div>

                              <div className="col-lg-6 col-sm-6 col-12">
                                <div className="datafrm">
                                  <label>Street Address</label>
                                  <input
                                    type="text"
                                    placeholder="Enter street address"
                                    value={addr.streetAddress}
                                    onChange={(e) => {
                                      const updated = [...formData.addresses];
                                      updated[index].streetAddress = e.target.value;
                                      setFormData({
                                        ...formData,
                                        addresses: updated
                                      });
                                    }}
                                  />
                                </div>
                              </div>

                              <div className="col-lg-6 col-sm-6 col-12">
                                <div className="datafrm">
                                  <label>City</label>
                                  <input
                                    type="text"
                                    placeholder="Enter city"
                                    value={addr.city}
                                    onChange={(e) => {
                                      const updated = [...formData.addresses];
                                      updated[index].city = e.target.value;
                                      setFormData({
                                        ...formData,
                                        addresses: updated
                                      });
                                    }}
                                  />
                                </div>
                              </div>

                              <div className="col-lg-6 col-sm-6 col-12">
                                <div className="datafrm">
                                  <label>State</label>
                                  <input
                                    type="text"
                                    placeholder="Enter state"
                                    value={addr.state}
                                    onChange={(e) => {
                                      const updated = [...formData.addresses];
                                      updated[index].state = e.target.value;
                                      setFormData({
                                        ...formData,
                                        addresses: updated
                                      });
                                    }}
                                  />
                                </div>
                              </div>

                              <div className="col-lg-6 col-sm-6 col-12">
                                <div className="datafrm">
                                  <label>County</label>
                                  <input
                                    type="text"
                                    placeholder="Enter county"
                                    value={addr.county}
                                    onChange={(e) => {
                                      const updated = [...formData.addresses];
                                      updated[index].county = e.target.value;
                                      setFormData({
                                        ...formData,
                                        addresses: updated
                                      });
                                    }}
                                  />
                                </div>
                              </div>

                              <div className="col-lg-6 col-sm-6 col-12">
                                <div className="datafrm">
                                  <label>Zip</label>
                                  <input
                                    type="text"
                                    placeholder="Enter zip"
                                    value={addr.zipCode}
                                    onChange={(e) => {
                                      const updated = [...formData.addresses];
                                      updated[index].zipCode = e.target.value;
                                      setFormData({
                                        ...formData,
                                        addresses: updated
                                      });
                                    }}
                                  />
                                </div>
                              </div>

                              <div className="col-lg-6 col-sm-6 col-12">
                                <div className="datafrm">
                                  <label>House Ownership</label>

                                  <CustomSelect
                                    value={addr.houseOwnership}
                                    placeholder="Select ownership"
                                    options={[
                                      { label: "Owned", value: "owned" },
                                      { label: "Rented", value: "rented" },
                                      { label: "Family", value: "family" }
                                    ]}
                                    onChange={(e) => {
                                      const updated = [...formData.addresses];
                                      updated[index].houseOwnership = e.target.value;

                                      setFormData({
                                        ...formData,
                                        addresses: updated
                                      });
                                    }}
                                  />
                                </div>
                              </div>

                              <div className="col-lg-6 col-sm-6 col-12">
                                <div className="datafrm">
                                  <label>Primary Phone Number</label>
                                  <input
                                    type="text"
                                    placeholder="Enter primary phone"
                                    value={addr.primaryPhone}
                                    onChange={(e) => {
                                      const updated = [...formData.addresses];
                                      updated[index].primaryPhone = e.target.value;
                                      setFormData({
                                        ...formData,
                                        addresses: updated
                                      });
                                    }}
                                  />
                                </div>
                              </div>

                              <div className="col-lg-6 col-sm-6 col-12">
                                <div className="datafrm">
                                  <label>Mobile Phone Number</label>
                                  <input
                                    type="text"
                                    placeholder="Enter mobile phone"
                                    value={addr.mobilePhone}
                                    onChange={(e) => {
                                      const updated = [...formData.addresses];
                                      updated[index].mobilePhone = e.target.value;
                                      setFormData({
                                        ...formData,
                                        addresses: updated
                                      });
                                    }}
                                  />
                                </div>
                              </div>

                            </div>
                          </div>
                        ))}

                        <div className="col-12">
                          <div className="datafrmbtn">
                            <ul>
                              <li>
                                <button className="canselbtn" onClick={handlePrev}>
                                  Previous
                                </button>
                              </li>

                              <li>
                                <button onClick={handleNext}>
                                  Next
                                </button>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </>
                    )}

                    {currentStep === 3 && (
                      <>
                        <div className="col-lg-12 col-sm-12 col-12">
                          <div className="datafrm">
                            <label>Step 3: Demographics</label>
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Gender <span style={{ color: "red" }}>*</span></label>

                            <CustomSelect
                              name="gender"
                              value={formData.gender}
                              onChange={handleInput}
                              placeholder="Select Gender"
                              options={[
                                { label: "Male", value: "M" },
                                { label: "Female", value: "F" },
                                { label: "Other", value: "O" }
                              ]}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Age</label>
                            <input
                              type="number"
                              placeholder="Enter age"
                              name="age"
                              value={formData.age}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>DOB</label>
                            <input
                              type="date"
                              placeholder="YYYY/MM/DD"
                              name="dob"
                              value={formData.dob}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Race</label>
                            <input
                              type="text"
                              placeholder="Enter race"
                              name="race"
                              value={formData.race}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Education Level</label>

                            <CustomSelect
                              name="educationLevel"
                              value={formData.educationLevel}
                              onChange={handleInput}
                              placeholder="Select Education"
                              options={[
                                { label: "Unknown", value: "Unknown" },
                                { label: "Highschool", value: "Highschool" },
                                { label: "Tradeschool", value: "Tradeschool" },
                                { label: "College", value: "College" },
                                { label: "University", value: "University" },
                                { label: "Post Graduate", value: "Post Graduate" },
                                { label: "Other", value: "Other" }
                              ]}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Religion</label>
                            <input
                              type="text"
                              placeholder="Enter religion"
                              name="religion"
                              value={formData.religion}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>US Citizen</label>

                            <CustomSelect
                              name="usCitizen"
                              value={formData.usCitizen}
                              onChange={handleInput}
                              placeholder="Select"
                              options={[
                                { label: "Yes", value: "Yes" },
                                { label: "No", value: "No" },
                                { label: "Unknown", value: "Unknown" }
                              ]}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Birth Country</label>
                            <input
                              type="text"
                              placeholder="Enter birth country"
                              name="birthCountry"
                              value={formData.birthCountry}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Political Affiliation</label>
                            <input
                              type="text"
                              placeholder="Enter political affiliation"
                              name="politicalAffiliation"
                              value={formData.politicalAffiliation}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrm">
                            <label>Voting Record</label>

                            <textarea
                              rows="4"
                              placeholder="Enter voting record"
                              name="votingRecord"
                              value={formData.votingRecord}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrmbtn">
                            <ul>
                              <li>
                                <button className="canselbtn" onClick={handlePrev}>
                                  Previous
                                </button>
                              </li>

                              <li>
                                <button onClick={handleNext}>
                                  Next
                                </button>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </>
                    )}

                    {currentStep === 4 && (
                      <>
                        <div className="col-lg-12 col-sm-12 col-12">
                          <div className="datafrm">
                            <label>Step 4: Family Background</label>
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Marital Status</label>

                            <CustomSelect
                              name="maritalStatus"
                              value={formData.maritalStatus}
                              onChange={handleInput}
                              placeholder="Select Marital Status"
                              options={[
                                { label: "Unmarried", value: "unmarried" },
                                { label: "Married", value: "married" },
                                { label: "Divorced", value: "divorced" },
                                { label: "Widowed", value: "widowed" }
                              ]}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Spouse Full Name</label>
                            <input
                              type="text"
                              placeholder="Enter spouse full name"
                              name="spouseFullName"
                              value={formData.spouseFullName}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Spouse Employment Status</label>

                            <CustomSelect
                              name="spouseEmploymentStatus"
                              value={formData.spouseEmploymentStatus}
                              onChange={handleInput}
                              placeholder="Employment Status"
                              options={[
                                { label: "Unknown", value: "unknown" },
                                { label: "Retired", value: "retired" },
                                { label: "Self Employed", value: "selfemployed" },
                                { label: "Employed", value: "employed" },
                                { label: "Unemployed", value: "unemployed" },
                                { label: "Other", value: "other" }
                              ]}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Spouse Occupation</label>
                            <input
                              type="text"
                              placeholder="Enter spouse occupation"
                              name="spouseOccupation"
                              value={formData.spouseOccupation}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Spouse Employer Name</label>
                            <input
                              type="text"
                              placeholder="Enter employer name"
                              name="spouseEmployerName"
                              value={formData.spouseEmployerName}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrm">
                            <label>Relative in Law Enforcement?</label>

                            <textarea
                              rows="4"
                              placeholder="Enter details"
                              name="relativeLawEnforcement"
                              value={formData.relativeLawEnforcement}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrmbtn">
                            <ul>
                              <li>
                                <button
                                  className="canselbtn"
                                  onClick={handlePrev}
                                >
                                  Previous
                                </button>
                              </li>

                              <li>
                                <button onClick={handleNext}>
                                  Next
                                </button>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </>
                    )}

                    {currentStep === 5 && (
                      <>
                        <div className="col-lg-12 col-sm-12 col-12">
                          <div className="datafrm">
                            <label>Step 5: Employment</label>
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Employment Status</label>

                            <CustomSelect
                              name="employmentStatus"
                              value={formData.employmentStatus}
                              onChange={handleInput}
                              placeholder="Employment Status"
                              options={[
                                { label: "Unknown", value: "unknown" },
                                { label: "Retired", value: "retired" },
                                { label: "Self Employed", value: "selfemployed" },
                                { label: "Employed", value: "employed" },
                                { label: "Unemployed", value: "unemployed" },
                                { label: "Other", value: "other" }
                              ]}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Occupation</label>
                            <input
                              type="text"
                              placeholder="Enter occupation"
                              name="occupation"
                              value={formData.occupation}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Job Title</label>
                            <input
                              type="text"
                              placeholder="Enter job title"
                              name="jobTitle"
                              value={formData.jobTitle}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Employer / Business Name</label>
                            <input
                              type="text"
                              placeholder="Enter employer/business name"
                              name="employerBusinessName"
                              value={formData.employerBusinessName}
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrmbtn">
                            <ul>
                              <li>
                                <button
                                  className="canselbtn"
                                  onClick={handlePrev}
                                >
                                  Previous
                                </button>
                              </li>

                              <li>
                                <button onClick={handleNext}>
                                  Next
                                </button>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </>
                    )}

                    {currentStep === 6 && (
                      <>
                        <div className="col-lg-12 col-sm-12 col-12">
                          <div className="datafrm">
                            <label>Step 6: Prior Jury Experience</label>
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Civil Jury</label>

                            <CustomSelect
                              name="civilJury"
                              value={formData.civilJury}
                              onChange={handleInput}
                              placeholder="Select"
                              options={[
                                { label: "Yes", value: true },
                                { label: "No", value: false }
                              ]}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Criminal Jury</label>

                            <CustomSelect
                              name="criminalJury"
                              value={formData.criminalJury}
                              onChange={handleInput}
                              placeholder="Select"
                              options={[
                                { label: "Yes", value: true },
                                { label: "No", value: false }
                              ]}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Grand Jury</label>

                            <CustomSelect
                              name="grandJury"
                              value={formData.grandJury}
                              onChange={handleInput}
                              placeholder="Select"
                              options={[
                                { label: "Yes", value: true },
                                { label: "No", value: false }
                              ]}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Verdict Reached</label>

                            <CustomSelect
                              name="verdictReached"
                              value={formData.verdictReached}
                              onChange={handleInput}
                              placeholder="Select"
                              options={[
                                { label: "Yes", value: "Y" },
                                { label: "No", value: "N" },
                                { label: "N/A", value: "NA" }
                              ]}
                            />
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrmbtn">
                            <ul>
                              <li>
                                <button
                                  className="canselbtn"
                                  onClick={handlePrev}
                                >
                                  Previous
                                </button>
                              </li>

                              <li>
                                <button onClick={handleNext}>
                                  Next
                                </button>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </>
                    )}

                    {currentStep === 7 && (
                      <>
                        <div className="col-lg-12 col-sm-12 col-12">
                          <div className="datafrm">
                            <label>Step 7: Prior Trial Experience</label>
                          </div>
                        </div>

                        {[
                          {
                            label: "Party to Civil Suit?",
                            name: "partyToCivilSuit"
                          },
                          {
                            label: "Accused in Criminal Trial?",
                            name: "accusedCriminalTrial"
                          },
                          {
                            label: "Complainant in Criminal Trial?",
                            name: "complainantCriminalTrial"
                          },
                          {
                            label: "Witness in Criminal Trial?",
                            name: "witnessCriminalTrial"
                          },
                          {
                            label: "Felony Probation History?",
                            name: "felonyProbationHistory"
                          },
                          {
                            label: "Theft Conviction?",
                            name: "misdemeanorTheftConviction"
                          }
                        ].map((item, index) => (
                          <div className="col-lg-6 col-sm-6 col-12" key={index}>
                            <div className="datafrm">
                              <label>{item.label}</label>

                              <CustomSelect
                                name={item.name}
                                value={formData[item.name]}
                                onChange={handleInput}
                                placeholder="Select"
                                options={[
                                  { label: "Yes", value: true },
                                  { label: "No", value: false }
                                ]}
                              />
                            </div>
                          </div>
                        ))}

                        <div className="col-lg-12 col-sm-12 col-12">
                          <div className="datafrm">
                            <label>Social Information Link</label>

                            <input
                              type="text"
                              name="socialInformationLink"
                              value={formData.socialInformationLink}
                              placeholder="Enter social link"
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrm">
                            <label>Analyst Notes</label>

                            <textarea
                              rows="4"
                              name="analystNotes"
                              value={formData.analystNotes}
                              placeholder="Enter analyst notes"
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrmbtn">
                            <ul>
                              <li>
                                <button
                                  className="canselbtn"
                                  onClick={handlePrev}
                                >
                                  Previous
                                </button>
                              </li>

                              <li>
                                <button onClick={handleNext}>
                                  Next
                                </button>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </>
                    )}

                    {currentStep === 8 && (
                      <>
                        <div className="col-lg-12 col-sm-12 col-12">
                          <div className="datafrm">
                            <label>Step 8: Internal Use Fields</label>
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrm">
                            <label>IDI JSON</label>

                            <textarea
                              rows="5"
                              name="idiJson"
                              value={formData.idiJson}
                              placeholder="Paste JSON data"
                              onChange={handleInput}
                            />
                          </div>
                        </div>

                        <div className="col-lg-6 col-sm-6 col-12">
                          <div className="datafrm">
                            <label>Status <span style={{ color: "red" }}>*</span></label>

                            <CustomSelect
                              name="status"
                              value={formData.status}
                              onChange={handleInput}
                              placeholder="Select Status"
                              options={[
                                {
                                  label: "UNASSIGNED",
                                  value: "unassigned"
                                },
                                {
                                  label: "ASSIGNED",
                                  value: "assigned"
                                },
                                {
                                  label: "WIP",
                                  value: "wip"
                                },
                                {
                                  label: "IN REVIEW",
                                  value: "in_review"
                                },
                                {
                                  label: "READY",
                                  value: "ready"
                                },
                                {
                                  label: "SELECTED",
                                  value: "selected"
                                },
                                {
                                  label: "REJECTED",
                                  value: "rejected"
                                }
                              ]}
                            />
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrmbtn">
                            <ul>
                              <li>
                                <button
                                  className="canselbtn"
                                  onClick={handlePrev}
                                >
                                  Previous
                                </button>
                              </li>

                              <li>
                                <button onClick={handleAddJuror}>
                                  Submit
                                </button>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </>
                    )}

                    {currentStep === 9 && (
                      <>
                        <div className="col-lg-12 col-sm-12 col-12">
                          <div className="datafrm">
                            <label>Step 5: Additional Notes</label>
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrm">
                            <label>Notes</label>
                            <textarea
                              name="notes"
                              placeholder="Enter any additional notes or comments about this juror..."
                              value={formData.notes}
                              onChange={handleInput}
                            ></textarea>
                          </div>
                        </div>

                        <div className="col-12">
                          <div className="datafrmbtn">
                            <ul>
                              <li>
                                <button className="canselbtn" onClick={handlePrev}>
                                  Previous
                                </button>
                              </li>
                              <li>
                                <button onClick={handleAddJuror}>
                                  Add Juror
                                </button>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </>
                    )}

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
