"use client";

import { useState } from "react";
import toast from "react-hot-toast";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Label } from "@/components/ui/label";
import { useSelector } from "react-redux";

interface FormData {
  firstName: string;
  lastName: string;
  email: string;
  phone: string;
  subject: string;
  message: string;
}

const emptyForm: FormData = {
  firstName: "",
  lastName: "",
  email: "",
  phone: "",
  subject: "",
  message: "",
};

export default function ContactUsForm({ t }: { t: any }) {
  const user = useSelector((state: any) => state.auth?.user);
  const [formData, setFormData] = useState<FormData>({
    ...emptyForm,
    firstName: user?.customerName?.split(" ")?.[0] || "",
    lastName: user?.customerName?.split(" ")?.[1] || "",
    email: user?.customerEmail || "",
    phone: user?.customerPhone || "",
  });
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }));
  };

  const handleSubjectChange = (value: string) => {
    setFormData((prev) => ({ ...prev, subject: value }));
  };

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

    if (!formData.firstName.trim() || !formData.email.trim() || !formData.message.trim()) {
      toast.error(t("please-fill-required-fields") || "Please fill all required fields");
      return;
    }

    setIsSubmitting(true);
    try {
      const response = await fetch("/api/customer/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: `${formData.firstName} ${formData.lastName}`.trim(),
          email: formData.email,
          telephone: formData.phone,
          message_title: formData.subject || t("general-inquiry"),
          message_body: formData.message,
          referral: "contact page",
          customer_id: user?.customerId || undefined,
        }),
      });

      const data = await response.json();
      if (data.success) {
        toast.success(t("message-sent-successfully") || "Message sent successfully");
        setFormData({ ...emptyForm });
      } else {
        toast.error(data.message || t("message-failed-to-send") || "Failed to send message");
      }
    } catch {
      toast.error(t("message-failed-to-send") || "Failed to send message");
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-xl sm:text-2xl font-semibold">
          {t("send-message")}
        </CardTitle>
        <CardDescription className="text-sm sm:text-base">
          {t("we-are-here-to-help-desc")}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form className="space-y-4 sm:space-y-6" onSubmit={handleSubmit}>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="firstName" className="text-sm sm:text-base">
                {t("first-name")}
              </Label>
              <Input
                id="firstName"
                name="firstName"
                value={formData.firstName}
                onChange={handleChange}
                placeholder={t("first-name-placeholder")}
                className="text-sm sm:text-base"
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="lastName" className="text-sm sm:text-base">
                {t("last-name")}
              </Label>
              <Input
                id="lastName"
                name="lastName"
                value={formData.lastName}
                onChange={handleChange}
                placeholder={t("last-name-placeholder")}
                className="text-sm sm:text-base"
              />
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="email" className="text-sm sm:text-base">
              {t("email")}
            </Label>
            <Input
              id="email"
              name="email"
              type="email"
              value={formData.email}
              onChange={handleChange}
              placeholder={t("email-placeholder")}
              className="text-sm sm:text-base"
              required
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="phone" className="text-sm sm:text-base">
              {t("phone")}
            </Label>
            <Input
              id="phone"
              name="phone"
              type="tel"
              value={formData.phone}
              onChange={handleChange}
              placeholder={t("phone-placeholder")}
              className="text-sm sm:text-base"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="subject" className="text-sm sm:text-base">
              {t("subject")}
            </Label>
            <Select name="subject" value={formData.subject} onValueChange={handleSubjectChange}>
              <SelectTrigger className="text-sm sm:text-base">
                <SelectValue placeholder={t("choose-subject")} />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="general" className="text-sm sm:text-base">
                  {t("general-inquiry")}
                </SelectItem>
                <SelectItem value="order" className="text-sm sm:text-base">
                  {t("order-inquiry")}
                </SelectItem>
                <SelectItem value="product" className="text-sm sm:text-base">
                  {t("product-inquiry")}
                </SelectItem>
                <SelectItem value="complaint" className="text-sm sm:text-base">
                  {t("complaint")}
                </SelectItem>
                <SelectItem value="suggestion" className="text-sm sm:text-base">
                  {t("suggestion")}
                </SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-2">
            <Label htmlFor="message" className="text-sm sm:text-base">
              {t("message")}
            </Label>
            <textarea
              id="message"
              name="message"
              rows={5}
              value={formData.message}
              onChange={handleChange}
              placeholder={t("message-placeholder")}
              className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm sm:text-base placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 resize-vertical"
              required
            />
          </div>

          <Button
            type="submit"
            className="w-full text-sm sm:text-base"
            size="lg"
            disabled={isSubmitting}
          >
            {isSubmitting ? (t("sending") || "Sending...") : t("send-message-button")}
          </Button>
        </form>
      </CardContent>
    </Card>
  );
}