"use client";

import {useState} from "react";
import {useForm} from "react-hook-form";
import {zodResolver} from "@hookform/resolvers/zod";
import {z} from "zod";
import {Button} from "@/components/ui/button";
import {Input} from "@/components/ui/input";
import {Label} from "@/components/ui/label";
import {Textarea} from "@/components/ui/textarea";
import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
import {CheckCircle2, Mail, Phone, MapPin} from "lucide-react";

const contactSchema = z.object({
  name: z.string().min(2, "Name is required"),
  email: z.string().email("Invalid email"),
  subject: z.string().min(2, "Subject is required"),
  message: z.string().min(10, "Message must be at least 10 characters")
});

type ContactForm = z.infer<typeof contactSchema>;

async function submitContact(data: ContactForm): Promise<{success: boolean}> {
  const res = await fetch("/api/contact", {
    method: "POST",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify(data)
  });
  return {success: res.ok};
}

export default function ContactPage() {
  const [submitted, setSubmitted] = useState(false);
  const form = useForm<ContactForm>({resolver: zodResolver(contactSchema)});

  async function onSubmit(data: ContactForm) {
    const result = await submitContact(data);
    if (result.success) setSubmitted(true);
  }

  return (
    <div className="mx-auto max-w-5xl px-6 py-16">
      <div className="mb-12 text-center">
        <h1 className="text-4xl font-bold text-slate-900">Contact Us</h1>
        <p className="mt-4 text-lg text-slate-600">Get in touch with our support team</p>
      </div>

      <div className="grid gap-10 lg:grid-cols-5">
        {/* Contact Info */}
        <div className="lg:col-span-2 space-y-5">
          {[
            {icon: Mail, label: "Email", value: "support@rentcar.com"},
            {icon: Phone, label: "Phone", value: "+1 (555) 123-4567"},
            {icon: MapPin, label: "Address", value: "123 Main Street, City, Country"}
          ].map(({icon: Icon, label, value}) => (
            <Card key={label} className="border-slate-200">
              <CardContent className="flex items-center gap-4 p-4">
                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-blue-50">
                  <Icon className="h-5 w-5 text-blue-600" />
                </div>
                <div>
                  <p className="text-xs font-medium text-slate-500">{label}</p>
                  <p className="font-medium text-slate-900">{value}</p>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

        {/* Form */}
        <div className="lg:col-span-3">
          {submitted ? (
            <div className="flex flex-col items-center justify-center rounded-2xl border border-green-200 bg-green-50 py-16 text-center">
              <CheckCircle2 className="h-12 w-12 text-green-600" />
              <h3 className="mt-4 text-xl font-semibold text-slate-900">Message Sent!</h3>
              <p className="mt-2 text-slate-600">We'll get back to you within 24 hours.</p>
            </div>
          ) : (
            <Card>
              <CardHeader><CardTitle>Send a Message</CardTitle></CardHeader>
              <CardContent>
                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                  <div className="grid gap-4 sm:grid-cols-2">
                    <div>
                      <Label htmlFor="name">Your Name *</Label>
                      <Input id="name" {...form.register("name")} className="mt-1" />
                      {form.formState.errors.name && <p className="mt-1 text-xs text-red-500">{form.formState.errors.name.message}</p>}
                    </div>
                    <div>
                      <Label htmlFor="email">Email Address *</Label>
                      <Input id="email" type="email" {...form.register("email")} className="mt-1" />
                      {form.formState.errors.email && <p className="mt-1 text-xs text-red-500">{form.formState.errors.email.message}</p>}
                    </div>
                  </div>
                  <div>
                    <Label htmlFor="subject">Subject *</Label>
                    <Input id="subject" {...form.register("subject")} className="mt-1" />
                    {form.formState.errors.subject && <p className="mt-1 text-xs text-red-500">{form.formState.errors.subject.message}</p>}
                  </div>
                  <div>
                    <Label htmlFor="message">Message *</Label>
                    <Textarea id="message" {...form.register("message")} className="mt-1" rows={5} />
                    {form.formState.errors.message && <p className="mt-1 text-xs text-red-500">{form.formState.errors.message.message}</p>}
                  </div>
                  <Button type="submit" disabled={form.formState.isSubmitting} className="w-full">
                    {form.formState.isSubmitting ? "Sending..." : "Send Message"}
                  </Button>
                </form>
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </div>
  );
}