'use client';

export const dynamic = 'force-dynamic';

import { useState, useEffect } from 'react';
import { Suspense } from 'react';
import { signIn, useSession } from 'next-auth/react';
import { useRouter, useSearchParams } from 'next/navigation';
import Link from 'next/link';
import { Bot, Loader2, ShieldCheck, Sparkles } from 'lucide-react';
import ApiErrorAlert from '@/app/components/ApiErrorAlert';
import { formatApiErrorWithRequestId, formatRetryAfterHuman, getResponseErrorDetails } from '@/lib/api-client';
import { getRuntimeClientConfig } from '@/lib/runtime-client-config';
import { sanitizeInternalReturnTo } from '@/lib/security';

function LoginPageContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { data: session } = useSession();
  const runtimeConfig = getRuntimeClientConfig();
  const projectName = runtimeConfig.projectName || 'LinkSnap';
  const defaultBotUrl = runtimeConfig.telegramBotUrl || '#';
  const [code, setCode] = useState('');
  const [challengeId, setChallengeId] = useState('');
  const [botStartUrl, setBotStartUrl] = useState('');
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const returnTo = sanitizeInternalReturnTo(searchParams.get('returnTo'), '/profile');

  // Redirect if already logged in
  useEffect(() => {
    if (session) {
      router.push(returnTo, { scroll: false });
    }
  }, [session, router, returnTo]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setIsLoading(true);

    try {
      if (!challengeId) {
        const response = await fetch('/api/auth/telegram/start', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({}),
        });

        if (!response.ok) {
          const details = await getResponseErrorDetails(response, 'Не удалось отправить код в Telegram');
          const retryAfter = formatRetryAfterHuman(details.retryAfterSec);
          const baseMessage = formatApiErrorWithRequestId(details);
          setError(retryAfter ? `${baseMessage}. Повторите через ${retryAfter}` : baseMessage);
          return;
        }

        const data = await response.json();
        setChallengeId(data.challengeId || '');
        setBotStartUrl(data.botStartUrl || '');
      } else {
        const preflight = await fetch('/api/auth/providers');
        if (!preflight.ok) {
          const details = await getResponseErrorDetails(preflight, 'Сервис авторизации временно недоступен');
          const retryAfter = formatRetryAfterHuman(details.retryAfterSec);
          const baseMessage = formatApiErrorWithRequestId(details);
          setError(retryAfter ? `${baseMessage}. Повторите через ${retryAfter}` : baseMessage);
          return;
        }

        const result = await signIn('credentials', {
          code,
          challengeId,
          redirect: false,
        });

        if (result?.error) {
          setError(result.error);
          return;
        }

        router.push(returnTo, { scroll: false });
      }
    } catch {
      setError('Ошибка при входе через Telegram');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="relative min-h-screen overflow-hidden bg-[#050505] px-4 py-10 text-white">
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute -left-24 top-[-120px] h-72 w-72 rounded-full bg-violet-500/20 blur-3xl" />
        <div className="absolute -right-24 bottom-[-120px] h-72 w-72 rounded-full bg-fuchsia-500/20 blur-3xl" />
      </div>

      <div className="relative z-10 mx-auto flex min-h-[calc(100vh-5rem)] w-full max-w-md items-center">
        <div className="w-full rounded-[1.5rem] border border-white/10 bg-black/40 p-6 backdrop-blur-xl shadow-[0_24px_80px_rgba(0,0,0,0.6)] sm:p-8">
          <div className="mb-7 text-center">
            <div className="mx-auto mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl border border-violet-500/30 bg-violet-500/15 text-violet-200">
              <ShieldCheck className="h-6 w-6" />
            </div>
            <h1 className="mb-2 text-2xl font-bold tracking-tight text-white">Вход через Telegram</h1>
            <p className="text-sm text-gray-400">
              Авторизуйтесь в {projectName} через Telegram и одноразовый код.
            </p>
          </div>

          {searchParams.get('linked') === 'true' ? (
            <div className="mb-6 rounded-xl border border-emerald-500/25 bg-emerald-500/10 p-4 text-sm text-emerald-100">
              <p className="font-medium">Telegram успешно привязан.</p>
              <p className="mt-1 text-emerald-200/90">Теперь вход подтверждается кодом из бота.</p>
            </div>
          ) : null}

          <form onSubmit={handleSubmit} className="space-y-4">
            {challengeId ? (
              <>
                <a
                  href={botStartUrl || defaultBotUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex w-full items-center justify-center gap-2 rounded-xl border border-white/10 bg-white/[0.03] px-4 py-3 text-sm font-medium text-gray-200 transition-colors hover:bg-white/[0.08] hover:text-white"
                >
                  <Bot className="h-4 w-4 text-[#2AABEE]" />
                  Открыть Telegram-бота
                </a>
                <div>
                  <label htmlFor="code" className="mb-2 block text-sm font-medium text-gray-300">
                    Код из Telegram
                  </label>
                  <input
                    id="code"
                    type="text"
                    inputMode="numeric"
                    maxLength={6}
                    value={code}
                    onChange={(e) => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
                    className="h-12 w-full rounded-xl border border-white/10 bg-white/[0.03] px-4 font-mono text-lg tracking-[0.24em] text-white outline-none transition-colors placeholder:text-gray-500 focus:border-violet-500/45"
                    placeholder="123456"
                    required
                  />
                </div>
              </>
            ) : null}

            <ApiErrorAlert message={error} compact />

            <button
              type="submit"
              disabled={isLoading}
              className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-fuchsia-500 to-violet-600 text-sm font-semibold text-white transition-all duration-200 hover:scale-[1.01] hover:shadow-[0_0_24px_rgba(168,85,247,0.35)] disabled:cursor-not-allowed disabled:opacity-70"
            >
              {isLoading ? (
                <>
                  <Loader2 className="h-4 w-4 animate-spin" />
                  Подождите...
                </>
              ) : (
                challengeId ? 'Подтвердить вход' : 'Получить код'
              )}
            </button>
          </form>

          <div className="mt-6 rounded-xl border border-white/10 bg-white/[0.02] p-4 text-sm text-gray-300">
            <p className="mb-2 inline-flex items-center gap-2 font-medium text-white">
              <Sparkles className="h-4 w-4 text-violet-300" />
              Как войти
            </p>
            <p>1. Нажмите «Получить код».</p>
            <p>2. Откройте Telegram-бота кнопкой выше.</p>
            <p>3. Введите одноразовый код из бота.</p>
            <p className="mt-2 text-xs text-gray-500">Telegram ID больше вводить не нужно: аккаунт связывается через ссылку запуска.</p>
          </div>

          <div className="mt-5 text-center">
            <Link href="/" className="text-sm text-gray-500 transition-colors hover:text-white">
              ← На главную
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}

export default function LoginPage() {
  return (
    <Suspense
      fallback={(
        <div className="flex min-h-screen items-center justify-center bg-[#050505]">
          <Loader2 className="h-7 w-7 animate-spin text-violet-400" />
        </div>
      )}
    >
      <LoginPageContent />
    </Suspense>
  );
}