'use client'

import { useState, useMemo, useCallback } from 'react'
import { useParams } from 'next/navigation'
import {
  Calendar,
  Clock,
  Users,
  MapPin,
  CheckCircle,
  ArrowLeft,
  Copy,
  Check,
  UtensilsCrossed,
  Loader2,
} from 'lucide-react'
import toast from 'react-hot-toast'

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

interface AvailableTable {
  id: string
  number: number
  name: string
  capacity: number
}

interface ReservationResult {
  reservationCode: string
  date: string
  startTime: string
  endTime: string
  status: string
  table: { number: number; name: string }
}

// ---------------------------------------------------------------------------
// Constants
// ---------------------------------------------------------------------------

const MAX_ADVANCE_DAYS = 30
const TIME_SLOTS: string[] = []
for (let h = 10; h <= 21; h++) {
  TIME_SLOTS.push(`${String(h).padStart(2, '0')}:00`)
  if (h < 21) {
    TIME_SLOTS.push(`${String(h).padStart(2, '0')}:30`)
  }
}

// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------

function formatSlug(slug: string): string {
  return slug
    .split('-')
    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
    .join(' ')
}

function todayStr(): string {
  const d = new Date()
  return d.toISOString().split('T')[0]
}

function maxDateStr(): string {
  const d = new Date()
  d.setDate(d.getDate() + MAX_ADVANCE_DAYS)
  return d.toISOString().split('T')[0]
}

function formatDate(dateStr: string): string {
  const d = new Date(dateStr + 'T00:00:00')
  return d.toLocaleDateString('id-ID', {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })
}

// ---------------------------------------------------------------------------
// Step Indicator
// ---------------------------------------------------------------------------

function StepIndicator({ current }: { current: number }) {
  const steps = [
    { num: 1, label: 'Tanggal & Waktu' },
    { num: 2, label: 'Pilih Meja' },
    { num: 3, label: 'Data Tamu' },
    { num: 4, label: 'Konfirmasi' },
  ]

  return (
    <div className="flex items-center justify-center gap-1 sm:gap-2 mb-8">
      {steps.map((s, i) => (
        <div key={s.num} className="flex items-center">
          <div
            className={`flex items-center justify-center w-7 h-7 sm:w-8 sm:h-8 rounded-full text-xs sm:text-sm font-semibold transition-colors ${
              current >= s.num
                ? 'bg-primary-600 text-white'
                : 'bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400'
            }`}
          >
            {current > s.num ? (
              <Check className="w-4 h-4" />
            ) : (
              s.num
            )}
          </div>
          <span
            className={`hidden sm:inline ml-1.5 text-xs font-medium ${
              current >= s.num
                ? 'text-primary-700 dark:text-primary-400'
                : 'text-gray-400 dark:text-gray-500'
            }`}
          >
            {s.label}
          </span>
          {i < steps.length - 1 && (
            <div
              className={`w-6 sm:w-10 h-0.5 mx-1 sm:mx-2 rounded ${
                current > s.num
                  ? 'bg-primary-500'
                  : 'bg-gray-200 dark:bg-gray-700'
              }`}
            />
          )}
        </div>
      ))}
    </div>
  )
}

// ---------------------------------------------------------------------------
// Main Component
// ---------------------------------------------------------------------------

export default function PublicReservationPage() {
  const params = useParams()
  const tenantSlug = params.tenantSlug as string
  const storeSlug = params.storeSlug as string
  const storeName = useMemo(() => formatSlug(storeSlug), [storeSlug])

  // Step management
  const [step, setStep] = useState(1)

  // Step 1 state
  const [date, setDate] = useState('')
  const [timeSlot, setTimeSlot] = useState('')
  const [partySize, setPartySize] = useState(2)

  // Step 2 state
  const [tables, setTables] = useState<AvailableTable[]>([])
  const [selectedTable, setSelectedTable] = useState<AvailableTable | null>(null)
  const [loadingTables, setLoadingTables] = useState(false)

  // Step 3 state
  const [guestName, setGuestName] = useState('')
  const [guestPhone, setGuestPhone] = useState('')
  const [guestEmail, setGuestEmail] = useState('')
  const [notes, setNotes] = useState('')
  const [submitting, setSubmitting] = useState(false)

  // Step 4 state
  const [reservation, setReservation] = useState<ReservationResult | null>(null)
  const [copied, setCopied] = useState(false)

  // ------ Step 1 → 2 : Check availability ------
  const checkAvailability = useCallback(async () => {
    if (!date) {
      toast.error('Pilih tanggal terlebih dahulu')
      return
    }
    if (!timeSlot) {
      toast.error('Pilih waktu terlebih dahulu')
      return
    }
    if (partySize < 1) {
      toast.error('Jumlah tamu minimal 1')
      return
    }

    setLoadingTables(true)
    setSelectedTable(null)
    try {
      const qs = new URLSearchParams({
        tenantSlug,
        storeSlug,
        date,
        startTime: timeSlot,
        partySize: String(partySize),
      })
      const res = await fetch(`/api/public/reservations/availability?${qs}`)
      const data = await res.json()

      if (!res.ok) {
        toast.error(data.error || 'Gagal mengecek ketersediaan')
        return
      }

      setTables(data.tables ?? [])
      setStep(2)
    } catch {
      toast.error('Terjadi kesalahan jaringan')
    } finally {
      setLoadingTables(false)
    }
  }, [date, timeSlot, partySize, tenantSlug, storeSlug])

  // ------ Step 3 → 4 : Submit reservation ------
  const submitReservation = useCallback(async () => {
    if (!guestName.trim()) {
      toast.error('Nama lengkap wajib diisi')
      return
    }
    if (!guestPhone.trim()) {
      toast.error('No. telepon wajib diisi')
      return
    }

    setSubmitting(true)
    try {
      const res = await fetch('/api/public/reservations', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          tenantSlug,
          storeSlug,
          tableId: selectedTable!.id,
          date,
          startTime: timeSlot,
          guestName: guestName.trim(),
          guestPhone: guestPhone.trim(),
          guestEmail: guestEmail.trim() || undefined,
          partySize,
          notes: notes.trim() || undefined,
        }),
      })
      const data = await res.json()

      if (!res.ok) {
        toast.error(data.error || 'Gagal membuat reservasi')
        return
      }

      setReservation(data.reservation)
      setStep(4)
      toast.success('Reservasi berhasil dibuat!')
    } catch {
      toast.error('Terjadi kesalahan jaringan')
    } finally {
      setSubmitting(false)
    }
  }, [tenantSlug, storeSlug, selectedTable, date, timeSlot, guestName, guestPhone, guestEmail, partySize, notes])

  // ------ Reset ------
  const resetForm = () => {
    setStep(1)
    setDate('')
    setTimeSlot('')
    setPartySize(2)
    setTables([])
    setSelectedTable(null)
    setGuestName('')
    setGuestPhone('')
    setGuestEmail('')
    setNotes('')
    setReservation(null)
    setCopied(false)
  }

  // ------ Copy code ------
  const copyCode = async (code: string) => {
    try {
      await navigator.clipboard.writeText(code)
      setCopied(true)
      toast.success('Kode disalin!')
      setTimeout(() => setCopied(false), 2000)
    } catch {
      toast.error('Gagal menyalin kode')
    }
  }

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-6 px-4 sm:px-6">
      <div className="max-w-lg mx-auto">
        {/* Header */}
        <div className="text-center mb-6">
          <div className="inline-flex items-center justify-center w-14 h-14 rounded-full bg-primary-100 dark:bg-primary-900/30 mb-3">
            <UtensilsCrossed className="w-7 h-7 text-primary-600 dark:text-primary-400" />
          </div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
            Reservasi Meja
          </h1>
          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
            {storeName}
          </p>
        </div>

        {/* Step indicator */}
        <StepIndicator current={step} />

        {/* ============================================================ */}
        {/* STEP 1 — Pilih Tanggal & Waktu */}
        {/* ============================================================ */}
        {step === 1 && (
          <div className="card space-y-6">
            <h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
              <Calendar className="w-5 h-5 text-primary-600 dark:text-primary-400" />
              Pilih Tanggal & Waktu
            </h2>

            {/* Date */}
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
                Tanggal Reservasi
              </label>
              <input
                type="date"
                className="input-field"
                value={date}
                onChange={(e) => setDate(e.target.value)}
                min={todayStr()}
                max={maxDateStr()}
              />
            </div>

            {/* Time Slot */}
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
                <Clock className="w-4 h-4 inline mr-1 -mt-0.5" />
                Waktu
              </label>
              <div className="grid grid-cols-4 sm:grid-cols-5 gap-2">
                {TIME_SLOTS.map((slot) => (
                  <button
                    key={slot}
                    type="button"
                    onClick={() => setTimeSlot(slot)}
                    className={`py-2 px-1 text-sm rounded-lg font-medium border transition-colors ${
                      timeSlot === slot
                        ? 'bg-primary-600 text-white border-primary-600 dark:bg-primary-500 dark:border-primary-500'
                        : 'bg-white text-gray-700 border-gray-200 hover:border-primary-300 hover:bg-primary-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:border-primary-500 dark:hover:bg-gray-700'
                    }`}
                  >
                    {slot}
                  </button>
                ))}
              </div>
            </div>

            {/* Party Size */}
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
                <Users className="w-4 h-4 inline mr-1 -mt-0.5" />
                Jumlah Tamu
              </label>
              <input
                type="number"
                className="input-field"
                value={partySize}
                onChange={(e) => setPartySize(Math.max(1, Math.min(20, parseInt(e.target.value) || 1)))}
                min={1}
                max={20}
              />
            </div>

            {/* Submit */}
            <button
              type="button"
              onClick={checkAvailability}
              disabled={loadingTables}
              className="btn-primary w-full flex items-center justify-center gap-2"
            >
              {loadingTables ? (
                <>
                  <Loader2 className="w-4 h-4 animate-spin" />
                  Mengecek...
                </>
              ) : (
                'Cek Ketersediaan'
              )}
            </button>
          </div>
        )}

        {/* ============================================================ */}
        {/* STEP 2 — Pilih Meja */}
        {/* ============================================================ */}
        {step === 2 && (
          <div className="card space-y-6">
            <h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
              <MapPin className="w-5 h-5 text-primary-600 dark:text-primary-400" />
              Pilih Meja
            </h2>

            {/* Summary */}
            <div className="flex flex-wrap gap-3 text-sm text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700/50 rounded-lg p-3">
              <span className="flex items-center gap-1">
                <Calendar className="w-4 h-4" />
                {formatDate(date)}
              </span>
              <span className="flex items-center gap-1">
                <Clock className="w-4 h-4" />
                {timeSlot}
              </span>
              <span className="flex items-center gap-1">
                <Users className="w-4 h-4" />
                {partySize} tamu
              </span>
            </div>

            {/* Table grid */}
            {tables.length > 0 ? (
              <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
                {tables.map((table) => (
                  <button
                    key={table.id}
                    type="button"
                    onClick={() => setSelectedTable(table)}
                    className={`p-4 rounded-xl border-2 text-left transition-all ${
                      selectedTable?.id === table.id
                        ? 'border-primary-500 bg-primary-50 ring-2 ring-primary-200 dark:bg-primary-900/20 dark:ring-primary-800'
                        : 'border-gray-200 bg-white hover:border-primary-300 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-primary-500'
                    }`}
                  >
                    <p className="font-semibold text-gray-900 dark:text-white text-sm">
                      {table.name || `Meja ${table.number}`}
                    </p>
                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 flex items-center gap-1">
                      <Users className="w-3.5 h-3.5" />
                      {table.capacity} orang
                    </p>
                  </button>
                ))}
              </div>
            ) : (
              <div className="text-center py-10">
                <MapPin className="w-10 h-10 mx-auto text-gray-300 dark:text-gray-600 mb-3" />
                <p className="text-gray-500 dark:text-gray-400 font-medium">
                  Tidak ada meja tersedia
                </p>
                <p className="text-sm text-gray-400 dark:text-gray-500 mt-1">
                  Coba pilih tanggal, waktu, atau jumlah tamu yang berbeda.
                </p>
              </div>
            )}

            {/* Actions */}
            <div className="flex gap-3">
              <button
                type="button"
                onClick={() => setStep(1)}
                className="btn-secondary flex items-center gap-1.5"
              >
                <ArrowLeft className="w-4 h-4" />
                Kembali
              </button>
              <button
                type="button"
                onClick={() => setStep(3)}
                disabled={!selectedTable}
                className="btn-primary flex-1"
              >
                Lanjutkan
              </button>
            </div>
          </div>
        )}

        {/* ============================================================ */}
        {/* STEP 3 — Data Tamu */}
        {/* ============================================================ */}
        {step === 3 && (
          <div className="card space-y-6">
            <h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
              <Users className="w-5 h-5 text-primary-600 dark:text-primary-400" />
              Data Tamu
            </h2>

            {/* Summary */}
            <div className="flex flex-wrap gap-3 text-sm text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700/50 rounded-lg p-3">
              <span className="flex items-center gap-1">
                <Calendar className="w-4 h-4" />
                {formatDate(date)}
              </span>
              <span className="flex items-center gap-1">
                <Clock className="w-4 h-4" />
                {timeSlot}
              </span>
              <span className="flex items-center gap-1">
                <MapPin className="w-4 h-4" />
                {selectedTable?.name || `Meja ${selectedTable?.number}`}
              </span>
              <span className="flex items-center gap-1">
                <Users className="w-4 h-4" />
                {partySize} tamu
              </span>
            </div>

            {/* Guest form */}
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
                  Nama Lengkap <span className="text-red-500">*</span>
                </label>
                <input
                  type="text"
                  className="input-field"
                  placeholder="Masukkan nama lengkap"
                  value={guestName}
                  onChange={(e) => setGuestName(e.target.value)}
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
                  No. Telepon <span className="text-red-500">*</span>
                </label>
                <input
                  type="tel"
                  className="input-field"
                  placeholder="08xx..."
                  value={guestPhone}
                  onChange={(e) => setGuestPhone(e.target.value)}
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
                  Email <span className="text-gray-400 font-normal">(opsional)</span>
                </label>
                <input
                  type="email"
                  className="input-field"
                  placeholder="email@contoh.com"
                  value={guestEmail}
                  onChange={(e) => setGuestEmail(e.target.value)}
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
                  Catatan Khusus <span className="text-gray-400 font-normal">(opsional)</span>
                </label>
                <textarea
                  className="input-field min-h-[80px] resize-none"
                  placeholder="Alergi, kursi bayi, dll."
                  value={notes}
                  onChange={(e) => setNotes(e.target.value)}
                />
              </div>
            </div>

            {/* Actions */}
            <div className="flex gap-3">
              <button
                type="button"
                onClick={() => setStep(2)}
                className="btn-secondary flex items-center gap-1.5"
              >
                <ArrowLeft className="w-4 h-4" />
                Kembali
              </button>
              <button
                type="button"
                onClick={submitReservation}
                disabled={submitting}
                className="btn-primary flex-1 flex items-center justify-center gap-2"
              >
                {submitting ? (
                  <>
                    <Loader2 className="w-4 h-4 animate-spin" />
                    Memproses...
                  </>
                ) : (
                  'Konfirmasi Reservasi'
                )}
              </button>
            </div>
          </div>
        )}

        {/* ============================================================ */}
        {/* STEP 4 — Konfirmasi (Success) */}
        {/* ============================================================ */}
        {step === 4 && reservation && (
          <div className="card text-center space-y-6">
            {/* Success icon */}
            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 dark:bg-green-900/30 mx-auto">
              <CheckCircle className="w-9 h-9 text-green-600 dark:text-green-400" />
            </div>

            <div>
              <h2 className="text-xl font-bold text-gray-900 dark:text-white">
                Reservasi Berhasil!
              </h2>
              <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
                {reservation.status === 'confirmed'
                  ? 'Reservasi Anda telah dikonfirmasi!'
                  : 'Reservasi Anda akan dikonfirmasi oleh pihak restoran.'}
              </p>
            </div>

            {/* Reservation code */}
            <div className="bg-gray-50 dark:bg-gray-700/50 rounded-xl p-5">
              <p className="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">
                Kode Reservasi
              </p>
              <div className="flex items-center justify-center gap-2">
                <span className="text-2xl sm:text-3xl font-bold tracking-wider text-gray-900 dark:text-white">
                  {reservation.reservationCode}
                </span>
                <button
                  type="button"
                  onClick={() => copyCode(reservation.reservationCode)}
                  className="p-1.5 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
                  title="Salin kode"
                >
                  {copied ? (
                    <Check className="w-5 h-5 text-green-600 dark:text-green-400" />
                  ) : (
                    <Copy className="w-5 h-5 text-gray-400" />
                  )}
                </button>
              </div>
            </div>

            {/* Details */}
            <div className="text-left space-y-3 bg-gray-50 dark:bg-gray-700/50 rounded-xl p-4">
              <div className="flex items-center gap-3 text-sm">
                <Calendar className="w-4 h-4 text-gray-400 shrink-0" />
                <span className="text-gray-700 dark:text-gray-300">
                  {formatDate(typeof reservation.date === 'string' ? reservation.date.split('T')[0] : date)}
                </span>
              </div>
              <div className="flex items-center gap-3 text-sm">
                <Clock className="w-4 h-4 text-gray-400 shrink-0" />
                <span className="text-gray-700 dark:text-gray-300">
                  {reservation.startTime} - {reservation.endTime}
                </span>
              </div>
              <div className="flex items-center gap-3 text-sm">
                <MapPin className="w-4 h-4 text-gray-400 shrink-0" />
                <span className="text-gray-700 dark:text-gray-300">
                  {reservation.table.name || `Meja ${reservation.table.number}`}
                </span>
              </div>
              <div className="flex items-center gap-3 text-sm">
                <Users className="w-4 h-4 text-gray-400 shrink-0" />
                <span className="text-gray-700 dark:text-gray-300">
                  {partySize} tamu
                </span>
              </div>
              <div className="flex items-center gap-3 text-sm">
                <CheckCircle className="w-4 h-4 text-gray-400 shrink-0" />
                <span
                  className={`font-medium ${
                    reservation.status === 'confirmed'
                      ? 'text-green-600 dark:text-green-400'
                      : 'text-yellow-600 dark:text-yellow-400'
                  }`}
                >
                  {reservation.status === 'confirmed' ? 'Dikonfirmasi' : 'Menunggu Konfirmasi'}
                </span>
              </div>
            </div>

            <p className="text-xs text-gray-400 dark:text-gray-500">
              Simpan kode reservasi ini untuk referensi Anda.
            </p>

            {/* New reservation */}
            <button
              type="button"
              onClick={resetForm}
              className="btn-primary w-full"
            >
              Buat Reservasi Lain
            </button>
          </div>
        )}

        {/* Footer */}
        <p className="text-center text-xs text-gray-400 dark:text-gray-600 mt-8">
          Powered by restomenu.id
        </p>
      </div>
    </div>
  )
}