"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";

export default function Contact() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    message: "",
  });
  const { t } = useLanguage();

  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
    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}
          📧 Email: ${formData.email}
          💬 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: "",
        email: "",
        message: "",
      });
    } 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="email"
                  name="email"
                  value={formData.email}
                  onChange={handleChange}
                  placeholder={t.contact.fields.email_placeholder}
                  className="bg-background border-border"
                  required
                />
              </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>
  );
}