import React from "react";
import { Customer } from "../../src/services/customer.service";
import { maskDocument } from "../../lib/utils";

interface CustomerSearchModalProps {
  isOpen: boolean;
  searchTerm: string;
  searchResults: Customer[];
  isSearching: boolean;
  onClose: () => void;
  onSearchChange: (term: string) => void;
  onSelectCustomer: (customer: Customer) => void;
}

const CustomerSearchModal: React.FC<CustomerSearchModalProps> = ({
  isOpen,
  searchTerm,
  searchResults,
  isSearching,
  onClose,
  onSearchChange,
  onSelectCustomer,
}) => {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-[200] flex items-center justify-center">
      {/* Overlay */}
      <div
        className="absolute inset-0 bg-[#001f3f]/60 backdrop-blur-sm transition-opacity duration-300 opacity-100"
        onClick={onClose}
      ></div>

      {/* Dialog */}
      <div className="relative bg-white rounded-3xl shadow-2xl max-w-2xl w-full mx-4 transform transition-all duration-300 scale-100 opacity-100">
        {/* Header */}
        <div className="p-6 bg-[#002147] text-white rounded-t-3xl relative overflow-hidden">
          <div className="relative z-10">
            <div className="flex items-center gap-3 mb-2">
              <div className="w-12 h-12 bg-orange-500/20 rounded-2xl flex items-center justify-center">
                <svg
                  className="w-6 h-6 text-orange-400"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2.5"
                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                  />
                </svg>
              </div>
              <div className="flex-1">
                <h3 className="text-xl font-black">Vincular Cliente</h3>
                <p className="text-xs text-orange-400 font-bold uppercase tracking-wider mt-0.5">
                  Busca
                </p>
              </div>
              <button
                onClick={onClose}
                className="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center text-white hover:bg-white/20 transition-colors"
              >
                <svg
                  className="w-5 h-5"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2.5"
                    d="M6 18L18 6M6 6l12 12"
                  />
                </svg>
              </button>
            </div>
          </div>
          <div className="absolute right-[-10%] top-[-10%] w-32 h-32 bg-orange-400/10 rounded-full blur-2xl"></div>
        </div>

        {/* Content */}
        <div className="p-6">
          <input
            type="text"
            placeholder="Nome ou CPF/CNPJ..."
            value={searchTerm}
            onChange={(e) => onSearchChange(e.target.value)}
            className="w-full px-4 py-3 border-2 border-slate-200 rounded-xl outline-none focus:border-orange-500 text-base font-medium mb-4 transition-colors"
            autoFocus
          />
          <div className="space-y-3 max-h-[400px] overflow-auto custom-scrollbar">
            {isSearching ? (
              <div className="text-center py-12 text-slate-400">
                <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-orange-500 mb-3"></div>
                <p className="text-sm font-medium">Buscando clientes...</p>
              </div>
            ) : searchResults.length === 0 ? (
              <div className="text-center py-12 text-slate-400">
                <svg
                  className="w-12 h-12 mx-auto mb-3 text-slate-300"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
                </svg>
                <p className="text-sm font-medium">
                  {searchTerm.length >= 3
                    ? "Nenhum cliente encontrado"
                    : "Digite pelo menos 3 caracteres para buscar"}
                </p>
              </div>
            ) : (
              searchResults.map((customer) => (
                <div
                  key={customer.customerId}
                  onClick={() => onSelectCustomer(customer)}
                  className="p-4 border border-slate-200 rounded-xl hover:bg-slate-50 hover:border-orange-300 cursor-pointer transition-all group"
                >
                  <h5 className="font-black text-[#002147] text-base mb-1 group-hover:text-orange-600 transition-colors">
                    {customer.name}
                  </h5>
                  <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">
                    {maskDocument(customer.cpfCnpj || customer.document || "")}
                  </p>
                </div>
              ))
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default CustomerSearchModal;