"use client";

import { useState } from "react";
import { Send, CheckCircle2 } from "lucide-react";
import { toast } from "sonner";
import { useTranslations } from "next-intl";

import SectionHeading from "@/components/SectionHeading";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import FadeIn from "@/components/animations/FadeIn";
import { submitContact, type ServiceName } from "@/services/contacts";

interface ContactFormProps {
  serviceOptions: ServiceName[];
}

const ContactForm = ({ serviceOptions }: ContactFormProps) => {
  const t = useTranslations("contact");
  const [submitted, setSubmitted] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [form, setForm] = useState({
    full_name: "",
    email: "",
    company: "",
    phone_number: "",
    service_id: "",
    message: "",
  });

  const handleChange = (field: string, value: string) => {
    setForm((prev) => ({ ...prev, [field]: value }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    const trimmedName = form.full_name.trim();
    const trimmedEmail = form.email.trim();
    const trimmedMessage = form.message.trim();

    if (!trimmedName || !trimmedEmail || !trimmedMessage) {
      toast.error(t("errorRequired"));
      return;
    }

    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmedEmail)) {
      toast.error(t("errorEmail"));
      return;
    }

    setIsSubmitting(true);
    try {
      await submitContact({
        full_name: trimmedName,
        email: trimmedEmail,
        phone_number: form.phone_number.trim(),
        company: form.company.trim(),
        service_id: form.service_id && form.service_id !== "" ? Number(form.service_id) : null,
        message: trimmedMessage,
      });
      setSubmitted(true);
      toast.success(t("successToast"));
    } catch {
      // errors are handled globally by the API interceptor
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <>
      <SectionHeading
        title={t("formTitle")}
        subtitle={t("formSubtitle")}
      />

      {submitted ? (
        <FadeIn className="petro-card p-12 text-center">
          <CheckCircle2 className="mx-auto text-accent mb-4" size={48} />
          <h3 className="text-2xl font-bold text-foreground mb-2">{t("successTitle")}</h3>
          <p className="text-muted-foreground">
            {t("successMessage")}
          </p>
          <Button
            className="mt-6"
            onClick={() => {
              setSubmitted(false);
              setForm({ full_name: "", email: "", company: "", phone_number: "", service_id: "", message: "" });
            }}
          >
            {t("sendAnother")}
          </Button>
        </FadeIn>
      ) : (
        <form onSubmit={handleSubmit} className="space-y-5">
          <div className="grid sm:grid-cols-2 gap-5">
            <div>
              <label className="text-sm font-semibold text-foreground mb-1.5 block">{t("fullName")} <span className="text-muted-foreground text-xs">({t("requiredField")})</span></label>
              <Input
                value={form.full_name}
                onChange={(e) => handleChange("full_name", e.target.value)}
                placeholder={t("fullNamePlaceholder")}
                maxLength={100}
                required
              />
            </div>
            <div>
              <label className="text-sm font-semibold text-foreground mb-1.5 block">{t("email")} <span className="text-muted-foreground text-xs">({t("requiredField")})</span></label>
              <Input
                type="email"
                value={form.email}
                onChange={(e) => handleChange("email", e.target.value)}
                placeholder={t("emailPlaceholder")}
                maxLength={255}
                required
              />
            </div>
          </div>
          <div className="grid sm:grid-cols-2 gap-5">
            <div>
              <label className="text-sm font-semibold text-foreground mb-1.5 block">{t("company")}</label>
              <Input
                value={form.company}
                onChange={(e) => handleChange("company", e.target.value)}
                placeholder={t("companyPlaceholder")}
                maxLength={100}
              />
            </div>
            <div>
              <label className="text-sm font-semibold text-foreground mb-1.5 block">{t("phone")}</label>
              <Input
                value={form.phone_number}
                onChange={(e) => handleChange("phone_number", e.target.value)}
                placeholder={t("phonePlaceholder")}
                maxLength={20}
              />
            </div>
          </div>
          <div>
            <label className="text-sm font-semibold text-foreground mb-1.5 block">{t("serviceOfInterest")}</label>
            <Select value={form.service_id} onValueChange={(v) => handleChange("service_id", v ?? "")}>
              <SelectTrigger className="w-full">
                <SelectValue placeholder={t("selectService")}>
                  {form.service_id === ""
                    ? "Others"
                    : serviceOptions.find((s) => String(s.id) === form.service_id)?.title}
                </SelectValue>
              </SelectTrigger>
              <SelectContent alignItemWithTrigger={false}>
                {serviceOptions.map((s) => (
                  <SelectItem key={s.id} value={String(s.id)}>
                    {s.title}
                  </SelectItem>
                ))}
                <SelectItem value="">Others</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div>
            <label className="text-sm font-semibold text-foreground mb-1.5 block">{t("message")} <span className="text-muted-foreground text-xs">({t("requiredField")})</span></label>
            <Textarea
              value={form.message}
              onChange={(e) => handleChange("message", e.target.value)}
              placeholder={t("messagePlaceholder")}
              rows={5}
              maxLength={2000}
              required
            />
          </div>
          <Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto petro-btn-gold py-5 px-10">
            {isSubmitting ? (
              t("sending")
            ) : (
              <span className="flex items-center gap-2">
                <Send size={16} /> {t("sendMessage")}
              </span>
            )}
          </Button>
        </form>
      )}
    </>
  );
};

export default ContactForm;