'use client'
import { useState, useCallback } from 'react'
import { usePolling } from '@/hooks/usePolling'
import { Search, Filter, RefreshCw, ExternalLink } from 'lucide-react'
import Link from 'next/link'
import styles from './page.module.css'

interface Booking {
  id: string; bookingCode: string; status: string
  totalPrice: number; discountAmount: number; finalPrice: number
  createdAt: string; scheduledAt: string
  customer: { name: string; phone: string }
  therapist: { user: { name: string } } | null
  items: { service: { name: string } }[]
  payment: { id: string; status: string; method: string | null } | null
}
interface Resp { bookings: Booking[]; total: number; totalPages: number }

const ALL_STATUSES = ['ALL','PENDING','CONFIRMED','ASSIGNED','IN_PROGRESS','COMPLETED','CANCELLED']
const BADGE: Record<string,string> = { PENDING:'badge-pending', CONFIRMED:'badge-confirmed', ASSIGNED:'badge-confirmed', IN_PROGRESS:'badge-inprogress', COMPLETED:'badge-done', CANCELLED:'badge-cancelled' }
const LABEL: Record<string,string> = { PENDING:'Menunggu', CONFIRMED:'Dikonfirmasi', ASSIGNED:'Assigned', IN_PROGRESS:'Berlangsung', COMPLETED:'Selesai', CANCELLED:'Dibatalkan' }
function fmtRp(n: number) { return `Rp ${n.toLocaleString('id-ID')}` }

export default function BookingsPage() {
  const [status, setStatus] = useState('ALL')
  const [search, setSearch] = useState('')
  const [searchInput, setSearchInput] = useState('')
  const [page, setPage] = useState(1)
  const [updatingId, setUpdatingId] = useState<string | null>(null)

  const url = `/api/admin/bookings?status=${status}&search=${encodeURIComponent(search)}&page=${page}&limit=15`
  const { data, loading, hasNewData, lastUpdated, refetch } = usePolling<Resp>(url, 5000)

  const handleSearch = useCallback(() => {
    setSearch(searchInput)
    setPage(1)
  }, [searchInput])

  async function updateStatus(id: string, newStatus: string) {
    setUpdatingId(id)
    try {
      await fetch(`/api/admin/bookings/${id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ status: newStatus }),
      })
      await refetch()
    } finally {
      setUpdatingId(null)
    }
  }

  async function confirmQrisPayment(paymentId: string, bookingCode: string) {
    const confirmed = window.confirm(
      `Konfirmasi pembayaran QRIS untuk booking ${bookingCode}?\nPastikan sudah cek mutasi rekening!`
    )
    if (!confirmed) return
    try {
      const res = await fetch(`/api/payments/${paymentId}/confirm`, { method: 'PATCH' })
      const json = await res.json()
      if (res.ok) {
        alert(`✅ ${json.message}`)
        await refetch()
      } else {
        alert(`❌ ${json.error}`)
      }
    } catch {
      alert('❌ Gagal terhubung ke server')
    }
  }

  return (
    <div className={styles.page}>
      {hasNewData && <div className={styles.toast}>🔔 Data booking diperbarui!</div>}

      <div className={styles.topBar}>
        <div>
          <h1 className={styles.pageTitle}>Manajemen Booking</h1>
          <p className={styles.pageSub}>
            {data ? `${data.total} total booking` : '—'}
            {lastUpdated && <span className={styles.updated}> · {lastUpdated.toLocaleTimeString('id-ID')}</span>}
          </p>
        </div>
        <button className={styles.refreshBtn} onClick={() => refetch()} aria-label="Refresh data booking"><RefreshCw size={14}/></button>
      </div>

      {/* Filters */}
      <div className={styles.filters}>
        <div className={styles.searchBox}>
          <Search size={16} className={styles.searchIcon} />
          <input
            className={styles.searchInput}
            placeholder="Cari kode, nama pelanggan..."
            value={searchInput}
            onChange={e => setSearchInput(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && handleSearch()}
          />
          <button className={styles.searchBtn} onClick={handleSearch}>Cari</button>
        </div>
        <div className={styles.statusTabs}>
          <Filter size={14} className={styles.filterIcon} />
          {ALL_STATUSES.map(s => (
            <button key={s} className={`${styles.tab} ${status === s ? styles.tabActive : ''}`} onClick={() => { setStatus(s); setPage(1) }}>
              {s === 'ALL' ? 'Semua' : LABEL[s]}
            </button>
          ))}
        </div>
      </div>

      {/* Table */}
      <div className={styles.card}>
        {loading && !data ? (
          <div className={styles.loading}>Memuat data booking...</div>
        ) : !data?.bookings?.length ? (
          <div className={styles.empty}>Tidak ada booking ditemukan</div>
        ) : (
          <div className={styles.tableScrollWrap}>
            <table className="table">
              <thead>
                <tr>
                  <th>Kode</th><th>Pelanggan</th><th>Layanan</th><th>Jadwal</th>
                  <th>Terapis</th><th>Total</th><th>Pembayaran</th><th>Status</th><th>Aksi</th>
                </tr>
              </thead>
              <tbody>
                {data.bookings.map((b) => (
                  <tr key={b.id} className={b.status === 'PENDING' ? styles.rowPending : ''}>
                    <td className="td-primary">{b.bookingCode}</td>
                    <td>
                      <div className={styles.custName}>{b.customer.name}</div>
                      <div className={styles.custPhone}>{b.customer.phone}</div>
                    </td>
                    <td>{b.items[0]?.service?.name ?? '—'}</td>
                    <td>{new Date(b.scheduledAt).toLocaleString('id-ID', { day:'2-digit', month:'short', hour:'2-digit', minute:'2-digit' })}</td>
                    <td>{b.therapist?.user?.name ?? <span className={styles.noTherapist}>Belum assign</span>}</td>
                    <td className="td-primary">
                      {b.discountAmount > 0 ? (
                        <>
                          <div className={styles.priceOriginal}>{fmtRp(b.totalPrice)}</div>
                          <div className={styles.priceFinal}>{fmtRp(b.finalPrice)}</div>
                          <div className={styles.discountTag}>Diskon {fmtRp(b.discountAmount)}</div>
                        </>
                      ) : fmtRp(b.finalPrice)}
                    </td>
                    <td>
                      {/* QRIS menunggu konfirmasi */}
                      {b.payment?.method === 'QRIS' && b.payment?.status !== 'FULLY_PAID' && (
                        <div className={styles.qrisPaymentCell}>
                          <span className="badge badge-waiting">⏳ QRIS Pending</span>
                          <button
                            className={`btn btn-primary btn-sm ${styles.qrisConfirmBtn}`}
                            onClick={() => confirmQrisPayment(b.payment!.id, b.bookingCode)}
                          >
                            ✅ Konfirmasi QRIS
                          </button>
                        </div>
                      )}
                      {/* QRIS sudah lunas */}
                      {b.payment?.method === 'QRIS' && b.payment?.status === 'FULLY_PAID' && (
                        <span className="badge badge-done">✅ QRIS Lunas</span>
                      )}
                      {/* CASH belum bayar */}
                      {b.payment?.method === 'CASH' && b.payment?.status !== 'FULLY_PAID' && (
                        <span className="badge badge-cash">💵 Bayar ke Terapis</span>
                      )}
                      {/* CASH sudah lunas */}
                      {b.payment?.method === 'CASH' && b.payment?.status === 'FULLY_PAID' && (
                        <span className="badge badge-done">✅ Tunai Lunas</span>
                      )}
                      {/* Tidak ada payment data */}
                      {!b.payment && (
                        <span className="badge badge-pending">Belum Bayar</span>
                      )}
                    </td>
                    <td><span className={`badge ${BADGE[b.status]}`}>{LABEL[b.status]}</span></td>
                    <td>
                      <div className={styles.actions}>
                        {b.status === 'PENDING' && (
                          <button className="btn btn-primary btn-sm" disabled={updatingId === b.id} onClick={() => updateStatus(b.id, 'CONFIRMED')}>
                            {updatingId === b.id ? '...' : 'Konfirmasi'}
                          </button>
                        )}
                        <Link href={`/admin/bookings/${b.id}`} className="btn btn-ghost btn-sm">
                          <ExternalLink size={13}/>
                        </Link>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {/* Pagination */}
        {data && data.totalPages > 1 && (
          <div className={styles.pagination}>
            <button className="btn btn-ghost btn-sm" disabled={page === 1} onClick={() => setPage(p => p - 1)}>← Prev</button>
            <span className={styles.pageInfo}>Hal {page} / {data.totalPages}</span>
            <button className="btn btn-ghost btn-sm" disabled={page >= data.totalPages} onClick={() => setPage(p => p + 1)}>Next →</button>
          </div>
        )}
      </div>
    </div>
  )
}