'use client';

import { Suspense } from 'react';
import { LoginForm } from '@/components/auth/login-form';

function LoginContent() {
  return (
    <div className="min-h-screen flex">
      {/* Left side - Branding (hidden on mobile) */}
      <div className="hidden lg:flex lg:w-1/2 flex-col justify-center items-center p-12 text-white">
        <div className="max-w-md text-center">
          {/* Logo */}
          <div className="mb-8 flex justify-center">
            <div className="w-24 h-24 bg-white/10 backdrop-blur-sm rounded-2xl flex items-center justify-center border border-white/20">
              <svg
                viewBox="0 0 100 100"
                className="w-16 h-16 text-white"
                fill="currentColor"
              >
                {/* Padel racket stylized icon */}
                <ellipse cx="50" cy="40" rx="28" ry="35" fill="none" stroke="currentColor" strokeWidth="4" />
                <line x1="50" y1="75" x2="50" y2="95" stroke="currentColor" strokeWidth="6" strokeLinecap="round" />
                <circle cx="35" cy="30" r="3" />
                <circle cx="50" cy="25" r="3" />
                <circle cx="65" cy="30" r="3" />
                <circle cx="35" cy="45" r="3" />
                <circle cx="50" cy="40" r="3" />
                <circle cx="65" cy="45" r="3" />
                <circle cx="42" cy="55" r="3" />
                <circle cx="58" cy="55" r="3" />
              </svg>
            </div>
          </div>

          {/* Title */}
          <h1 className="text-4xl font-bold mb-4">Padel Pro</h1>

          {/* Tagline */}
          <p className="text-xl text-primary-200 mb-8">
            Sistema de Gestion para Clubes de Padel
          </p>

          {/* Features */}
          <div className="space-y-4 text-left">
            <div className="flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-lg p-4">
              <div className="w-10 h-10 bg-accent/20 rounded-lg flex items-center justify-center flex-shrink-0">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-5 w-5 text-accent-300"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    fillRule="evenodd"
                    d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
                    clipRule="evenodd"
                  />
                </svg>
              </div>
              <div>
                <p className="font-medium">Gestion de Reservas</p>
                <p className="text-sm text-primary-300">Administra tus canchas y horarios</p>
              </div>
            </div>

            <div className="flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-lg p-4">
              <div className="w-10 h-10 bg-accent/20 rounded-lg flex items-center justify-center flex-shrink-0">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-5 w-5 text-accent-300"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
                </svg>
              </div>
              <div>
                <p className="font-medium">Control de Clientes</p>
                <p className="text-sm text-primary-300">Membresias y perfiles completos</p>
              </div>
            </div>

            <div className="flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-lg p-4">
              <div className="w-10 h-10 bg-accent/20 rounded-lg flex items-center justify-center flex-shrink-0">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-5 w-5 text-accent-300"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
                </svg>
              </div>
              <div>
                <p className="font-medium">Reportes y Estadisticas</p>
                <p className="text-sm text-primary-300">Analiza el rendimiento de tu club</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Right side - Login Form */}
      <div className="w-full lg:w-1/2 flex flex-col justify-center items-center p-6 lg:p-12">
        {/* Mobile Logo */}
        <div className="lg:hidden mb-8 text-center text-white">
          <div className="w-16 h-16 mx-auto mb-4 bg-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center border border-white/20">
            <svg
              viewBox="0 0 100 100"
              className="w-10 h-10 text-white"
              fill="currentColor"
            >
              <ellipse cx="50" cy="40" rx="28" ry="35" fill="none" stroke="currentColor" strokeWidth="4" />
              <line x1="50" y1="75" x2="50" y2="95" stroke="currentColor" strokeWidth="6" strokeLinecap="round" />
              <circle cx="35" cy="30" r="3" />
              <circle cx="50" cy="25" r="3" />
              <circle cx="65" cy="30" r="3" />
              <circle cx="35" cy="45" r="3" />
              <circle cx="50" cy="40" r="3" />
              <circle cx="65" cy="45" r="3" />
              <circle cx="42" cy="55" r="3" />
              <circle cx="58" cy="55" r="3" />
            </svg>
          </div>
          <h1 className="text-2xl font-bold">Padel Pro</h1>
          <p className="text-sm text-primary-200 mt-1">Sistema de Gestion para Clubes de Padel</p>
        </div>

        <LoginForm />

        {/* Footer */}
        <p className="mt-8 text-center text-sm text-primary-300">
          &copy; {new Date().getFullYear()} Padel Pro. Todos los derechos reservados.
        </p>
      </div>
    </div>
  );
}

export default function LoginPage() {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen flex items-center justify-center">
          <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-white"></div>
        </div>
      }
    >
      <LoginContent />
    </Suspense>
  );
}