"use client"; 

import React, { useState } from "react";
import { toast } from "react-toastify";

export default function Page() {
	const [formData, setFormData] = useState({
		name: "",
		email: "",
		phone: "",
		orderID: "",
		selectedItems: "",
		confirm: false,
	});

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

	const handleChange = (e) => {
		const { name, value, type, checked } = e.target;
		setFormData((prev) => ({
			...prev,
			[name]: type === "checkbox" ? checked : value,
		}));
	};

	const handleSubmit = async (e) => {
		e.preventDefault();

          if(!complianceTerms || !compliancePrivacy) {
               toast.error('Te rugăm să accepți politica de confidențialitate și termenii și condițiile înainte de a trimite formularul.');
               return; 
          }

		if (!formData.confirm) {
			toast.warning("Te rugăm să confirmi că datele introduse sunt corecte.");
			return;
		}

          const sku = encodeURIComponent(formData.productSku);
          const orderID = encodeURIComponent(formData.orderID);

          const response = await fetch('/api/productdatabysku?sku=' + sku + '&orderID=' + orderID); 
          const data = await response.json(); 

          if(!data.status) {
               return toast.error(data.error);
          } else {
               toast.success("Cererea dumneavoastra de returnare a comenzii a fost trimisă cu succes ! Veti fii contactat de un operator.");
          }
	};

	return (
		<>
			<style jsx>{`
				.conformitate-form-container {
					max-width: 800px;
					margin: 60px auto;
					padding: 40px;
					background: #fff;
					border-radius: 16px;
					box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
					font-family: "Inter", sans-serif;
					color: #333;
				}

				.conformitate-form-header {
					margin-bottom: 32px;
					padding-bottom: 24px;
					border-bottom: 1px solid #e5e5e5;
				}

				.conformitate-form-title {
					font-size: 28px;
					font-weight: 700;
					margin-bottom: 10px;
					color: #000;
				}

				.conformitate-form-subtitle {
					font-size: 15px;
					color: #666;
					line-height: 1.6;
				}

				.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;
				}

				form {
					display: flex;
					flex-direction: column;
					gap: 24px;
				}

				.form-group {
					display: flex;
					flex-direction: column;
				}

				.form-label {
					font-size: 14px;
					font-weight: 600;
					color: #000;
					margin-bottom: 8px;
				}

				.form-input {
					width: 100%;
					background: #fafafa;
					border: 2px solid #e5e5e5;
					border-radius: 10px;
					padding: 14px 16px;
					font-size: 15px;
					color: #000;
					transition: all 0.2s ease;
					font-family: inherit;
				}

				.form-input:focus {
					outline: none;
					border-color: #000;
					background: #fff;
				}

				.confirmation-section {
					margin-top: 20px;
					padding: 20px;
					background: #fafafa;
					border: 2px solid #e5e5e5;
					border-radius: 12px;
				}

				.confirmation-label {
					display: flex;
					align-items: flex-start;
					gap: 12px;
					cursor: pointer;
				}

				.confirmation-checkbox {
					width: 20px;
					height: 20px;
					border: 2px solid #d0d0d0;
					border-radius: 6px;
					margin-top: 2px;
					accent-color: #000;
				}

				.confirmation-text {
					font-size: 14px;
					color: #333;
					line-height: 1.5;
				}

				.button-row {
					display: flex;
					gap: 12px;
					margin-top: 20px;
					flex-wrap: wrap;
				}

				.premium-confirm-btn {
					background: #000;
					color: #fff;
					border: none;
					border-radius: 10px;
					padding: 14px 32px;
					font-size: 15px;
					font-weight: 600;
					cursor: pointer;
					transition: all 0.2s ease;
				}

				.premium-confirm-btn:hover {
					background: #333;
					transform: translateY(-1px);
				}

				.premium-cancel-btn {
					background: transparent;
					color: #666;
					border: 2px solid #d0d0d0;
					border-radius: 10px;
					padding: 14px 32px;
					font-size: 15px;
					font-weight: 600;
					cursor: pointer;
					transition: all 0.2s ease;
				}

				.premium-cancel-btn:hover {
					border-color: #b0b0b0;
					color: #333;
				}

				@media (max-width: 768px) {
					.conformitate-form-container {
						padding: 24px;
					}

					.conformitate-form-title {
						font-size: 22px;
					}
				}
			`}</style>

			<div className="conformitate-form-container">
				<div className="conformitate-form-header">
					<h2 className="conformitate-form-title">
						Formular de retur
					</h2>
					<p className="conformitate-form-subtitle">
						Completați formularul pentru a solicita returul comenzii dumnevoastră.
					</p>
				</div>

				<div className="info-box">
					<div className="info-box-content">
						<div className="info-icon">i</div>
						<p className="info-text">
							Formularele de retur se valideaza doar daca comanda exista, iar codul produsului este corect trecut.{" "}
							<strong>
								Sunteți direct răspunzător că datele introduse să fie corecte, astfel cererea nu vă putea fii procesata. Detaliile comenzii le găsiți în email-ul de confirmare a comenzii.
							</strong>
						</p>
					</div>
				</div>

				<form onSubmit={handleSubmit}>
					<div className="form-group">
						<label htmlFor="orderID" className="form-label">
							Numărul comenzii *
						</label>
						<input
							type="text"
							id="orderID"
							name="orderID"
							className="form-input"
							placeholder="Ex: 123456"
							value={formData.orderID}
							onChange={handleChange}
							required
						/>
					</div>

					<div className="form-group">
						<label htmlFor="productSku" className="form-label">
							SKU produs *
						</label>
						<input
							type="text"
							id="productSku"
							name="productSku"
							className="form-input"
							placeholder="Ex: SKU-ABC123"
							value={formData.productSku}
							onChange={handleChange}
							required
						/>
					</div>

					<div className="form-group">
						<label htmlFor="name" className="form-label">
							Nume complet *
						</label>
						<input
							type="text"
							id="name"
							name="name"
							className="form-input"
							placeholder="Introdu numele complet"
							value={formData.name}
							onChange={handleChange}
							required
						/>
					</div>

					<div className="form-group">
						<label htmlFor="email" className="form-label">
							Email *
						</label>
						<input
							type="email"
							id="email"
							name="email"
							className="form-input"
							placeholder="exemplu@email.com"
							value={formData.email}
							onChange={handleChange}
							required
						/>
					</div>

					<div className="form-group">
						<label htmlFor="phone" className="form-label">
							Telefon *
						</label>
						<input
							type="tel"
							id="phone"
							name="phone"
							className="form-input"
							placeholder="07XX XXX XXX"
							value={formData.phone}
							onChange={handleChange}
							required
						/>
					</div>

					<div className="confirmation-section">
						<label className="confirmation-label">
							<input
								type="checkbox"
								name="confirm"
								checked={formData.confirm}
								onChange={handleChange}
								className="confirmation-checkbox"
							/>
							<span className="confirmation-text">
								Confirm că datele introduse sunt corecte și doresc să returnez
								produsul specificat mai sus.
							</span>
						</label>
					</div>

                         <div className="confirmation-section">
                              <label className='confirmation-label'>
                                   <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="confirmation-section">
                              <label className='confirmation-label'>
                                   <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>

					<div className="button-row">
						<button type="submit" className="premium-confirm-btn">
							Trimite cererea
						</button>
						<button
							type="reset"
							className="premium-cancel-btn"
							onClick={() =>
								setFormData({
									name: "",
									email: "",
									phone: "",
									orderID: "",
									productSku: "",
									confirm: false,
								})
							}
						>
							Resetează
						</button>
					</div>
				</form>
			</div>
		</>
	);
}
