"use client";

import { useState } from "react";
import { submitEmploymentFinancial } from "@/modules/api/meta-account-step/employmentFinancial";
import { useEmploymentFinancial } from "@/context/EmploymentFinancial";
import StepperBreadcrumb from "@/components/StepperBreadcrumb";

const OCCUPATION_OPTIONS = [
  { value: "LEGISLATIVE_AUDIT_OFFICIAL", label: "Pejabat Lembaga Legislatif dan Pemeriksaan" },
  { value: "ENTREPRENEUR", label: "Pengusaha/Wirausaha" },
  { value: "PRIVATE_EMPLOYEE", label: "Pegawai Swasta" },
  { value: "SOE_EMPLOYEE", label: "Pegawai BUMN/BUMD (termasuk pensiunan)" },
  { value: "CIVIL_SERVANT", label: "PNS (termasuk pensiunan)" },
  { value: "HOUSEWIFE", label: "Ibu Rumah Tangga" },
  { value: "PROFESSIONAL_CONSULTANT", label: "Profesional dan Konsultan" },
  { value: "STUDENT", label: "Pelajar/Mahasiswa" },
  { value: "MILITARY_POLICE", label: "TNI/POLRI (termasuk pensiunan)" },
  { value: "BANK_EMPLOYEE", label: "Pegawai Bank" },
  { value: "TRADER", label: "Pedagang" },
  { value: "CORPORATION", label: "Korporasi" },
  { value: "FOUNDATION_BOARD_EMPLOYEE", label: "Pengurus dan pegawai yayasan atau lembaga berbadan hukum lainnya" },
  { value: "TEACHER_LECTURER", label: "Pengajar dan Dosen" },
  { value: "POLITICAL_PARTY_BOARD", label: "Pengurus PARPOL" },
  { value: "RELIGIOUS_LEADER", label: "Ulama/ Pendeta/Pimpinan organisasi dan kelompok keagamaan" },
  { value: "NGO_BOARD_EMPLOYEE", label: "Pengurus atau pegawai LSM atau organissasi tidak berbadan hukum lainnya" },
  { value: "LABOR_DOMESTIC_SECURITY", label: "Buruh, Pembantu Rumah Tangga dan Tenaga Keaman" },
  { value: "CRAFTSMAN", label: "Pengrajin" },
  { value: "FARMER_FISHERMAN", label: "Petani dan Nelayan" },
];

const BANK_OPTIONS = ["BCA", "BNI", "BRI", "Mandiri", "Bank Lain"];

const BANK_ACCOUNT_TYPE_OPTIONS = ["Tabungan", "Giro", "Lainnya"];

const getBankNameOption = (bankName = "") => {
  if (!bankName) {
    return "";
  }

  return BANK_OPTIONS.includes(bankName) ? bankName : "Bank Lain";
};

const getBankPayloadName = (bank) => {
  const selectedOption = bank.bank_name_option || getBankNameOption(bank.bank_name);

  if (selectedOption === "Bank Lain") {
    return bank.bank_name_custom || bank.bank_name || "";
  }

  return selectedOption;
};

const getBankAccountTypeOption = (bankAccountType = "") => {
  if (!bankAccountType) {
    return "";
  }

  return BANK_ACCOUNT_TYPE_OPTIONS.includes(bankAccountType) ? bankAccountType : "Lainnya";
};

const getBankPayloadAccountType = (bank = {}) => {
  const selectedOption = bank.bank_account_type_option || getBankAccountTypeOption(bank.bank_account_type);

  if (selectedOption === "Lainnya") {
    return bank.bank_account_type_custom || bank.bank_account_type || "";
  }

  return selectedOption;
};

const createBankState = (bank = {}) => {
  const bankNameOption = getBankNameOption(bank.bank_name);
  const bankAccountTypeOption = getBankAccountTypeOption(bank.bank_account_type);

  return {
    bank_name: bank.bank_name || "",
    bank_name_option: bankNameOption,
    bank_name_custom: bankNameOption === "Bank Lain" ? bank.bank_name || "" : "",
    bank_branch: bank.bank_branch || "",
    bank_account_number: bank.bank_account_number || "",
    bank_account_type_option: bankAccountTypeOption,
    bank_account_type_custom: bankAccountTypeOption === "Lainnya" ? bank.bank_account_type || "" : "",
    bank_account_type: bank.bank_account_type || "",
    bank_account_holder: bank.bank_account_holder || "",
  };
};

export default function EmploymentFinancial({ onNext, onBack, onJumpToStep }) {
  const { employmentFinancialData, updateEmploymentFinancial } = useEmploymentFinancial();
  const [formData, setFormData] = useState({
    occupation: employmentFinancialData.occupation || "",
    company_name: employmentFinancialData.company_name || "",
    business_field: employmentFinancialData.business_field || "",
    working_period_years: employmentFinancialData.working_period_years || 0,
    office_address: employmentFinancialData.office_address || "",
    njop_value: employmentFinancialData.njop_value || "",
    office_postal_code: employmentFinancialData.office_postal_code || "",
    office_phone_number: employmentFinancialData.office_phone_number || "",
    office_fax_number: employmentFinancialData.office_fax_number || "",
    position: employmentFinancialData.position || "",
    department: employmentFinancialData.department || "",
    annual_income_range: employmentFinancialData.annual_income_range || "",
    income_source: employmentFinancialData.income_source || "",
    bank_name: employmentFinancialData.bank_name || "",
    bank_branch: employmentFinancialData.bank_branch || "",
    bank_account_number: employmentFinancialData.bank_account_number || "",
    bank_account_type: employmentFinancialData.bank_account_type || "",
    bank_account_holder: employmentFinancialData.bank_account_holder || "",
    bank_deposit: employmentFinancialData.bank_deposit || "",
    npwp_number: employmentFinancialData.npwp_number || "",
    home_wealth_location: employmentFinancialData.home_wealth_location || "",
    other_income_amount: employmentFinancialData.other_income_amount || "",
    previous_working_period_years: employmentFinancialData.previous_working_period_years || 0,
    other_wealth: employmentFinancialData.other_wealth || "",
    other_job: employmentFinancialData.other_job || "",
  });

  const [banks, setBanks] = useState(() => {
    if (employmentFinancialData.banks?.length > 0) {
      return employmentFinancialData.banks.map((bank) => createBankState(bank));
    }
    return [
      createBankState({
          bank_name: employmentFinancialData.bank_name || "",
          bank_branch: employmentFinancialData.bank_branch || "",
          bank_account_number: employmentFinancialData.bank_account_number || "",
          bank_account_type: employmentFinancialData.bank_account_type || "",
          bank_account_holder: employmentFinancialData.bank_account_holder || "",
        }),
    ];
  });

  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [fieldErrors, setFieldErrors] = useState({});

  const clearFieldError = (key) => {
    setFieldErrors((prev) => {
      if (!prev[key]) {
        return prev;
      }

      const next = { ...prev };
      delete next[key];
      return next;
    });
  };

  const getFieldClassName = (fieldKey, baseClassName, extraClassName = "") =>
    `${baseClassName} text-white rounded-lg focus:outline-none transition-all ${
      fieldErrors[fieldKey] ? "border border-[red] focus:border-[red]" : "border border-[#FCA311] focus:border-[#FDD168]"
    } ${extraClassName}`;

  const getBankFieldClassName = (index, fieldKey, extraClassName = "") =>
    getFieldClassName(`banks.${index}.${fieldKey}`, extraClassName);

  const formatNumber = (value) => {
    if (value === null || value === undefined || value === "") {
      return "";
    }

    const numericValue = String(value).replace(/\./g, "");
    const parsedValue = Number(numericValue);

    if (Number.isNaN(parsedValue)) {
      return "";
    }

    return parsedValue.toLocaleString("id-ID");
  };

  const parseNumberValue = (value) => {
    const numericValue = String(value).replace(/\./g, "");
    return numericValue === "" ? 0 : parseInt(numericValue, 10) || 0;
  };

  const handleInputChange = (e) => {
    const { name, value, type } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: type === "number" ? parseInt(value) || 0 : value,
    }));
    clearFieldError(name);
    setError("");
  };

  const handleRadioChange = (name, value) => {
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }));
    clearFieldError(name);
    setError("");
  };

  const handleBankChange = (index, field, value) => {
    setBanks((prev) =>
      prev.map((bank, i) => {
        if (i !== index) {
          return bank;
        }

        if (field === "bank_name_option") {
          clearFieldError(`banks.${index}.bank_name`);
          clearFieldError(`banks.${index}.bank_name_custom`);

          return {
            ...bank,
            bank_name_option: value,
            bank_name_custom: value === "Bank Lain" ? bank.bank_name_custom : "",
            bank_name: value === "Bank Lain" ? bank.bank_name_custom || "" : value,
          };
        }

        if (field === "bank_name_custom") {
          clearFieldError(`banks.${index}.bank_name`);
          clearFieldError(`banks.${index}.bank_name_custom`);

          return {
            ...bank,
            bank_name_custom: value,
            bank_name: value,
          };
        }

        if (field === "bank_account_number") {
          const sanitized = String(value || "").replace(/\D/g, "");
          clearFieldError(`banks.${index}.bank_account_number`);
          return { ...bank, bank_account_number: sanitized };
        }

        if (field === "bank_account_type_option") {
          const nextCustom = value === "Lainnya" ? bank.bank_account_type_custom : "";

          clearFieldError(`banks.${index}.bank_account_type`);
          clearFieldError(`banks.${index}.bank_account_type_custom`);

          return {
            ...bank,
            bank_account_type_option: value,
            bank_account_type_custom: nextCustom,
            bank_account_type: value === "Lainnya" ? nextCustom || bank.bank_account_type || "" : value,
          };
        }

        if (field === "bank_account_type_custom") {
          clearFieldError(`banks.${index}.bank_account_type`);
          clearFieldError(`banks.${index}.bank_account_type_custom`);

          return {
            ...bank,
            bank_account_type_custom: value,
            bank_account_type: value,
          };
        }

        return { ...bank, [field]: value };
      })
    );
  };

  const addBank = () => {
    if (banks.length >= 3) return;
    setBanks((prev) => [...prev, createBankState()]);
  };

  const validateForm = () => {
    const nextFieldErrors = {};
    let firstErrorMessage = "";

    const markError = (message, keys = []) => {
      if (!firstErrorMessage) {
        firstErrorMessage = message;
      }

      keys.forEach((key) => {
        nextFieldErrors[key] = true;
      });
    };

    if (!formData.occupation) {
      markError("Pekerjaan harus dipilih", ["occupation"]);
    }
    if (!formData.company_name.trim()) {
      markError("Nama perusahaan harus diisi", ["company_name"]);
    }
    if (!formData.business_field.trim()) {
      markError("Bidang usaha harus diisi", ["business_field"]);
    }
    if (!formData.position.trim()) {
      markError("Jabatan harus diisi", ["position"]);
    }
    if (formData.working_period_years < 0) {
      markError("Lama bekerja harus berupa angka positif", ["working_period_years"]);
    }
    if (!formData.office_address.trim()) {
      markError("Alamat kantor harus diisi", ["office_address"]);
    }
    if (!formData.office_postal_code.trim()) {
      markError("Kode pos kantor harus diisi", ["office_postal_code"]);
    }
    if (!formData.office_phone_number.trim()) {
      markError("No. telepon kantor harus diisi", ["office_phone_number"]);
    }
    const npwpDigits = String(formData.npwp_number || "").replace(/\D/g, "");
    if (!npwpDigits) {
      markError("NPWP harus diisi", ["npwp_number"]);
    } else if (npwpDigits.length !== 16) {
      markError("NPWP harus terdiri dari 16 digit, ikuti instruksi jika npwp hanya terdiri dari 15 digit", ["npwp_number"]);
    }
    if (!formData.annual_income_range) {
      markError("Penghasilan per tahun harus dipilih", ["annual_income_range"]);
    }
    if (!formData.income_source.trim()) {
      markError("Sumber penghasilan harus diisi", ["income_source"]);
    }
    if (!formData.njop_value.trim()) {
      markError("NJOP harus diisi", ["njop_value"]);
    }
    if (!formData.bank_deposit.trim()) {
      markError("Deposit bank harus diisi", ["bank_deposit"]);
    }

    banks.forEach((bank, index) => {
      const bankNameOption = bank.bank_name_option || getBankNameOption(bank.bank_name);
      const bankAccountTypeOption = bank.bank_account_type_option || getBankAccountTypeOption(bank.bank_account_type);

      if (!bankNameOption) {
        markError("Nama bank harus dipilih", [`banks.${index}.bank_name`]);
        return;
      }

      if (bankNameOption === "Bank Lain" && !String(bank.bank_name_custom || "").trim()) {
        markError("Nama bank custom harus diisi jika memilih Bank Lain", [`banks.${index}.bank_name_custom`]);
        return;
      }

      if (!bankAccountTypeOption) {
        markError("Tipe akun harus dipilih", [`banks.${index}.bank_account_type`]);
        return;
      }

      if (bankAccountTypeOption === "Lainnya" && !String(bank.bank_account_type_custom || "").trim()) {
        markError("Tipe akun custom harus diisi jika memilih Lainnya", [`banks.${index}.bank_account_type_custom`]);
        return;
      }

      if (!String(bank.bank_branch || "").trim()) {
        markError("Cabang rekening harus diisi", [`banks.${index}.bank_branch`]);
        return;
      }

      if (!String(bank.bank_account_number || "").trim()) {
        markError("Nomor rekening harus diisi", [`banks.${index}.bank_account_number`]);
        return;
      }

      if (!String(bank.bank_account_holder || "").trim()) {
        markError("Nama kepemilikan rekening harus diisi", [`banks.${index}.bank_account_holder`]);
        return;
      }
    });

    setFieldErrors(nextFieldErrors);

    if (firstErrorMessage) {
      setError(firstErrorMessage);
      return false;
    }

    return true;
  };

  const handleSubmit = async () => {
    if (!validateForm()) {
      return;
    }

    setLoading(true);
    setError("");

    try {
      const payload = {
        occupation: formData.occupation,
        company_name: formData.company_name,
        business_field: formData.business_field,
        working_period_years: formData.working_period_years,
        office_address: formData.office_address,
        njop_value: formData.njop_value,
        office_postal_code: formData.office_postal_code,
        office_phone_number: formData.office_phone_number,
        office_fax_number: formData.office_fax_number,
        position: formData.position,
        department: formData.department,
        annual_income_range: formData.annual_income_range,
        income_source: formData.income_source,
        bank_name: getBankPayloadName(banks[0] || {}),
        bank_branch: banks[0]?.bank_branch || "",
        bank_account_number: banks[0]?.bank_account_number || "",
        bank_account_type: getBankPayloadAccountType(banks[0] || {}),
        bank_account_holder: banks[0]?.bank_account_holder || "",
        banks: banks.map((bank) => ({
          bank_name: getBankPayloadName(bank),
          bank_branch: bank.bank_branch || "",
          bank_account_number: bank.bank_account_number || "",
          bank_account_type: getBankPayloadAccountType(bank),
          bank_account_holder: bank.bank_account_holder || "",
        })),
        bank_deposit: formData.bank_deposit,
        npwp_number: formData.npwp_number,
        home_wealth_location: formData.home_wealth_location,
        other_income_amount: String(String(formData.other_income_amount).replace(/\./g, "")),
        previous_working_period_years: formData.previous_working_period_years,
        other_wealth: formData.other_wealth,
        other_job: formData.other_job,
      };

      const response = await submitEmploymentFinancial(payload);

      if (response.status) {
        console.log("Employment and financial information submitted successfully");

        // Save to context
        updateEmploymentFinancial(payload);

        if (onNext) {
          onNext();
        }
      }
    } catch (err) {
      console.error("Error submitting employment and financial information:", err);
      setError(err.response?.data?.message || "Terjadi kesalahan saat menyimpan data");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center px-2 py-80 md:px-4 relative">
      {/* Stepper Breadcrumb */}
      <div className="absolute top-30 left-0 right-0 z-10">
        <StepperBreadcrumb totalSteps={6} currentStep={3} currentStepTitle="Data Pekerjaan dan Finansial" onStepClick={onJumpToStep} />
      </div>

      {/* Background Image - Grid */}
      <div className="absolute inset-0 bg-cover bg-center bg-no-repeat bg-[url('/images/bg_grid.png')] -z-10"></div>

      {/* Background Image - Candle (overlay) */}
      <div className="absolute inset-0 bg-cover bg-center bg-no-repeat bg-[url('/images/bg_candle_2.png')] opacity-50 bg-transparent"></div>

      {/* Gradient Overlay - Darker */}
      <div className="absolute inset-0 bg-linear-to-tr from-[#0a0a0a]/95 via-[#190D66]/90 to-[#0a0a0a]/95 -z-10"></div>

      <div className="w-full max-w-2xl md:max-w-7xl relative">
        {/* Card */}
        <div className="bg-[#190D66]/50 backdrop-blur-sm rounded-2xl md:rounded-3xl p-3 md:p-10 border border-[#1D0D80]/30">
          {/* Error Message */}
          {error && <div className="mb-6 p-3 bg-red-500/10 border border-red-500/50 text-red-400 rounded-lg text-sm">{error}</div>}

          {/* Two Column Layout */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
            {/* LEFT SECTION - Data Pekerjaan */}
            <div className="space-y-4 md:space-y-6">
              <h2 className="text-lg md:text-2xl font-bold text-white mb-4 md:mb-6 text-center">Data Pekerjaan</h2>

              <div className="space-y-4">
                {/* Pekerjaan */}
                <div>
                  <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">Pekerjaan <span className="text-red-500">*</span></label>
                  <select
                    name="occupation"
                    value={formData.occupation}
                    onChange={handleInputChange}
                    className={getFieldClassName(
                      "occupation",
                      "w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] text-xs md:text-base"
                    )}
                  >
                    <option value="">Pilih pekerjaan</option>
                    {OCCUPATION_OPTIONS.map((option) => (
                      <option key={option.value} value={option.value}>
                        {option.label}
                      </option>
                    ))}
                  </select>
                </div>

                {/* Nama Perusahaan */}
                <div>
                  <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">Nama Perusahaan <span className="text-red-500">*</span></label>
                  <input
                    type="text"
                    name="company_name"
                    value={formData.company_name}
                    onChange={handleInputChange}
                    className={getFieldClassName(
                      "company_name",
                      "w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] text-xs md:text-base"
                    )}
                  />
                </div>

                {/* Bidang Usaha */}
                <div>
                  <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">Bidang Usaha <span className="text-red-500">*</span></label>
                  <input
                    type="text"
                    name="business_field"
                    value={formData.business_field}
                    onChange={handleInputChange}
                    className={getFieldClassName(
                      "business_field",
                      "w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] text-xs md:text-base"
                    )}
                  />
                </div>

                {/* Jabatan */}
                <div>
                  <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">Jabatan <span className="text-red-500">*</span></label>
                  <input
                    type="text"
                    name="position"
                    value={formData.position}
                    onChange={handleInputChange}
                    className={getFieldClassName(
                      "position",
                      "w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] text-xs md:text-base"
                    )}
                  />
                </div>

                {/* Department */}
                <div>
                  <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">Departemen</label>
                  <input
                    type="text"
                    name="department"
                    value={formData.department}
                    onChange={handleInputChange}
                    className="w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] border border-[#FCA311] text-white rounded-lg focus:outline-none focus:border-[#FDD168] transition-all text-xs md:text-base"
                  />
                </div>

                {/* Lama Bekerja */}
                <div>
                  <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">Lama Bekerja</label>
                  <div className="flex flex-wrap gap-2 items-center">
                    <input
                      type="text"
                      inputMode="numeric"
                      name="working_period_years"
                      value={formatNumber(formData.working_period_years)}
                      onChange={handleInputChange}
                      className={getFieldClassName(
                        "working_period_years",
                        "w-16 md:w-24 px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] text-xs md:text-base"
                      )}
                      min="0"
                    />
                    <span className="text-white">Tahun</span>
                    <span className="text-white mx-2">Kantor Sebelumnya</span>
                    <input
                      type="text"
                      inputMode="numeric"
                      name="previous_working_period_years"
                      value={formatNumber(formData.previous_working_period_years)}
                      onChange={handleInputChange}
                      className="w-16 md:w-24 px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] border border-[#FCA311] text-white rounded-lg focus:outline-none focus:border-[#FDD168] transition-all text-xs md:text-base"
                      min="0"
                    />
                    <span className="text-white">Tahun</span>
                  </div>
                </div>

                {/* Alamat Sesuai Identitas */}
                <div>
                  <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">Alamat Kantor<span className="text-red-500">*</span></label>
                  <textarea
                    name="office_address"
                    value={formData.office_address}
                    onChange={handleInputChange}
                    rows={3}
                    className={getFieldClassName(
                      "office_address",
                      "w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] resize-none text-xs md:text-base"
                    )}
                  />
                </div>

                {/* Kode Pos */}
                <div>
                  <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">Kode Pos Kantor<span className="text-red-500">*</span></label>
                  <input
                    type="text"
                    name="office_postal_code"
                    value={formData.office_postal_code}
                    onChange={handleInputChange}
                    className={getFieldClassName(
                      "office_postal_code",
                      "w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] text-xs md:text-base"
                    )}
                  />
                </div>

                {/* No. Telp Kantor */}
                <div>
                  <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">No. Telp Kantor <span className="text-red-500">*</span></label>
                  <input
                    type="text"
                    name="office_phone_number"
                    value={formData.office_phone_number}
                    onChange={handleInputChange}
                    className={getFieldClassName(
                      "office_phone_number",
                      "w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] text-xs md:text-base"
                    )}
                  />
                </div>

                {/* No. Faksimili */}
                <div>
                  <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">No. Faksimili Kantor</label>
                  <input
                    type="text"
                    name="office_fax_number"
                    value={formData.office_fax_number}
                    onChange={handleInputChange}
                    className="w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] border border-[#FCA311] text-white rounded-lg focus:outline-none focus:border-[#FDD168] transition-all text-xs md:text-base"
                  />
                </div>
              </div>
            </div>

            {/* RIGHT SECTION - Data Penghasilan */}
            <div className="space-y-4 md:space-y-6">
              <h2 className="text-lg md:text-2xl font-bold text-white mb-4 md:mb-6 text-center">Data Penghasilan</h2>

              <div className="space-y-4">
                {/* Penghasilan Per Tahun - Radio */}
                <div>
                  <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">Penghasilan Per Tahun <span className="text-red-500">*</span></label>
                  <select
                    name="annual_income_range"
                    value={formData.annual_income_range}
                    onChange={handleInputChange}
                    className={getFieldClassName(
                      "annual_income_range",
                      "w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] text-xs md:text-base"
                    )}
                  >
                    <option value="">Pilih Penghasilan Per Tahun</option>
                    <option value="<100jt">&lt;100jt</option>
                    <option value="100jt-250jt">100jt-250jt</option>
                    <option value="250jt-500jt">250jt-500jt</option>
                    <option value="500jt-1M">500jt-1M</option>
                    <option value=">1M">&gt;1M</option>
                  </select>
                </div>

                {/* Sumber Penghasilan */}
                <div>
                  <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">Sumber Penghasilan <span className="text-red-500">*</span></label>
                  <select
                    name="income_source"
                    value={formData.income_source}
                    onChange={handleInputChange}
                    className={getFieldClassName(
                      "income_source",
                      "w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] text-xs md:text-base"
                    )}
                  >
                    <option value="">Pilih sumber penghasilan</option>
                    <option value="Pendapatan Aktif (Hasil Kerja)">Pendapatan Aktif (Hasil Kerja)</option>
                    <option value="Pendapatan Pasif (Hasil Investasi/Aset)">Pendapatan Pasif (Hasil Investasi/Aset)</option>
                    <option value="Aktivitas Bisnis">Aktivitas Bisnis</option>
                    <option value="Sumber Lainnya (Sumber Kekayaan)">Sumber Lainnya (Sumber Kekayaan)</option>
                  </select>
                </div>

                {/* Daftar Kekayaan Section */}
                <div className="pt-4">
                  <h3 className="text-base md:text-lg font-semibold text-white mb-2 md:mb-4">Daftar Kekayaan</h3>

                  <div className="space-y-4">
                    {/* Rumah Lokasi */}
                    <div>
                      <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">Rumah Lokasi</label>
                      <input
                        type="text"
                        name="home_wealth_location"
                        value={formData.home_wealth_location}
                        onChange={handleInputChange}
                        className="w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] border border-[#FCA311] text-white rounded-lg focus:outline-none focus:border-[#FDD168] transition-all text-xs md:text-base"
                      />
                    </div>

                    {/* Nilai NJOP */}
                    <div>
                      <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">Nilai NJOP <span className="text-red-500">*</span></label>
                      <select
                        name="njop_value"
                        value={formData.njop_value}
                        onChange={handleInputChange}
                        className={getFieldClassName(
                          "njop_value",
                          "w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] text-xs md:text-base"
                        )}
                      >
                        <option value="">Pilih Nilai NJOP</option>
                        <option value="<100jt">&lt;100jt</option>
                        <option value="100jt-250jt">100jt-250jt</option>
                        <option value="250jt-500jt">250jt-500jt</option>
                        <option value="500jt-1M">500jt-1M</option>
                        <option value=">1M">&gt;1M</option>
                      </select>
                    </div>

                    {/* Deposit Bank */}
                    <div>
                      <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">Deposit Bank <span className="text-red-500">*</span></label>
                      <select
                        name="bank_deposit"
                        value={formData.bank_deposit}
                        onChange={handleInputChange}
                        className={getFieldClassName(
                          "bank_deposit",
                          "w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] text-xs md:text-base"
                        )}
                      >
                        <option value="">Pilih Deposit Bank</option>
                        <option value="<100jt">&lt;100jt</option>
                        <option value="100jt-250jt">100jt-250jt</option>
                        <option value="250jt-500jt">250jt-500jt</option>
                        <option value="500jt-1M">500jt-1M</option>
                        <option value=">1M">&gt;1M</option>
                      </select>
                    </div>

                    {/* NPWP Number */}
                    <div>
                      <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">Nomor NPWP <span className="text-red-500">*</span></label>
                      <span className={`text-white text-xs md:text-sm block mb-2 rounded-lg px-2 py-1 bg-[#ffffff]/20 ${fieldErrors.npwp_number ? 'border border-[red]' : 'border border-white'}`}>
                        Tambahkan 0 di angka pertama jika nomor NPWP sejumlah 15 digit
                      </span>
                      <input
                        type="text"
                        name="npwp_number"
                        value={formData.npwp_number}
                        maxLength={16}
                        onChange={handleInputChange}
                        className={getFieldClassName(
                          "npwp_number",
                          "w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] text-xs md:text-base"
                        )}
                      />
                    </div>

                    {/* Pekerjaan Lainnya */}
                    <div>
                      <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">Pekerjaan Lainnya</label>
                      <input
                        type="text"
                        name="other_job"
                        value={formData.other_job}
                        onChange={handleInputChange}
                        className="w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] border border-[#FCA311] text-white rounded-lg focus:outline-none focus:border-[#FDD168] transition-all text-xs md:text-base"
                      />
                    </div>

                    {/* Penghasilan Lainnya Per tahun */}
                    <div>
                      <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">Penghasilan Lainnya Per tahun</label>
                      <select
                        name="other_income_amount"
                        value={formData.other_income_amount}
                        onChange={handleInputChange}
                        className="w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] border border-[#FCA311] text-white rounded-lg focus:outline-none focus:border-[#FDD168] transition-all text-xs md:text-base"
                      >
                        <option value="">Pilih Penghasilan Lainnya</option>
                        <option value="<100jt">&lt;100jt</option>
                        <option value="100jt-250jt">100jt-250jt</option>
                        <option value="250jt-500jt">250jt-500jt</option>
                        <option value="500jt-1M">500jt-1M</option>
                        <option value=">1M">&gt;1M</option>
                      </select>
                    </div>

                    {/* Lainnya */}
                    <div>
                      <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">Pekerjaan Lainnya (Jika Ada)</label>
                      <input
                        type="text"
                        name="other_wealth"
                        value={formData.other_wealth}
                        onChange={handleInputChange}
                        className="w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] border border-[#FCA311] text-white rounded-lg focus:outline-none focus:border-[#FDD168] transition-all text-xs md:text-base"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

              {/* Data Rekening - Multi */}
                    <div className="w-full md:w-[50%] my-6 md:my-10">
                      <label className="text-white text-lg md:text-2xl font-semibold mb-2 md:mb-3 block">Data Rekening</label>
                      {banks.map((bank, index) => (
                        <div key={index} className="space-y-2 md:space-y-3 mb-2 md:mb-4">
                          {index > 0 && <hr className="border-[#1D0D80]/20 mb-3" />}
                          <div>
                            <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">Nama Bank <span className="text-red-500">*</span></label>
                            <select
                              value={bank.bank_name_option || getBankNameOption(bank.bank_name)}
                              onChange={(e) => handleBankChange(index, "bank_name_option", e.target.value)}
                              className={getBankFieldClassName(
                                index,
                                "bank_name",
                                "w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] text-xs md:text-base"
                              )}
                            >
                              <option value="">Pilih bank</option>
                              {BANK_OPTIONS.map((option) => (
                                <option key={option} value={option}>
                                  {option}
                                </option>
                              ))}
                            </select>
                            {(bank.bank_name_option || getBankNameOption(bank.bank_name)) === "Bank Lain" && (
                              <input
                                type="text"
                                value={bank.bank_name_custom || ""}
                                onChange={(e) => handleBankChange(index, "bank_name_custom", e.target.value)}
                                placeholder="Tulis nama bank"
                                className={getBankFieldClassName(
                                  index,
                                  "bank_name_custom",
                                  "mt-2 w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] text-xs md:text-base"
                                )}
                              />
                            )}
                          </div>
                          <div>
                            <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">Cabang <span className="text-red-500">*</span></label>
                            <input
                              type="text"
                              value={bank.bank_branch}
                              onChange={(e) => handleBankChange(index, "bank_branch", e.target.value)}
                              className={getBankFieldClassName(
                                index,
                                "bank_branch",
                                "w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] text-xs md:text-base"
                              )}
                            />
                          </div>
                          <div>
                            <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">Nomor Rekening <span className="text-red-500">*</span></label>
                            <input
                              type="text"
                              inputMode="numeric"
                              pattern="\d*"
                              value={bank.bank_account_number}
                              onChange={(e) => handleBankChange(index, "bank_account_number", e.target.value)}
                              className={getBankFieldClassName(
                                index,
                                "bank_account_number",
                                "w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] text-xs md:text-base"
                              )}
                            />
                          </div>
                          <div>
                            <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">Tipe Akun <span className="text-red-500">*</span></label>
                            <select
                              value={bank.bank_account_type_option || getBankAccountTypeOption(bank.bank_account_type)}
                              onChange={(e) => handleBankChange(index, "bank_account_type_option", e.target.value)}
                              className={getBankFieldClassName(
                                index,
                                "bank_account_type",
                                "w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] text-xs md:text-base"
                              )}
                            >
                              <option disabled value="">Pilih tipe akun</option>
                              {BANK_ACCOUNT_TYPE_OPTIONS.map((option) => (
                                <option key={option} value={option}>
                                  {option}
                                </option>
                              ))}
                            </select>
                            {(bank.bank_account_type_option || getBankAccountTypeOption(bank.bank_account_type)) === "Lainnya" && (
                              <input
                                type="text"
                                value={bank.bank_account_type_custom || ""}
                                onChange={(e) => handleBankChange(index, "bank_account_type_custom", e.target.value)}
                                placeholder="Tulis jenis akun"
                                className={getBankFieldClassName(
                                  index,
                                  "bank_account_type_custom",
                                  "mt-2 w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] text-xs md:text-base"
                                )}
                              />
                            )}
                          </div>
                          <div>
                            <label className="text-white text-xs md:text-base mb-1 md:mb-2 block">Nama Kepemilikan Rekening <span className="text-red-500">*</span></label>
                            <input
                              type="text"
                              value={bank.bank_account_holder}
                              onChange={(e) => handleBankChange(index, "bank_account_holder", e.target.value)}
                              className={getBankFieldClassName(
                                index,
                                "bank_account_holder",
                                "w-full px-2 py-1 md:px-4 md:py-2 bg-[#2a2a2a] text-xs md:text-base"
                              )}
                            />
                          </div>
                        </div>
                      ))}
                      {banks.length < 3 && (
                        <button
                          type="button"
                          onClick={addBank}
                          className="px-4 py-1 md:px-6 md:py-2 bg-transparent border border-[#FCA311] text-white font-semibold rounded-full hover:bg-[#FDD168]/10 transition-all text-xs md:text-sm"
                        >
                          Tambah Rekening
                        </button>
                      )}
                    </div>

          {/* Action Buttons */}
          <div className="mt-4 md:mt-8 flex flex-col md:flex-row gap-3 md:gap-4 justify-center items-center">
            {/* Back Button */}
            {onBack && (
              <button onClick={onBack} className="w-full md:w-auto px-15 py-3 bg-linear-to-t from-[#212020] to-[#626060] border-y border-[#CCAE66] hover:bg-[#b89d5a] text-[#CCAE66] font-semibold rounded-full transition-all">
                Kembali
              </button>
            )}

            {/* Submit Button */}
            <button
              onClick={handleSubmit}
              disabled={loading}
              className="w-full md:w-auto px-15 py-3 bg-linear-to-r from-[#F45531] to-[#FF8F5B] border-y border-[#FFD976] text-white hover:bg-[#FDD168] font-semibold rounded-full transition-all disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {loading ? "Menyimpan..." : "Lanjut"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}