"use client";
import { Icon } from "@iconify/react/dist/iconify.js";
import { useRouter } from "next/navigation";
import { useState } from "react";
import PhoneInput from "react-phone-input-2";
import 'react-phone-input-2/lib/bootstrap.css'; // Optional styling

const CustomerMainComponent = () => {
    const router = useRouter();

    const [formData, setFormData] = useState({
        name: "",
        email: "",
        number: ""
    });

    const [errors, setErrors] = useState({
        name: "",
        email: "",
        number: ""
    });

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

    const handlePhoneChange = (value) => {
        setFormData((prev) => ({
            ...prev,
            number: value
        }));
        setErrors((prev) => ({
            ...prev,
            number: ""
        }));
    };

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

        let hasError = false;
        const newErrors = {};

        if (!formData.name.trim()) {
            newErrors.name = "Full Name is required";
            hasError = true;
        }

        if (!formData.email.trim()) {
            newErrors.email = "Email is required";
            hasError = true;
        }

        if (!formData.number || formData.number.length < 8) {
            newErrors.number = "Valid phone number is required";
            hasError = true;
        }

        if (hasError) {
            setErrors(newErrors);
            return;
        }

        // Log form data
        console.log("Form Data:", formData);

        router.push(`/user-reservation?name=${formData.name}&email=${formData.email}&number=${formData.number}`);
    };

    return (
        <div className="container-fluid">
           
                    <div className="row justify-content-center">
                        <div className="col-xxl-4 col-xl-8 col-lg-10">
                            <div className="card ">
                                <div className="card-body">
                                    <h6 className="text-md text-primary-light mb-16">Customer details</h6>

                                    <form onSubmit={handleSubmit}>
                                        <div className="mb-20">
                                            <label htmlFor="name" className="form-label fw-semibold text-primary-light text-sm mb-8">
                                                Full Name <span className="text-danger-600">*</span>
                                            </label>
                                            <input
                                                type="text"
                                                className="form-control radius-8"
                                                id="name"
                                                name="name"
                                                value={formData.name}
                                                onChange={handleChange}
                                                placeholder="Enter Full Name"
                                            />
                                            {errors.name && (
                                                <div className="text-danger text-sm mt-1">{errors.name}</div>
                                            )}
                                        </div>

                                        <div className="mb-20">
                                            <label htmlFor="email" className="form-label fw-semibold text-primary-light text-sm mb-8">
                                                Email <span className="text-danger-600">*</span>
                                            </label>
                                            <input
                                                type="email"
                                                className="form-control radius-8"
                                                id="email"
                                                name="email"
                                                value={formData.email}
                                                onChange={handleChange}
                                                placeholder="Enter email address"
                                            />
                                            {errors.email && (
                                                <div className="text-danger text-sm mt-1">{errors.email}</div>
                                            )}
                                        </div>

                                        <div className="mb-20">
                                            <label htmlFor="number" className="form-label fw-semibold text-primary-light text-sm mb-8">
                                                Phone <span className="text-danger-600">*</span>
                                            </label>
                                            <PhoneInput
                                                country={'us'} // Default country
                                                value={formData.number}
                                                onChange={handlePhoneChange}
                                                inputProps={{
                                                    name: 'number',
                                                    required: true,
                                                    className: 'form-control radius-8 w-100'
                                                }}
                                            />
                                            {errors.number && (
                                                <div className="text-danger text-sm mt-1">{errors.number}</div>
                                            )}
                                        </div>

                                        <div className="d-flex align-items-center justify-content-end gap-3">
                                            <button
                                                type="button"
                                                className="border border-danger-600 bg-hover-danger-200 text-danger-600 text-md px-56 py-11 radius-8"
                                            >
                                                Cancel
                                            </button>
                                            <button
                                                type="submit"
                                                className="btn btn-danger-500 border border-danger-500 text-md px-56 py-12 radius-8"
                                            >
                                                Next
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                      
                </div>
            </div>
        </div>
    );
};

export default CustomerMainComponent;
