"use client";

import { Calendar, ArrowRight, Bell, X } from "lucide-react";
import { useEffect } from "react";

interface RescheduleConfirmDialogProps {
  isOpen: boolean;
  onConfirm: () => void;
  onCancel: () => void;
  oldDate: string;
  oldTime: string;
  newDate: string;
  newTime: string;
  duration: number;
  notifyCustomer: boolean;
  lang: "en" | "ar";
}

export default function RescheduleConfirmDialog({
  isOpen,
  onConfirm,
  onCancel,
  oldDate,
  oldTime,
  newDate,
  newTime,
  duration,
  notifyCustomer,
  lang,
}: RescheduleConfirmDialogProps) {
  const isAr = lang === "ar";

  // Keyboard event handlers
  useEffect(() => {
    if (!isOpen) return;

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Enter") {
        e.preventDefault();
        onConfirm();
      } else if (e.key === "Escape") {
        e.preventDefault();
        onCancel();
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [isOpen, onConfirm, onCancel]);

  if (!isOpen) return null;

  const t = {
    title: isAr ? "تأكيد إعادة الجدولة" : "Confirm Reschedule",
    message: isAr
      ? "هل أنت متأكد من إعادة جدولة هذا الموعد؟"
      : "Are you sure you want to reschedule this appointment?",
    from: isAr ? "من" : "From",
    to: isAr ? "إلى" : "To",
    duration: isAr ? "المدة" : "Duration",
    minutes: isAr ? "دقيقة" : "minutes",
    customerNotification: isAr
      ? "سيتم إشعار العميل عبر واتساب"
      : "Customer will be notified via WhatsApp",
    noNotification: isAr
      ? "لن يتم إشعار العميل"
      : "Customer will not be notified",
    cancel: isAr ? "إلغاء" : "Cancel",
    confirm: isAr ? "تأكيد" : "Confirm",
  };

  // Format date for display
  const formatDate = (dateStr: string) => {
    const date = new Date(dateStr);
    return date.toLocaleDateString(isAr ? "ar-SA" : "en-US", {
      weekday: "short",
      year: "numeric",
      month: "short",
      day: "numeric",
    });
  };

  return (
    <div
      className="fixed inset-0 z-[60] flex items-center justify-center p-4"
      dir={isAr ? "rtl" : "ltr"}
    >
      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-slate-900/60 backdrop-blur-sm"
        onClick={onCancel}
        aria-label={isAr ? "إغلاق" : "Close"}
      />

      {/* Dialog */}
      <div className="relative w-full max-w-md rounded-2xl bg-white shadow-2xl">
        {/* Header */}
        <div className="bg-gradient-to-r from-violet-600 to-purple-600 px-6 py-5 rounded-t-2xl">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center">
                <Calendar className="w-5 h-5 text-white" />
              </div>
              <h2 className="text-lg font-bold text-white">{t.title}</h2>
            </div>
            <button
              onClick={onCancel}
              className="rounded-lg bg-white/10 p-2 text-white hover:bg-white/20 transition-colors"
              aria-label={isAr ? "إغلاق" : "Close"}
            >
              <X className="w-5 h-5" />
            </button>
          </div>
        </div>

        {/* Content */}
        <div className="p-6 space-y-5">
          {/* Message */}
          <p className="text-slate-600 text-sm">{t.message}</p>

          {/* Old → New Comparison */}
          <div className="bg-slate-50 rounded-xl p-4 space-y-4">
            {/* From */}
            <div>
              <p className="text-xs font-medium text-slate-500 mb-2">
                {t.from}
              </p>
              <div className="flex items-center gap-2 text-sm text-slate-700">
                <Calendar className="w-4 h-4 text-slate-400" />
                <span className="font-medium">{formatDate(oldDate)}</span>
                <span className="text-slate-400">•</span>
                <span>{oldTime}</span>
              </div>
            </div>

            {/* Arrow */}
            <div className="flex justify-center">
              <ArrowRight className="w-5 h-5 text-violet-600" />
            </div>

            {/* To */}
            <div>
              <p className="text-xs font-medium text-slate-500 mb-2">{t.to}</p>
              <div className="flex items-center gap-2 text-sm text-slate-900">
                <Calendar className="w-4 h-4 text-violet-600" />
                <span className="font-semibold">{formatDate(newDate)}</span>
                <span className="text-slate-400">•</span>
                <span className="font-semibold">{newTime}</span>
              </div>
            </div>

            {/* Duration */}
            <div className="pt-3 border-t border-slate-200">
              <div className="flex items-center justify-between text-sm">
                <span className="text-slate-500">{t.duration}</span>
                <span className="font-medium text-slate-900">
                  {duration} {t.minutes}
                </span>
              </div>
            </div>
          </div>

          {/* Notification Info */}
          <div
            className={`flex items-start gap-2 rounded-lg p-3 ${
              notifyCustomer
                ? "bg-emerald-50 border border-emerald-200"
                : "bg-amber-50 border border-amber-200"
            }`}
          >
            <Bell
              className={`w-4 h-4 flex-shrink-0 mt-0.5 ${
                notifyCustomer ? "text-emerald-600" : "text-amber-600"
              }`}
            />
            <p
              className={`text-xs ${
                notifyCustomer ? "text-emerald-700" : "text-amber-700"
              }`}
            >
              {notifyCustomer ? t.customerNotification : t.noNotification}
            </p>
          </div>
        </div>

        {/* Footer Actions */}
        <div className="border-t border-slate-200 px-6 py-4 bg-slate-50 rounded-b-2xl">
          <div className="flex justify-end gap-3">
            <button
              onClick={onCancel}
              className="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50 transition-colors"
            >
              {t.cancel}
            </button>
            <button
              onClick={onConfirm}
              className="inline-flex items-center gap-1.5 rounded-lg bg-violet-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-violet-700 transition-colors shadow-sm"
            >
              <Calendar className="w-4 h-4" />
              {t.confirm}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}