'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Head from 'next/head';
import Preloader from '../../components/partials/preloaders';
import Overlay from '../../components/partials/overlay';
import Header from '../../components/partials/header';

export default function SingleBooking() {
  const [darkMode, setDarkMode] = useState(false);
  const [loaded, setLoaded] = useState(false);
  const [name, setName] = useState('');
  const router = useRouter();

  useEffect(() => {
    const savedDarkMode = JSON.parse(localStorage.getItem('darkMode'));
    if (savedDarkMode !== null) {
      setDarkMode(savedDarkMode);
    }
    setLoaded(true);
  }, []);

  useEffect(() => {
    localStorage.setItem('darkMode', JSON.stringify(darkMode));
  }, [darkMode]);

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

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

    // Get current date in YYYY-MM-DD format
    const today = new Date();
    const appointmentDate = today.toISOString().split('T')[0];
    
    // Navigate to confirmation page with name and current date as query params
    router.push(`/pages/SingleBooked?name=${encodeURIComponent(name)}&date=${encodeURIComponent(appointmentDate)}`);
  };

  if (!loaded) {
    return <Preloader />;
  }

  return (
    <div className={`flex flex-col min-h-screen ${darkMode ? 'dark bg-gray-900' : ''}`}>
      <Head>
        <title>Book Appointment</title>
        <meta charSet="UTF-8" />
        <meta
          name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
        />
        <meta httpEquiv="X-UA-Compatible" content="ie=edge" />
      </Head>

      <div className="flex h-screen overflow-hidden">
        <div className="relative flex flex-col flex-1 overflow-x-hidden overflow-y-auto">
          <Overlay />

          <div className="flex bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50 w-full">
            <Header />
          </div>

          <main>
            <div className="p-4 mx-auto max-w-4xl md:p-6">
              <h2 className="text-2xl font-semibold mb-6 text-gray-800 dark:text-white">Book Appointment</h2>

              <form onSubmit={handleSubmit} className="space-y-6">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-400 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 bg-white dark:bg-gray-900 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-700 px-5 py-3.5 text-sm font-medium text-white hover:bg-blue-800 transition duration-200"
                >
                  Submit
                </button>
              </form>

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