'use client'

import { useEffect, useState, useCallback } from 'react'
import dayjs from 'dayjs'
import Link from 'next/link'
import { formatCurrency } from '@rentaldrivego/types'
import { apiFetch } from '@/lib/api'
import { Globe, CheckCircle, XCircle, Clock, ChevronRight, User, Car, CalendarDays, MessageSquare } from 'lucide-react'
import { useDashboardI18n } from '@/components/I18nProvider'

interface OnlineReservation {
  id: string
  status: 'DRAFT' | 'CONFIRMED' | 'CANCELLED' | 'ACTIVE' | 'COMPLETED' | 'NO_SHOW'
  source: string
  startDate: string
  endDate: string
  totalAmount: number
  totalDays: number
  dailyRate: number
  notes: string | null
  cancelReason: string | null
  createdAt: string
  vehicle: { make: string; model: string; year: number; licensePlate: string }
  customer: { firstName: string; lastName: string; email: string; phone: string | null }
}

const STATUS_STYLE: Record<string, string> = {
  DRAFT:     'bg-orange-100 text-orange-800',
  CONFIRMED: 'bg-emerald-100 text-emerald-700',
  CANCELLED: 'bg-rose-100 text-rose-700',
  ACTIVE:    'bg-blue-100 text-blue-700',
  COMPLETED: 'bg-slate-100 text-slate-600',
  NO_SHOW:   'bg-orange-100 text-orange-700',
}

const STATUS_LABEL: Record<string, string> = {
  DRAFT:     'Pending',
  CONFIRMED: 'Confirmed',
  CANCELLED: 'Declined',
  ACTIVE:    'Active',
  COMPLETED: 'Completed',
  NO_SHOW:   'No show',
}

function DeclineModal({ onConfirm, onCancel, loading }: { onConfirm: (reason: string) => void; onCancel: () => void; loading: boolean }) {
  const [reason, setReason] = useState('')
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#07101e]/40 p-4" onClick={onCancel}>
      <div className="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl" onClick={(e) => e.stopPropagation()}>
        <h3 className="text-base font-semibold text-slate-900">Decline reservation</h3>
        <p className="mt-1 text-sm text-slate-500">Optionally provide a reason — it will be visible in the reservation record.</p>
        <textarea
          rows={3}
          value={reason}
          onChange={(e) => setReason(e.target.value)}
          placeholder="e.g. Vehicle not available for these dates"
          className="mt-4 w-full rounded-xl border border-slate-200 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-slate-900 resize-none"
        />
        <div className="mt-4 flex gap-3">
          <button onClick={onCancel} className="flex-1 rounded-full border border-slate-300 px-4 py-2.5 text-sm font-semibold text-slate-700">Cancel</button>
          <button
            disabled={loading}
            onClick={() => onConfirm(reason)}
            className="flex-1 rounded-full bg-rose-600 px-4 py-2.5 text-sm font-semibold text-white disabled:opacity-60"
          >
            {loading ? 'Declining…' : 'Decline'}
          </button>
        </div>
      </div>
    </div>
  )
}

export default function OnlineReservationsPage() {
  const { language } = useDashboardI18n()
  const copy = {
    en: {
      title: 'Online Reservations',
      subtitle: 'Requests submitted by customers through the marketplace. Confirm or decline each one.',
      refresh: 'Refresh',
      pendingApproval: 'Pending approval',
      loading: 'Loading…',
      allCaughtUp: 'All caught up — no pending requests.',
      customer: 'Customer',
      vehicle: 'Vehicle',
      dates: 'Dates',
      status: 'Status',
      total: 'Total',
    },
    fr: {
      title: 'Réservations en ligne',
      subtitle: 'Demandes envoyées par les clients via la marketplace. Confirmez ou refusez chaque demande.',
      refresh: 'Actualiser',
      pendingApproval: 'En attente de validation',
      loading: 'Chargement…',
      allCaughtUp: 'Tout est à jour. Aucune demande en attente.',
      customer: 'Client',
      vehicle: 'Véhicule',
      dates: 'Dates',
      status: 'Statut',
      total: 'Total',
    },
    ar: {
      title: 'الحجوزات الإلكترونية',
      subtitle: 'طلبات أرسلها العملاء عبر السوق. أكّد كل طلب أو ارفضه.',
      refresh: 'تحديث',
      pendingApproval: 'في انتظار الموافقة',
      loading: 'جارٍ التحميل…',
      allCaughtUp: 'لا توجد طلبات معلقة حالياً.',
      customer: 'العميل',
      vehicle: 'المركبة',
      dates: 'التواريخ',
      status: 'الحالة',
      total: 'الإجمالي',
    },
  }[language]
  const [rows, setRows] = useState<OnlineReservation[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [acting, setActing] = useState<string | null>(null)
  const [actionError, setActionError] = useState<string | null>(null)
  const [declineTarget, setDeclineTarget] = useState<string | null>(null)

  const load = useCallback(async () => {
    try {
      setLoading(true)
      const result = await apiFetch<OnlineReservation[]>('/reservations?source=MARKETPLACE&status=DRAFT&pageSize=100')
      setRows(
        (result ?? []).sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
      )
      setError(null)
    } catch (err: any) {
      setError(err.message ?? 'Failed to load reservations')
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => { load() }, [load])

  async function confirm(id: string) {
    setActing(id)
    setActionError(null)
    try {
      await apiFetch(`/reservations/${id}/confirm`, { method: 'POST', body: JSON.stringify({}) })
      await load()
    } catch (err: any) {
      setActionError(err.message ?? 'Failed to confirm reservation')
    } finally {
      setActing(null)
    }
  }

  async function decline(id: string, reason: string) {
    setActing(id)
    setActionError(null)
    try {
      await apiFetch(`/reservations/${id}/cancel`, { method: 'POST', body: JSON.stringify({ reason: reason || undefined }) })
      setDeclineTarget(null)
      await load()
    } catch (err: any) {
      setActionError(err.message ?? 'Failed to decline reservation')
    } finally {
      setActing(null)
    }
  }

  const pending = rows

  return (
    <div className="space-y-8">
      {declineTarget && (
        <DeclineModal
          loading={acting === declineTarget}
          onConfirm={(reason) => decline(declineTarget, reason)}
          onCancel={() => setDeclineTarget(null)}
        />
      )}

      <div className="flex items-start justify-between">
        <div>
          <div className="flex items-center gap-2">
            <Globe className="h-5 w-5 text-blue-600" />
            <h2 className="text-xl font-semibold text-slate-900">{copy.title}</h2>
            {pending.length > 0 && (
              <span className="rounded-full bg-orange-500 px-2.5 py-0.5 text-xs font-bold text-white">{pending.length}</span>
            )}
          </div>
          <p className="mt-1 text-sm text-slate-500">{copy.subtitle}</p>
        </div>
        <button onClick={load} className="rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50">
          {copy.refresh}
        </button>
      </div>

      {actionError && (
        <div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{actionError}</div>
      )}

      {/* Pending section */}
      <section>
        <h3 className="mb-3 flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-slate-500">
          <Clock className="h-4 w-4" /> {copy.pendingApproval}
          {pending.length > 0 && <span className="ml-1 text-orange-600">({pending.length})</span>}
        </h3>

        {loading ? (
          <div className="card p-8 text-center text-sm text-slate-400">{copy.loading}</div>
        ) : pending.length === 0 ? (
          <div className="card flex flex-col items-center gap-3 p-10 text-center">
            <CheckCircle className="h-10 w-10 text-emerald-400" />
            <p className="text-sm font-medium text-slate-600">{copy.allCaughtUp}</p>
          </div>
        ) : (
          <div className="space-y-4">
            {pending.map((r) => (
              <ReservationCard
                key={r.id}
                r={r}
                acting={acting === r.id}
                onConfirm={() => confirm(r.id)}
                onDecline={() => setDeclineTarget(r.id)}
              />
            ))}
          </div>
        )}
      </section>

    </div>
  )
}

function ReservationCard({ r, acting, onConfirm, onDecline }: {
  r: OnlineReservation
  acting: boolean
  onConfirm: () => void
  onDecline: () => void
}) {
  const days = r.totalDays
  return (
    <div className="card overflow-hidden border-l-4 border-l-orange-400">
      <div className="p-5">
        <div className="flex flex-wrap items-start justify-between gap-4">
          {/* Left: customer + vehicle + dates */}
          <div className="space-y-3 min-w-0">
            <div className="flex items-center gap-2">
              <User className="h-4 w-4 flex-shrink-0 text-slate-400" />
              <div>
                <p className="text-sm font-semibold text-slate-900">{r.customer.firstName} {r.customer.lastName}</p>
                <p className="text-xs text-slate-500">{r.customer.email}{r.customer.phone ? ` · ${r.customer.phone}` : ''}</p>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <Car className="h-4 w-4 flex-shrink-0 text-slate-400" />
              <p className="text-sm text-slate-700">{r.vehicle.year} {r.vehicle.make} {r.vehicle.model} <span className="text-slate-400">· {r.vehicle.licensePlate}</span></p>
            </div>
            <div className="flex items-center gap-2">
              <CalendarDays className="h-4 w-4 flex-shrink-0 text-slate-400" />
              <p className="text-sm text-slate-700">
                {dayjs(r.startDate).format('MMM D, YYYY')} → {dayjs(r.endDate).format('MMM D, YYYY')}
                <span className="ml-2 text-slate-400">{days} day{days > 1 ? 's' : ''}</span>
              </p>
            </div>
            {r.notes && (
              <div className="flex items-start gap-2">
                <MessageSquare className="h-4 w-4 flex-shrink-0 text-slate-400 mt-0.5" />
                <p className="text-sm text-slate-600 italic">"{r.notes}"</p>
              </div>
            )}
          </div>

          {/* Right: total + actions */}
          <div className="flex flex-col items-end gap-3 flex-shrink-0">
            <div className="text-right">
              <p className="text-xs text-slate-400">Estimated total</p>
              <p className="text-xl font-bold text-slate-900">{formatCurrency(r.totalAmount, 'MAD')}</p>
              <p className="text-xs text-slate-400">{formatCurrency(r.dailyRate, 'MAD')}/day</p>
            </div>
            <div className="flex gap-2">
              <button
                onClick={onDecline}
                disabled={acting}
                className="flex items-center gap-1.5 rounded-full border border-rose-200 bg-rose-50 px-4 py-2 text-sm font-semibold text-rose-700 hover:bg-rose-100 disabled:opacity-50"
              >
                <XCircle className="h-4 w-4" />
                Decline
              </button>
              <button
                onClick={onConfirm}
                disabled={acting}
                className="flex items-center gap-1.5 rounded-full bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700 disabled:opacity-50"
              >
                <CheckCircle className="h-4 w-4" />
                {acting ? 'Confirming…' : 'Confirm'}
              </button>
            </div>
            <p className="text-xs text-slate-400">Received {dayjs(r.createdAt).format('MMM D [at] HH:mm')}</p>
          </div>
        </div>
      </div>

      <div className="border-t border-slate-100 bg-slate-50 px-5 py-2.5 flex items-center justify-between">
        <p className="text-xs text-slate-400">Ref: {r.id.slice(-10).toUpperCase()}</p>
        <Link href={`/reservations/${r.id}`} className="flex items-center gap-1 text-xs text-slate-500 hover:text-blue-700">
          View full detail <ChevronRight className="h-3 w-3" />
        </Link>
      </div>
    </div>
  )
}