'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-primary/20 backdrop-blur-sm rounded-2xl flex items-center justify-center border border-primary-300/30">
              <svg viewBox="0 0 100 100" className="w-16 h-16 text-white" fill="none">
                {/* Lightning bolt / smash icon */}
                <path d="M55 10L20 55h25l-10 35L70 45H45l10-35z" fill="currentColor" />
                {/* Impact sparks */}
                <circle cx="78" cy="18" r="4" fill="currentColor" opacity="0.8" />
                <circle cx="85" cy="28" r="2.5" fill="currentColor" opacity="0.6" />
                <circle cx="72" cy="10" r="2" fill="currentColor" opacity="0.5" />
              </svg>
            </div>
          </div>

          {/* Title */}
          <h1 className="text-4xl font-bold mb-4">Cabo Pickleball Club</h1>
          <p className="text-sm text-primary-300 mb-2">Powered by SmashPoint</p>

          {/* Tagline */}
          <p className="text-xl text-primary-200 mb-8">
            Court Management System
          </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">Court Bookings</p>
                <p className="text-sm text-primary-300">Manage your courts and schedules</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">Player Management</p>
                <p className="text-sm text-primary-300">Memberships and player profiles</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">Reports & Analytics</p>
                <p className="text-sm text-primary-300">Analyze your club's performance</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-primary/20 backdrop-blur-sm rounded-xl flex items-center justify-center border border-primary-300/30">
            <svg viewBox="0 0 100 100" className="w-10 h-10 text-white" fill="none">
              <path d="M55 10L20 55h25l-10 35L70 45H45l10-35z" fill="currentColor" />
              <circle cx="78" cy="18" r="4" fill="currentColor" opacity="0.8" />
              <circle cx="85" cy="28" r="2.5" fill="currentColor" opacity="0.6" />
              <circle cx="72" cy="10" r="2" fill="currentColor" opacity="0.5" />
            </svg>
          </div>
          <h1 className="text-2xl font-bold">Cabo Pickleball Club</h1>
          <p className="text-sm text-primary-200 mt-1">Court Management System</p>
        </div>

        <LoginForm />

        {/* Footer */}
        <p className="mt-8 text-center text-sm text-primary-300">
          &copy; {new Date().getFullYear()} SmashPoint. All rights reserved.
        </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>
  );
}