/**
 * Customer Detail Modal Component
 * Shows detailed customer information and booking history
 */

"use client";

import {
  X,
  User,
  Phone,
  Mail,
  FileText,
  Calendar,
  Clock,
  ChevronRight,
  Edit3,
  MessageSquare,
} from "lucide-react";
import { dashboardEn } from "@/lib/config/translations/modules/dashboard.en";
import { dashboardAr } from "@/lib/config/translations/modules/dashboard.ar";
import type { CustomerDetailModalProps } from "./types";

export default function CustomerDetailModal({
  lang,
  customer,
  onClose,
  onEdit,
  onViewAppointment,
}: CustomerDetailModalProps) {
  const isAr = lang === "ar";
  const dt = isAr ? dashboardAr : dashboardEn;

  const formatDate = (date: Date | null) => {
    if (!date) return "-";
    return date.toLocaleDateString(isAr ? "ar-SA" : "en-US", {
      month: "short",
      day: "numeric",
      year: "numeric",
    });
  };

  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 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 with customer profile */}
          <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-center gap-5">
                <div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-white/20 backdrop-blur-sm text-3xl font-bold text-white shadow-lg ring-4 ring-white/30">
                  {customer.name?.charAt(0).toUpperCase() || "?"}
                </div>
                <div>
                  <h3 className="text-2xl font-bold text-white">
                    {customer.name}
                  </h3>
                  <p className="text-emerald-100 flex items-center gap-2 mt-2">
                    <Clock className="w-4 h-4" />
                    {dt.customerSince} {formatDate(customer.createdAt)}
                  </p>
                </div>
              </div>

              {/* Quick Stats in header */}
              <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.totalBookings}
                  </p>
                  <p className="text-2xl font-bold text-white">
                    {customer.bookings.length}
                  </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.lifetimeValue}
                  </p>
                  <p className="text-2xl font-bold text-white">
                    QAR {customer.totalSpent.toFixed(0)}
                  </p>
                </div>
              </div>
            </div>
          </div>

          {/* Body */}
          <div className="p-8 overflow-y-auto flex-1">
            {/* Contact Info */}
            <div className="mb-8">
              <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.contactInfo}
              </h5>
              <div className="space-y-3">
                <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}
                    </p>
                    <p className="text-base font-semibold text-slate-900 font-mono">
                      {customer.phone}
                    </p>
                  </div>
                </div>
                {customer.email && (
                  <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}
                      </p>
                      <p className="text-base font-semibold text-slate-900">
                        {customer.email}
                      </p>
                    </div>
                  </div>
                )}
                {customer.notes && (
                  <div className="flex items-start gap-4 p-4 rounded-xl bg-gradient-to-r from-violet-50 to-purple-50 border border-violet-200/50">
                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-violet-100">
                      <FileText className="w-5 h-5 text-violet-600" />
                    </div>
                    <div>
                      <p className="text-xs font-medium text-slate-500">
                        {dt.notes}
                      </p>
                      <p className="text-sm text-slate-700 mt-1">
                        {customer.notes}
                      </p>
                    </div>
                  </div>
                )}
              </div>
            </div>

            {/* Appointment History */}
            <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">
                  <Calendar className="w-3.5 h-3.5 text-slate-500" />
                </span>
                {dt.appointmentHistory}
              </h5>
              {customer.bookings.length === 0 ? (
                <div className="text-center py-10 rounded-xl bg-slate-50 border-2 border-dashed border-slate-200">
                  <Calendar className="w-10 h-10 text-slate-300 mx-auto mb-3" />
                  <p className="text-sm font-medium text-slate-500">
                    {dt.noAppointmentHistory}
                  </p>
                </div>
              ) : (
                <div className="space-y-3 max-h-52 overflow-y-auto pr-2">
                  {customer.bookings.slice(0, 10).map((booking, idx) => (
                    <button
                      key={booking.id || idx}
                      onClick={() => onViewAppointment(booking)}
                      className="w-full flex items-center justify-between p-4 rounded-xl bg-slate-50 hover:bg-slate-100 hover:ring-2 hover:ring-brand-green/20 transition-all cursor-pointer text-left"
                    >
                      <div className="flex items-center gap-3">
                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white border border-slate-200">
                          <Calendar className="w-5 h-5 text-slate-400" />
                        </div>
                        <div>
                          <p className="text-sm font-semibold text-slate-900">
                            {booking.service || "Appointment"}
                          </p>
                          <p className="text-xs text-slate-500">
                            {new Date(
                              booking.appointmentDate,
                            ).toLocaleDateString(isAr ? "ar-SA" : "en-US", {
                              weekday: "short",
                              month: "short",
                              day: "numeric",
                            })}{" "}
                            {booking.appointmentTime
                              ? `at ${booking.appointmentTime}`
                              : ""}
                          </p>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <span
                          className={`px-3 py-1.5 rounded-lg text-xs font-bold ${
                            booking.status === "completed"
                              ? "bg-emerald-100 text-emerald-700"
                              : booking.status === "confirmed"
                                ? "bg-blue-100 text-blue-700"
                                : booking.status === "cancelled"
                                  ? "bg-red-100 text-red-700"
                                  : "bg-amber-100 text-amber-700"
                          }`}
                        >
                          {booking.status}
                        </span>
                        <ChevronRight className="w-4 h-4 text-slate-400" />
                      </div>
                    </button>
                  ))}
                </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-between gap-4">
              <button
                onClick={() => {
                  onClose();
                  onEdit(customer);
                }}
                className="inline-flex items-center gap-2 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"
              >
                <Edit3 className="w-4 h-4" />
                {dt.edit}
              </button>
              <div className="flex items-center gap-3">
                <button className="inline-flex items-center gap-2 px-5 py-3 rounded-xl border-2 border-brand-green bg-brand-green/10 text-sm font-bold text-brand-green hover:bg-brand-green/20 transition-all duration-200">
                  <MessageSquare className="w-4 h-4" />
                  {dt.sendMessage}
                </button>
                <button className="inline-flex items-center gap-2 px-5 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">
                  <Calendar className="w-4 h-4" />
                  {dt.createAppointmentFor}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}