"use client";

import { useTranslation } from "react-i18next";
import Text from "../lib_components/text";
import axios from "axios";
import { FormEvent } from "react";

export default function Contact() {
  const { t } = useTranslation();

  const sendMessage = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    const form = event.currentTarget;
    const nameInput = form.elements.namedItem("name") as HTMLInputElement;
    const name = nameInput?.value?.trim();

    if (!name) {
      alert("Iltimos, telefon raqamingizni kiriting!");
      return;
    }

    try {
      const token = "7940057045:AAHRFPvgUCo_7pqpXD6uq4li7-_DYx2J96g"; // Use environment variable
      const chatId = 6134458285;

      if (!token || !chatId) {
        throw new Error("Telegram token yoki chat ID topilmadi!");
      }

      const message = `📞 Yangi kontakt: ${name}`;

      await axios.post(`https://api.telegram.org/bot${token}/sendMessage`, {
        chat_id: chatId,
        text: message,
      });

      alert("✅ Muvaffaqiyatli yuborildi!");
      form.reset();
    } catch (error) {
      console.error("Yuborishda xatolik:", error);
      alert("❌ Yuborishda xatolik yuz berdi!");
    }
  };

  return (
    <section
      dir="ltr"
      className="relative w-full bg-primary py-20 flex justify-center mt-40 px-4"
    >
      <div className="mx-auto absolute z-20 -top-25 bg-secondary max-w-[1200px] w-full py-10 flex flex-col items-center clip-trapezoid">
        <div
          id="contactClip"
          className="w-full flex flex-col items-center justify-center"
        >
          <h2 className="text-2xl md:text-3xl font-bold text-primary mb-5 text-center">
            <Text txt="contact-h2" />
          </h2>

          {/* Form */}
          <form
            className="flex max-sm:flex-col gap-5 w-full max-w-2xl px-4"
            onSubmit={sendMessage}
          >
            <input
              type="text"
              name="name"
              placeholder="Your phone number"
              required
              className="flex-1 py-3 px-5 bg-white text-gray-600 placeholder-gray-400 text-lg clip-input focus:outline-none"
            />
            <button
              type="submit"
              className="bg-primary sm:-ml-5 text-white sm:px-6 sm:py-3 p-2 text-lg font-medium clip-button"
            >
              {t("call")}
            </button>
          </form>
        </div>
      </div>
    </section>
  );
}