'use client'
import { useState, useEffect, Suspense } from 'react'
import { useSearchParams, useRouter } from 'next/navigation'
import Image from 'next/image'
import Link from 'next/link'
import { Search, BedDouble, CheckCircle, XCircle, Loader2, ArrowRight } from 'lucide-react'

const CURRENCY_SYMBOLS: Record<string, string> = { zar: 'R', usd: '$', eur: '€', gbp: '£', kes: 'KSh', ngn: '₦', ghs: '₵' }
const formatPrice = (amount: number, code?: string) => {
  const sym = CURRENCY_SYMBOLS[(code ?? '').toLowerCase()] ?? (code?.toUpperCase() ?? '')
  return `${sym}${(amount / 100).toFixed(0)}`
}

function calcNights(checkIn: string, checkOut: string) {
  if (!checkIn || !checkOut) return 0
  return Math.max(0, Math.round((new Date(checkOut).getTime() - new Date(checkIn).getTime()) / 86400000))
}

interface SearchRoom {
  id: string
  title: string
  description: string
  thumbnail: string
  variants: { id: string; prices: { amount: number; currency_code: string }[] }[]
}

function RoomCard({ room, checkIn, checkOut, guests, nights }: { room: SearchRoom; checkIn: string; checkOut: string; guests: string; nights: number }) {
  const [avail, setAvail] = useState<{ available: boolean | null; loading: boolean }>({ available: null, loading: false })
  const price = room.variants?.[0]?.prices?.[0]
  const nightly = price?.amount ?? 0
  const total = nightly * nights

  useEffect(() => {
    if (!checkIn || !checkOut || nights === 0) { setAvail({ available: null, loading: false }); return }
    setAvail({ available: null, loading: true })
    const qs = new URLSearchParams({ room_type: room.id, check_in: checkIn, check_out: checkOut }).toString()
    fetch(`/api/medusa/store/hotel/bookings?${qs}`)
      .then(r => r.json())
      .then(d => setAvail({ available: d.available ?? null, loading: false }))
      .catch(() => setAvail({ available: null, loading: false }))
  }, [room.id, checkIn, checkOut, nights])

  const unavailable = avail.available === false
  const href = `/booking/${room.id}?checkIn=${checkIn}&checkOut=${checkOut}&guests=${guests}`

  return (
    <div className="bg-card rounded-2xl border border-border overflow-hidden hover:shadow-lg transition-all group">
      {room.thumbnail && (
        <div className="relative aspect-video overflow-hidden bg-muted">
          <Image src={room.thumbnail} alt={room.title} fill sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" className="object-cover group-hover:scale-105 transition-transform duration-300" />
        </div>
      )}
      <div className="p-5">
        <div className="flex items-start justify-between gap-3 mb-2">
          <h2 className="text-lg font-semibold leading-tight">{room.title}</h2>
          {avail.loading && <Loader2 className="h-4 w-4 animate-spin text-muted-foreground shrink-0 mt-0.5" />}
          {!avail.loading && avail.available === true && <CheckCircle className="h-4 w-4 text-green-500 shrink-0 mt-0.5" />}
          {!avail.loading && avail.available === false && <XCircle className="h-4 w-4 text-red-500 shrink-0 mt-0.5" />}
        </div>
        {room.description && <p className="text-muted-foreground text-sm mb-4 line-clamp-2">{room.description}</p>}
        <div className="flex items-end justify-between mb-4">
          <div>
            {nightly > 0 && <p className="text-xl font-bold text-primary">{formatPrice(nightly, price?.currency_code)}<span className="text-sm font-normal text-muted-foreground">/night</span></p>}
            {nights > 0 && total > 0 && <p className="text-xs text-muted-foreground mt-0.5">{nights} night{nights !== 1 ? 's' : ''} = {formatPrice(total, price?.currency_code)} total</p>}
          </div>
          {avail.available === true && <span className="text-xs bg-green-50 text-green-700 border border-green-200 px-2 py-0.5 rounded-full">Available</span>}
          {avail.available === false && <span className="text-xs bg-red-50 text-red-600 border border-red-200 px-2 py-0.5 rounded-full">Unavailable</span>}
        </div>
        <Link
          href={unavailable ? '#' : href}
          aria-disabled={unavailable}
          className={"flex items-center justify-center gap-1.5 w-full py-2.5 rounded-xl font-medium text-sm transition-all " + (unavailable ? "bg-muted text-muted-foreground cursor-not-allowed pointer-events-none" : "bg-primary text-primary-foreground hover:bg-primary/90")}
        >
          {unavailable ? 'Not Available' : 'Select Room'}
          {!unavailable && <ArrowRight className="h-3.5 w-3.5" />}
        </Link>
      </div>
    </div>
  )
}

function BookingSearchContent() {
  const searchParams = useSearchParams()
  const router = useRouter()
  const today = new Date().toISOString().split('T')[0]
  const tomorrow = new Date(Date.now() + 86400000).toISOString().split('T')[0]

  const [checkIn, setCheckIn]   = useState(searchParams.get('checkIn') || today)
  const [checkOut, setCheckOut] = useState(searchParams.get('checkOut') || tomorrow)
  const [guests, setGuests]     = useState(searchParams.get('guests') || '2')
  const [rooms, setRooms]       = useState<SearchRoom[]>([])
  const [loading, setLoading]   = useState(true)

  const nights = calcNights(checkIn, checkOut)

  useEffect(() => {
    fetch('/api/medusa/products?limit=50')
      .then(r => r.json())
      .then(d => { setRooms(d.products ?? []); setLoading(false) })
      .catch(() => setLoading(false))
  }, [])

  function handleSearch(e: React.FormEvent) {
    e.preventDefault()
    router.push(`/booking?checkIn=${checkIn}&checkOut=${checkOut}&guests=${guests}`)
  }

  return (
    <main className="min-h-screen bg-background">
      <div className="bg-card border-b border-border sticky top-0 z-10 shadow-sm">
        <div className="container mx-auto px-4 py-4">
          <form onSubmit={handleSearch} className="flex flex-wrap gap-3 items-end">
            <div className="flex-1 min-w-[130px]">
              <label className="block text-xs font-medium text-muted-foreground mb-1 uppercase tracking-wide">Check-in</label>
              <input type="date" value={checkIn} min={today} onChange={e => setCheckIn(e.target.value)}
                className="w-full border border-border rounded-lg px-3 py-2 bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary" />
            </div>
            <div className="flex-1 min-w-[130px]">
              <label className="block text-xs font-medium text-muted-foreground mb-1 uppercase tracking-wide">Check-out</label>
              <input type="date" value={checkOut} min={checkIn} onChange={e => setCheckOut(e.target.value)}
                className="w-full border border-border rounded-lg px-3 py-2 bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary" />
            </div>
            <div className="w-24">
              <label className="block text-xs font-medium text-muted-foreground mb-1 uppercase tracking-wide">Guests</label>
              <select value={guests} onChange={e => setGuests(e.target.value)}
                className="w-full border border-border rounded-lg px-3 py-2 bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary">
                {[1,2,3,4,5,6,7,8].map(n => <option key={n} value={n}>{n}</option>)}
              </select>
            </div>
            <button type="submit" className="bg-primary text-primary-foreground px-5 py-2.5 rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors flex items-center gap-2">
              <Search className="h-4 w-4" />Update
            </button>
          </form>
          {nights > 0 && (
            <p className="text-xs text-muted-foreground mt-2">
              {nights} night{nights !== 1 ? 's' : ''} · {guests} guest{Number(guests) !== 1 ? 's' : ''} · Checking availability…
            </p>
          )}
        </div>
      </div>
      <div className="container mx-auto px-4 py-8">
        {loading ? (
          <div className="flex items-center justify-center py-24"><Loader2 className="h-10 w-10 animate-spin text-primary" /></div>
        ) : rooms.length === 0 ? (
          <div className="text-center py-24">
            <BedDouble className="h-16 w-16 mx-auto mb-4 text-muted-foreground/30" />
            <p className="text-lg font-medium mb-2">No rooms available</p>
            <p className="text-muted-foreground text-sm">Please contact us directly to check availability.</p>
          </div>
        ) : (
          <>
            <p className="text-sm text-muted-foreground mb-6">{rooms.length} room{rooms.length !== 1 ? 's' : ''} · {nights > 0 ? `${nights} night${nights !== 1 ? 's' : ''}` : 'Select dates above'}</p>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {rooms.map(room => (
                <RoomCard key={room.id} room={room} checkIn={checkIn} checkOut={checkOut} guests={guests} nights={nights} />
              ))}
            </div>
          </>
        )}
      </div>
    </main>
  )
}

export default function BookingSearchPage() {
  return (
    <Suspense fallback={<div className="min-h-screen flex items-center justify-center"><Loader2 className="h-10 w-10 animate-spin text-primary" /></div>}>
      <BookingSearchContent />
    </Suspense>
  )
}