'use client'
import { useState, useEffect } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { useRouter } from 'next/navigation'
import { Leaf, X, CheckCircle2, AlertCircle } from 'lucide-react'
import { FontAwesomeIcon } from '@/lib/fa'
import styles from './page.module.css'

interface BookingSession {
  bookingCode: string
  bookingId: string
  paymentId?: string
  amount: number
  paymentMethod?: 'QRIS' | 'CASH'
  services: { name: string; price: number; qty: number }[]
  scheduledDate: string
  scheduledTime: string
  address: { name: string; phone: string; line1: string; city: string }
}

function fmtRp(n: number) {
  return 'Rp ' + n.toLocaleString('id-ID')
}

export default function PaymentPage() {
  const router = useRouter()
  const [session, setSession] = useState<BookingSession | null>(null)
  const [modalOpen, setModalOpen] = useState(false)
  const [claimStatus, setClaimStatus] = useState<'idle' | 'submitting' | 'done' | 'error'>('idle')
  const [cashStatus, setCashStatus] = useState<'idle' | 'confirming' | 'done'>('idle')

  useEffect(() => {
    try {
      const raw = sessionStorage.getItem('ksp_booking')
      if (raw) setSession(JSON.parse(raw))
    } catch { /* ignore */ }
  }, [])

  const bookingCode = session?.bookingCode ?? 'KSP-DEMO'
  const amount = session?.amount ?? 350000
  const paymentMethod = session?.paymentMethod ?? 'QRIS'

  // ── QRIS: Pelanggan klaim sudah bayar ────────────────────
  async function handleClaimPaid() {
    setClaimStatus('submitting')
    try {
      if (session?.paymentId) {
        await fetch(`/api/payments/${session.paymentId}/claim`, { method: 'POST' })
      }
      setClaimStatus('done')
      setTimeout(() => {
        sessionStorage.removeItem('ksp_booking')
        router.push(`/booking/success?code=${bookingCode}&method=QRIS&claimed=true`)
      }, 1200)
    } catch {
      setClaimStatus('error')
    }
  }

  // ── CASH: Konfirmasi booking tunai ────────────────────────
  async function handleCashConfirm() {
    setCashStatus('confirming')
    try {
      if (session?.bookingId) {
        await fetch('/api/payment/confirm', {
          method: 'PATCH',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ bookingId: session.bookingId, amount }),
        })
      }
      setCashStatus('done')
      setTimeout(() => {
        sessionStorage.removeItem('ksp_booking')
        router.push(`/booking/success?code=${bookingCode}&method=CASH`)
      }, 1000)
    } catch {
      setCashStatus('idle')
    }
  }

  return (
    <div className={styles.page}>
      <header className={styles.header}>
        <Link href="/booking" className={styles.logo}>
          <Leaf size={18} strokeWidth={1.5}/>
          <span>Kembali SPA</span>
        </Link>
        <span className={styles.headerTitle}>Pembayaran</span>
        <div/>
      </header>

      <div className={styles.content}>
        {/* Summary */}
        <div className={styles.summaryCard}>
          <div className={styles.summaryTitle}>Ringkasan Pesanan</div>
          {session?.services.map((sv, i) => (
            <div key={i} className={styles.summaryRow}>
              <span>
                <FontAwesomeIcon icon="spa" style={{ marginRight: 5, color: 'var(--sage-400)' }} aria-hidden="true" />
                {sv.name} {sv.qty > 1 ? `×${sv.qty}` : ''}
              </span>
              <span>{fmtRp(sv.price * sv.qty)}</span>
            </div>
          )) ?? (
            <div className={styles.summaryRow}>
              <span><FontAwesomeIcon icon="spa" style={{ marginRight: 5, color: 'var(--sage-400)' }} aria-hidden="true" />Layanan SPA</span>
              <span>{fmtRp(amount)}</span>
            </div>
          )}
          {session && (
            <>
              <div className={styles.summaryRow}>
                <span><FontAwesomeIcon icon="calendar-days" style={{ marginRight: 5 }} aria-hidden="true" />Jadwal</span>
                <span>{session.scheduledDate} · {session.scheduledTime}</span>
              </div>
              <div className={styles.summaryRow}>
                <span><FontAwesomeIcon icon="location-dot" style={{ marginRight: 5 }} aria-hidden="true" />Lokasi</span>
                <span>{session.address.line1}, {session.address.city}</span>
              </div>
            </>
          )}
          <div className={styles.summaryDivider}/>
          <div className={styles.totalRow}>
            <span>Total Pembayaran</span>
            <span>{fmtRp(amount)}</span>
          </div>
        </div>

        {/* ID Pemesanan */}
        <div className={styles.bookingCodeBox}>
          <span className="text-label">ID Pemesanan</span>
          <span className={styles.bookingCode}>{bookingCode}</span>
        </div>

        {/* Payment Method Info */}
        <div className={styles.methodBox}>
          <div className={styles.methodLabel}>Metode Pembayaran</div>
          <div className={styles.methodSelected}>
            <span className={styles.methodIcon}>
              {paymentMethod === 'QRIS'
                ? <FontAwesomeIcon icon="mobile-screen" aria-hidden="true" />
                : <FontAwesomeIcon icon="money-bill-wave" aria-hidden="true" />
              }
            </span>
            <div>
              <div className={styles.methodName}>
                {paymentMethod === 'QRIS' ? 'QRIS' : 'Tunai ke Terapis'}
              </div>
              <div className={styles.methodDesc}>
                {paymentMethod === 'QRIS'
                  ? 'Scan QR via GoPay, OVO, Dana, ShopeePay, m-Banking'
                  : 'Bayar tunai langsung ke terapis saat sesi selesai'}
              </div>
            </div>
            <span className={styles.methodCheck}>✓</span>
          </div>
        </div>

        {/* ── CTA QRIS ── */}
        {paymentMethod === 'QRIS' && (
          <>
            <button
              className="btn btn-primary btn-full btn-lg"
              onClick={() => setModalOpen(true)}
            >
              <FontAwesomeIcon icon="mobile-screen" style={{ marginRight: 6 }} aria-hidden="true" />
              Lihat QR Code &amp; Bayar
            </button>
            <p className={styles.secureNote}>
              <FontAwesomeIcon icon="lock" style={{ marginRight: 5 }} aria-hidden="true" />
              Admin akan konfirmasi pembayaran dalam 1–15 menit setelah transfer
            </p>
          </>
        )}

        {/* ── CTA CASH ── */}
        {paymentMethod === 'CASH' && (
          <div className={styles.cashSection}>
            <div className={styles.cashInfo}>
              <FontAwesomeIcon icon="money-bill-wave" style={{ fontSize: '2rem', color: 'var(--sage-400)', marginBottom: 8 }} aria-hidden="true" />
              <div className={styles.cashTitle}>Bayar Tunai ke Terapis</div>
              <div className={styles.cashAmount}>{fmtRp(amount)}</div>
              <p className={styles.cashDesc}>
                Siapkan uang pas dan bayarkan langsung ke terapis saat sesi treatment selesai.
                Terapis akan mengkonfirmasi penerimaan pembayaran.
              </p>
            </div>

            <button
              className="btn btn-primary btn-full btn-lg"
              onClick={handleCashConfirm}
              disabled={cashStatus !== 'idle'}
            >
              {cashStatus === 'idle' && (
                <><FontAwesomeIcon icon="circle-check" style={{ marginRight: 6 }} aria-hidden="true" />Konfirmasi Booking</>
              )}
              {cashStatus === 'confirming' && (
                <><div className="spinner spinner-sm" />{"Memproses..."}</>
              )}
              {cashStatus === 'done' && (
                <><CheckCircle2 size={16} style={{ marginRight: 6 }} />Berhasil! Mengalihkan...</>
              )}
            </button>

            <p className={styles.secureNote}>
              <FontAwesomeIcon icon="lock" style={{ marginRight: 5 }} aria-hidden="true" />
              Booking dikonfirmasi otomatis. Bayar tunai ke terapis saat sesi selesai.
            </p>
          </div>
        )}
      </div>

      {/* ── QRIS MODAL ── */}
      {modalOpen && paymentMethod === 'QRIS' && (
        <div className="modal-overlay" onClick={(e) => { if (e.target === e.currentTarget && claimStatus === 'idle') setModalOpen(false) }}>
          <div className={styles.qrisModal}>
            <div className={styles.qrisModalHeader}>
              <div className={styles.qrisModalTitle}>
                <span className={`badge badge-confirmed ${styles.qrisBadge}`}>QRIS</span>
                <span>Scan &amp; Bayar</span>
              </div>
              <button
                className={styles.closeBtn}
                aria-label="Tutup"
                onClick={() => setModalOpen(false)}
                disabled={claimStatus === 'submitting' || claimStatus === 'done'}
              >
                <X size={18}/>
              </button>
            </div>

            <div className={`qris-card ${styles.qrisCardClean}`}>
              <div className={styles.qrisOwner}>Kembali SPA</div>
              <div className={styles.qrisImageWrap}>
                {/* Foto QR statis dari /public/qris.png */}
                <Image
                  src="/qris.png"
                  alt="QR Code Pembayaran QRIS Kembali SPA"
                  width={220}
                  height={220}
                  className={styles.qrImg}
                  priority
                  onError={(e) => {
                    // Fallback jika file belum diupload
                    (e.target as HTMLImageElement).style.display = 'none'
                  }}
                />
                <div className={styles.qrisPlaceholder} id="qris-placeholder-fallback">
                  <FontAwesomeIcon icon="mobile-screen" className="qris-placeholder-icon" aria-hidden="true" />
                  <p className="qris-placeholder-text">
                    Foto QR belum diupload.<br/>Upload <code>public/qris.png</code>
                  </p>
                </div>
              </div>
              <div className="qris-amount">{fmtRp(amount)}</div>
              <div className="qris-expire">
                <FontAwesomeIcon icon="shield-heart" style={{ marginRight: 4 }} aria-hidden="true" />
                Berlaku di semua e-wallet &amp; m-Banking
              </div>
            </div>

            <div className={styles.qrisInstructions}>
              <p><strong>Cara bayar:</strong></p>
              <ol>
                <li>Buka GoPay / OVO / Dana / ShopeePay / m-Banking</li>
                <li>Pilih menu <strong>QRIS</strong> atau <strong>Scan QR</strong></li>
                <li>Scan QR di atas</li>
                <li>Masukkan nominal <strong>{fmtRp(amount)}</strong></li>
                <li>Konfirmasi di aplikasi kamu</li>
                <li>Klik <strong>&ldquo;Saya Sudah Bayar&rdquo;</strong> di bawah</li>
              </ol>
              <p className={styles.adminNote}>
                <FontAwesomeIcon icon="hourglass-half" style={{ marginRight: 5 }} aria-hidden="true" />
                Admin akan konfirmasi dalam <strong>1–15 menit</strong>
              </p>
            </div>

            <div className={styles.qrisActions}>
              {claimStatus === 'idle' && (
                <>
                  <button className="btn btn-primary btn-full" onClick={handleClaimPaid}>
                    <FontAwesomeIcon icon="circle-check" style={{ marginRight: 6 }} aria-hidden="true" />
                    Saya Sudah Bayar
                  </button>
                  <button className="btn btn-ghost btn-full btn-sm" onClick={() => setModalOpen(false)}>
                    Batal
                  </button>
                </>
              )}
              {claimStatus === 'submitting' && (
                <div className={styles.checkingRow}>
                  <div className="spinner"/>
                  <span>Mengirim konfirmasi...</span>
                </div>
              )}
              {claimStatus === 'done' && (
                <div className={`${styles.checkingRow} ${styles.checkingDone}`}>
                  <CheckCircle2 size={20} style={{ color: '#22c55e' }} />
                  <span>Berhasil! Mengalihkan ke halaman sukses...</span>
                </div>
              )}
              {claimStatus === 'error' && (
                <div className={`${styles.checkingRow} ${styles.checkingError}`}>
                  <AlertCircle size={18} />
                  <span>Gagal mengirim. Coba lagi.</span>
                  <button className="btn btn-ghost btn-sm" onClick={() => setClaimStatus('idle')}>Coba Lagi</button>
                </div>
              )}
            </div>

            <p className={styles.secureNote}>
              <FontAwesomeIcon icon="lock" style={{ marginRight: 5 }} aria-hidden="true" />
              Transaksi aman &amp; terenkripsi
            </p>
          </div>
        </div>
      )}
    </div>
  )
}