"use client";
import React, { useEffect, useState } from "react";
import axios from "@/utils/axios-config";
import { Form, Select, Input, Spin, Alert } from "antd";
import { MailOutlined, UserOutlined, PhoneOutlined } from "@ant-design/icons";
import { useTranslations } from "next-intl";

const { TextArea } = Input;

interface ContactType {
  id: number;
  name: string;
}

const ContactItem: React.FC<{ isGuest?: boolean }> = ({ isGuest }) => {
  const t = useTranslations("contactUs");
  const [options, setOptions] = useState<{ value: string; label: string }[]>(
    []
  );
  const [loading, setLoading] = useState(false);
  const [fetchError, setFetchError] = useState<string | null>(null);

  useEffect(() => {
    const fetchContactTypes = async () => {
      setLoading(true);
      setFetchError(null);
      try {
        const { data } = await axios.get<{
          status: boolean;
          data: ContactType[];
        }>("/contact-types");
        if (data.status && Array.isArray(data.data)) {
          setOptions(
            data.data.map((item) => ({
              value: String(item.id),
              label: item.name,
            }))
          );
        } else {
          throw new Error("Invalid response format");
        }
      } catch (error) {
        setFetchError("Failed to load problem types. Please try again.");
      }
      setLoading(false);
    };
    fetchContactTypes();
  }, []);

  return (
    <div className="flex flex-col gap-2 w-full">
      {isGuest && (
        <>
          <Form.Item
            name="name"
            rules={[
              { required: true, message: t("Name-required") },
              {
                                    pattern:
                                      /^(?=[^a-zA-Z]*[a-zA-Z][^a-zA-Z]*[a-zA-Z]).{2,50}$/,
                                    message: t("name-invalid"),
                                  },
            ]}
          >
            <Input
              size="large"
              placeholder={t("Enter your name")}
              suffix={<UserOutlined className="text-gray-400" />}
              className="border px-[15px] text-[14px] rounded-[12px] border-[#03B89E] w-full h-[55px]"
            />
          </Form.Item>

          <Form.Item
            name="phone"
            rules={[
              { required: true, message: t("Phone-required") },
              { pattern: /^[0-9+]{8,15}$/, message: t("Invalid phone") },
            ]}
          >
            <Input
              size="large"
              placeholder={t("Enter your phone")}
              suffix={<PhoneOutlined className="text-gray-400" />}
              className="border px-[15px] text-[14px] rounded-[12px] border-[#03B89E] w-full h-[55px]"
            />
          </Form.Item>
        </>
      )}

      <Form.Item
        name="email"
        rules={[
          { required: true, message: t("Email-required") },
          { type: "email", message: t("Invalid email") },
        ]}
      >
        <Input
          size="large"
          placeholder={t("Enter your email")}
          suffix={<MailOutlined className="text-gray-400" />}
          className="border px-[15px] text-[14px] rounded-[12px] border-[#03B89E] w-full h-[55px]"
        />
      </Form.Item>

      <Form.Item
        name="problemType"
        rules={[{ required: true, message: t("Please select a problem type") }]}
      >
        
          <Select
          disabled={loading}
            placeholder={t("Select a problem type")}
            options={options}
            className="custom-select select w-full h-[55px]"
          />
       
      </Form.Item>

      <Form.Item
        name="message"
        rules={[
          { required: true, message: t("Message is required") },
          { pattern: /^.{2,500}$/, message: t("Message must be at least 10 characters long") },
        ]}
      >
        <TextArea
          rows={4}
          placeholder={t("Write your message")}
          maxLength={500}
          className="border w-full px-[15px] py-3 rounded-[12px]
           border-[#03B89E]"
        />
      </Form.Item>
    </div>
  );
};

export default ContactItem;