import React from "react";
import Link from "next/link";
import { Clock, CheckCircle2, XCircle, AlertCircle, ArrowRight, Banknote } from "lucide-react";
import type { BookingStatus } from "@/types/common";
import type { BookingDetail } from "@/types/booking";
import styles from "./BookingStatusComponents.module.css";

interface BookingVerificationStatusPanelProps {
  status: BookingStatus;
  rejectionReason?: string | null;
  paymentToken?: string;
  refund?: BookingDetail["refund"];
  className?: string;
}

export default function BookingVerificationStatusPanel({
  status,
  rejectionReason,
  paymentToken,
  refund,
  className = "",
}: BookingVerificationStatusPanelProps) {
  if (status === "REFUND_REQUESTED" || status === "WAITING_PARTIAL_REFUND") {
    if (refund?.needs_customer_data) {
      return (
        <div className={`${styles.statusPanel} ${styles.panelWarning} ${className}`} role="status">
          <div className={styles.statusPanelIconWrap}>
            <Banknote size={24} className={styles.iconWarning} aria-hidden="true" />
          </div>
          <div className={styles.statusPanelText}>
            <h3 className={styles.statusPanelTitle}>Lengkapi Data Rekening Refund</h3>
            <p className={styles.statusPanelDesc}>
              Refund untuk booking Anda sedang diproses. Silakan lengkapi data rekening tujuan agar
              tim kami dapat segera mengirimkan dana refund Anda.
            </p>
            <Link
              href={`/refund/${refund.token}`}
              className={styles.panelActionBtnWarning}
              id="booking-refund-fill-data-btn"
            >
              <span>Lengkapi Data Rekening</span>
              <ArrowRight size={14} aria-hidden="true" />
            </Link>
          </div>
        </div>
      );
    }

    return (
      <div className={`${styles.statusPanel} ${styles.panelInfo} ${className}`} role="status">
        <div className={styles.statusPanelIconWrap}>
          <Clock size={24} className={styles.iconInfo} aria-hidden="true" />
        </div>
        <div className={styles.statusPanelText}>
          <h3 className={styles.statusPanelTitle}>Refund Sedang Diproses</h3>
          <p className={styles.statusPanelDesc}>
            {refund
              ? `Status refund Anda saat ini: ${refund.status_label}. Tim kami akan menghubungi Anda melalui WhatsApp untuk proses selanjutnya.`
              : "Permintaan refund Anda sedang kami proses. Tim kami akan menghubungi Anda melalui WhatsApp untuk proses selanjutnya."}
          </p>
          {refund && (
            <Link
              href={`/refund/${refund.token}`}
              className={styles.panelActionBtnInfo}
              id="booking-refund-view-status-btn"
            >
              <span>Lihat Status Refund</span>
              <ArrowRight size={14} aria-hidden="true" />
            </Link>
          )}
        </div>
      </div>
    );
  }

  if (status === "REFUNDED") {
    return (
      <div className={`${styles.statusPanel} ${styles.panelSuccess} ${className}`} role="status">
        <div className={styles.statusPanelIconWrap}>
          <CheckCircle2 size={24} className={styles.iconSuccess} aria-hidden="true" />
        </div>
        <div className={styles.statusPanelText}>
          <h3 className={styles.statusPanelTitle}>Refund Selesai</h3>
          <p className={styles.statusPanelDesc}>
            Dana refund untuk booking ini sudah kami kirimkan ke rekening yang Anda daftarkan.
          </p>
        </div>
      </div>
    );
  }

  if (status === "CONFIRMED") {
    return (
      <div className={`${styles.statusPanel} ${styles.panelSuccess} ${className}`} role="status">
        <div className={styles.statusPanelIconWrap}>
          <CheckCircle2 size={24} className={styles.iconSuccess} aria-hidden="true" />
        </div>
        <div className={styles.statusPanelText}>
          <h3 className={styles.statusPanelTitle}>Pembayaran Terverifikasi</h3>
          <p className={styles.statusPanelDesc}>
            Pembayaran Anda sudah diverifikasi oleh tim admin kami. Kursi open trip Anda telah aman dan
            siap berangkat!
          </p>
        </div>
      </div>
    );
  }

  if (status === "PAYMENT_REJECTED") {
    return (
      <div className={`${styles.statusPanel} ${styles.panelDanger} ${className}`} role="alert">
        <div className={styles.statusPanelIconWrap}>
          <XCircle size={24} className={styles.iconDanger} aria-hidden="true" />
        </div>
        <div className={styles.statusPanelText}>
          <h3 className={styles.statusPanelTitle}>Pembayaran Ditolak</h3>
          <p className={styles.statusPanelDesc}>
            {rejectionReason || "Bukti pembayaran tidak sesuai dengan nominal atau rekening tujuan."}
          </p>
          {paymentToken && (
            <Link
              href={`/payment/${paymentToken}`}
              className={styles.panelActionBtnDanger}
              id="booking-reupload-payment-btn"
            >
              <span>Unggah Ulang Bukti Bayar</span>
              <ArrowRight size={14} aria-hidden="true" />
            </Link>
          )}
        </div>
      </div>
    );
  }

  if (status === "WAITING_PAYMENT") {
    return (
      <div className={`${styles.statusPanel} ${styles.panelWarning} ${className}`} role="status">
        <div className={styles.statusPanelIconWrap}>
          <Clock size={24} className={styles.iconWarning} aria-hidden="true" />
        </div>
        <div className={styles.statusPanelText}>
          <h3 className={styles.statusPanelTitle}>Menunggu Pembayaran</h3>
          <p className={styles.statusPanelDesc}>
            Pesanan booking Anda telah dibuat. Silakan lakukan pembayaran untuk mengamankan kursi trip.
          </p>
          {paymentToken && (
            <Link
              href={`/payment/${paymentToken}`}
              className={styles.panelActionBtnWarning}
              id="booking-pay-now-btn"
            >
              <span>Selesaikan Pembayaran Sekarang</span>
              <ArrowRight size={14} aria-hidden="true" />
            </Link>
          )}
        </div>
      </div>
    );
  }

  // Default: WAITING_PAYMENT_VERIFICATION
  return (
    <div className={`${styles.statusPanel} ${styles.panelWarning} ${className}`} role="status">
      <div className={styles.statusPanelIconWrap}>
        <Clock size={24} className={styles.iconWarning} aria-hidden="true" />
      </div>
      <div className={styles.statusPanelText}>
        <h3 className={styles.statusPanelTitle}>Sedang Diverifikasi</h3>
        <p className={styles.statusPanelDesc}>
          Bukti pembayaran Anda sedang diverifikasi oleh admin. Proses ini biasanya membutuhkan waktu
          1×24 jam. Anda tidak perlu melakukan pembayaran lagi.
        </p>
      </div>
    </div>
  );
}