'use client'
import { useState, use } from 'react'
import { usePolling } from '@/hooks/usePolling'
import { ArrowLeft, MapPin, Phone, Clock, CreditCard, User } from 'lucide-react'
import Link from 'next/link'
import styles from './page.module.css'

const STATUS_FLOW = ['PENDING','CONFIRMED','ASSIGNED','IN_PROGRESS','COMPLETED']
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')}` }

interface BookingDetail {
  id: string; bookingCode: string; status: string; scheduledAt: string; finalPrice: number
  notes: string | null; internalNotes: string | null; cancelReason: string | null
  addressLabel: string; addressLine1: string; addressCity: string; addressProvince: string
  recipientName: string; recipientPhone: string
  customer: { name: string; email: string; phone: string }
  therapist: { id: string; user: { name: string; phone: string } } | null
  items: { id: string; service: { name: string; category: string }; quantity: number; unitPrice: number; subtotal: number; duration: number }[]
  payment: { status: string; amount: number; paidAmount: number; method: string | null; paidAt: string | null } | null
  review: { rating: number; comment: string | null } | null
}

export default function BookingDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params)
  const { data: booking, loading, refetch } = usePolling<BookingDetail>(`/api/admin/bookings/${id}`, 10000)
  const [updating, setUpdating] = useState(false)
  const [internalNote, setInternalNote] = useState('')
  const [cancelReason, setCancelReason] = useState('')
  const [showCancel, setShowCancel] = useState(false)

  async function updateStatus(status: string) {
    setUpdating(true)
    try {
      await fetch(`/api/admin/bookings/${id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ status, ...(status === 'CANCELLED' && { cancelReason }) }),
      })
      await refetch()
      setShowCancel(false)
    } finally { setUpdating(false) }
  }

  async function saveNote() {
    if (!internalNote.trim()) return
    setUpdating(true)
    try {
      await fetch(`/api/admin/bookings/${id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ internalNotes: internalNote }),
      })
      await refetch()
      setInternalNote('')
    } finally { setUpdating(false) }
  }

  if (loading) return <div className={styles.loadingPage}><div className="spinner" /><p>Memuat detail booking...</p></div>
  if (!booking) return <div className={styles.loadingPage}><p>Booking tidak ditemukan</p><Link href="/admin/bookings" className="btn btn-primary">← Kembali</Link></div>

  const curIdx = STATUS_FLOW.indexOf(booking.status)
  const nextStatus = curIdx >= 0 && curIdx < STATUS_FLOW.length - 1 ? STATUS_FLOW[curIdx + 1] : null
  const nextLabel: Record<string,string> = { CONFIRMED:'Konfirmasi', ASSIGNED:'Assign Terapis', IN_PROGRESS:'Mulai Sesi', COMPLETED:'Selesaikan' }

  return (
    <div className={styles.page}>
      <div className={styles.topBar}>
        <Link href="/admin/bookings" className={styles.backBtn}><ArrowLeft size={16}/> Kembali</Link>
        <div className={styles.headerRight}>
          <span className={`badge ${BADGE[booking.status]}`}>{LABEL[booking.status]}</span>
          {nextStatus && !showCancel && (
            <button className="btn btn-primary btn-sm" disabled={updating} onClick={() => updateStatus(nextStatus)}>
              {updating ? '...' : `→ ${nextLabel[nextStatus]}`}
            </button>
          )}
          {booking.status !== 'CANCELLED' && booking.status !== 'COMPLETED' && (
            <button className={styles.cancelBtn} onClick={() => setShowCancel(s => !s)}>Batalkan</button>
          )}
        </div>
      </div>

      {showCancel && (
        <div className={styles.cancelBox}>
          <h4>Alasan Pembatalan</h4>
          <textarea className={styles.textarea} rows={2} placeholder="Tulis alasan..." value={cancelReason} onChange={e => setCancelReason(e.target.value)} />
          <div className={styles.cancelActions}>
            <button className="btn btn-ghost btn-sm" onClick={() => setShowCancel(false)}>Batal</button>
            <button className={`btn btn-sm ${styles.btnDanger}`} onClick={() => updateStatus('CANCELLED')} disabled={updating || !cancelReason}>
              {updating ? '...' : 'Konfirmasi Batalkan'}
            </button>
          </div>
        </div>
      )}

      {/* Status Timeline */}
      <div className={styles.card}>
        <h3 className={styles.cardTitle}>Status Pesanan</h3>
        <div className={styles.timeline}>
          {STATUS_FLOW.map((s, i) => {
            const done = i < curIdx; const active = i === curIdx
            return (
              <div key={s} className={styles.timelineItem}>
                <div className={`${styles.timelineDot} ${done ? styles.dotDone : active ? styles.dotActive : styles.dotPending}`}>
                  {done ? '✓' : i + 1}
                </div>
                <div className={styles.timelineLabel}>{LABEL[s]}</div>
                {i < STATUS_FLOW.length - 1 && <div className={`${styles.timelineLine} ${done ? styles.lineDone : ''}`} />}
              </div>
            )
          })}
        </div>
      </div>

      <div className={styles.gridTwo}>
        {/* Booking Info */}
        <div className={styles.card}>
          <h3 className={styles.cardTitle}>Informasi Booking</h3>
          <div className={styles.infoGrid}>
            <div className={styles.infoItem}><span className={styles.infoLabel}>Kode</span><span className={styles.infoValue}>{booking.bookingCode}</span></div>
            <div className={styles.infoItem}><span className={styles.infoLabel}>Jadwal</span><span className={styles.infoValue}>{new Date(booking.scheduledAt).toLocaleString('id-ID')}</span></div>
            <div className={styles.infoItem}><span className={styles.infoLabel}>Total</span><span className={styles.infoValue}>{fmtRp(booking.finalPrice)}</span></div>
            <div className={styles.infoItem}>
              <span className={styles.infoLabel}>Pembayaran</span>
              <span className={`badge ${booking.payment?.status === 'FULLY_PAID' ? 'badge-done' : 'badge-pending'}`}>
                {booking.payment?.status === 'FULLY_PAID' ? 'Lunas' : 'Belum Bayar'}
              </span>
            </div>
          </div>

          <div className={styles.divider} />
          <h4 className={styles.subTitle}><MapPin size={14}/> Lokasi</h4>
          <p className={styles.address}>{booking.addressLine1}, {booking.addressCity}, {booking.addressProvince}</p>
          <p className={styles.addressSub}><Phone size={12}/> {booking.recipientPhone} · {booking.recipientName}</p>

          {booking.notes && <>
            <div className={styles.divider} />
            <h4 className={styles.subTitle}>Catatan Pelanggan</h4>
            <p className={styles.noteText}>{booking.notes}</p>
          </>}

          {booking.internalNotes && <>
            <div className={styles.divider} />
            <h4 className={styles.subTitle}>Catatan Internal</h4>
            <p className={styles.noteText}>{booking.internalNotes}</p>
          </>}
        </div>

        <div className={styles.col2}>
          {/* Customer */}
          <div className={styles.card}>
            <h3 className={styles.cardTitle}><User size={15}/> Pelanggan</h3>
            <div className={styles.personInfo}>
              <div className={styles.avatar}>{booking.customer.name[0]}</div>
              <div>
                <div className={styles.personName}>{booking.customer.name}</div>
                <div className={styles.personSub}>{booking.customer.email}</div>
                <div className={styles.personSub}><Phone size={11}/> {booking.customer.phone}</div>
              </div>
            </div>
          </div>

          {/* Terapis */}
          <div className={styles.card}>
            <h3 className={styles.cardTitle}><User size={15}/> Terapis</h3>
            {booking.therapist ? (
              <div className={styles.personInfo}>
                <div className={styles.avatarGreen}>{booking.therapist.user.name[0]}</div>
                <div>
                  <div className={styles.personName}>{booking.therapist.user.name}</div>
                  <div className={styles.personSub}><Phone size={11}/> {booking.therapist.user.phone}</div>
                </div>
              </div>
            ) : <p className={styles.noTherapist}>Belum ada terapis yang ditugaskan</p>}
          </div>

          {/* Payment */}
          <div className={styles.card}>
            <h3 className={styles.cardTitle}><CreditCard size={15}/> Pembayaran QRIS</h3>
            <div className={styles.payRow}><span>Metode</span><span>QRIS</span></div>
            <div className={styles.payRow}><span>Jumlah</span><span>{fmtRp(booking.payment?.amount ?? 0)}</span></div>
            <div className={styles.payRow}><span>Dibayar</span><span>{fmtRp(booking.payment?.paidAmount ?? 0)}</span></div>
            <div className={styles.payRow}><span>Status</span><span className={`badge ${booking.payment?.status === 'FULLY_PAID' ? 'badge-done' : 'badge-pending'}`}>{booking.payment?.status === 'FULLY_PAID' ? 'Lunas' : 'Belum Bayar'}</span></div>
            {booking.payment?.paidAt && <div className={styles.payRow}><span>Bayar pada</span><span>{new Date(booking.payment.paidAt).toLocaleString('id-ID')}</span></div>}
          </div>
        </div>
      </div>

      {/* Services */}
      <div className={styles.card}>
        <h3 className={styles.cardTitle}>Layanan Dipesan</h3>
        <table className="table">
          <thead><tr><th>Layanan</th><th>Kategori</th><th>Qty</th><th>Durasi</th><th>Harga</th><th>Subtotal</th></tr></thead>
          <tbody>
            {booking.items.map(item => (
              <tr key={item.id}>
                <td className="td-primary">{item.service.name}</td>
                <td>{item.service.category}</td>
                <td>{item.quantity}</td>
                <td><Clock size={12}/> {item.duration} mnt</td>
                <td>{fmtRp(Number(item.unitPrice))}</td>
                <td className="td-primary">{fmtRp(Number(item.subtotal))}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Internal Note */}
      <div className={styles.card}>
        <h3 className={styles.cardTitle}>Tambah Catatan Internal</h3>
        <textarea className={styles.textarea} rows={3} placeholder="Tulis catatan untuk tim internal..." value={internalNote} onChange={e => setInternalNote(e.target.value)} />
        <button className="btn btn-primary btn-sm" onClick={saveNote} disabled={updating || !internalNote.trim()}>{updating ? 'Menyimpan...' : 'Simpan Catatan'}</button>
      </div>

      {booking.review && (
        <div className={styles.card}>
          <h3 className={styles.cardTitle}>Ulasan Pelanggan</h3>
          <div className={styles.reviewStars}>{'★'.repeat(booking.review.rating)}{'☆'.repeat(5 - booking.review.rating)}</div>
          {booking.review.comment && <p className={styles.reviewText}>{booking.review.comment}</p>}
        </div>
      )}
    </div>
  )
}