MIF_E31221222/sigap-website/components/auth/contact-us.tsx

"use client";

import * as React from "react";
import { useState } from "react";

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Textarea } from "../ui/textarea";
import { SubmitButton } from "../submit-button";
import Link from "next/link";
import { toast } from "@/hooks/use-toast";
import { sendContactEmail } from "@/actions/auth/contact-us";
import { TValidator } from "@/utils/validator";

export function ContactUsForm() {
  const typeMessage = [
    { value: "1", label: "Request to become a user" },
    { value: "2", label: "OTP problem" },
    { value: "3", label: "Request for a feature" },
    { value: "4", label: "Other" },
  ];

  // State untuk form data
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    typeMessage: "",
    message: "",
  });

  // State untuk error messages
  const [errors, setErrors] = useState<Record<string, string>>({});
  // Loading state
  const [isSubmitting, setIsSubmitting] = useState(false);

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

    // Clear error when typing
    if (errors[id]) {
      setErrors((prev) => {
        const newErrors = { ...prev };
        delete newErrors[id];
        return newErrors;
      });
    }
  };

  // Handle select change
  const handleSelectChange = (value: string) => {
    setFormData((prev) => ({ ...prev, typeMessage: value }));

    // Clear error when selecting
    if (errors.typeMessage) {
      setErrors((prev) => {
        const newErrors = { ...prev };
        delete newErrors.typeMessage;
        return newErrors;
      });
    }
  };

  // Handle form submission
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    // Client-side validation
    const validation = TValidator.validateContactForm(formData);

    if (!validation.success) {
      setErrors(validation.errors);
      return;
    }

    try {
      setIsSubmitting(true);

      // Call server action to send email
      const result = await sendContactEmail(formData);

      if (!result.success) {
        // Handle server-side validation errors
        if (result.errors) {
          setErrors(result.errors);
        } else {
          toast({
            title: "Error",
            description:
              result.error || "Failed to send message. Please try again.",
            variant: "destructive",
          });
        }
        return;
      }

      // Success!
      toast({
        title: "Success",
        description:
          result.message || "Your message has been sent successfully!",
      });

      // Reset form and errors after successful submission
      setFormData({
        name: "",
        email: "",
        phone: "",
        typeMessage: "",
        message: "",
      });
      setErrors({});
    } catch (error) {
      console.error("Error submitting form:", error);
      toast({
        title: "Error",
        description: "An unexpected error occurred. Please try again later.",
        variant: "destructive",
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Card className="w-[500px] bg-[#171717] border-none text-white">
      <CardHeader>
        <CardTitle className="text-3xl font-bold">Contact Us</CardTitle>
        <CardDescription className="text-gray-400">
          Fill in the form below to contact the admin
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form className="space-y-4" onSubmit={handleSubmit}>
          <div className="space-y-2">
            <Label htmlFor="name" className="text-sm text-gray-300">
              Name
            </Label>
            <Input
              id="name"
              placeholder="John doe"
              className={`bg-[#1C1C1C] border-gray-800 text-white placeholder:text-gray-500 focus:border-emerald-600 focus:ring-emerald-600 ${
                errors.name ? "border-red-500" : ""
              }`}
              value={formData.name}
              onChange={handleChange}
              disabled={isSubmitting}
            />
            {errors.name && (
              <p className="text-red-500 text-xs mt-1">{errors.name}</p>
            )}
          </div>
          <div className="space-y-2">
            <Label htmlFor="email" className="text-sm text-gray-300">
              Email
            </Label>
            <Input
              id="email"
              placeholder="example@gmail.com"
              className={`bg-[#1C1C1C] border-gray-800 text-white placeholder:text-gray-500 focus:border-emerald-600 focus:ring-emerald-600 ${
                errors.email ? "border-red-500" : ""
              }`}
              value={formData.email}
              onChange={handleChange}
              disabled={isSubmitting}
            />
            {errors.email && (
              <p className="text-red-500 text-xs mt-1">{errors.email}</p>
            )}
          </div>
          <div className="space-y-2">
            <Label htmlFor="phone" className="text-sm text-gray-300">
              Phone
            </Label>
            <Input
              id="phone"
              placeholder="08123456789"
              className={`bg-[#1C1C1C] border-gray-800 text-white placeholder:text-gray-500 focus:border-emerald-600 focus:ring-emerald-600 ${
                errors.phone ? "border-red-500" : ""
              }`}
              value={formData.phone}
              onChange={handleChange}
              disabled={isSubmitting}
            />
            {errors.phone && (
              <p className="text-red-500 text-xs mt-1">{errors.phone}</p>
            )}
          </div>
          <div className="space-y-2">
            <Label htmlFor="typemessage" className="text-sm text-gray-300">
              Type message
            </Label>
            <Select
              value={formData.typeMessage}
              onValueChange={handleSelectChange}
              disabled={isSubmitting}
            >
              <SelectTrigger
                id="typemessage"
                className={`bg-[#1C1C1C] border-gray-800 text-white focus:border-emerald-600 focus:ring-emerald-600 ${
                  errors.typeMessage ? "border-red-500" : ""
                }`}
              >
                <SelectValue placeholder="Select" />
              </SelectTrigger>
              <SelectContent className="bg-[#1C1C1C] border-gray-800 text-white">
                {typeMessage.map((message) => (
                  <SelectItem
                    key={message.value}
                    value={message.value}
                    className="focus:bg-emerald-600 focus:text-white"
                  >
                    {message.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            {errors.typeMessage && (
              <p className="text-red-500 text-xs mt-1">{errors.typeMessage}</p>
            )}
          </div>
          <div className="space-y-2">
            <Label htmlFor="message" className="text-sm text-gray-300">
              Message
            </Label>
            <Textarea
              id="message"
              placeholder="Your message here..."
              className={`resize-none h-24 bg-[#1C1C1C] border-gray-800 text-white placeholder:text-gray-500 focus:border-emerald-600 focus:ring-emerald-600 ${
                errors.message ? "border-red-500" : ""
              }`}
              value={formData.message}
              onChange={handleChange}
              disabled={isSubmitting}
            />
            {errors.message && (
              <p className="text-red-500 text-xs mt-1">{errors.message}</p>
            )}
          </div>
          <CardFooter className="flex flex-col items-center space-y-4 px-0">
            <SubmitButton
              type="submit"
              className="w-full bg-emerald-600 hover:bg-emerald-700 text-white"
              disabled={isSubmitting}
            >
              {isSubmitting ? "Sending..." : "Send"}
            </SubmitButton>
            <div className="text-center text-lg space-x-2">
              <span className="text-gray-400">Already have an account?</span>
              <Link
                href="/sign-in"
                className="text-white hover:text-emerald-500"
              >
                Login
              </Link>
            </div>
          </CardFooter>
        </form>
      </CardContent>
    </Card>
  );
}