"use client";

/* eslint-disable @typescript-eslint/no-explicit-any */

import { useEffect } from "react";
import ReactDOM from "react-dom";
import { FiX, FiDownload } from "react-icons/fi";

import styles from "../modal-styles.module.scss";
import PageIntro from "@/components/dashboard/page-intro";

import {
  capitalizeFirstLetter,
  formatDateReadable,
} from "@/lib/utils";

const ViewBranchRemittanceModal = ({
  onClose,
  remittance,
}: any) => {
  /* ================= SCROLL LOCK ================= */
  useEffect(() => {
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = "auto";
    };
  }, []);

  if (!remittance) return null;

  const fileUrl = remittance?.proof_url || remittance?.proof_path;

  console.log(remittance)

  const formatAmount = (num: number) =>
    `₦${Number(num || 0).toLocaleString("en-NG")}`;

  const formatPeriod = (period: string) => {
    if (!period) return "-";
    const [year, month] = period.split("-");
    return new Date(Number(year), Number(month) - 1).toLocaleString(
      "default",
      {
        month: "long",
        year: "numeric",
      }
    );
  };

  /* ================= RENDER ================= */
  return ReactDOM.createPortal(
    <div className={styles.modalBackdrop} onClick={onClose}>
      <div
        className={`${styles.modalContent} ${styles.largeModal}`}
        onClick={(e) => e.stopPropagation()}
      >
        {/* HEADER */}
        <div className={styles.modalHeader}>
          <PageIntro
            title="Remittance Details"
            description="Detailed breakdown of this remittance record"
          />

          <button className={styles.closeBtn} onClick={onClose}>
            <FiX />
          </button>
        </div>

        {/* CONTENT */}
        <div className={styles.viewContainer}>
          {/* ================= SUMMARY ================= */}
          <div className={styles.summaryCard}>
            <h3>{formatAmount(remittance.amount)}</h3>
            <span>
              {capitalizeFirstLetter(remittance.status)}
            </span>
          </div>

          {/* ================= DETAILS GRID ================= */}
          <div className={styles.detailsGrid}>
            <DetailItem
              label="Date Paid"
              value={formatDateReadable(remittance.date_paid)}
            />

            <DetailItem
              label="Remittance Period"
              value={formatPeriod(remittance.period)}
            />

            <DetailItem
              label="Payment Method"
              value={capitalizeFirstLetter(
                remittance.payment_method.replace("_", " ")
              )}
            />

            <DetailItem
              label="Status"
              value={capitalizeFirstLetter(remittance.status)}
            />
          </div>

          {/* ================= NOTES ================= */}
          <div className={styles.section}>
            <h4>Notes</h4>
            <p>
              {remittance.notes
                ? remittance.notes
                : "No additional notes provided."}
            </p>
          </div>

          {/* ================= PROOF ================= */}
          {fileUrl && (
            <div className={styles.section}>
              <h4>Proof of Payment</h4>

              <div className={styles.proofBox}>
                {/* IMAGE */}
                

                <a
                  href={fileUrl}
                  target="_blank"
                  className={styles.downloadBtn}
                >
                  <FiDownload />
                  Download File
                </a>
              </div>
            </div>
          )}
        </div>

        {/* FOOTER */}
        <div className={styles.modalFooter}>
          <button
            onClick={onClose}
            className={styles.secondaryBtn}
          >
            Close
          </button>
        </div>
      </div>
    </div>,
    document.body
  );
};

export default ViewBranchRemittanceModal;

/* ================= DETAIL ITEM ================= */
const DetailItem = ({ label, value }: any) => (
  <div className={styles.detailItem}>
    <span>{label}</span>
    <strong>{value || "-"}</strong>
  </div>
);