'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { 
  ChevronLeft, ChevronDown, ChevronUp,
  Rocket, HelpCircle, Wrench, MessageCircle, FileText,
  Smartphone, Download, Play, Apple, Monitor, Wifi, Globe, Shield, Zap
} from 'lucide-react';

export default function HelpPage() {
  const router = useRouter();
  const [openFaq, setOpenFaq] = useState<number | null>(null);
  const [openTrouble, setOpenTrouble] = useState<number | null>(null);

  const toggleFaq = (index: number) => {
    setOpenFaq(openFaq === index ? null : index);
  };

  const toggleTrouble = (index: number) => {
    setOpenTrouble(openTrouble === index ? null : index);
  };

  const faqs = [
    {
      question: 'Как подключиться к VPN?',
      answer: 'Откройте приложение Umbrix → выберите сервер → нажмите кнопку "Подключить". Приложение автоматически установит безопасное соединение.'
    },
    {
      question: 'Как изменить страну/сервер?',
      answer: 'В главном экране нажмите на текущий сервер → выберите нужную страну из списка → нажмите "Подключить". Приложение переключится на новый сервер.'
    },
    {
      question: 'Как проверить что VPN работает?',
      answer: 'Проверьте иконку в статус-баре (должна быть зеленой). Или зайдите на сайт 2ip.ru - вы увидите IP-адрес выбранной страны, а не свой реальный.'
    },
    {
      question: 'Как продлить подписку?',
      answer: 'Главное меню → Тарифы → выберите нужный план → оплатите. Подписка продлится автоматически после подтверждения оплаты.'
    },
    {
      question: 'Можно ли использовать на нескольких устройствах?',
      answer: 'Да! Одна подписка работает на неограниченном количестве устройств. Просто установите Umbrix на каждое устройство и войдите с той же подпиской.'
    },
    {
      question: 'Как получить бесплатный пробный период?',
      answer: '7 дней бесплатно при регистрации! Или получите +7 дней за каждого приглашенного друга через реферальную программу.'
    },
  ];

  const troubleshooting = [
    {
      problem: 'VPN не подключается',
      solution: '1) Проверьте интернет-соединение\n2) Попробуйте другой сервер\n3) Переустановите приложение\n4) Напишите в поддержку с описанием проблемы'
    },
    {
      problem: 'Низкая скорость соединения',
      solution: '1) Выберите ближайший к вам сервер\n2) Смените протокол на WireGuard (быстрее OpenVPN)\n3) Проверьте скорость без VPN для сравнения\n4) Попробуйте подключиться в другое время суток'
    },
    {
      problem: 'Приложение вылетает/зависает',
      solution: '1) Обновите приложение до последней версии\n2) Очистите кеш приложения\n3) Перезагрузите устройство\n4) Переустановите приложение заново'
    },
    {
      problem: 'Ошибка "Не удалось установить соединение"',
      solution: '1) Проверьте срок действия подписки\n2) Убедитесь что не превышен лимит трафика\n3) Попробуйте переключиться на другой протокол\n4) Проверьте не блокирует ли ваш провайдер VPN'
    },
    {
      problem: 'Не приходит код подтверждения',
      solution: '1) Проверьте папку "Спам" в почте\n2) Убедитесь что email указан верно\n3) Подождите 5-10 минут\n4) Запросите код повторно\n5) Напишите в поддержку Telegram'
    },
  ];

  return (
    <div className="min-h-screen bg-[var(--bg-app)] text-white">
      {/* Header */}
      <div className="bg-[var(--bg-card)] border-b border-slate-700 sticky top-0 z-10 backdrop-blur-sm">
        <div className="max-w-2xl mx-auto p-4 flex items-center gap-3">
          <button
            onClick={() => router.back()}
            className="p-2 hover:bg-slate-700 rounded-lg transition-colors"
          >
            <ChevronLeft className="w-6 h-6" />
          </button>
          <h1 className="text-xl font-bold">Помощь</h1>
        </div>
      </div>

      {/* Content */}
      <div className="max-w-2xl mx-auto p-4 space-y-6">
        {/* 1. Начало работы */}
        <section className="bg-[var(--bg-card)] border border-slate-700 rounded-xl p-6">
          <div className="flex items-center gap-3 mb-4">
            <Rocket className="w-6 h-6" style={{ color: 'var(--primary)' }} />
            <h2 className="text-xl font-bold">Начало работы</h2>
          </div>

          <div className="space-y-4">
            {/* Шаг 1: Установка */}
            <div>
              <h3 className="font-semibold mb-2 flex items-center gap-2">
                <Download className="w-5 h-5" style={{ color: 'var(--primary)' }} />
                1. Установите приложение
              </h3>
              <div className="pl-7 space-y-2 text-sm text-slate-400">
                <div className="flex items-center gap-2">
                  <Smartphone className="w-4 h-4" />
                  <span><strong>Android:</strong> Google Play Store → &quot;Umbrix VPN&quot;</span>
                </div>
                <div className="flex items-center gap-2">
                  <Apple className="w-4 h-4" />
                  <span><strong>iOS:</strong> App Store → &quot;Umbrix VPN&quot;</span>
                </div>
                <div className="flex items-center gap-2">
                  <Monitor className="w-4 h-4" />
                  <span><strong>Desktop:</strong> umbrix.net/download</span>
                </div>
              </div>
            </div>

            {/* Шаг 2: Активация */}
            <div>
              <h3 className="font-semibold mb-2 flex items-center gap-2">
                <Play className="w-5 h-5" style={{ color: 'var(--primary)' }} />
                2. Активируйте подписку
              </h3>
              <p className="pl-7 text-sm text-slate-400">
                Скопируйте ссылку подписки из бота → вставьте в приложение Umbrix → готово!
              </p>
            </div>

            {/* Шаг 3: Подключение */}
            <div>
              <h3 className="font-semibold mb-2 flex items-center gap-2">
                <Wifi className="w-5 h-5" style={{ color: 'var(--primary)' }} />
                3. Подключитесь к VPN
              </h3>
              <p className="pl-7 text-sm text-slate-400">
                Перейдите во вкладку &quot;Локации&quot; → выберите сервер (страну) → нажмите большую зеленую кнопку → VPN активирован!
              </p>
            </div>
          </div>
        </section>

        {/* 2. FAQ */}
        <section className="bg-[var(--bg-card)] border border-slate-700 rounded-xl p-6">
          <div className="flex items-center gap-3 mb-4">
            <HelpCircle className="w-6 h-6" style={{ color: 'var(--primary)' }} />
            <h2 className="text-xl font-bold">Частые вопросы</h2>
          </div>

          <div className="space-y-3">
            {faqs.map((faq, index) => (
              <div
                key={index}
                className="border border-slate-700 rounded-lg overflow-hidden"
              >
                <button
                  onClick={() => toggleFaq(index)}
                  className="w-full flex items-center justify-between p-4 hover:bg-slate-700/50 transition-colors text-left"
                >
                  <span className="font-medium">{faq.question}</span>
                  {openFaq === index ? (
                    <ChevronUp className="w-5 h-5 flex-shrink-0" style={{ color: 'var(--primary)' }} />
                  ) : (
                    <ChevronDown className="w-5 h-5 flex-shrink-0" style={{ color: 'var(--primary)' }} />
                  )}
                </button>
                {openFaq === index && (
                  <div className="px-4 pb-4 text-sm text-slate-400 border-t border-slate-700 pt-4">
                    {faq.answer}
                  </div>
                )}
              </div>
            ))}
          </div>
        </section>

        {/* 3. Решение проблем */}
        <section className="bg-[var(--bg-card)] border border-slate-700 rounded-xl p-6">
          <div className="flex items-center gap-3 mb-4">
            <Wrench className="w-6 h-6" style={{ color: 'var(--primary)' }} />
            <h2 className="text-xl font-bold">Решение проблем</h2>
          </div>

          <div className="space-y-3">
            {troubleshooting.map((item, index) => (
              <div
                key={index}
                className="border border-slate-700 rounded-lg overflow-hidden"
              >
                <button
                  onClick={() => toggleTrouble(index)}
                  className="w-full flex items-center justify-between p-4 hover:bg-slate-700/50 transition-colors text-left"
                >
                  <span className="font-medium">{item.problem}</span>
                  {openTrouble === index ? (
                    <ChevronUp className="w-5 h-5 flex-shrink-0" style={{ color: 'var(--primary)' }} />
                  ) : (
                    <ChevronDown className="w-5 h-5 flex-shrink-0" style={{ color: 'var(--primary)' }} />
                  )}
                </button>
                {openTrouble === index && (
                  <div className="px-4 pb-4 text-sm text-slate-400 border-t border-slate-700 pt-4 whitespace-pre-line">
                    {item.solution}
                  </div>
                )}
              </div>
            ))}
          </div>
        </section>

        {/* 4. Связаться с поддержкой */}
        <section className="bg-[var(--bg-card)] border border-slate-700 rounded-xl p-6">
          <div className="flex items-center gap-3 mb-4">
            <MessageCircle className="w-6 h-6" style={{ color: 'var(--primary)' }} />
            <h2 className="text-xl font-bold">Связаться с поддержкой</h2>
          </div>

          <div className="space-y-4">
            <p className="text-sm text-slate-400">
              Не нашли ответ на свой вопрос? Свяжитесь с нами любым удобным способом:
            </p>

            <div className="space-y-3">
              <a
                href="https://t.me/"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-3 p-4 bg-slate-700/50 hover:bg-slate-700 rounded-lg transition-colors"
              >
                <MessageCircle className="w-5 h-5" style={{ color: 'var(--primary)' }} />
                <div className="flex-1">
                  <div className="font-medium">Telegram поддержка</div>
                  <div className="text-xs text-slate-400">Ответим в течение 5 минут</div>
                </div>
                <ChevronDown className="w-5 h-5 rotate-[-90deg]" />
              </a>

              <div className="p-4 bg-slate-700/30 rounded-lg">
                <div className="text-sm text-slate-400">
                  <div className="flex items-center gap-2 mb-1">
                    <Globe className="w-4 h-4" style={{ color: 'var(--primary)' }} />
                    <strong>Email:</strong> support@umbrix.net
                  </div>
                  <div className="flex items-center gap-2">
                    <Zap className="w-4 h-4" style={{ color: 'var(--primary)' }} />
                    <strong>Время работы:</strong> 24/7
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Spacer для нижней навигации */}
        <div className="h-20" />
      </div>
    </div>
  );
}