import { Phone, Mail, MapPin, Clock } from "lucide-react";
import { useState } from "react";
import axios from "axios";
import { toast } from "sonner";

const API = `${process.env.REACT_APP_BACKEND_URL}/api`;

export default function Contact() {
  const [form, setForm] = useState({ name: "", email: "", phone: "", message: "" });
  const [loading, setLoading] = useState(false);
  const [sent, setSent] = useState(false);
  const update = (f) => (e) => setForm({ ...form, [f]: e.target.value });
  const inputCls = "w-full h-11 px-4 bg-[#1E1E1E] border border-[#2A2A2A] rounded-sm text-[14px] text-white placeholder:text-[#666] focus:outline-none focus:border-[#3B82F6] transition-colors";

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) { toast.error("Name, email, and message required"); return; }
    setLoading(true);
    try {
      await axios.post(`${API}/contact`, form);
      setSent(true);
      toast.success("Message sent!");
    } catch { toast.error("Failed to send"); }
    setLoading(false);
  };

  return (
    <div data-testid="contact-page" className="min-h-screen bg-[#0B0B0B] pt-24 pb-16">
      <div className="max-w-4xl mx-auto px-4 lg:px-6">
        <h1 className="text-3xl font-bold tracking-[-0.03em] text-white mb-8">Contact Us</h1>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
          {[
            { icon: Phone, label: "Phone", value: "(704) 900-3512", href: "tel:+17049003512" },
            { icon: Mail, label: "Email", value: "info@queencityautoparts.com", href: "mailto:info@queencityautoparts.com" },
            { icon: MapPin, label: "Location", value: "Charlotte, NC", href: null },
          ].map(c => (
            <div key={c.label} className="p-5 bg-[#1E1E1E] border border-[#2A2A2A] rounded">
              <c.icon className="h-5 w-5 text-[#3B82F6] mb-3" />
              <p className="text-[11px] font-semibold uppercase tracking-[0.1em] text-[#666] mb-1">{c.label}</p>
              {c.href ? <a href={c.href} className="text-[14px] text-white hover:text-[#3B82F6] transition-colors">{c.value}</a> : <p className="text-[14px] text-white">{c.value}</p>}
            </div>
          ))}
        </div>

        {sent ? (
          <div className="bg-[#121212] border border-[#28A745]/30 rounded p-8 text-center">
            <p className="text-[#28A745] font-semibold mb-2">Message sent successfully.</p>
            <p className="text-[14px] text-[#9A9A9A]">We'll get back to you within 24 hours.</p>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="space-y-4 max-w-xl">
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <div><label className="block text-[11px] font-semibold uppercase tracking-[0.08em] text-[#9A9A9A] mb-1.5">Name *</label><input data-testid="contact-name" value={form.name} onChange={update("name")} className={inputCls} required /></div>
              <div><label className="block text-[11px] font-semibold uppercase tracking-[0.08em] text-[#9A9A9A] mb-1.5">Email *</label><input data-testid="contact-email" type="email" value={form.email} onChange={update("email")} className={inputCls} required /></div>
            </div>
            <div><label className="block text-[11px] font-semibold uppercase tracking-[0.08em] text-[#9A9A9A] mb-1.5">Phone</label><input data-testid="contact-phone" value={form.phone} onChange={update("phone")} className={inputCls} /></div>
            <div><label className="block text-[11px] font-semibold uppercase tracking-[0.08em] text-[#9A9A9A] mb-1.5">Message *</label><textarea data-testid="contact-message" value={form.message} onChange={update("message")} rows={4} className={`${inputCls} h-auto py-3 resize-none`} required /></div>
            <button data-testid="contact-submit" type="submit" disabled={loading} className="h-11 px-8 bg-[#3B82F6] hover:bg-[#2563EB] text-white text-[13px] font-bold uppercase tracking-wide rounded transition-colors">
              {loading ? "Sending..." : "Send Message"}
            </button>
          </form>
        )}
      </div>
    </div>
  );
}
