import { useRef } from "react"
import { usePage } from "@inertiajs/react"
import { currency } from "@/utils/format"
import WithModal from "@/Components/WithModal"

const ConfirmationModal = ({ id, action, remaining, form, handleSubmit }) => {
  const { isDirector } = usePage().props
  const backButtonRef = useRef()
  const { data, setData, processing } = form
  const { amount, max_amount, payment_percentage } = data
  const isPaid = action === 'paid'

  return (
    <WithModal type={id} backdrop={true} modalBoxSize="max-w-2xl" boxClassName='modal-box scrollbar-thin overflow-auto'>
      <div className="flex flex-col gap-4">
        <h3 className="font-bold text-lg">Konfirmasi {isDirector ? 'Proses' : 'Pengajuan'} Pembayaran</h3>

        {isDirector ? (
          <div className="grid grid-cols-2 gap-2 text-center my-2">
            <div className={`p-4 rounded border ${isPaid ? 'bg-green-50 border-green-100' : 'bg-gray-50 border-gray-200 opacity-50'}`}>
              <div className={`text-2xl font-bold ${isPaid ? 'text-green-600' : 'text-gray-400'}`}>
                {isPaid ? currency(amount) : '-'}
              </div>
              <div className="text-xs text-green-800">{isPaid ? "Proses Pembayaran" : "Disetujui"}</div>
              <div className="text-[10px] text-gray-500 mt-1">
                {payment_percentage}% dari Max {currency(max_amount)}
              </div>
            </div>
            <div className={`p-4 rounded border ${!isPaid ? 'bg-red-50 border-red-100' : 'bg-yellow-50 border-yellow-100'}`}>
              <div className={`text-2xl font-bold ${!isPaid ? 'text-red-600' : 'text-yellow-600'}`}>
                {!isPaid ? currency(amount) : currency(remaining - amount)}
              </div>
              <div className="text-xs text-red-800">{!isPaid ? "Ditolak" : "Sisa Pembayaran"}</div>
            </div>
          </div>
        ) : null}

        {data.attachment && isPaid && (
          <div className="form-control">
            <label className="label">
              <span className="label-text font-semibold">Bukti Pembayaran</span>
            </label>
            <div className="relative w-full h-48 bg-gray-100 rounded-lg overflow-hidden border border-gray-200">
              <img
                src={data.attachment instanceof File ? URL.createObjectURL(data.attachment) : data.attachment}
                alt="Bukti Pembayaran"
                className="w-full h-full object-contain"
              />
            </div>
          </div>
        )}

        <div className="form-control">
          <label className="label">
            <span className="label-text font-semibold">Catatan {isPaid ? '(Opsional)' : '(Wajib)'}</span>
          </label>
          <textarea
            className="textarea textarea-bordered h-24"
            placeholder={isPaid ? "Tambahkan catatan untuk approval ini..." : "Tulis alasan penolakan..."}
            value={data.status_message || ''}
            onChange={(e) => setData("status_message", e.target.value)}
          ></textarea>
        </div>

        <p className="text-sm text-gray-500 mt-2">Apakah anda yakin ingin menyimpan perubahan approval ini?</p>

        <div className="modal-action">
          <label ref={backButtonRef} htmlFor={`modal_${id}`} className="btn btn-sm btn-ghost">Batal</label>
          <button
            onClick={() => handleSubmit(() => backButtonRef.current?.click())}
            className={`btn btn-sm ${isPaid ? 'btn-primary' : 'btn-error text-white'}`}
            disabled={processing || (!isPaid && !data.status_message)}
          >
            {processing && <span className="loading loading-spinner loading-xs"></span>}
            Ya, Simpan
          </button>
        </div>
      </div>
    </WithModal>
  )
}

export default ConfirmationModal
