"use client";

import React, { useState } from "react";

interface FormData {
  name: string;
  email: string;
  phone: string;
  website: string;
  note: string;
}

interface Errors {
  name?: string;
  email?: string;
  phone?: string;
  website?: string;
  note?: string;
}

// Hàm kiểm tra định dạng email và số điện thoại
const validateEmail = (email: string) =>
  /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email);
const validatePhone = (phone: string) => /^[0-9]{10,11}$/.test(phone);

const Contact = () => {
  const [formData, setFormData] = useState<FormData>({
    name: "",
    email: "",
    phone: "",
    website: "",
    note: "",
  });

  const [errors, setErrors] = useState<Errors>({});

  // Cập nhật dữ liệu form
  const handleChange = (e) =>
    setFormData({ ...formData, [e.target.name]: e.target.value });

  // Kiểm tra và gửi form
  const handleSubmit = async (e) => {
    e.preventDefault();

    // Kiểm tra form trước khi gửi
    const newErrors: Errors = {};
    if (!formData.name) newErrors.name = "Tên không được để trống!";
    if (!formData.email || !validateEmail(formData.email))
      newErrors.email = "Email không hợp lệ!";
    if (!formData.phone || !validatePhone(formData.phone))
      newErrors.phone = "Số điện thoại không hợp lệ!";
    if (!formData.note) newErrors.note = "Nội dung không được để trống!";
    setErrors(newErrors);

    if (Object.keys(newErrors).length > 0) return;

    // Gửi dữ liệu
    try {
      const response = await fetch("http://localhost:5000/contacts", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData),
      });

      if (response.ok) {
        alert("Bạn đã gửi liên hệ thành công!");
        setFormData({ name: "", email: "", phone: "", website: "", note: "" });
        setErrors({});
      } else {
        alert(
          "Liên hệ không thành công. Vui lòng kiểm tra lại thông tin của bạn."
        );
      }
    } catch (error) {
      console.error("Error submitting form:", error);
      alert("An error occurred. Please try again.");
    }
  };

  return (
    <div className="page-contact">
      <div className="container">
        <div className="content-page-contact flex justify-center">
          <div className="contact-left">
            <h1 className="title-contact">Liên hệ</h1>
            <div className="note">
              Đội ngũ hỗ trợ của Hurasoft luôn sẵn sàng hỗ trợ quý khách
            </div>
            <div className="list-info">
              <div className="item">
                <div className="icon">
                  <i className="icon_2024 map"></i>
                </div>
                <div className="txt">
                  Tầng 5 - Số 3, ngõ 18 Yên Lãng, Đống Đa, Hà Nội
                </div>
              </div>
              <div className="item">
                <div className="icon">
                  <i className="icon_2024 phone"></i>
                </div>
                <div className="txt d-flex align-items">
                  <a href="tel:02422138068">02422.138.068</a>
                  <span>-</span>
                  <a href="tel:0904580181">0904.580.181</a>
                </div>
              </div>
              <div className="item">
                <div className="icon">
                  <i className="icon_2024 email"></i>
                </div>
                <a href="mailto:hotro@hurasoft.com" className="txt">
                  hotro@hurasoft.com
                </a>
              </div>
            </div>
          </div>
          <div className="contact-right">
            <div className="box-form">
              <b>Để lại lời nhắn</b>
              <form onSubmit={handleSubmit}>
                {["name", "email", "phone", "website", "note"].map(
                  (field, idx) => (
                    <div className="item-form" key={idx}>
                      <label>
                        {field === "note"
                          ? "Nội dung"
                          : `${
                              field.charAt(0).toUpperCase() + field.slice(1)
                            }`}{" "}
                        <span>{field === "note" ? "" : "*"}</span>
                      </label>
                      <input
                        type={
                          field === "email"
                            ? "email"
                            : field === "phone"
                            ? "tel"
                            : "text"
                        }
                        name={field}
                        className="input-item"
                        value={formData[field]}
                        onChange={handleChange}
                        placeholder={`Nhập ${
                          field === "note" ? "nội dung" : field
                        }`}
                      />
                      {errors[field] && (
                        <div className="note-error">{errors[field]}</div>
                      )}
                    </div>
                  )
                )}
                <button type="submit" className="btn btn-submit">
                  Gửi thông tin <i className="fa-solid fa-arrow-right-long"></i>
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Contact;
