"use client";

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

import DataService from "@/config/axios";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";

const initialForm = {
  name: "",
  email: "",
  phone: "",
  subject: "",
  message: "",
};

export default function ContactUsForm() {
  const [form, setForm] = useState(initialForm);
  const [sending, setSending] = useState(false);

  const onChange = (key: keyof typeof initialForm, value: string) => {
    setForm((prev) => ({ ...prev, [key]: value }));
  };

  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!form.name.trim() || !form.email.trim() || !form.subject.trim() || !form.message.trim()) {
      toast.error("Please complete all required fields.");
      return;
    }

    setSending(true);
    try {
      await DataService.post("/public/contact-us", {
        name: form.name.trim(),
        email: form.email.trim(),
        phone: form.phone.trim(),
        subject: form.subject.trim(),
        message: form.message.trim(),
      });
      toast.success("Email sent successfully. We will contact you soon.");
      setForm(initialForm);
    } catch (error: any) {
      const msg =
        error?.response?.data?.message ||
        "Could not send message right now. Please try again.";
      toast.error(msg);
    } finally {
      setSending(false);
    }
  };

  return (
    <section className="bg-slate-50 pb-10 pt-3">
      <div className="container">
        <div className="mx-auto max-w-6xl">
          <div className="mb-5 text-center">
            <h1 className="text-3xl font-bold text-slate-900 md:text-4xl">Contact Us</h1>
            <p className="mx-auto mt-3 max-w-2xl text-sm text-slate-600 md:text-base">
              Need help with pricing, smart devices, or software solutions? Send us your details and
              our team will get back to you quickly.
            </p>
          </div>

          <div className="grid gap-6 lg:grid-cols-3">
            <aside className="space-y-4 lg:col-span-1">
              <div className="rounded-xl border bg-white p-4 shadow-sm">
                <p className="mb-3 text-sm font-semibold text-slate-900">Contact Information</p>
                <ul className="space-y-3 text-sm text-slate-600">
                  <li className="flex items-start gap-2">
                    <Mail className="mt-0.5 size-4 text-primary" />
                    <span>nizamify.com@gmail.com</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <Phone className="mt-0.5 size-4 text-primary" />
                    <span>+92 312 5826741</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <Clock3 className="mt-0.5 size-4 text-primary" />
                    <span>Mon - Sat, 10:00 AM - 7:00 PM</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <MapPin className="mt-0.5 size-4 text-primary" />
                    <span>Pakistan</span>
                  </li>
                </ul>
              </div>

              <div className="rounded-xl border bg-white p-4 shadow-sm">
                <p className="text-sm font-semibold text-slate-900">What to include</p>
                <ul className="mt-3 list-disc space-y-1 pl-5 text-sm text-slate-600">
                  <li>Product or service you are interested in</li>
                  <li>Your city and preferred contact time</li>
                  <li>Any technical requirements</li>
                </ul>
              </div>
            </aside>

            <div className="rounded-xl border bg-white p-6 shadow-sm md:p-8 lg:col-span-2">
              <form className="grid gap-4" onSubmit={onSubmit}>
                <div className="grid gap-4 md:grid-cols-2">
                  <div>
                    <label className="mb-1 block text-sm font-medium text-slate-700">Name *</label>
                    <Input
                      value={form.name}
                      onChange={(e) => onChange("name", e.target.value)}
                      placeholder="Your full name"
                      required
                    />
                  </div>
                  <div>
                    <label className="mb-1 block text-sm font-medium text-slate-700">Email *</label>
                    <Input
                      type="email"
                      value={form.email}
                      onChange={(e) => onChange("email", e.target.value)}
                      placeholder="name@example.com"
                      required
                    />
                  </div>
                </div>

                <div className="grid gap-4 md:grid-cols-2">
                  <div>
                    <label className="mb-1 block text-sm font-medium text-slate-700">Phone</label>
                    <Input
                      value={form.phone}
                      onChange={(e) => onChange("phone", e.target.value)}
                      placeholder="+92..."
                    />
                  </div>
                  <div>
                    <label className="mb-1 block text-sm font-medium text-slate-700">Subject *</label>
                    <Input
                      value={form.subject}
                      onChange={(e) => onChange("subject", e.target.value)}
                      placeholder="How can we help?"
                      required
                    />
                  </div>
                </div>

                <div>
                  <label className="mb-1 block text-sm font-medium text-slate-700">Message *</label>
                  <Textarea
                    value={form.message}
                    onChange={(e) => onChange("message", e.target.value)}
                    placeholder="Tell us your requirement..."
                    rows={7}
                    required
                  />
                </div>

                <div className="pt-2">
                  <Button type="submit" disabled={sending}>
                    {sending ? "Sending..." : "Send Message"}
                  </Button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}