'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useTheme } from "../../context/ThemeContext";

export default function SingleBooking() {
  const [name, setName] = useState('');
  const router = useRouter();
  const { darkMode } = useTheme();

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!name) {
      alert('Please enter your name');
      return;
    }

    const today = new Date();
    const appointmentDate = today.toISOString().split('T')[0];
    router.push(`/pages/SingleBooked?name=${encodeURIComponent(name)}&date=${encodeURIComponent(appointmentDate)}`);
  };

  // Handle theme loading state (same as dashboard)
  if (darkMode === undefined) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-white dark:bg-gray-900">
        <div className="text-center">
          <div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${
            darkMode === true ? 'border-gray-100' : 'border-gray-900'
          }`}></div>
          <p className={`mt-4 text-lg font-semibold ${
            darkMode === true ? 'text-gray-100' : 'text-gray-900'
          }`}>
            Loading...
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className={`min-h-screen transition-colors duration-300 ${
      darkMode ? 'dark bg-gray-900' : 'bg-white'
    }`}>
      <div className="flex h-screen overflow-hidden">
        <div className="relative flex flex-col flex-1 overflow-x-hidden overflow-y-auto">
          <main>
            <div className="p-4 mx-auto max-w-4xl md:p-6">
              <h2 className="text-2xl font-semibold text-gray-800 dark:text-gray-100">
                Book Appointment
              </h2>
              <p className={`mb-6 dark:text-gray-300`}>
                Date: {new Date().toLocaleDateString('en-GB')}
              </p>

              <form onSubmit={handleSubmit} className="space-y-6">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
                    Full Name
                  </label>
                  <input
                    type="text"
                    placeholder="John Doe"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    className="h-11 w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2.5 text-sm text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                    required
                  />
                </div>

                <button
                  type="submit"
                  className="w-full rounded-lg bg-blue-600 dark:bg-blue-700 px-5 py-3.5 text-sm font-medium text-white hover:bg-blue-700 dark:hover:bg-blue-800 transition duration-200"
                >
                  Submit
                </button>
              </form>

              <div className="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
                Note: Token booking is available for today&apos;s date only.
              </div>
            </div>
          </main>
        </div>
      </div>
    </div>
  );
}