"use client";

import type React from "react";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { MessageSquare } from "lucide-react";
import { useLanguage } from "@/contexts/language-context";
import axios from "axios";

function validateContact(input: string) {
  const value = input.trim();

  // Email regex (simple and reliable)
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  // Uzbek phone formats:
  // - 9-digit numbers: 937665544
  // - +998XXXXXXXXX
  const phoneRegex = /^(\+998\d{9}|\d{9})$/;

  if (emailRegex.test(value)) {
    return { valid: true, type: "email" };
  }

  if (phoneRegex.test(value)) {
    return { valid: true, type: "phone" };
  }

  return { valid: false, message: "Enter valid email or phone number" };
}

export default function Contact() {
  const [formData, setFormData] = useState({
    name: "",
    connect_link: "",
    message: "",
  });
  const { t } = useLanguage();
  const [error, setError] = useState<string>("");

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    // Handle form submission
    const valid = validateContact(formData.connect_link);
    if (!valid.valid) {
      setError(valid.message || "");
      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 xabar keldi!
          👤 Ism: ${formData.name}
          📧 Bog'lanish uchun: ${formData.connect_link}
          💬 Xabar: ${formData.message}
        `;

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

      alert("✅ Tez orada bog'lanamiz!");
      setFormData({
        name: "",
        connect_link: "",
        message: "",
      });
      setError('')
    } catch (error) {
      console.error("Yuborishda xatolik:", error);
      alert("❌ Yuborishda xatolik yuz berdi!");
    }
    console.log(formData);
  };

  return (
    <section id="contact" className="py-20 md:py-32 px-4 sm:px-6 lg:px-8">
      <div className="max-w-3xl mx-auto">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
            {t.contact.title}
          </h2>
          <p className="text-lg text-muted-foreground">{t.contact.subtitle}</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {/* Form */}
          <div className="bg-muted rounded-xl p-8 border border-border">
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-foreground mb-2">
                  {t.contact.fields.name}
                </label>
                <Input
                  type="text"
                  name="name"
                  value={formData.name}
                  onChange={handleChange}
                  placeholder={t.contact.fields.name_placeholder}
                  className="bg-background border-border"
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-foreground mb-2">
                  {t.contact.fields.email}
                </label>
                <Input
                  type="text"
                  name="connect_link"
                  value={formData.connect_link}
                  onChange={handleChange}
                  placeholder={t.contact.fields.email_placeholder}
                  className="bg-background border-border"
                  required
                />
                {error && <p className="text-red-500 text-sm mt-1">{error}</p>}
              </div>

              <div>
                <label className="block text-sm font-medium text-foreground mb-2">
                  {t.contact.fields.message}
                </label>
                <textarea
                  name="message"
                  value={formData.message}
                  onChange={handleChange}
                  placeholder={t.contact.fields.message}
                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
                  rows={4}
                  required
                />
              </div>

              <Button className="w-full bg-primary hover:bg-primary/90">
                {t.contact.fields.send}
              </Button>
            </form>
          </div>

          {/* Contact Info */}
          <div className="flex flex-col justify-between space-y-6">
            <div className="bg-background rounded-xl p-6 border border-border">
              <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                <MessageSquare size={24} className="text-primary" />
              </div>
              <h3 className="font-semibold text-foreground mb-2">
                {t.contact.whatsapp.title}
              </h3>
              <p className="text-muted-foreground mb-4">
                {t.contact.whatsapp.desc}
              </p>
              <a href="https://t.me/Felix_IT_solutions">
                <Button
                  variant="outline"
                  className="w-full border-primary text-primary hover:bg-primary/90 bg-transparent"
                >
                  {t.contact.open}
                </Button>
              </a>
            </div>

            <div className="bg-background rounded-xl p-6 border border-border">
              <h3 className="font-semibold text-foreground mb-2">
                {t.contact.email.title}
              </h3>
              <p className="text-muted-foreground">{t.contact.email.address}</p>
            </div>

            <div className="bg-background rounded-xl p-6 border border-border">
              <h3 className="font-semibold text-foreground mb-2">
                {t.contact.response.title}
              </h3>
              <p className="text-muted-foreground">{t.contact.response.desc}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}