'use client'
import { useState, useEffect, useRef, useCallback } from 'react'
import { useSearchParams } from 'next/navigation'
import { Search, MapPin, Phone, Clock, CheckCircle, Circle, AlertCircle, RefreshCw, Star, CreditCard, User, ChevronRight } from 'lucide-react'
import Link from 'next/link'
import { FontAwesomeIcon } from '@/lib/fa'
import styles from './page.module.css'

// ─── Types ───────────────────────────────────────────────────────────────────
interface TrackData {
  id: string
  bookingCode: string
  status: string
  scheduledAt: string
  estimatedEndAt: string | null
  actualStartAt: string | null
  actualEndAt: string | null
  finalPrice: number
  totalPrice: number
  discountAmount: number
  addressLabel: string
  addressLine1: string
  addressCity: string
  addressProvince: string
  recipientName: string
  recipientPhone: string
  notes: string | null
  createdAt: string
  updatedAt: string
  customer: { name: string }
  therapist: { user: { name: string } } | null
  items: { service: { name: string; category: string; duration: number } }[]
  payment: {
    status: string
    amount: number
    paidAmount: number
    method: string | null
    paidAt: string | null
    expiresAt: string | null
    qrCodeUrl: string | null
  } | null
  review: { rating: number; comment: string | null } | null
}

// ─── Statics ─────────────────────────────────────────────────────────────────
const STATUS_FLOW = [
  { key: 'PENDING',    label: 'Pesanan Diterima',         desc: 'Pesanan Anda sedang menunggu konfirmasi dari tim kami.',              faIcon: 'clipboard-list' as const },
  { key: 'CONFIRMED',  label: 'Dikonfirmasi',              desc: 'Pesanan Anda telah dikonfirmasi. Terapis akan segera disiapkan.',      faIcon: 'circle-check'   as const },
  { key: 'ASSIGNED',   label: 'Terapis Ditugaskan',        desc: 'Terapis terbaik kami telah dipilih untuk melayani Anda.',             faIcon: 'user-nurse'     as const },
  { key: 'ON_THE_WAY', label: 'Terapis Dalam Perjalanan',  desc: 'Terapis sedang dalam perjalanan menuju lokasi Anda.',                faIcon: 'location-dot'   as const },
  { key: 'IN_PROGRESS',label: 'Sesi Berlangsung',          desc: 'Sesi perawatan sedang berlangsung. Nikmati layanan kami!',           faIcon: 'spa'            as const },
  { key: 'COMPLETED',  label: 'Selesai',                   desc: 'Sesi perawatan telah selesai. Terima kasih telah mempercayai Kembali SPA!', faIcon: 'award'     as const },
]

const CANCELLED = { key: 'CANCELLED', label: 'Dibatalkan', desc: 'Pesanan ini telah dibatalkan.', faIcon: 'circle-xmark' as const }

const STATUS_COLOR: Record<string, string> = {
  PENDING: 'var(--sage-300)',
  CONFIRMED: 'var(--sage-400)',
  ASSIGNED: 'var(--sage-400)',
  ON_THE_WAY: '#f59e0b',
  IN_PROGRESS: 'var(--sage-500)',
  COMPLETED: '#22c55e',
  CANCELLED: '#dc2626',
}

function fmtRp(n: number) { return `Rp ${Number(n).toLocaleString('id-ID')}` }
function fmtDate(d: string) {
  return new Date(d).toLocaleString('id-ID', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit' })
}
function fmtShort(d: string) {
  return new Date(d).toLocaleString('id-ID', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })
}

// ─── Component ────────────────────────────────────────────────────────────────
export default function TrackPage() {
  const [input, setInput] = useState('')
  const [code, setCode] = useState('')
  const [data, setData] = useState<TrackData | null>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')
  const [lastUpdated, setLastUpdated] = useState<Date | null>(null)
  const [polling, setPolling] = useState(false)
  const [showQr, setShowQr] = useState(false)
  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
  const prevStatusRef = useRef<string>('')
  const [statusChanged, setStatusChanged] = useState(false)

  const fetchData = useCallback(async (bookingCode: string, silent = false) => {
    if (!silent) setLoading(true)
    setError('')
    try {
      const res = await fetch(`/api/track/${bookingCode.trim().toUpperCase()}`, { cache: 'no-store' })
      const json = await res.json()
      if (!res.ok) { setError(json.error ?? 'Booking tidak ditemukan'); setData(null); return }

      // Detect status change
      if (prevStatusRef.current && prevStatusRef.current !== json.status) {
        setStatusChanged(true)
        setTimeout(() => setStatusChanged(false), 4000)
      }
      prevStatusRef.current = json.status

      setData(json)
      setLastUpdated(new Date())
    } catch {
      setError('Gagal terhubung ke server. Coba lagi.')
    } finally {
      setLoading(false)
    }
  }, [])

  // Auto-search if ?code= query param present (e.g. redirected from /track/[code])
  const searchParams = useSearchParams()
  useEffect(() => {
    const urlCode = searchParams.get('code')
    if (urlCode?.trim()) {
      const upper = urlCode.trim().toUpperCase()
      setInput(upper)
      setCode(upper)
      fetchData(upper)
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [fetchData])

  // Start polling when we have data and order is not finished
  useEffect(() => {
    if (!code || !data) return
    const finished = data.status === 'COMPLETED' || data.status === 'CANCELLED'
    if (finished) { if (intervalRef.current) clearInterval(intervalRef.current); setPolling(false); return }

    setPolling(true)
    intervalRef.current = setInterval(() => fetchData(code, true), 10000)
    return () => { if (intervalRef.current) clearInterval(intervalRef.current) }
  }, [code, data?.status, fetchData])

  function handleSearch(e: React.FormEvent) {
    e.preventDefault()
    if (!input.trim()) return
    setCode(input.trim().toUpperCase())
    fetchData(input.trim().toUpperCase())
  }

  const curFlow = data?.status === 'CANCELLED' ? [CANCELLED] : STATUS_FLOW
  const curIdx = data ? curFlow.findIndex(s => s.key === data.status) : -1

  return (
    <div className={styles.page}>
      {/* Navbar mini */}
      <header className={styles.header}>
        <Link href="/" className={styles.logo}>
          <span className={styles.logoLeaf}>🌿</span>
          <span className={styles.logoText}>Kembali SPA</span>
        </Link>
        <Link href="/booking" className="btn btn-primary btn-sm">Pesan Sekarang</Link>
      </header>

      {/* Hero Search */}
      <section className={styles.hero}>
        <div className={styles.heroBadge}>
          <FontAwesomeIcon icon="magnifying-glass" style={{ marginRight: 6 }} aria-hidden="true" />
          Lacak Pesanan
        </div>
        <h1 className={styles.heroTitle}>Pantau Status Booking Anda</h1>
        <p className={styles.heroSub}>Masukkan kode booking untuk melihat status terkini secara real-time</p>

        <form className={styles.searchForm} onSubmit={handleSearch} role="search">
          <div className={styles.searchWrap}>
            <Search size={18} className={styles.searchIcon} aria-hidden="true" />
            <input
              id="booking-code-input"
              className={styles.searchInput}
              placeholder="Contoh: KSP-20260421-0042"
              value={input}
              onChange={e => setInput(e.target.value.toUpperCase())}
              autoComplete="off"
              spellCheck={false}
              aria-label="Kode booking"
            />
            <button
              type="submit"
              className={styles.searchBtn}
              disabled={loading || !input.trim()}
              aria-label="Cari booking"
            >
              {loading ? <span className={styles.spinnerSm} /> : 'Lacak'}
            </button>
          </div>
          {error && (
            <div className={styles.errorBox} role="alert">
              <AlertCircle size={16} aria-hidden="true" />
              <span>{error}</span>
            </div>
          )}
        </form>

        {/* Example codes hint */}
        <p className={styles.hint}>
          Kode booking dikirim via WhatsApp setelah pemesanan berhasil
        </p>
      </section>

      {/* Result */}
      {data && (
        <section className={styles.result}>
          {/* Status changed toast */}
          {statusChanged && (
            <div className={styles.toast} role="status">
              <FontAwesomeIcon icon="circle-check" style={{ marginRight: 6 }} aria-hidden="true" />
              Status pesanan baru saja diperbarui!
            </div>
          )}

          {/* Top status card */}
          <div className={styles.statusCard} data-status={data.status}>
            <div className={styles.statusLeft}>
              <div className={styles.statusEmoji}>
                <FontAwesomeIcon icon={curFlow[curIdx]?.faIcon ?? 'clipboard-list'} aria-hidden="true" />
              </div>
              <div>
                <div className={styles.statusLabel}>{curFlow[curIdx]?.label ?? data.status}</div>
                <div className={styles.statusDesc}>{curFlow[curIdx]?.desc}</div>
              </div>
            </div>
            <div className={styles.statusRight}>
              <div className={styles.bookingCode}>{data.bookingCode}</div>
              <div className={styles.lastUpdatedText}>
                {polling && <span className={styles.liveChip}><span className={styles.liveDot} />Live</span>}
                {lastUpdated && `Diperbarui ${lastUpdated.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}`}
              </div>
              <button
                className={styles.refreshBtn}
                onClick={() => fetchData(code, true)}
                aria-label="Refresh status"
              >
                <RefreshCw size={14} />
              </button>
            </div>
          </div>

          {/* Progress Timeline */}
          {data.status !== 'CANCELLED' && (
            <div className={styles.timelineCard}>
              <h2 className={styles.sectionTitle}>Progress Pesanan</h2>
              <div className={styles.timeline}>
                {STATUS_FLOW.map((step, i) => {
                  const done = i < curIdx
                  const active = i === curIdx
                  const future = i > curIdx
                  return (
                    <div key={step.key} className={`${styles.step} ${done ? styles.stepDone : active ? styles.stepActive : styles.stepFuture}`}>
                      <div className={styles.stepLeft}>
                        <div className={styles.stepDot}>
                          {done ? <CheckCircle size={20} /> : active ? <span className={styles.activePulse} /> : <Circle size={20} />}
                        </div>
                        {i < STATUS_FLOW.length - 1 && (
                          <div className={`${styles.stepLine} ${done ? styles.stepLineDone : ''}`} />
                        )}
                      </div>
                      <div className={styles.stepContent}>
                        <div className={styles.stepTitle}>
                          <FontAwesomeIcon icon={step.faIcon} style={{ marginRight: 6 }} aria-hidden="true" />
                          {step.label}
                        </div>
                        {(active || done) && <div className={styles.stepDesc}>{active ? step.desc : (done ? <><FontAwesomeIcon icon="circle-check" style={{ marginRight: 4 }} aria-hidden="true" />Selesai</> : '')}</div>}
                        {active && data.updatedAt && (
                          <div className={styles.stepTime}>{fmtShort(data.updatedAt)}</div>
                        )}
                      </div>
                    </div>
                  )
                })}
              </div>
            </div>
          )}

          {/* Cancelled state */}
          {data.status === 'CANCELLED' && (
            <div className={styles.cancelledCard}>
              <div className={styles.cancelledIcon}>
                <FontAwesomeIcon icon="circle-xmark" style={{ fontSize: '2.5rem', color: '#dc2626' }} aria-hidden="true" />
              </div>
              <h3 className={styles.cancelledTitle}>Pesanan Dibatalkan</h3>
              <p className={styles.cancelledSub}>Pesanan ini telah dibatalkan. Silakan hubungi kami jika ada pertanyaan.</p>
              <Link href="/booking" className="btn btn-primary">Pesan Ulang</Link>
            </div>
          )}

          <div className={styles.infoGrid}>
            {/* Detail Pesanan */}
            <div className={styles.infoCard}>
              <h2 className={styles.cardTitle}>Detail Pesanan</h2>

              <div className={styles.serviceBlock}>
                {data.items.map((item, i) => (
                  <div key={i} className={styles.serviceRow}>
                    <div className={styles.serviceEmoji}>
                      <FontAwesomeIcon icon="spa" style={{ color: 'var(--sage-400)' }} aria-hidden="true" />
                    </div>
                    <div className={styles.serviceInfo}>
                      <div className={styles.serviceName}>{item.service.name}</div>
                      <div className={styles.serviceMeta}>
                        <Clock size={12} aria-hidden="true" /> {item.service.duration} menit
                      </div>
                    </div>
                  </div>
                ))}
              </div>

              <div className={styles.divider} />

              <div className={styles.detailRow}>
                <Clock size={14} className={styles.detailIcon} aria-hidden="true" />
                <div>
                  <div className={styles.detailLabel}>Jadwal</div>
                  <div className={styles.detailValue}>{fmtDate(data.scheduledAt)}</div>
                </div>
              </div>

              <div className={styles.detailRow}>
                <MapPin size={14} className={styles.detailIcon} aria-hidden="true" />
                <div>
                  <div className={styles.detailLabel}>Lokasi</div>
                  <div className={styles.detailValue}>{data.addressLine1}</div>
                  <div className={styles.detailSub}>{data.addressCity}, {data.addressProvince}</div>
                </div>
              </div>

              <div className={styles.detailRow}>
                <Phone size={14} className={styles.detailIcon} aria-hidden="true" />
                <div>
                  <div className={styles.detailLabel}>Kontak</div>
                  <div className={styles.detailValue}>{data.recipientName} · {data.recipientPhone}</div>
                </div>
              </div>

              {data.therapist && (
                <div className={styles.detailRow}>
                  <User size={14} className={styles.detailIcon} aria-hidden="true" />
                  <div>
                    <div className={styles.detailLabel}>Terapis</div>
                    <div className={styles.detailValue}>{data.therapist.user.name}</div>
                  </div>
                </div>
              )}

              {data.notes && (
                <div className={styles.notesBox}>
                  <div className={styles.detailLabel}>Catatan</div>
                  <div className={styles.notesText}>{data.notes}</div>
                </div>
              )}
            </div>

            {/* Pembayaran */}
            <div className={styles.payCard}>
              <h2 className={styles.cardTitle}>
                <CreditCard size={16} aria-hidden="true" />
                Pembayaran {data.payment?.method === 'CASH' ? 'Tunai' : 'QRIS'}
              </h2>

              <div className={styles.payAmount}>{fmtRp(data.finalPrice)}</div>

              <div className={styles.payStatus}>
                <span className={`badge ${
                  data.payment?.status === 'FULLY_PAID' ? 'badge-done'
                  : data.payment?.method === 'CASH' ? 'badge-cash'
                  : 'badge-waiting'
                }`}>
                  {data.payment?.status === 'FULLY_PAID'
                    ? '✓ Lunas'
                    : data.payment?.method === 'CASH'
                    ? '💵 Bayar ke Terapis'
                    : '⏳ Menunggu Verifikasi Admin'}
                </span>
              </div>

              {data.payment?.paidAt && (
                <div className={styles.payMeta}>Dibayar pada {fmtShort(data.payment.paidAt)}</div>
              )}

              {data.payment?.expiresAt && data.payment.status === 'UNPAID' && data.payment.method !== 'CASH' && (
                <div className={styles.payExpiry}>
                  <FontAwesomeIcon icon="stopwatch" style={{ marginRight: 4 }} aria-hidden="true" />
                  Batas bayar: {fmtShort(data.payment.expiresAt)}
                </div>
              )}

              {/* QR placeholder for UNPAID QRIS */}
              {data.payment?.status === 'UNPAID' && data.payment.method !== 'CASH' && (
                <div className={styles.qrBox}>
                  <button
                    ref={el => { el?.setAttribute('aria-expanded', String(showQr)) }}
                    className={styles.qrToggle}
                    onClick={() => setShowQr(s => !s)}
                    aria-controls="qr-panel"
                  >
                    {showQr ? 'Sembunyikan QR' : (
                      <><FontAwesomeIcon icon="mobile-screen" style={{ marginRight: 5 }} aria-hidden="true" />Tampilkan QR QRIS</>
                    )}
                    <ChevronRight size={14} className={showQr ? styles.chevronUp : styles.chevronDown} aria-hidden="true" />
                  </button>
                  {showQr && (
                    <div id="qr-panel" className={styles.qrPanel}>
                      {data.payment.qrCodeUrl ? (
                        // eslint-disable-next-line @next/next/no-img-element
                        <img src={data.payment.qrCodeUrl} alt="QR Code QRIS untuk pembayaran" className={styles.qrImage} />
                      ) : (
                        <div className={styles.qrPlaceholder}>
                          <div className={styles.qrGrid}>
                            {Array.from({ length: 25 }).map((_, i) => (
                              <div key={i} className={`${styles.qrCell} ${Math.random() > 0.5 ? styles.qrDark : ''}`} />
                            ))}
                          </div>
                          <div className={styles.qrLabel}>QR QRIS</div>
                          <div className={styles.qrSub}>Scan menggunakan aplikasi e-wallet Anda</div>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              )}

              <div className={styles.divider} />

              {/* Price breakdown */}
              <div className={styles.payRows}>
                {data.discountAmount > 0 ? (
                  <>
                    <div className={styles.payRow}>
                      <span>Harga Asli</span>
                      <span>{fmtRp(data.totalPrice)}</span>
                    </div>
                    <div className={`${styles.payRow} ${styles.payRowDiscount}`}>
                      <span>🎉 Diskon Promo</span>
                      <span>- {fmtRp(data.discountAmount)}</span>
                    </div>
                    <div className={`${styles.payRow} ${styles.payRowBold}`}>
                      <span>Total Bayar</span>
                      <span>{fmtRp(data.finalPrice)}</span>
                    </div>
                  </>
                ) : (
                  <div className={`${styles.payRow} ${styles.payRowBold}`}>
                    <span>Total Bayar</span>
                    <span>{fmtRp(data.finalPrice)}</span>
                  </div>
                )}
                {data.payment?.method !== 'CASH' && (
                  <>
                    <div className={styles.payRow}>
                      <span>Terbayar</span>
                      <span>{fmtRp(data.payment?.paidAmount ?? 0)}</span>
                    </div>
                    <div className={`${styles.payRow} ${styles.payRowBold}`}>
                      <span>Sisa</span>
                      <span>{fmtRp(data.finalPrice - (data.payment?.paidAmount ?? 0))}</span>
                    </div>
                  </>
                )}
              </div>

              <div className={styles.waBox}>
                <a
                  href={`https://wa.me/${process.env.NEXT_PUBLIC_WA_NUMBER ?? '6281234567890'}?text=Halo, saya ingin menanyakan pesanan ${data.bookingCode}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className={styles.waBtn}
                  aria-label="Hubungi via WhatsApp"
                >
                  <FontAwesomeIcon icon="comment-dots" style={{ marginRight: 5 }} aria-hidden="true" />
                  Hubungi Kami via WhatsApp
                </a>
              </div>
            </div>
          </div>

          {/* Review (if completed) */}
          {data.status === 'COMPLETED' && (
            <div className={styles.reviewCard}>
              {data.review ? (
                <>
                  <h2 className={styles.cardTitle}>Ulasan Anda</h2>
                  <div className={styles.stars} aria-label={`Rating ${data.review.rating} dari 5`}>
                    {Array.from({ length: 5 }).map((_, i) => (
                      <span key={i} className={i < data.review!.rating ? styles.starFilled : styles.starEmpty}>★</span>
                    ))}
                  </div>
                  {data.review.comment && <p className={styles.reviewText}>&ldquo;{data.review.comment}&rdquo;</p>}
                </>
              ) : (
                <>
                  <h2 className={styles.cardTitle}>
                    Bagaimana Pengalaman Anda?
                    <FontAwesomeIcon icon="leaf" style={{ marginLeft: 6, color: 'var(--sage-500)' }} aria-hidden="true" />
                  </h2>
                  <p className={styles.reviewPrompt}>Terima kasih telah menggunakan layanan Kembali SPA. Berikan ulasan Anda!</p>
                  <Link href={`/review/${data.bookingCode}`} className="btn btn-primary">
                    <Star size={16} aria-hidden="true" /> Beri Ulasan
                  </Link>
                </>
              )}
            </div>
          )}
        </section>
      )}

      {/* Empty state — no search yet */}
      {!data && !loading && !error && (
        <section className={styles.emptySection}>
          <div className={styles.emptyIllustration}>
            <FontAwesomeIcon icon="spa" style={{ fontSize: '3rem', color: 'var(--sage-300)' }} aria-hidden="true" />
          </div>
          <h2 className={styles.emptyTitle}>Masukkan kode booking di atas</h2>
          <p className={styles.emptySub}>Kode booking berbentuk seperti <strong>KSP-20260421-0042</strong></p>
          <div className={styles.featureList}>
            {([
              ['shuffle',        'Update real-time setiap 10 detik'],
              ['location-dot',   'Lacak posisi terapis'],
              ['credit-card',    'Status pembayaran QRIS'],
              ['star',           'Beri ulasan setelah selesai'],
            ] as const).map(([icon, text]) => (
              <div key={text} className={styles.featureItem}>
                <span className={styles.featureIcon} aria-hidden="true">
                  <FontAwesomeIcon icon={icon} />
                </span>
                <span>{text}</span>
              </div>
            ))}
          </div>
        </section>
      )}

      {/* Footer */}
      <footer className={styles.footer}>
        <p>© 2026 Kembali SPA · <Link href="/" className={styles.footerLink}>Beranda</Link> · <Link href="/booking" className={styles.footerLink}>Pesan</Link></p>
      </footer>
    </div>
  )
}