'use client';

import { Suspense } from 'react';
import Link from 'next/link';
import { LoginForm } from './LoginForm';
import { Loader2 } from 'lucide-react';
import { ChevronLeft } from 'lucide-react';
import { motion } from 'framer-motion';
import { useI18n } from '@/lib/i18n';

function LoadingFallback() {
  const { t } = useI18n();
  return (
    <div className="w-full max-w-md mx-auto">
      <div className="editorial-card p-8">
        <div className="flex flex-col items-center justify-center py-8 space-y-4">
          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-brand-dark text-white">
            <span className="text-xl font-bold">W</span>
          </div>
          <Loader2 className="h-8 w-8 animate-spin text-brand-accent" />
          <p className="text-brand-dark/50 dark:text-white/50 text-sm">{t('common.loading')}</p>
        </div>
      </div>
    </div>
  );
}

export default function LoginPage() {
  const { t } = useI18n();

  return (
    <div className="min-h-screen bg-brand-bg dark:bg-[#0a0a0a] flex items-center justify-center p-4 relative overflow-hidden">
      {/* Decorative blur blobs */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-brand-accent/10 rounded-full blur-3xl" />
        <div className="absolute bottom-1/4 right-1/4 w-[400px] h-[400px] bg-brand-dark/5 dark:bg-brand-accent/5 rounded-full blur-3xl" />
      </div>

      {/* Back to home */}
      <motion.div
        initial={{ opacity: 0, x: -10 }}
        animate={{ opacity: 1, x: 0 }}
        transition={{ duration: 0.5, ease: 'easeOut' }}
        className="absolute top-6 left-6 z-20"
      >
        <Link
          href="/"
          className="inline-flex items-center gap-2 text-brand-dark/50 dark:text-white/50 hover:text-brand-dark dark:hover:text-white transition-colors text-[11px] font-bold uppercase tracking-widest"
        >
          <ChevronLeft size={16} />
          {t('common.backToHome')}
        </Link>
      </motion.div>

      {/* Form container */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6, ease: 'easeOut', delay: 0.1 }}
        className="relative z-10 w-full max-w-md"
      >
        <Suspense fallback={<LoadingFallback />}>
          <LoginForm />
        </Suspense>
      </motion.div>
    </div>
  );
}
