"use client";
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Header from "../../components/partials/header";
import { useTheme } from "../../context/ThemeContext";

export default function MultiBooking() {
  const { darkMode } = useTheme();
  const router = useRouter();
  const [appointmentDate, setAppointmentDate] = useState(new Date().toISOString().split('T')[0]);
  const [patients, setPatients] = useState(
    Array(5).fill().map((_, i) => ({ id: i+1, name: "" }))
  );
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleNameChange = (id, value) => {
    setPatients(patients.map(p => 
      p.id === id ? { ...p, name: value } : p
    ));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    try {
      // Filter out empty names and validate
      const validPatients = patients.filter(p => p.name.trim() !== "");
      if (validPatients.length === 0) {
        throw new Error("Please enter at least one patient name");
      }

      // Store in session to use in MultiBooked page
      sessionStorage.setItem('multiBookingData', JSON.stringify({
        date: appointmentDate,
        patients: validPatients
      }));

      router.push('/pages/MultiBooked');
    } catch (error) {
      setError(error.message);
    } finally {
      setLoading(false);
    }
  };

  const addMorePatients = () => {
    const newId = patients.length > 0 ? 
      Math.max(...patients.map(p => p.id)) + 1 : 1;
    setPatients([...patients, { id: newId, name: "" }]);
  };

  return (
    <div className={`flex h-screen overflow-hidden ${darkMode ? 'dark bg-gray-900' : 'bg-white'}`}>
      {/* Content Area */}
      <div className="relative flex flex-1 flex-col overflow-x-hidden overflow-y-auto">
        {/* Sticky Header */}
        <header className="sticky top-0 z-50 bg-white shadow-sm dark:bg-gray-800">
          <div className="flex items-center justify-between p-4">
            <Header />
          </div>
        </header>

        {/* Main Content */}
        <main className="flex-1 overflow-y-auto">
          <div className="mx-auto max-w-[--breakpoint-2xl] p-4 md:p-6 pt-20">
            {error && (
              <div className="mb-4 p-4 bg-red-100 text-red-700 rounded-md">
                {error}
              </div>
            )}

            <div className="mb-6">
              <h2 className={`text-2xl mb-2 ${darkMode ? 'text-white' : 'text-black'}`}>
                Staff Multi-Booking
              </h2>
              <div className="flex items-center">
                <label className={`mr-2 ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
                  Date:
                </label>
                <input
                  type="date"
                  value={appointmentDate}
                  onChange={(e) => setAppointmentDate(e.target.value)}
                  className={`p-1 border rounded ${darkMode ? 'bg-gray-800 text-white border-gray-700' : 'bg-white'}`}
                />
              </div>
            </div>
            
            <form onSubmit={handleSubmit} className="max-w-2xl mx-auto my-8">
              <div className="space-y-4 mb-6">
                {patients.map((patient) => (
                  <div key={patient.id} className="flex items-center gap-3">
                    <span className={`w-6 text-right ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
                      {patient.id}.
                    </span>
                    <input
                      type="text"
                      value={patient.name}
                      onChange={(e) => handleNameChange(patient.id, e.target.value)}
                      placeholder="Patient name"
                      className={`flex-1 shadow-theme-xs h-11 rounded-lg border px-4 py-2.5 text-sm focus:outline-none focus:ring-2 ${
                        darkMode ? 
                        'bg-gray-800 border-gray-700 text-white placeholder-gray-500 focus:border-blue-800 focus:ring-blue-800/30' : 
                        'bg-white border-gray-300 text-gray-800 placeholder-gray-400 focus:border-blue-300 focus:ring-blue-500/10'
                      }`}
                    />
                    {patient.id > 5 && (
                      <button
                        type="button"
                        onClick={() => setPatients(patients.filter(p => p.id !== patient.id))}
                        className={`p-2 rounded-full ${
                          darkMode ? 'text-red-400 hover:bg-gray-700' : 'text-red-500 hover:bg-gray-100'
                        }`}
                      >
                        ✕
                      </button>
                    )}
                  </div>
                ))}
              </div>

              <div className="flex flex-wrap gap-3 mb-6">
                <button
                  type="button"
                  onClick={addMorePatients}
                  className={`px-4 py-2 rounded-lg text-sm font-medium ${
                    darkMode ? 
                    'bg-gray-700 text-white hover:bg-gray-600' : 
                    'bg-gray-200 text-gray-700 hover:bg-gray-300'
                  }`}
                >
                  + Add More Patients
                </button>
                <div className="text-sm text-gray-500 dark:text-gray-400 mt-1">
                  {patients.length} patients entered
                </div>
              </div>

              <div className="flex flex-col gap-4 md:flex-row w-full">
                <button
                  type="submit"
                  disabled={loading}
                  className={`text-center rounded-lg px-5 py-3.5 text-sm font-medium text-white shadow-theme-xs transition w-full ${
                    loading ? 'bg-blue-400 cursor-not-allowed' : 'bg-blue-700 hover:bg-blue-600'
                  }`}
                >
                  {loading ? 'Processing...' : 'Generate Tokens'}
                </button>
                <button
                  type="button"
                  onClick={() => router.push('/entries')}
                  className={`text-center rounded-lg px-5 py-3.5 text-sm font-medium shadow-theme-xs ring-1 ring-inset transition w-full ${
                    darkMode ? 
                    'bg-gray-800 text-gray-300 ring-gray-700 hover:bg-gray-700' : 
                    'bg-white text-gray-700 ring-gray-300 hover:bg-gray-50'
                  }`}
                >
                  View All Entries
                </button>
              </div>
            </form>
            
            <div className={`text-center mt-8 text-sm ${
              darkMode ? 'text-gray-400' : 'text-gray-600'
            }`}>
              <p>Staff can book multiple tokens at once. All tokens will be assigned for the same date.</p>
              <p className="mt-1">Minimum 1 patient required. Maximum 20 patients per batch.</p>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}