"use client";

import { useState } from "react";
import { SendIcon, MailIcon, PhoneIcon, SpinnerIcon } from "./Icons";

export default function ContactSection() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    subject: "",
    message: "",
  });
  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
  const [errorMsg, setErrorMsg] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setStatus("loading");
    setErrorMsg("");

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

      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error || "Failed to send message");
      }

      setStatus("success");
      setFormData({ name: "", email: "", phone: "", subject: "", message: "" });
    } catch (err: unknown) {
      setStatus("error");
      setErrorMsg(err instanceof Error ? err.message : "Something went wrong");
    }
  };

  return (
    <section id="contact" className="py-24 relative overflow-hidden">
      <div className="absolute inset-0 hero-gradient opacity-40" />

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="text-center mb-16">
          <span className="inline-block px-4 py-1.5 text-xs font-semibold uppercase tracking-wider text-primary-light bg-primary/10 rounded-full mb-4">
            Contact
          </span>
          <h2 className="text-4xl sm:text-5xl font-bold text-text-primary mb-4">
            Let&apos;s Work <span className="gradient-text">Together</span>
          </h2>
          <p className="text-text-muted max-w-2xl mx-auto text-lg">
            Have a project in mind or need help with your tech stack? I&apos;d love to hear from you.
          </p>
        </div>

        <div className="grid lg:grid-cols-5 gap-10 max-w-6xl mx-auto">
          {/* Contact Info */}
          <div className="lg:col-span-2 space-y-6">
            <div className="glass rounded-2xl p-8">
              <h3 className="text-lg font-bold text-text-primary mb-6">
                Get in Touch
              </h3>

              <div className="space-y-5">
                <a
                  href="mailto:me@samueladesanya.com.ng"
                  className="flex items-start gap-4 group"
                >
                  <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center shrink-0 group-hover:bg-primary/20 transition-colors">
                    <MailIcon size={20} className="text-primary-light" />
                  </div>
                  <div>
                    <p className="text-sm font-semibold text-text-primary">Email</p>
                    <p className="text-sm text-primary-light hover:text-accent transition-colors">
                      me@samueladesanya.com.ng
                    </p>
                  </div>
                </a>

                <a
                  href="tel:+2347037334371"
                  className="flex items-start gap-4 group"
                >
                  <div className="w-12 h-12 rounded-xl bg-accent/10 flex items-center justify-center shrink-0 group-hover:bg-accent/20 transition-colors">
                    <PhoneIcon size={20} className="text-accent" />
                  </div>
                  <div>
                    <p className="text-sm font-semibold text-text-primary">Phone</p>
                    <p className="text-sm text-accent">
                      +234 703 733 4371
                    </p>
                  </div>
                </a>

                <a
                  href="https://wa.me/2347037334371"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-start gap-4 group"
                >
                  <div className="w-12 h-12 rounded-xl bg-green-500/10 flex items-center justify-center shrink-0 group-hover:bg-green-500/20 transition-colors">
                    <span className="text-xl">💬</span>
                  </div>
                  <div>
                    <p className="text-sm font-semibold text-text-primary">WhatsApp</p>
                    <p className="text-sm text-green-400 hover:text-green-300 transition-colors">
                      Send a message →
                    </p>
                  </div>
                </a>
              </div>

              <div className="mt-8 pt-6 border-t border-border">
                <p className="text-sm font-semibold text-text-primary mb-2">
                  📍 Location
                </p>
                <p className="text-sm text-text-secondary">
                  Lagos, Nigeria (Available for remote work worldwide)
                </p>
              </div>

              <div className="mt-6 pt-6 border-t border-border">
                <p className="text-sm font-semibold text-text-primary mb-2">
                  ⏰ Response Time
                </p>
                <p className="text-sm text-text-secondary">
                  I typically respond within 2-4 hours during business hours. For urgent projects, use WhatsApp.
                </p>
              </div>
            </div>

            {/* Quick hire card */}
            <div className="glass rounded-2xl p-8 bg-gradient-to-br from-green-500/5 to-emerald-500/5 border-green-500/10">
              <h3 className="text-lg font-bold text-text-primary mb-3 flex items-center gap-2">
                <span className="text-2xl">🚀</span> Quick Hire
              </h3>
              <p className="text-sm text-text-secondary mb-4">
                Need a developer immediately? Start a WhatsApp conversation and let&apos;s discuss your project right now!
              </p>
              <a
                href="https://wa.me/2347037334371?text=Hi%20Samuel,%20I%20have%20a%20project%20I'd%20like%20to%20discuss."
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 px-6 py-3 bg-green-500 text-white font-semibold rounded-xl hover:bg-green-600 transition-colors w-full justify-center"
              >
                💬 Chat on WhatsApp
              </a>
            </div>
          </div>

          {/* Contact Form */}
          <div className="lg:col-span-3">
            <div className="glass rounded-2xl p-8">
              <h3 className="text-lg font-bold text-text-primary mb-6">
                Send a Message
              </h3>

              {status === "success" ? (
                <div className="text-center py-12">
                  <div className="text-6xl mb-4">✅</div>
                  <h4 className="text-2xl font-bold text-text-primary mb-2">
                    Message Sent!
                  </h4>
                  <p className="text-text-secondary mb-6">
                    Thank you for reaching out! I&apos;ll get back to you within 24 hours.
                  </p>
                  <button
                    onClick={() => setStatus("idle")}
                    className="px-6 py-3 bg-primary text-white rounded-xl font-semibold hover:bg-primary-dark transition-colors"
                  >
                    Send Another Message
                  </button>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-5">
                  <div className="grid sm:grid-cols-2 gap-5">
                    <div>
                      <label className="block text-sm font-medium text-text-secondary mb-1.5">
                        Full Name *
                      </label>
                      <input
                        type="text"
                        required
                        value={formData.name}
                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                        placeholder="Your full name"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-text-secondary mb-1.5">
                        Email Address *
                      </label>
                      <input
                        type="email"
                        required
                        value={formData.email}
                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                        placeholder="your@email.com"
                      />
                    </div>
                  </div>

                  <div className="grid sm:grid-cols-2 gap-5">
                    <div>
                      <label className="block text-sm font-medium text-text-secondary mb-1.5">
                        Phone Number
                      </label>
                      <input
                        type="tel"
                        value={formData.phone}
                        onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                        placeholder="+234 xxx xxx xxxx"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-text-secondary mb-1.5">
                        Subject
                      </label>
                      <input
                        type="text"
                        value={formData.subject}
                        onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
                        placeholder="Project inquiry"
                      />
                    </div>
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-text-secondary mb-1.5">
                      Your Message *
                    </label>
                    <textarea
                      required
                      rows={5}
                      value={formData.message}
                      onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                      placeholder="Tell me about your project, timeline, and budget..."
                    />
                  </div>

                  {status === "error" && (
                    <div className="p-4 rounded-xl bg-danger/10 text-danger text-sm flex items-center gap-2">
                      <span>⚠️</span> {errorMsg}
                    </div>
                  )}

                  <button
                    type="submit"
                    disabled={status === "loading"}
                    className="w-full py-4 bg-gradient-to-r from-primary to-primary-light text-white font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/25 transition-all flex items-center justify-center gap-2 disabled:opacity-50 btn-shimmer"
                  >
                    {status === "loading" ? (
                      <>
                        <SpinnerIcon size={20} />
                        Sending...
                      </>
                    ) : (
                      <>
                        <SendIcon size={20} />
                        Send Message
                      </>
                    )}
                  </button>

                  <p className="text-xs text-text-muted text-center">
                    By submitting, you agree to be contacted regarding your inquiry.
                  </p>
                </form>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}