/**
 * Customer Form Component
 * Modal form for adding/editing customers
 */

"use client";

import {
  X,
  User,
  Phone,
  Mail,
  FileText,
  UserPlus,
  Loader2,
} from "lucide-react";
import { dashboardEn } from "@/lib/config/translations/modules/dashboard.en";
import { dashboardAr } from "@/lib/config/translations/modules/dashboard.ar";
import type { CustomerFormProps } from "./types";

export default function CustomerForm({
  lang,
  isOpen,
  isEditing,
  formData,
  formErrors,
  isSaving,
  onClose,
  onFormChange,
  onSave,
}: CustomerFormProps) {
  const isAr = lang === "ar";
  const dt = isAr ? dashboardAr : dashboardEn;

  if (!isOpen) return null;

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center p-4"
      onClick={onClose}
    >
      {/* Modal Container */}
      <div
        className="relative w-full max-w-lg transform transition-all duration-300 ease-out animate-fadeIn"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Modal Content */}
        <div className="relative bg-white rounded-2xl shadow-2xl overflow-hidden">
          {/* Header with gradient accent */}
          <div className="relative px-8 pt-8 pb-6">
            {/* Top accent bar */}
            <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-brand-green via-emerald-400 to-teal-500" />

            <div className="flex items-start justify-between">
              <div className="flex items-center gap-4">
                {/* Icon container with gradient */}
                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-green to-emerald-600 shadow-lg shadow-brand-green/30">
                  <UserPlus className="w-7 h-7 text-white" />
                </div>
                <div>
                  <h3 className="text-2xl font-bold text-slate-900">
                    {isEditing ? dt.editCustomer : dt.addNewCustomer}
                  </h3>
                  <p className="text-sm text-slate-500 mt-1">
                    {isAr
                      ? "أدخل معلومات العميل أدناه"
                      : "Enter customer information below"}
                  </p>
                </div>
              </div>
              <button
                onClick={onClose}
                className="flex h-10 w-10 items-center justify-center rounded-xl text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-all duration-200"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
          </div>

          {/* Form Body */}
          <div className="px-8 pb-6 space-y-6">
            {/* Name & Phone in grid on larger screens */}
            <div className="grid gap-6 sm:grid-cols-2">
              {/* Name Field */}
              <div className="sm:col-span-2">
                <label className="flex items-center gap-2 text-sm font-semibold text-slate-700 mb-3">
                  <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.fullName}
                  <span className="text-red-500">*</span>
                </label>
                <div className="relative group">
                  <input
                    type="text"
                    value={formData.name}
                    onChange={(e) =>
                      onFormChange({ ...formData, name: e.target.value })
                    }
                    placeholder={dt.fullNamePlaceholder}
                    className={`w-full h-14 px-5 rounded-xl border-2 ${
                      formErrors.name
                        ? "border-red-300 bg-red-50/50 focus:border-red-500 focus:ring-red-200"
                        : "border-slate-200 bg-slate-50/50 focus:border-brand-green focus:bg-white focus:ring-brand-green/20"
                    } text-base font-medium placeholder-slate-400 transition-all duration-200 focus:ring-4 focus:outline-none`}
                  />
                  {formErrors.name && (
                    <p className="mt-2 text-sm text-red-500 flex items-center gap-1">
                      <span className="w-1 h-1 rounded-full bg-red-500" />
                      {formErrors.name}
                    </p>
                  )}
                </div>
              </div>

              {/* Phone Field */}
              <div>
                <label className="flex items-center gap-2 text-sm font-semibold text-slate-700 mb-3">
                  <span className="flex h-6 w-6 items-center justify-center rounded-lg bg-emerald-100">
                    <Phone className="w-3.5 h-3.5 text-emerald-600" />
                  </span>
                  {dt.mobileNumber}
                  <span className="text-red-500">*</span>
                </label>
                <div className="relative">
                  <input
                    type="tel"
                    value={formData.phone}
                    onChange={(e) =>
                      onFormChange({ ...formData, phone: e.target.value })
                    }
                    placeholder={dt.mobileNumberPlaceholder}
                    className={`w-full h-14 px-5 rounded-xl border-2 ${
                      formErrors.phone
                        ? "border-red-300 bg-red-50/50 focus:border-red-500 focus:ring-red-200"
                        : "border-slate-200 bg-slate-50/50 focus:border-brand-green focus:bg-white focus:ring-brand-green/20"
                    } text-base font-medium placeholder-slate-400 transition-all duration-200 focus:ring-4 focus:outline-none font-mono`}
                    dir="ltr"
                  />
                  {formErrors.phone && (
                    <p className="mt-2 text-sm text-red-500 flex items-center gap-1">
                      <span className="w-1 h-1 rounded-full bg-red-500" />
                      {formErrors.phone}
                    </p>
                  )}
                </div>
              </div>

              {/* Email Field */}
              <div>
                <label className="flex items-center gap-2 text-sm font-semibold text-slate-700 mb-3">
                  <span className="flex h-6 w-6 items-center justify-center rounded-lg bg-blue-100">
                    <Mail className="w-3.5 h-3.5 text-blue-600" />
                  </span>
                  {dt.emailAddress}
                  <span className="text-xs font-normal text-slate-400 ml-1">
                    {isAr ? "(اختياري)" : "(optional)"}
                  </span>
                </label>
                <div className="relative">
                  <input
                    type="email"
                    value={formData.email}
                    onChange={(e) =>
                      onFormChange({ ...formData, email: e.target.value })
                    }
                    placeholder={dt.emailPlaceholder}
                    className={`w-full h-14 px-5 rounded-xl border-2 ${
                      formErrors.email
                        ? "border-red-300 bg-red-50/50 focus:border-red-500 focus:ring-red-200"
                        : "border-slate-200 bg-slate-50/50 focus:border-brand-green focus:bg-white focus:ring-brand-green/20"
                    } text-base font-medium placeholder-slate-400 transition-all duration-200 focus:ring-4 focus:outline-none`}
                    dir="ltr"
                  />
                  {formErrors.email && (
                    <p className="mt-2 text-sm text-red-500 flex items-center gap-1">
                      <span className="w-1 h-1 rounded-full bg-red-500" />
                      {formErrors.email}
                    </p>
                  )}
                </div>
              </div>
            </div>

            {/* Notes Field - Full Width */}
            <div>
              <label className="flex items-center gap-2 text-sm font-semibold text-slate-700 mb-3">
                <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}
                <span className="text-xs font-normal text-slate-400 ml-1">
                  {isAr ? "(اختياري)" : "(optional)"}
                </span>
              </label>
              <textarea
                value={formData.notes}
                onChange={(e) =>
                  onFormChange({ ...formData, notes: e.target.value })
                }
                placeholder={dt.notesPlaceholder}
                rows={3}
                className="w-full px-5 py-4 rounded-xl border-2 border-slate-200 bg-slate-50/50 text-base font-medium placeholder-slate-400 transition-all duration-200 focus:border-brand-green focus:bg-white focus:ring-4 focus:ring-brand-green/20 focus:outline-none resize-none"
              />
            </div>
          </div>

          {/* Footer with gradient background */}
          <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-4">
              <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}
              </button>
              <button
                onClick={onSave}
                disabled={isSaving}
                className="px-8 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 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0 inline-flex items-center gap-2"
              >
                {isSaving && <Loader2 className="w-4 h-4 animate-spin" />}
                {isEditing ? dt.updateCustomer : dt.saveCustomer}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}