"use client";
import React, { useState } from "react";
import Link from "next/link";

import { userService } from "@/services/user.service"; 
import { useForm } from "react-hook-form"; 

import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

import { useRouter } from "next/navigation";
import { checkIsLogged } from "@/utlis/authCheck";

export default function Register() {
     checkIsLogged('/'); 

     const router = useRouter(); 
     
	const {
		register,
		handleSubmit,
		formState: { errors },
		watch,
	} = useForm();

     const [marketplaceRegister, setMarketplaceRegister] = useState(false); 
     const [compliancePrivacy, setCompliancePrivacy] = useState(false); 
     const [complianceTerms, setComplianceTerms] = useState(false); 

     const onSubmit = async (data) => {
          if(!compliancePrivacy || !complianceTerms) {
               toast.error('Te rugăm să accepți politica de confidențialitate și termenii și condițiile înainte de înregistrare.');
               return; 
          }

		return userService
			.register(data)
			.then(() => {
				router.push("/autentificare");
			})
			.catch(() => {
				toast.error(
					"Datele introduse nu sunt valide sau sunt folosite de un alt utilizator !"
				);
			});
	};

	return (
		<section className='flat-spacing-10'>
               <style jsx>{`
                    .info-box {
					background: #f0f9ff;
					border: 2px solid #bae6fd;
					border-radius: 12px;
					padding: 20px;
					margin-bottom: 32px;
				}

				.info-box-content {
					display: flex;
					align-items: flex-start;
					gap: 16px;
				}

				.info-icon {
					width: 24px;
					height: 24px;
					background: #0ea5e9;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					color: white;
					font-weight: 700;
					flex-shrink: 0;
					margin-top: 2px;
				}

				.info-text {
					font-size: 14px;
					color: #0c4a6e;
					line-height: 1.6;
					margin: 0;
				}
               `}</style> 
			<div className='container'>
				<div className='form-register-wrap'>
					<div className='flat-title align-items-start gap-0 mb_30 px-0'>
						<h5 className='mb_18'>Înregistrare</h5>
						<p className='text_black-2'>
							Înscrie-te pentru acces anticipat la reduceri, plus noutăți personalizate, tendințe și promoții.
						</p>
					</div>
					<div>
						<form
							onSubmit={handleSubmit(onSubmit)}
							className=''
							id='register-form'
							action='#'
							method='post'
							acceptCharset='utf-8'
							data-mailchimp='true'>
							<div className='tf-field style-1 mb_15'>
								<input
									className='tf-field-input tf-input'
									placeholder=' '
									type='text'
									id='property1'
									name='firstName'
									required
                                             {...register(
                                                  "firstName",
                                                  {
                                                       required: true,
                                                  }
                                             )}
								/>
								<label className='tf-field-label fw-4 text_black-2' htmlFor='property1'>
									Prenume
								</label>
							</div>
							<div className='tf-field style-1 mb_15'>
								<input
									className='tf-field-input tf-input'
									placeholder=' '
									type='text'
									id='property2'
									name='lastName'
									required
                                             {...register(
                                                  "lastName",
                                                  {
                                                       required: true,
                                                  }
                                             )}
								/>
								<label className='tf-field-label fw-4 text_black-2' htmlFor='property2'>
									Nume de familie
								</label>
							</div>
							<div className='tf-field style-1 mb_15'>
								<input
									className='tf-field-input tf-input'
									placeholder=' '
									type='email'
									autoComplete='abc@xyz.com'
									id='property3'
									name='email'
									required
                                             {...register(
                                                  "email",
                                                  {
                                                       required: true,
                                                       pattern: /^\S+@\S+$/i,
                                                  }
                                             )}
								/>
								<label className='tf-field-label fw-4 text_black-2' htmlFor='property3'>
									Email *
								</label>
							</div>
							<div className='tf-field style-1 mb_30'>
								<input
									className='tf-field-input tf-input'
									placeholder=' '
									type='password'
									id='property4'
									name='password'
									autoComplete='current-password'
									required
                                             {...register(
                                                  "password",
                                                  {
                                                       required: true,
                                                  }
                                             )}
								/>
								<label className='tf-field-label fw-4 text_black-2' htmlFor='property4'>
									Parola *
								</label>
							</div>
                                   <div className='tf-field style-1 mb_30'>
                                        <label className='checkbox-container text_black-2'>
                                             <input type="checkbox"
                                                  onChange={() => setMarketplaceRegister(!marketplaceRegister)}
                                                  checked={marketplaceRegister}
                                             />
                                             <span className='checkmark' />
                                             Apasa daca doresti inregistrare ca vânzător pe marketplace
                                        </label>
                                   </div>
                                   <div className="tf-field style-1 mb_15">
                                        <label className='checkbox-container text_black-2'>
                                             <input type="checkbox"
                                                  onChange={() => setCompliancePrivacy(!compliancePrivacy)}
                                                  checked={compliancePrivacy}
                                             />
                                             <span className='checkmark' />
                                             Sunt de acord cu <a href="/politica-de-confidentialitate">Politica de Confidențialitate</a>
                                        </label>
                                   </div>
                                   <div className="tf-field style-1 mb_15">
                                        <label className='checkbox-container text_black-2'>
                                             <input type="checkbox"
                                                  onChange={() => setComplianceTerms(!complianceTerms)}
                                                  checked={complianceTerms}
                                             />
                                             <span className='checkmark' />
                                             Sunt de acord cu <a href="/termeni-si-conditii">Termenii și Condițiile</a>
                                        </label>
                                   </div>
                                   {marketplaceRegister && (
                                        <>
                                             <div className="info-box">
                                                  <div className="info-box-content">
                                                       <div className="info-icon">i</div>
                                                       <p className="info-text">
                                                            <strong>ATENTIE !</strong>{" "}
                                                         
                                                                 Conturile înregistrare cu funcționalitate de acces că vânzător pe marketplace trebuiesc aprobate de către un administrator eMagyl. Vă rugam să vă asigurați că datele introduse sunt corecte deoarece ulterior nu vor mai putea fi modificate !
                                                        
                                                       </p>
                                                  </div>
                                             </div>

                                             <div className='tf-field style-1 mb_30'>
                                                  <input
                                                       className='tf-field-input tf-input'
                                                       placeholder=' '
                                                       type='text'
                                                       id='nume_firma'
                                                       name='nume_firma'
                                                       required
                                                       {...register(
                                                            "nume_firma",
                                                            {
                                                                 required: true,
                                                            }
                                                       )}
                                                  />
                                                  <label className='tf-field-label fw-4 text_black-2' htmlFor='property3'>
                                                       Nume Firma
                                                  </label>
                                             </div>

                                             <div className='tf-field style-1 mb_30'>
                                                  <input
                                                       className='tf-field-input tf-input'
                                                       placeholder=' '
                                                       type='text'
                                                       id='cui_firma'
                                                       name='cui_firma'
                                                       required
                                                       {...register(
                                                            "cui_firma",
                                                            {
                                                                 required: true,
                                                            }
                                                       )}
                                                  />
                                                  <label className='tf-field-label fw-4 text_black-2' htmlFor='property3'>
                                                       CUI Firma
                                                  </label>
                                             </div>

                                             <div className='tf-field style-1 mb_15'>
                                                  <input
                                                       className='tf-field-input tf-input'
                                                       placeholder=' '
                                                       type='text'
                                                       id='nr_inregistrare_firma'
                                                       name='nr_inregistrare_firma'
                                                       required
                                                       {...register(
                                                            "nr_inregistrare_firma",
                                                            {
                                                                 required: true,
                                                            }
                                                       )}
                                                  />
                                                  <label className='tf-field-label fw-4 text_black-2' htmlFor='property3'>
                                                       Numar Inregistrare Firma
                                                  </label>
                                             </div>

                                             <div className='tf-field style-1 mb_15'>
                                                  <input
                                                       className='tf-field-input tf-input'
                                                       placeholder=' '
                                                       type='text'
                                                       id='adresa_firma'
                                                       name='adresa_firma'
                                                       required
                                                       {...register(
                                                            "adresa_firma",
                                                            {
                                                                 required: true,
                                                            }
                                                       )}
                                                  />
                                                  <label className='tf-field-label fw-4 text_black-2' htmlFor='property3'>
                                                       Adresa Firma
                                                  </label>
                                             </div>
                                        </>
                                   )} 
							<div className='mb_20'>
								<button
									type='submit'
									className='tf-btn w-100 radius-3 btn-fill animate-hover-btn justify-content-center'>
									Înregistrare
								</button>
							</div>
                         
							<div className='text-center'>
								<Link href={`/login`} className='tf-btn btn-line'>
									Aveți deja un cont ? Apăsați aici pentru logare
									<i className='icon icon-arrow1-top-left' />
								</Link>
							</div>
						</form>
					</div>
				</div>
			</div>
		</section>
	);
}
