/**
 * Customer Delete Modal Component
 * Confirmation dialog for deleting a customer
 */

"use client";

import { Trash2, Loader2 } from "lucide-react";
import { dashboardEn } from "@/lib/config/translations/modules/dashboard.en";
import { dashboardAr } from "@/lib/config/translations/modules/dashboard.ar";
import type { CustomerDeleteModalProps } from "./types";

export default function CustomerDeleteModal({
  lang,
  customer,
  isSaving,
  onClose,
  onConfirm,
}: CustomerDeleteModalProps) {
  const isAr = lang === "ar";
  const dt = isAr ? dashboardAr : dashboardEn;

  // Prevent rendering if customer is not from DB (can't be deleted)
  if (!customer.isFromDB) {
    return null;
  }

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

      {/* Modal */}
      <div
        className="relative w-full max-w-sm transform transition-all duration-300 ease-out animate-fadeIn"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Red gradient ring for danger */}
        <div className="absolute -inset-1 bg-gradient-to-r from-red-500 via-rose-500 to-red-600 rounded-3xl opacity-20 blur-lg" />

        <div className="relative bg-white rounded-2xl shadow-2xl overflow-hidden">
          {/* Red accent bar */}
          <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-red-500 via-rose-500 to-red-600" />

          <div className="p-8 text-center">
            <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-red-500 to-rose-600 flex items-center justify-center mx-auto mb-5 shadow-lg shadow-red-500/30">
              <Trash2 className="w-8 h-8 text-white" />
            </div>
            <h3 className="text-2xl font-bold text-slate-900 mb-2">
              {dt.confirmDelete}
            </h3>
            <p className="text-sm text-slate-600 max-w-xs mx-auto">
              {dt.confirmDeleteDesc}
            </p>
          </div>
          <div className="flex items-center gap-4 px-8 py-6 bg-gradient-to-r from-slate-50 via-slate-100/50 to-slate-50 border-t border-slate-200">
            <button
              onClick={onClose}
              className="flex-1 px-5 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}
            </button>
            <button
              onClick={onConfirm}
              disabled={isSaving}
              className="flex-1 px-5 py-3 rounded-xl bg-gradient-to-r from-red-500 to-rose-600 text-sm font-bold text-white shadow-lg shadow-red-500/30 hover:shadow-red-500/50 hover:-translate-y-0.5 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0 inline-flex items-center justify-center gap-2"
            >
              {isSaving && <Loader2 className="w-4 h-4 animate-spin" />}
              {dt.deleteCustomer}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}