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

const ConfirmationModal = ({ id, action, budget, form, handleSubmit }) => {
  const backButtonRef = useRef()
  const { data, setData, processing } = form
  const { amount, payment_percentage } = data
  const maxAmount = budget.paid_remaining_amount
  const remainingAmount = maxAmount - amount
  const isOverBudget = remainingAmount < 0

  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 Pengajuan Pembayaran</h3>

        <div className="grid grid-cols-2 gap-2 text-center my-2">
          <div className="p-4 rounded border bg-green-50 border-green-100">
            <div className="text-2xl font-bold text-green-600">
              {currency(amount)}
            </div>
            <div className="text-xs text-green-800">Diajukan</div>
            <div className="text-[10px] text-gray-500 mt-1">
              {payment_percentage}% dari Max {currency(maxAmount)}
            </div>
          </div>
          <div className={`p-4 rounded border ${isOverBudget ? 'bg-red-50 border-red-200' : 'bg-yellow-50 border-yellow-100'}`}>
            <div className={`text-2xl font-bold ${isOverBudget ? 'text-red-600' : 'text-yellow-600'}`}>
              {currency(remainingAmount)}
            </div>
            <div className={`text-xs ${isOverBudget ? 'text-red-800' : 'text-yellow-800'}`}>Sisa Dana</div>
          </div>
        </div>

        <div className="form-control">
          <label className="label">
            <span className="label-text font-semibold">Catatan Pengajuan (Opsional)</span>
          </label>
          <textarea
            className="textarea textarea-bordered h-24"
            placeholder="Tambahkan catatan untuk pengajuan ini..."
            value={data.note || ''}
            onChange={(e) => setData("note", e.target.value)}
          ></textarea>
        </div>

        {isOverBudget && (
          <div className="flex items-start gap-2 p-3 rounded-lg bg-red-50 border border-red-200 text-red-700 text-sm">
            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 shrink-0 mt-0.5" viewBox="0 0 20 20" fill="currentColor">
              <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
            </svg>
            <span>Sisa anggaran tidak boleh minus. Silakan kurangi nilai pembayaran atau sesuaikan anggaran.</span>
          </div>
        )}

        <p className="text-sm text-gray-500 mt-2">Apakah anda yakin ingin mengajukan permintaan pembayaran 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 btn-primary"
            disabled={processing || isOverBudget}
          >
            {processing && <span className="loading loading-spinner loading-xs"></span>}
            Ya, Ajukan
          </button>
        </div>
      </div>
    </WithModal>
  )
}

export default ConfirmationModal
