/**
 * Appointment Detail Modal Component
 * Shows full appointment details when staff clicks on an appointment
 */

"use client";
// Force rebuild trigger: 20260128_001500
import { useState, useEffect } from "react";
import {
  X,
  Calendar,
  Clock,
  User,
  Phone,
  Mail,
  DollarSign,
  FileText,
  Tag,
  CheckCircle,
  XCircle,
  AlertCircle,
  CreditCard,
  CalendarClock,
  Bell,
  Loader2,
} from "lucide-react";
import type { Lang } from "@/lib/config";
import { dashboardEn } from "@/lib/config/translations/modules/dashboard.en";
import { dashboardAr } from "@/lib/config/translations/modules/dashboard.ar";
import { fetchWithCSRF } from "@/lib/csrf-client";

// Booking interface matching the database schema
export interface BookingDetail {
  id: string;
  customerName: string;
  customerPhone: string;
  customerEmail?: string | null;
  service: string;
  appointmentDate: string | Date;
  appointmentTime: string;
  duration?: number;
  staffMember?: string | null;
  depositAmount?: number | null;
  depositPaid?: boolean;
  totalAmount?: number;
  status: "pending" | "confirmed" | "completed" | "cancelled" | "no_show";
  source?: string;
  notes?: string | null;
  createdAt?: string | Date;
  updatedAt?: string | Date;
  sectorMetadata?: Record<string, unknown>;
}

interface AppointmentDetailModalProps {
  booking: BookingDetail;
  lang: Lang;
  onClose: () => void;
  onStatusChange?: (bookingId: string, newStatus: string) => void;
  openInRescheduleMode?: boolean;
}

export default function AppointmentDetailModal({
  booking,
  lang,
  onClose,
  onStatusChange,
  openInRescheduleMode = false,
}: AppointmentDetailModalProps) {
  const isAr = lang === "ar";
  const dt = isAr ? dashboardAr : dashboardEn;

  // Reschedule state
  const [isEditingDateTime, setIsEditingDateTime] = useState(false);
  const [editDate, setEditDate] = useState("");
  const [editTime, setEditTime] = useState("");
  const [editDuration, setEditDuration] = useState(booking.duration || 30);
  const [rescheduleReason, setRescheduleReason] = useState("");
  const [isRescheduling, setIsRescheduling] = useState(false);
  const [notifyCustomer, setNotifyCustomer] = useState(true);
  const [rescheduleError, setRescheduleError] = useState<string | null>(null);

  const canReschedule =
    booking.status === "pending" || booking.status === "confirmed";

  // Debug logging
  useEffect(() => {
    console.log("🔍 AppointmentDetailModal DEBUG:", {
      bookingId: booking.id,
      status: booking.status,
      canReschedule,
      isEditingDateTime,
    });
  }, [booking.id, booking.status, canReschedule, isEditingDateTime]);

  // Open in reschedule mode if requested
  useEffect(() => {
    if (openInRescheduleMode && canReschedule && !isEditingDateTime) {
      const bookingDate = new Date(booking.appointmentDate);
      setEditDate(bookingDate.toISOString().split("T")[0]);
      setEditTime(booking.appointmentTime);
      setEditDuration(booking.duration || 30);
      setRescheduleReason("");
      setRescheduleError(null);
      setIsEditingDateTime(true);
    }
  }, [
    openInRescheduleMode,
    canReschedule,
    isEditingDateTime,
    booking.appointmentDate,
    booking.appointmentTime,
    booking.duration,
  ]);

  // Translations for reschedule feature
  const t = {
    reschedule: isAr ? "إعادة جدولة" : "Reschedule",
    saveChanges: isAr ? "حفظ التغييرات" : "Save Changes",
    cancelEdit: isAr ? "إلغاء" : "Cancel",
    rescheduleReason: isAr ? "سبب التغيير (اختياري)" : "Reason (optional)",
    notifyCustomer: isAr ? "إشعار العميل" : "Notify Customer",
    newDate: isAr ? "التاريخ الجديد" : "New Date",
    newTime: isAr ? "الوقت الجديد" : "New Time",
    newDuration: isAr ? "المدة" : "Duration",
    min15: isAr ? "15 دقيقة" : "15 minutes",
    min30: isAr ? "30 دقيقة" : "30 minutes",
    min45: isAr ? "45 دقيقة" : "45 minutes",
    min60: isAr ? "ساعة واحدة" : "1 hour",
    min90: isAr ? "ساعة ونصف" : "1.5 hours",
    min120: isAr ? "ساعتان" : "2 hours",
    rescheduling: isAr ? "جاري إعادة الجدولة..." : "Rescheduling...",
    rescheduleSuccess: isAr
      ? "تم إعادة جدولة الموعد بنجاح"
      : "Appointment rescheduled successfully",
    rescheduleFailed: isAr
      ? "فشل في إعادة جدولة الموعد"
      : "Failed to reschedule appointment",
  };

  // Initialize edit form with current booking values
  const startEditing = () => {
    const bookingDate = new Date(booking.appointmentDate);
    setEditDate(bookingDate.toISOString().split("T")[0]);
    setEditTime(booking.appointmentTime);
    setEditDuration(booking.duration || 30);
    setRescheduleReason("");
    setRescheduleError(null);
    setIsEditingDateTime(true);
  };

  const cancelEditing = () => {
    setIsEditingDateTime(false);
    setRescheduleError(null);
  };

  const handleReschedule = async () => {
    if (!editDate || !editTime) {
      setRescheduleError(
        isAr ? "يرجى تحديد التاريخ والوقت" : "Please select date and time",
      );
      return;
    }

    setIsRescheduling(true);
    setRescheduleError(null);

    try {
      const response = await fetchWithCSRF(
        `/api/bookings/${booking.id}/reschedule`,
        {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            appointmentDate: editDate,
            appointmentTime: editTime,
            duration: editDuration,
            reason: rescheduleReason || undefined,
            notifyCustomer,
          }),
        },
      );

      const data = await response.json();

      if (!response.ok || !data.success) {
        throw new Error(data.error || t.rescheduleFailed);
      }

      // Update booking data and notify parent
      setIsEditingDateTime(false);
      if (onStatusChange) {
        // Trigger refresh by calling onStatusChange with current status
        onStatusChange(booking.id, booking.status);
      }
    } catch (error) {
      console.error("Failed to reschedule:", error);
      setRescheduleError(
        error instanceof Error ? error.message : t.rescheduleFailed,
      );
    } finally {
      setIsRescheduling(false);
    }
  };

  const formatDate = (date: string | Date) => {
    const d = new Date(date);
    return d.toLocaleDateString(isAr ? "ar-SA" : "en-US", {
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric",
    });
  };

  const formatTime = (time: string) => {
    // Convert 24h to 12h format
    const [hours, minutes] = time.split(":");
    const h = parseInt(hours);
    const ampm = h >= 12 ? (isAr ? "م" : "PM") : isAr ? "ص" : "AM";
    const hour12 = h % 12 || 12;
    return `${hour12}:${minutes} ${ampm}`;
  };

  const getStatusConfig = (status: string) => {
    switch (status) {
      case "completed":
        return {
          bg: "bg-emerald-100",
          text: "text-emerald-700",
          icon: CheckCircle,
          label: dt.statusCompleted || "Completed",
        };
      case "confirmed":
        return {
          bg: "bg-blue-100",
          text: "text-blue-700",
          icon: CheckCircle,
          label: dt.statusConfirmed || "Confirmed",
        };
      case "cancelled":
        return {
          bg: "bg-red-100",
          text: "text-red-700",
          icon: XCircle,
          label: dt.statusCancelled || "Cancelled",
        };
      case "no_show":
        return {
          bg: "bg-orange-100",
          text: "text-orange-700",
          icon: AlertCircle,
          label: dt.statusNoShow || "No-show",
        };
      default:
        return {
          bg: "bg-amber-100",
          text: "text-amber-700",
          icon: Clock,
          label: dt.statusPending || "Pending",
        };
    }
  };

  const getSourceLabel = (source?: string) => {
    switch (source) {
      case "whatsapp":
        return isAr ? "واتساب" : "WhatsApp";
      case "manual":
        return isAr ? "إدخال يدوي" : "Manual Entry";
      case "demo_booking":
        return isAr ? "نموذج تجريبي" : "Demo Form";
      case "widget":
        return isAr ? "أداة الموقع" : "Website Widget";
      case "phone_call":
        return isAr ? "مكالمة هاتفية" : "Phone Call";
      default:
        return isAr ? "غير محدد" : "Unknown";
    }
  };

  const statusConfig = getStatusConfig(booking.status);
  const StatusIcon = statusConfig.icon;

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center p-4"
      onClick={onClose}
    >
      {/* Backdrop */}
      <div className="absolute inset-0 bg-slate-900/95 backdrop-blur-sm" />

      {/* Modal Container */}
      <div
        className="relative w-full max-w-xl transform transition-all duration-300 ease-out animate-fadeIn"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Decorative gradient ring */}
        <div className="absolute -inset-1 bg-gradient-to-r from-brand-green via-emerald-400 to-teal-500 rounded-3xl opacity-20 blur-lg" />

        {/* Modal Content */}
        <div className="relative bg-white rounded-2xl shadow-2xl max-h-[85vh] overflow-hidden flex flex-col">
          {/* Header */}
          <div className="relative">
            {/* Gradient background */}
            <div className="absolute inset-0 bg-gradient-to-br from-brand-green via-emerald-500 to-teal-600" />
            {/* Subtle pattern overlay */}
            <div className="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_1px_1px,white_1px,transparent_0)] bg-[length:20px_20px]" />

            <div className="relative px-8 pt-8 pb-6">
              <button
                onClick={onClose}
                className="absolute top-4 right-4 flex h-10 w-10 items-center justify-center rounded-xl bg-white/20 text-white hover:bg-white/30 transition-all duration-200"
              >
                <X className="w-5 h-5" />
              </button>

              <div className="flex items-start gap-5">
                <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-white/20 backdrop-blur-sm shadow-lg ring-4 ring-white/30">
                  <Calendar className="w-8 h-8 text-white" />
                </div>
                <div className="flex-1">
                  <h3 className="text-2xl font-bold text-white">
                    {booking.service}
                  </h3>
                  <p className="text-xs text-yellow-200 mt-1">
                    🔍 DEBUG: Singular Modal v2 | Status: {booking.status} | Can
                    Reschedule: {canReschedule ? "YES" : "NO"}
                  </p>
                  <div className="flex items-center gap-3 mt-2">
                    <span
                      className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold ${statusConfig.bg} ${statusConfig.text}`}
                    >
                      <StatusIcon className="w-3.5 h-3.5" />
                      {statusConfig.label}
                    </span>
                    {booking.depositPaid && (
                      <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-emerald-100 text-emerald-700">
                        <CreditCard className="w-3.5 h-3.5" />
                        {dt.depositPaidBadge || "Deposit Paid"}
                      </span>
                    )}
                  </div>
                </div>
              </div>

              {/* Date & Time in header */}
              {!isEditingDateTime ? (
                <>
                  <div className="grid grid-cols-2 gap-4 mt-6">
                    <div className="rounded-xl bg-white/15 backdrop-blur-sm px-4 py-3">
                      <p className="text-xs font-medium text-emerald-100">
                        {dt.date || "Date"}
                      </p>
                      <p className="text-lg font-bold text-white">
                        {formatDate(booking.appointmentDate)}
                      </p>
                    </div>
                    <div className="rounded-xl bg-white/15 backdrop-blur-sm px-4 py-3">
                      <p className="text-xs font-medium text-emerald-100">
                        {dt.time || "Time"}
                      </p>
                      <p className="text-lg font-bold text-white">
                        {formatTime(booking.appointmentTime)}
                      </p>
                      {booking.duration && (
                        <p className="text-xs text-emerald-100 mt-0.5">
                          {booking.duration} {isAr ? "دقيقة" : "min"}
                        </p>
                      )}
                    </div>
                  </div>
                  {/* Reschedule button - only show for pending/confirmed appointments */}
                  {canReschedule && (
                    <button
                      onClick={startEditing}
                      className="mt-4 inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-white/20 hover:bg-white/30 text-white text-sm font-semibold transition-all duration-200 border border-white/30"
                    >
                      <CalendarClock className="w-4 h-4" />
                      {t.reschedule}
                    </button>
                  )}
                </>
              ) : (
                /* Reschedule Edit Form */
                <div className="mt-6 rounded-xl bg-white/10 backdrop-blur-sm p-4 space-y-4">
                  {rescheduleError && (
                    <div className="bg-red-100/20 border border-red-200/30 rounded-lg p-3 flex items-start gap-2">
                      <AlertCircle className="w-4 h-4 text-red-200 flex-shrink-0 mt-0.5" />
                      <p className="text-sm text-red-200">{rescheduleError}</p>
                    </div>
                  )}

                  {/* Date and Time */}
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-xs font-medium text-emerald-100 mb-1.5">
                        {t.newDate}
                      </label>
                      <input
                        type="date"
                        value={editDate}
                        onChange={(e) => setEditDate(e.target.value)}
                        min={new Date().toISOString().split("T")[0]}
                        className="w-full px-3 py-2 text-sm border border-white/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-white/50 bg-white/10 text-white"
                      />
                    </div>
                    <div>
                      <label className="block text-xs font-medium text-emerald-100 mb-1.5">
                        {t.newTime}
                      </label>
                      <input
                        type="time"
                        value={editTime}
                        onChange={(e) => setEditTime(e.target.value)}
                        className="w-full px-3 py-2 text-sm border border-white/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-white/50 bg-white/10 text-white"
                      />
                    </div>
                  </div>

                  {/* Duration */}
                  <div>
                    <label className="block text-xs font-medium text-emerald-100 mb-1.5">
                      {t.newDuration}
                    </label>
                    <select
                      value={editDuration}
                      onChange={(e) => setEditDuration(Number(e.target.value))}
                      className="w-full px-3 py-2 text-sm border border-white/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-white/50 bg-white/10 text-white"
                    >
                      <option value={15} className="text-slate-900">
                        {t.min15}
                      </option>
                      <option value={30} className="text-slate-900">
                        {t.min30}
                      </option>
                      <option value={45} className="text-slate-900">
                        {t.min45}
                      </option>
                      <option value={60} className="text-slate-900">
                        {t.min60}
                      </option>
                      <option value={90} className="text-slate-900">
                        {t.min90}
                      </option>
                      <option value={120} className="text-slate-900">
                        {t.min120}
                      </option>
                    </select>
                  </div>

                  {/* Reason */}
                  <div>
                    <label className="block text-xs font-medium text-emerald-100 mb-1.5">
                      {t.rescheduleReason}
                    </label>
                    <input
                      type="text"
                      value={rescheduleReason}
                      onChange={(e) => setRescheduleReason(e.target.value)}
                      placeholder={
                        isAr
                          ? "أدخل سبب التغيير..."
                          : "Enter reason for change..."
                      }
                      className="w-full px-3 py-2 text-sm border border-white/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-white/50 bg-white/10 text-white placeholder:text-white/50"
                    />
                  </div>

                  {/* Notify Customer */}
                  <label className="flex items-center gap-3 p-3 rounded-lg bg-white/10 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={notifyCustomer}
                      onChange={(e) => setNotifyCustomer(e.target.checked)}
                      className="w-4 h-4 rounded border-white/30 text-brand-green focus:ring-brand-green/50 bg-white/10"
                    />
                    <div className="flex items-center gap-2">
                      <Bell className="w-4 h-4 text-emerald-100" />
                      <span className="text-sm font-medium text-white">
                        {t.notifyCustomer}
                      </span>
                    </div>
                  </label>

                  {/* Action Buttons */}
                  <div className="flex items-center justify-end gap-3 pt-2">
                    <button
                      onClick={cancelEditing}
                      disabled={isRescheduling}
                      className="px-4 py-2 rounded-lg bg-white/10 text-sm font-medium text-white hover:bg-white/20 transition-colors disabled:opacity-50"
                    >
                      {t.cancelEdit}
                    </button>
                    <button
                      onClick={handleReschedule}
                      disabled={isRescheduling}
                      className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-white text-sm font-semibold text-brand-green hover:bg-white/90 transition-colors disabled:opacity-50"
                    >
                      {isRescheduling ? (
                        <>
                          <Loader2 className="w-4 h-4 animate-spin" />
                          {t.rescheduling}
                        </>
                      ) : (
                        <>
                          <CheckCircle className="w-4 h-4" />
                          {t.saveChanges}
                        </>
                      )}
                    </button>
                  </div>
                </div>
              )}
            </div>
          </div>

          {/* Body */}
          <div className="p-8 overflow-y-auto flex-1 space-y-6">
            {/* Customer Information */}
            <div>
              <h5 className="flex items-center gap-2 text-sm font-bold text-slate-700 mb-4">
                <span className="flex h-6 w-6 items-center justify-center rounded-lg bg-slate-100">
                  <User className="w-3.5 h-3.5 text-slate-500" />
                </span>
                {dt.customerInfo || "Customer Information"}
              </h5>
              <div className="space-y-3">
                <div className="flex items-center gap-4 p-4 rounded-xl bg-gradient-to-r from-slate-50 to-slate-100 border border-slate-200/50">
                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-brand-green/20 to-emerald-500/20 text-lg font-bold text-brand-green">
                    {booking.customerName.charAt(0).toUpperCase()}
                  </div>
                  <div>
                    <p className="text-base font-semibold text-slate-900">
                      {booking.customerName}
                    </p>
                    <p className="text-sm text-slate-500">
                      {dt.customer || "Customer"}
                    </p>
                  </div>
                </div>

                <div className="flex items-center gap-4 p-4 rounded-xl bg-gradient-to-r from-emerald-50 to-teal-50 border border-emerald-200/50">
                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-100">
                    <Phone className="w-5 h-5 text-emerald-600" />
                  </div>
                  <div>
                    <p className="text-xs font-medium text-slate-500">
                      {dt.phone || "Phone"}
                    </p>
                    <p
                      className="text-base font-semibold text-slate-900 font-mono"
                      dir="ltr"
                    >
                      {booking.customerPhone}
                    </p>
                  </div>
                </div>

                {booking.customerEmail && (
                  <div className="flex items-center gap-4 p-4 rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200/50">
                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100">
                      <Mail className="w-5 h-5 text-blue-600" />
                    </div>
                    <div>
                      <p className="text-xs font-medium text-slate-500">
                        {dt.email || "Email"}
                      </p>
                      <p
                        className="text-base font-semibold text-slate-900"
                        dir="ltr"
                      >
                        {booking.customerEmail}
                      </p>
                    </div>
                  </div>
                )}
              </div>
            </div>

            {/* Payment Information */}
            {(booking.depositAmount || booking.totalAmount) && (
              <div>
                <h5 className="flex items-center gap-2 text-sm font-bold text-slate-700 mb-4">
                  <span className="flex h-6 w-6 items-center justify-center rounded-lg bg-slate-100">
                    <DollarSign className="w-3.5 h-3.5 text-slate-500" />
                  </span>
                  {isAr ? "معلومات الدفع" : "Payment Information"}
                </h5>
                <div className="grid grid-cols-2 gap-4">
                  {booking.totalAmount !== undefined &&
                    booking.totalAmount > 0 && (
                      <div className="p-4 rounded-xl bg-gradient-to-r from-violet-50 to-purple-50 border border-violet-200/50">
                        <p className="text-xs font-medium text-slate-500">
                          {isAr ? "المبلغ الإجمالي" : "Total Amount"}
                        </p>
                        <p className="text-xl font-bold text-violet-700">
                          QAR {booking.totalAmount.toFixed(2)}
                        </p>
                      </div>
                    )}
                  {booking.depositAmount != null &&
                    booking.depositAmount > 0 && (
                      <div
                        className={`p-4 rounded-xl border ${
                          booking.depositPaid
                            ? "bg-gradient-to-r from-emerald-50 to-teal-50 border-emerald-200/50"
                            : "bg-gradient-to-r from-amber-50 to-orange-50 border-amber-200/50"
                        }`}
                      >
                        <p className="text-xs font-medium text-slate-500">
                          {dt.deposit || "Deposit"}
                        </p>
                        <p
                          className={`text-xl font-bold ${booking.depositPaid ? "text-emerald-700" : "text-amber-700"}`}
                        >
                          QAR {(booking.depositAmount ?? 0).toFixed(2)}
                        </p>
                        <p
                          className={`text-xs mt-1 ${booking.depositPaid ? "text-emerald-600" : "text-amber-600"}`}
                        >
                          {booking.depositPaid
                            ? dt.depositPaidBadge || "Paid"
                            : dt.depositPendingBadge || "Pending"}
                        </p>
                      </div>
                    )}
                </div>
              </div>
            )}

            {/* Additional Details */}
            <div>
              <h5 className="flex items-center gap-2 text-sm font-bold text-slate-700 mb-4">
                <span className="flex h-6 w-6 items-center justify-center rounded-lg bg-slate-100">
                  <FileText className="w-3.5 h-3.5 text-slate-500" />
                </span>
                {isAr ? "تفاصيل إضافية" : "Additional Details"}
              </h5>
              <div className="space-y-3">
                {booking.staffMember && (
                  <div className="flex items-center justify-between p-3 rounded-xl bg-slate-50 border border-slate-200/50">
                    <span className="text-sm text-slate-600">
                      {isAr ? "الموظف" : "Staff Member"}
                    </span>
                    <span className="text-sm font-semibold text-slate-900">
                      {booking.staffMember}
                    </span>
                  </div>
                )}
                <div className="flex items-center justify-between p-3 rounded-xl bg-slate-50 border border-slate-200/50">
                  <span className="text-sm text-slate-600">
                    {isAr ? "المصدر" : "Source"}
                  </span>
                  <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold bg-slate-200 text-slate-700">
                    <Tag className="w-3 h-3" />
                    {getSourceLabel(booking.source)}
                  </span>
                </div>
                {booking.createdAt && (
                  <div className="flex items-center justify-between p-3 rounded-xl bg-slate-50 border border-slate-200/50">
                    <span className="text-sm text-slate-600">
                      {isAr ? "تم الإنشاء" : "Created"}
                    </span>
                    <span className="text-sm font-semibold text-slate-900">
                      {formatDate(booking.createdAt)}
                    </span>
                  </div>
                )}
              </div>
            </div>

            {/* Sector Metadata */}
            {booking.sectorMetadata &&
              Object.keys(booking.sectorMetadata).length > 0 && (
                <div>
                  <h5 className="flex items-center gap-2 text-sm font-bold text-slate-700 mb-4">
                    <span className="flex h-6 w-6 items-center justify-center rounded-lg bg-indigo-100">
                      <Tag className="w-3.5 h-3.5 text-indigo-600" />
                    </span>
                    {isAr ? "تفاصيل القطاع" : "Sector Details"}
                  </h5>
                  <div className="space-y-3">
                    {Object.entries(booking.sectorMetadata).map(
                      ([key, value]) => {
                        if (
                          value === undefined ||
                          value === null ||
                          value === ""
                        )
                          return null;
                        const label = key
                          .replace(/_/g, " ")
                          .replace(/\b\w/g, (c) => c.toUpperCase());
                        return (
                          <div
                            key={key}
                            className="flex items-center justify-between p-3 rounded-xl bg-slate-50 border border-slate-200/50"
                          >
                            <span className="text-sm text-slate-600">
                              {label}
                            </span>
                            <span className="text-sm font-semibold text-slate-900">
                              {String(value)}
                            </span>
                          </div>
                        );
                      },
                    )}
                  </div>
                </div>
              )}

            {/* Notes */}
            {booking.notes && (
              <div>
                <h5 className="flex items-center gap-2 text-sm font-bold text-slate-700 mb-4">
                  <span className="flex h-6 w-6 items-center justify-center rounded-lg bg-violet-100">
                    <FileText className="w-3.5 h-3.5 text-violet-600" />
                  </span>
                  {dt.notes || "Notes"}
                </h5>
                <div className="p-4 rounded-xl bg-gradient-to-r from-violet-50 to-purple-50 border border-violet-200/50">
                  <p className="text-sm text-slate-700 whitespace-pre-wrap">
                    {booking.notes}
                  </p>
                </div>
              </div>
            )}
          </div>

          {/* Footer */}
          <div className="px-8 py-6 bg-gradient-to-r from-slate-50 via-slate-100/50 to-slate-50 border-t border-slate-200">
            <div className="flex items-center justify-end gap-3">
              <button
                onClick={onClose}
                className="px-6 py-3 rounded-xl border-2 border-slate-200 bg-white text-sm font-bold text-slate-600 hover:bg-slate-50 hover:border-slate-300 transition-all duration-200"
              >
                {dt.cancelAction || "Close"}
              </button>
              {onStatusChange && booking.status === "pending" && (
                <button
                  onClick={() => onStatusChange(booking.id, "confirmed")}
                  className="px-6 py-3 rounded-xl bg-gradient-to-r from-brand-green to-emerald-600 text-sm font-bold text-white shadow-lg shadow-brand-green/30 hover:shadow-brand-green/50 hover:-translate-y-0.5 transition-all duration-200"
                >
                  {dt.statusConfirmed || "Confirm"}
                </button>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}