SweetHome/app/components/OwnerComponents/OwnerFormStepOne.js

import { useTranslation } from "react-i18next";
import { fadeInUp } from "../Animation/OwnerPageAnimation";
import { motion, AnimatePresence } from "framer-motion";
import { User, Mail, Phone, Lock, Eye, EyeOff, MessageCircle, Camera, X, CheckCircle, XCircle } from "lucide-react";
import { CustomerTypeLabels, OwnerTypeLabels } from "@/app/enums";
import { useRef, useState } from "react";
import { handleImageUpload } from "@/app/HelperFunction/UploadImage";
import UploadImage from "./UploadImage";

export default function OwnerFormStepOne({ formData, errors, setFormData, setErrors, isCompany, idImagePreviews, setIdImagePreviews, setIdImages, type }) {
  const { t } = useTranslation();
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  const fileInputLicenseRef = useRef(null);
  return (
    <>
      <motion.div variants={fadeInUp} className="grid grid-cols-2 gap-3">
        <div>
          <label className="block text-sm font-medium text-gray-300 mb-2">
            {t("register.firstName")} <span className="text-red-500">*</span>
          </label>
          <div className="relative group">
            <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
              <User className={`w-5 h-5 ${errors.firstName ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
            </div>
            <input
              type="text"
              value={formData.firstName}
              onChange={(e) => {
                setFormData({ ...formData, firstName: e.target.value });
                setErrors({ ...errors, firstName: null });
              }}
              className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${errors.firstName ? "border-red-500" : "border-gray-700"}`}
              placeholder={t("register.firstName")}
            />
          </div>
          {errors.firstName && <p className="text-red-500 text-sm mt-1">{errors.firstName}</p>}
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-300 mb-2">
            {t("register.lastName")} <span className="text-red-500">*</span>
          </label>
          <input
            type="text"
            value={formData.lastName}
            onChange={(e) => {
              setFormData({ ...formData, lastName: e.target.value });
              setErrors({ ...errors, lastName: null });
            }}
            className={`w-full px-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${errors.lastName ? "border-red-500" : "border-gray-700"}`}
            placeholder={t("register.lastName")}
          />
          {errors.lastName && <p className="text-red-500 text-sm mt-1">{errors.lastName}</p>}
        </div>
      </motion.div>

      <motion.div variants={fadeInUp}>
        <label className="block text-sm font-medium text-gray-300 mb-2">
          {t("register.email")} <span className="text-red-500">*</span>
        </label>
        <div className="relative group">
          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
            <Mail className={`w-5 h-5 ${errors.email ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
          </div>
          <input
            type="email"
            value={formData.email}
            onChange={(e) => {
              setFormData({ ...formData, email: e.target.value });
              setErrors({ ...errors, email: null });
            }}
            className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${errors.email ? "border-red-500" : "border-gray-700"}`}
            placeholder={t("register.emailPlaceholder")}
          />
        </div>
        {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email}</p>}
      </motion.div>

      <motion.div variants={fadeInUp}>
        <label className="block text-sm font-medium text-gray-300 mb-2">
          {t("register.phone")} <span className="text-gray-500">({t("register.optional")})</span>
        </label>
        <div className="relative group">
          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
            <Phone className="w-5 h-5 text-gray-400 group-focus-within:text-amber-500" />
          </div>
          <input
            type="tel"
            value={formData.phone}
            onChange={(e) => {
              setFormData({ ...formData, phone: e.target.value });
              setErrors({ ...errors, phone: null });
            }}
            className="w-full pr-12 pl-4 py-3 bg-white/5 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all"
            placeholder={t("register.phoneOptionalPlaceholder")}
          />
        </div>
        {errors.phone && <p className="text-red-500 text-sm mt-1">{errors.phone}</p>}
      </motion.div>

      <motion.div variants={fadeInUp}>
        <label className="block text-sm font-medium text-gray-300 mb-2">
          {t("register.whatsapp")} <span className="text-red-500">*</span>
        </label>
        <div className="relative group">
          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
            <MessageCircle className={`w-5 h-5 ${errors.whatsapp ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
          </div>
          <input
            type="tel"
            value={formData.whatsapp}
            onChange={(e) => {
              setFormData({ ...formData, whatsapp: e.target.value });
              setErrors({ ...errors, whatsapp: null });
            }}
            className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${errors.whatsapp ? "border-red-500" : "border-gray-700"}`}
            placeholder={t("register.whatsappPlaceholder")}
          />
        </div>
        {errors.whatsapp && <p className="text-red-500 text-sm mt-1">{errors.whatsapp}</p>}
      </motion.div>

      <motion.div variants={fadeInUp}>
        <label className="block text-sm font-medium text-gray-300 mb-2">
          {t("register.phoneSecondary")} <span className="text-red-500">*</span>
        </label>
        <div className="relative group">
          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
            <Phone className={`w-5 h-5 ${errors.phone2 ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
          </div>
          <input
            type="tel"
            value={formData.phone2}
            onChange={(e) => {
              setFormData({ ...formData, phone2: e.target.value });
              setErrors({ ...errors, phone2: null });
            }}
            className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${errors.phone2 ? "border-red-500" : "border-gray-700"}`}
            placeholder={t("register.phoneSecondaryPlaceholder")}
            maxLength={7}
          />
        </div>
        {errors.phone2 && <p className="text-red-500 text-sm mt-1">{errors.phone2}</p>}
      </motion.div>

      <motion.div variants={fadeInUp}>
        <label className="block text-sm font-medium text-gray-300 mb-2">
          {t("register.nationalNumber")} <span className="text-red-500">*</span>
        </label>
        <div className="relative group">
          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
            <User className={`w-5 h-5 ${errors.nationalNumber ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
          </div>
          <input
            type="text"
            value={formData.nationalNumber}
            onChange={(e) => {
              setFormData({ ...formData, nationalNumber: e.target.value });
              setErrors({ ...errors, nationalNumber: null });
            }}
            className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${errors.nationalNumber ? "border-red-500" : "border-gray-700"}`}
            placeholder={t("register.nationalNumberPlaceholder")}
          />
        </div>
        {errors.nationalNumber && <p className="text-red-500 text-sm mt-1">{errors.nationalNumber}</p>}
      </motion.div>

      <motion.div variants={fadeInUp}>
        {type === "owner" ? (
          <>
            <label className="block text-sm font-medium text-gray-300 mb-2">
              {t("register.ownerType")} <span className="text-red-500">*</span>
            </label>
            <select
              value={formData.ownerType.toString()}
              onChange={(e) => {
                const selectedType = parseInt(e.target.value, 10);
                setFormData((prev) => ({ ...prev, ownerType: selectedType }));
              }}
              className="w-full py-3 px-4 bg-white/5 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent appearance-none text-gray-900 cursor-pointer"
            >
              {Object.entries(OwnerTypeLabels).map(([value, label]) => (
                <option key={value} value={value} className="bg-gray-900 ">
                  {label}
                </option>
              ))}
            </select>
          </>
        ) : (
          <>
            <motion.div variants={fadeInUp}>
              <label className="block text-sm font-medium text-gray-300 mb-2">
                {t("register.customerType")} <span className="text-red-500">*</span>
              </label>
              <select
                value={formData.customerType}
                onChange={(e) => setFormData({ ...formData, customerType: e.target.value })}
                className="w-full py-3 px-4 bg-white/5 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white appearance-none cursor-pointer"
              >
                {Object.entries(CustomerTypeLabels).map(([value, label]) => (
                  <option key={value} value={value} className="bg-gray-900 text-white">
                    {label}
                  </option>
                ))}
              </select>
            </motion.div>
          </>
        )}
      </motion.div>

      <AnimatePresence>
        {isCompany && <UploadImage idImagePreviews={idImagePreviews} type={"license"} errors={errors.license} setIdImagePreviews={setIdImagePreviews} setIdImages={setIdImages} />}
      </AnimatePresence>

      <motion.div variants={fadeInUp}>
        <label className="block text-sm font-medium text-gray-300 mb-2">
          {t("register.password")} <span className="text-red-500">*</span>
        </label>
        <div className="relative group">
          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
            <Lock className={`w-5 h-5 ${errors.password ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
          </div>
          <input
            type={showPassword ? "text" : "password"}
            value={formData.password}
            onChange={(e) => {
              setFormData({ ...formData, password: e.target.value });
              setErrors({ ...errors, password: null });
            }}
            className={`w-full pr-12 pl-12 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${errors.password ? "border-red-500" : "border-gray-700"}`}
            placeholder={t("register.passwordPlaceholder")}
          />
          <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute inset-y-0 left-0 pl-3 flex items-center">
            {showPassword ? <EyeOff className="w-5 h-5 text-gray-400" /> : <Eye className="w-5 h-5 text-gray-400" />}
          </button>
        </div>
        {errors.password && <p className="text-red-500 text-sm mt-1">{errors.password}</p>}
      </motion.div>

      <motion.div variants={fadeInUp}>
        <label className="block text-sm font-medium text-gray-300 mb-2">
          {t("register.confirmPassword")} <span className="text-red-500">*</span>
        </label>
        <div className="relative group">
          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
            <Lock className={`w-5 h-5 ${errors.confirmPassword ? "text-red-500" : "text-gray-400 group-focus-within:text-amber-500"}`} />
          </div>
          <input
            type={showConfirmPassword ? "text" : "password"}
            value={formData.confirmPassword}
            onChange={(e) => {
              setFormData({ ...formData, confirmPassword: e.target.value });
              setErrors({ ...errors, confirmPassword: null });
            }}
            className={`w-full pr-12 pl-12 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-amber-50 placeholder-gray-500 transition-all ${errors.confirmPassword ? "border-red-500" : "border-gray-700"}`}
            placeholder={t("register.confirmPasswordPlaceholder")}
          />
          <button type="button" onClick={() => setShowConfirmPassword(!showConfirmPassword)} className="absolute inset-y-0 left-0 pl-3 flex items-center">
            {showConfirmPassword ? <EyeOff className="w-5 h-5 text-gray-400" /> : <Eye className="w-5 h-5 text-gray-400" />}
          </button>
          {formData.confirmPassword && (
            <div className="absolute inset-y-0 left-12 flex items-center">
              {formData.password === formData.confirmPassword ? <CheckCircle className="w-5 h-5 text-green-500" /> : <XCircle className="w-5 h-5 text-red-500" />}
            </div>
          )}
        </div>
        {errors.confirmPassword && <p className="text-red-500 text-sm mt-1">{errors.confirmPassword}</p>}
      </motion.div>
    </>
  );
}