"use client";

import { useState } from "react";
import { contactInfo } from "@/lib/mock/company";
import Layout from "@/lib/components/layout/Layout";
import PageHeader from "@/lib/components/common/PageHeader";

const metadata = {
    title: "Contact Us - Nestbugi Contractors",
    description:
        "Get in touch with Nestbugi Contractors for inquiries, quotes, or support. Our team is ready to assist you with your engineering, architectural, and construction needs.",
};

export default function ContactPage() {
    const [formData, setFormData] = useState({
        name: "",
        email: "",
        phone: "",
        message: "",
    });

    const [loading, setLoading] = useState(false);
    const [status, setStatus] = useState<null | "success" | "error">(null);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        setFormData({ ...formData, [e.target.name]: e.target.value });
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setLoading(true);
        setStatus(null);

        try {
            const res = await fetch("/api/contact", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(formData),
            });

            if (res.ok) {
                setStatus("success");
                setFormData({ name: "", email: "", phone: "", message: "" });
            } else {
                setStatus("error");
            }
        } catch (error) {
            console.error("Submit error:", error);
            setStatus("error");
        }

        setLoading(false);
    };

    return (
        <Layout>
            <PageHeader
                title="Contact Us"
                subtitle="Have questions or need a quote? Reach out to our team and we’ll get back to you."
                bgImage="/images/services/civil-contractors.jpg"
            />

            <section className="py-16 max-w-6xl mx-auto px-4">
                <div className="grid md:grid-cols-2 gap-12">
                    {/* Contact Info */}
                    <div>
                        <h3 className="text-xl font-semibold mb-4">Get in Touch</h3>
                        <p className="mb-3">
                            <strong>Phone:</strong> {contactInfo.phone}
                        </p>
                        <p className="mb-3">
                            <strong>Email:</strong> {contactInfo.email}
                        </p>
                        <p className="mb-3">
                            <strong>Address:</strong> {contactInfo.address}
                        </p>
                        <p className="mb-6">
                            <strong>Working Hours:</strong> {contactInfo.workingHours}
                        </p>
                    </div>

                    {/* Contact Form */}
                    <form onSubmit={handleSubmit} className="space-y-5">
                        <div>
                            <label className="block mb-1 font-medium">Full Name</label>
                            <input
                                type="text"
                                name="name"
                                value={formData.name}
                                required
                                onChange={handleChange}
                                className="w-full border rounded px-3 py-2 focus:ring focus:ring-gray-200"
                            />
                        </div>

                        <div>
                            <label className="block mb-1 font-medium">Email Address</label>
                            <input
                                type="email"
                                name="email"
                                required
                                value={formData.email}
                                onChange={handleChange}
                                className="w-full border rounded px-3 py-2 focus:ring focus:ring-gray-200"
                            />
                        </div>

                        <div>
                            <label className="block mb-1 font-medium">Phone Number</label>
                            <input
                                type="text"
                                name="phone"
                                value={formData.phone}
                                onChange={handleChange}
                                className="w-full border rounded px-3 py-2 focus:ring focus:ring-gray-200"
                            />
                        </div>

                        <div>
                            <label className="block mb-1 font-medium">Message</label>
                            <textarea
                                name="message"
                                rows={4}
                                required
                                value={formData.message}
                                onChange={handleChange}
                                className="w-full border rounded px-3 py-2 focus:ring focus:ring-gray-200"
                            ></textarea>
                        </div>

                        <button
                            type="submit"
                            disabled={loading}
                            className="bg-black text-white px-6 py-2 rounded hover:bg-gray-800 transition disabled:opacity-60"
                        >
                            {loading ? "Sending..." : "Send Message"}
                        </button>

                        {/* Status Message */}
                        {status === "success" && (
                            <p className="text-green-600 text-sm mt-2">
                                Thank you for reaching out. We’ve received your message and will be in touch soon.
                            </p>
                        )}
                        {status === "error" && (
                            <p className="text-red-600 text-sm mt-2">
                                ⚠ Failed to send message. Please try again.
                            </p>
                        )}
                    </form>
                </div>
            </section>
        </Layout>
    );
}