import {
  AlertTriangle,
  CheckCircle,
  HelpCircle,
  MessageCircle,
  RotateCcw,
  Send,
} from 'lucide-react';
import { useState } from 'react';

export default function CustomerSupport() {
  const [selectedCategory, setSelectedCategory] = useState('');
  const [message, setMessage] = useState('');
  const [showSuccess, setShowSuccess] = useState(false);

  const categories = [
    {
      id: 'vozvrat',
      title: 'Vozvrat (Qaytarish)',
      description: "Mahsulotni qaytarish bo'yicha savol",
      icon: RotateCcw,
    },
    {
      id: 'brak',
      title: 'Brak mahsulotlar',
      description: 'Nuqsonli yoki shikastlangan mahsulotlar',
      icon: AlertTriangle,
    },
    {
      id: 'umumiy',
      title: 'Umumiy murojaatlar',
      description: 'Boshqa savollar va takliflar',
      icon: HelpCircle,
    },
  ];

  const handleSendToTelegram = () => {
    if (!selectedCategory || !message.trim()) {
      alert('Iltimos, kategoriya va xabar matnini kiriting');
      return;
    }

    const category = categories.find((c) => c.id === selectedCategory);
    if (!category) {
      alert('Kategoriya topilmadi');
      return;
    }

    const telegramText = `🔔 Yangi murojaat\n\n📋 Kategoriya: ${category.title}\n\n💬 Xabar:\n${message}`;

    // Foydalanuvchi ID sini oling (masalan, auth orqali)
    const userId = '6487794662'; // <-- bu yerda dinamik ID bo'lishi kerak

    // Telegram link bot orqali yuborish
    const botToken = 'web_app_0515_bot';
    const telegramUrl = `https://api.telegram.org/bot${botToken}/sendMessage?chat_id=${userId}&text=${encodeURIComponent(
      telegramText,
    )}`;

    fetch(telegramUrl)
      .then(() => {
        setShowSuccess(true);
        setTimeout(() => {
          setShowSuccess(false);
          setSelectedCategory('');
          setMessage('');
        }, 3000);
      })
      .catch(() => {
        alert('Xabar yuborishda xatolik yuz berdi');
      });
  };

  return (
    <div className="custom-sontainer mt-5">
      <>
        {/* Header */}
        <div className="mb-8">
          <div className="flex items-center gap-3 mb-2">
            <MessageCircle className="w-8 h-8 text-gray-700" />
            <h1 className="text-2xl font-bold text-gray-800">
              {"Qo'llab-quvvatlash"}
            </h1>
          </div>
          <p className="text-gray-600">Sizga yordam berish uchun tayyormiz</p>
        </div>

        {/* Success Message */}
        {showSuccess && (
          <div className="mb-6 bg-white border border-green-500 p-4 rounded-lg flex items-center gap-3">
            <CheckCircle className="w-6 h-6 text-green-500" />
            <p className="text-gray-800">
              Xabaringiz yuborildi! Tez orada javob beramiz.
            </p>
          </div>
        )}

        {/* Categories */}
        <div className="mb-6">
          <h2 className="text-lg font-semibold text-gray-800 mb-3">
            {"Murojaat yo'nalishini tanlang"}
          </h2>
          <div className="space-y-3">
            {categories.map((category) => {
              const Icon = category.icon;
              return (
                <button
                  key={category.id}
                  onClick={() => setSelectedCategory(category.id)}
                  className={`w-full p-4 rounded-lg border-2 transition-all text-left flex items-start gap-3 ${
                    selectedCategory === category.id
                      ? 'border-green-500 bg-white'
                      : 'border-gray-300 bg-white hover:border-gray-400'
                  }`}
                >
                  <Icon className="w-5 h-5 text-gray-700 mt-1" />
                  <div>
                    <h3 className="font-semibold text-gray-800">
                      {category.title}
                    </h3>
                    <p className="text-sm text-gray-600">
                      {category.description}
                    </p>
                  </div>
                </button>
              );
            })}
          </div>
        </div>

        {/* Message Input */}
        <div className="bg-white rounded-lg border border-gray-300 p-6 mb-6">
          <h2 className="text-lg font-semibold text-gray-800 mb-3">
            Xabar yozing
          </h2>
          <textarea
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            placeholder="Savolingiz yoki murojaatingizni batafsil yozing..."
            className="w-full h-32 p-3 border border-gray-300 rounded-lg focus:border-gray-500 focus:outline-none resize-none text-gray-700"
          />
          <p className="text-sm text-gray-500">{message.length}/1000 belgi</p>
          <div className="mt-4 flex items-center justify-between max-lg:flex-col max-lg:items-end gap-2">
            <button
              onClick={handleSendToTelegram}
              disabled={!selectedCategory || !message.trim()}
              className={`flex items-center gap-2 px-5 py-2 rounded-lg font-medium transition-all ${
                selectedCategory && message.trim()
                  ? 'bg-gray-800 text-white hover:bg-gray-700'
                  : 'bg-gray-300 text-gray-500 cursor-not-allowed'
              }`}
            >
              <Send className="w-4 h-4" />
              Telegram orqali yuborish
            </button>
          </div>
        </div>

        {/* Info Box */}
        <div className="bg-white border border-gray-300 rounded-lg p-5">
          <h3 className="font-semibold text-gray-800 mb-2">
            {"Aloqa ma'lumotlari"}
          </h3>
          <p className="text-gray-600 text-sm mb-3">
            Barcha murojaatlarga 24 soat ichida javob beramiz
          </p>
          <div className="flex flex-col gap-2 text-sm text-gray-600">
            <div>Dushanba-Shanba: 9:00-18:00</div>
            <div>Yakshanba: Dam olish</div>
          </div>
        </div>
      </>
    </div>
  );
}
