'use client';

import { useRouter } from 'next/navigation';
import { ChevronLeft, Smartphone, Download, QrCode, Copy, ExternalLink } from 'lucide-react';
import { useState } from 'react';

export default function SetupPage() {
  const router = useRouter();
  const [copied, setCopied] = useState(false);
  const subscriptionUrl = 'https://umbrix2.3to3.sbs/sub/Vm9kb3JvZF8sMTc2OTczMDU2NQtUnJh9gxkj/';

  const copyToClipboard = async (text: string) => {
    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error('Failed to copy:', err);
    }
  };

  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">Настроить Umbrix</h1>
        </div>
      </div>

      {/* Main Content */}
      <div className="max-w-2xl mx-auto p-4 space-y-6">
        {/* Step 1: Download App */}
        <div className="bg-[var(--bg-card)] border border-slate-700 rounded-lg p-6">
          <div className="flex items-start gap-4">
            <div className="flex-shrink-0 w-10 h-10 bg-[var(--primary)] rounded-full flex items-center justify-center font-bold">
              1
            </div>
            <div className="flex-1">
              <h2 className="text-lg font-semibold mb-2">Скачайте приложение Umbrix</h2>
              <p className="text-slate-400 text-sm mb-4">
                Umbrix — это безопасное VPN приложение для защиты вашего интернет-соединения
              </p>
              
              <div className="space-y-3">
                {/* Android */}
                <a
                  href="https://play.google.com/store/apps/details?id=com.umbrix.app"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-3 p-4 bg-slate-800 hover:bg-slate-700 rounded-lg transition-colors"
                >
                  <Smartphone className="h-6 w-6 text-green-500" />
                  <div className="flex-1">
                    <p className="font-medium">Android</p>
                    <p className="text-xs text-slate-400">Google Play Store</p>
                  </div>
                  <ExternalLink className="h-5 w-5 text-slate-400" />
                </a>

                {/* iOS */}
                <a
                  href="https://apps.apple.com/app/umbrix/id123456789"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-3 p-4 bg-slate-800 hover:bg-slate-700 rounded-lg transition-colors"
                >
                  <Smartphone className="h-6 w-6 text-blue-500" />
                  <div className="flex-1">
                    <p className="font-medium">iOS</p>
                    <p className="text-xs text-slate-400">App Store</p>
                  </div>
                  <ExternalLink className="h-5 w-5 text-slate-400" />
                </a>

                {/* Windows */}
                <a
                  href="https://umbrix.app/download/windows"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-3 p-4 bg-slate-800 hover:bg-slate-700 rounded-lg transition-colors"
                >
                  <Download className="h-6 w-6 text-cyan-500" />
                  <div className="flex-1">
                    <p className="font-medium">Windows</p>
                    <p className="text-xs text-slate-400">Скачать .exe</p>
                  </div>
                  <ExternalLink className="h-5 w-5 text-slate-400" />
                </a>

                {/* macOS */}
                <a
                  href="https://umbrix.app/download/macos"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-3 p-4 bg-slate-800 hover:bg-slate-700 rounded-lg transition-colors"
                >
                  <Download className="h-6 w-6 text-slate-400" />
                  <div className="flex-1">
                    <p className="font-medium">macOS</p>
                    <p className="text-xs text-slate-400">Скачать .dmg</p>
                  </div>
                  <ExternalLink className="h-5 w-5 text-slate-400" />
                </a>
              </div>
            </div>
          </div>
        </div>

        {/* Step 2: Add Subscription */}
        <div className="bg-[var(--bg-card)] border border-slate-700 rounded-lg p-6">
          <div className="flex items-start gap-4">
            <div className="flex-shrink-0 w-10 h-10 bg-[var(--primary)] rounded-full flex items-center justify-center font-bold">
              2
            </div>
            <div className="flex-1">
              <h2 className="text-lg font-semibold mb-2">Добавьте подписку</h2>
              <p className="text-slate-400 text-sm mb-4">
                После покупки вы получите ссылку на подписку. Добавьте её в приложение одним из способов:
              </p>

              {/* Alert: Desktop users */}
              <div className="p-3 bg-blue-500/10 border border-blue-500/20 rounded-lg mb-4">
                <p className="text-xs text-blue-400">
                  💡 <strong>Важно:</strong> Кнопка &quot;Открыть в Umbrix&quot; работает только если приложение уже установлено. Если приложения нет - вы будете перенаправлены на эту страницу для установки.
                </p>
              </div>

              {/* Method 1: Copy Link */}
              <div className="space-y-3 mb-4">
                <div className="p-4 bg-slate-800/50 border border-slate-700 rounded-lg">
                  <div className="flex items-center gap-2 mb-2">
                    <Copy className="h-4 w-4 text-[var(--primary)]" />
                    <p className="font-medium text-sm">Способ 1: Скопировать ссылку</p>
                  </div>
                  <ol className="text-sm text-slate-400 space-y-1 ml-6 list-decimal">
                    <li>Скопируйте ссылку подписки</li>
                    <li>Откройте приложение Umbrix</li>
                    <li>Нажмите &quot;+&quot; или &quot;Добавить подписку&quot;</li>
                    <li>Вставьте скопированную ссылку</li>
                  </ol>
                </div>

                {/* Method 2: QR Code */}
                <div className="p-4 bg-slate-800/50 border border-slate-700 rounded-lg">
                  <div className="flex items-center gap-2 mb-2">
                    <QrCode className="h-4 w-4 text-[var(--primary)]" />
                    <p className="font-medium text-sm">Способ 2: QR код</p>
                  </div>
                  <ol className="text-sm text-slate-400 space-y-1 ml-6 list-decimal">
                    <li>Откройте QR код подписки</li>
                    <li>В приложении Umbrix нажмите &quot;Сканировать QR&quot;</li>
                    <li>Наведите камеру на QR код</li>
                  </ol>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Step 3: Connect */}
        <div className="bg-[var(--bg-card)] border border-slate-700 rounded-lg p-6">
          <div className="flex items-start gap-4">
            <div className="flex-shrink-0 w-10 h-10 bg-[var(--primary)] rounded-full flex items-center justify-center font-bold">
              3
            </div>
            <div className="flex-1">
              <h2 className="text-lg font-semibold mb-2">Подключитесь к VPN</h2>
              <p className="text-slate-400 text-sm mb-4">
                После добавления подписки просто нажмите кнопку &quot;Подключить&quot; в приложении
              </p>
              
              <div className="p-4 bg-green-500/10 border border-green-500/20 rounded-lg">
                <p className="text-sm text-green-400">
                  ✅ Готово! Ваше соединение защищено и зашифровано
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Help Section */}
        <div className="bg-[var(--bg-card)] border border-slate-700 rounded-lg p-6">
          <h3 className="font-semibold mb-3">💬 Нужна помощь?</h3>
          <p className="text-sm text-slate-400 mb-4">
            Если возникли вопросы при настройке, свяжитесь с нашей поддержкой
          </p>
          <a
            href="https://telegram.me/"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 px-4 py-2 bg-[var(--primary)] hover:bg-[var(--primary)]/80 rounded-lg transition-colors"
          >
            <ExternalLink className="h-4 w-4" />
            Написать в поддержку
          </a>
        </div>

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