'use client';

import { FormEvent, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import Link from 'next/link';
import { ArrowLeft, Loader2, LockKeyhole } from 'lucide-react';
import ApiErrorAlert from '@/app/components/ApiErrorAlert';
import { config } from '@/lib/config';
import { getRuntimeClientConfig } from '@/lib/runtime-client-config';
import { formatApiErrorWithRequestId, formatRetryAfterHuman, getResponseErrorDetails } from '@/lib/api-client';

export default function UnlockLinkPage() {
  const params = useParams<{ slug: string }>();
  const router = useRouter();
  const [password, setPassword] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState('');
  const runtimeConfig = getRuntimeClientConfig();
  const projectName = runtimeConfig.projectName || config.projectName;

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    if (!params?.slug || !password.trim()) return;

    setIsSubmitting(true);
    setError('');

    try {
      const response = await fetch(`/api/links/unlock/${params.slug}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ password }),
      });

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

      router.push(`/${params.slug}`);
    } catch {
      setError('Ошибка сети, попробуйте снова');
    } finally {
      setIsSubmitting(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/18 blur-3xl" />
        <div className="absolute -right-24 bottom-[-120px] h-72 w-72 rounded-full bg-fuchsia-500/18 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-6 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">
              <LockKeyhole className="h-6 w-6" />
            </div>
            <h1 className="mb-2 text-2xl font-bold tracking-tight text-white">Защищенная ссылка</h1>
            <p className="text-sm text-gray-400">
              Ссылка защищена паролем в {projectName}. Введите пароль для продолжения.
            </p>
          </div>

          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label htmlFor="password" className="mb-2 block text-sm font-medium text-gray-300">
                Пароль ссылки
              </label>
              <input
                id="password"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="h-12 w-full rounded-xl border border-white/10 bg-white/[0.03] px-4 text-white outline-none transition-colors placeholder:text-gray-500 focus:border-violet-500/45"
                placeholder="Введите пароль"
                required
              />
            </div>

            <ApiErrorAlert message={error} />

            <button
              type="submit"
              disabled={isSubmitting}
              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"
            >
              {isSubmitting ? (
                <>
                  <Loader2 className="h-4 w-4 animate-spin" />
                  Проверка...
                </>
              ) : (
                'Продолжить'
              )}
            </button>
          </form>

          <Link href="/" className="mt-5 inline-flex items-center gap-2 text-sm text-gray-500 transition-colors hover:text-white">
            <ArrowLeft className="h-4 w-4" />
            Вернуться на главную
          </Link>
        </div>
      </div>
    </div>
  );
}