'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import Image from 'next/image';

export default function Home() {
  const [vehicleNumber, setVehicleNumber] = useState('');
  const router = useRouter();

  const handleGuestLogin = (e: React.FormEvent) => {
    e.preventDefault();
    if (vehicleNumber.trim()) {
      // Navigate to vehicle status page
      router.push(`/vehicle/${encodeURIComponent(vehicleNumber.trim().toUpperCase())}`);
    }
  };

  return (
    <div className="relative min-h-screen bg-black tech-grid scanlines">
      {/* Animated background elements */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-white/5 blur-3xl animate-pulse"></div>
        <div className="absolute bottom-1/4 right-1/4 h-96 w-96 rounded-full bg-white/5 blur-3xl animate-pulse delay-1000"></div>
      </div>

      <div className="relative mx-auto flex min-h-[calc(100vh-80px)] max-w-4xl flex-col items-center justify-center px-4 py-12">
        {/* Main Content */}
        <div className="w-full max-w-md space-y-8">
          {/* Welcome Section */}
          <div className="text-center">
            <div className="mb-8 flex justify-center">
              <div className="relative">
                <Image
                  src="/100kmphlogo.png"
                  alt="100kmph Logo"
                  width={200}
                  height={200}
                  className="rounded"
                  priority
                />
                <div className="absolute inset-0 rounded bg-white/10 blur-xl"></div>
              </div>
            </div>
            <p className="text-lg text-white/70 font-mono">
              CHECK YOUR VEHICLE SERVICE STATUS OR BOOK A NEW APPOINTMENT
            </p>
          </div>

          {/* Guest Login Card */}
          <div className="relative rounded-lg border-2 border-white/30 bg-black/80 backdrop-blur-sm p-8 neon-border-glow">
            <div className="absolute inset-0 rounded-lg bg-gradient-to-br from-white/5 to-transparent"></div>
            <div className="relative">
              <div className="mb-2 flex items-center gap-2">
                <div className="h-2 w-2 rounded-full bg-white animate-pulse"></div>
                <h2 className="text-2xl font-bold text-white uppercase tracking-wider">
                  Guest Login
                </h2>
              </div>
              <p className="mb-6 text-sm text-white/60 font-mono">
                ENTER YOUR VEHICLE NUMBER TO CHECK SERVICE STATUS
              </p>
              
              <form onSubmit={handleGuestLogin} className="space-y-4">
                <div>
                  <label
                    htmlFor="vehicleNumber"
                    className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
                  >
                    Vehicle Number
                  </label>
                  <input
                    id="vehicleNumber"
                    type="text"
                    value={vehicleNumber}
                    onChange={(e) => setVehicleNumber(e.target.value.toUpperCase())}
                    placeholder="ABC-1234"
                    className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 text-lg font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
                    required
                  />
                </div>
                
                <button
                  type="submit"
                  className="w-full rounded-lg border-2 border-white/30 bg-white/5 px-6 py-3 text-lg font-bold uppercase tracking-wider text-white transition-all hover:bg-white/10 hover:border-white/50 hover:text-gray-200 hover:shadow-[0_0_20px_rgba(255,255,255,0.3)] focus:outline-none focus:ring-2 focus:ring-white/30"
                >
                  Login
                </button>
              </form>
            </div>
          </div>

          {/* New Appointment Button */}
          <div className="text-center">
            <p className="mb-4 text-sm text-white/50 font-mono uppercase">or</p>
            <Link
              href="/appointment"
              className="inline-block w-full rounded-lg border-2 border-white/30 bg-black/50 px-6 py-3 text-lg font-bold uppercase tracking-wider text-white transition-all hover:bg-white/10 hover:border-white/50 hover:shadow-[0_0_20px_rgba(255,255,255,0.3)] focus:outline-none focus:ring-2 focus:ring-white/30"
            >
              Make a New Appointment
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}