"use client";
import { useState, useEffect } from "react";
import { databases, ID, Query } from "../../lib/appwrite";
import { DATABASE_ID, COLLECTION_ID } from "../../lib/api";
import Header from "../../components/partials/header";
import { useTheme } from "../../context/ThemeContext";

export default function MultiBooked() {
  const { darkMode } = useTheme();
  const [appointmentDate, setAppointmentDate] = useState(new Date().toISOString().split('T')[0]);
  const [bookings, setBookings] = useState([
    { id: 1, name: "", tokenNumber: "" },
    { id: 2, name: "", tokenNumber: "" },
    { id: 3, name: "", tokenNumber: "" },
    { id: 4, name: "", tokenNumber: "" },
    { id: 5, name: "", tokenNumber: "" }
  ]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const bookingData = sessionStorage.getItem('multiBookingData');
    if (bookingData) {
      const { date, patients } = JSON.parse(bookingData);
      setAppointmentDate(date);
      setBookings(patients.map(p => ({ ...p, tokenNumber: "" })));
      sessionStorage.removeItem('multiBookingData');
    }
  }, []);

//  ------------------create entries--------------------------------
const createEntries = async () => {
  setLoading(true);
  setError(null);

  try {
    const validBookings = bookings.filter(b => b.name.trim() !== "");

    if (validBookings.length === 0) {
      throw new Error("Please enter at least one patient name");
    }

    // Step 1: Get the highest token number
    const response = await databases.listDocuments(
      DATABASE_ID,
      COLLECTION_ID,
      [Query.orderDesc('tokenNumber'), Query.limit(1)]
    );

    let lastTokenNum = response.documents[0] 
      ? parseInt(response.documents[0].tokenNumber) 
      : 0;

    // Step 2: Prepare all token numbers first
    const tokenAssignments = validBookings.map((_, index) => {
      return (lastTokenNum + index + 1).toString().padStart(3, '0');
    });

    // Step 3: Create documents and update state
    const updatedBookings = [...bookings];
    let bookingIndex = 0;

    for (let i = 0; i < bookings.length; i++) {
      if (bookings[i].name.trim() !== "") {
        await databases.createDocument(
          DATABASE_ID,
          COLLECTION_ID,
          ID.unique(),
          {
            tokenNumber: tokenAssignments[bookingIndex],
            patientName: bookings[i].name,
            date: appointmentDate,
            bookedBy: "staff",
            status: "booked",
            patientId: ID.unique(),
          }
        );

        updatedBookings[i].tokenNumber = tokenAssignments[bookingIndex];
        bookingIndex++;
      }
    }

    setBookings(updatedBookings);
    alert(`${validBookings.length} tokens created successfully!`);
  } catch (error) {
    console.error("Creation error:", error);
    setError(error.message);
  } finally {
    setLoading(false);
  }
};

  const handleNameChange = (id, value) => {
    setBookings(bookings.map(b =>
      b.id === id ? { ...b, name: value } : b
    ));
  };

  return (
    <div className={`flex h-screen overflow-hidden ${darkMode ? 'bg-gray-900' : 'bg-white'}`}>
      <div className="relative flex flex-col flex-1 overflow-x-hidden overflow-y-auto">
        <Header />

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

            <div className="mb-8">
              <h2 className={`text-2xl mb-4 ${darkMode ? 'text-white' : 'text-black'}`}>
                Staff Multi-Booking
              </h2>
              <div className="mb-4">
                <label htmlFor="appointmentDate" className={`block mb-2 ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
                  Date:
                </label>
                <input
                  type="date"
                  id="appointmentDate"
                  value={appointmentDate}
                  onChange={(e) => setAppointmentDate(e.target.value)}
                  className={`p-2 border rounded ${darkMode ? 'bg-gray-800 text-white border-gray-700' : 'bg-white'}`}
                />
              </div>
            </div>

            <div className="max-w-2xl mx-auto my-8">
              <div className="space-y-4 mb-8">
                {bookings.map((booking) => (
                  <div key={booking.id} className="flex flex-col md:flex-row gap-4 items-center">
                    <div className="w-full md:w-3/4">
                      <label className={`block mb-1 ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
                        Patient {booking.id} Name:
                      </label>
                      <input
                        type="text"
                        value={booking.name}
                        onChange={(e) => handleNameChange(booking.id, e.target.value)}
                        placeholder="Enter patient name"
                        className={`w-full p-2 border rounded ${darkMode ? 'bg-gray-800 text-white border-gray-700' : 'bg-white'}`}
                      />
                    </div>
                    <div className="w-full md:w-1/4">
                      <label className={`block mb-1 ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
                        Token:
                      </label>
                      <div className={`p-2 font-mono text-center rounded ${darkMode ? 'bg-gray-800 text-blue-400' : 'bg-blue-50 text-blue-800'}`}>
                        {booking.tokenNumber || "---"}
                      </div>
                    </div>
                  </div>
                ))}
              </div>

              <div className="flex flex-col gap-4 md:flex-row w-full">
                <button
                  onClick={createEntries}
                  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 ? 'Creating Tokens...' : 'Create Tokens'}
                </button>
                <a href="/pages/entries" className="w-full">
                  <button
                    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>
                </a>
              </div>
            </div>

            <div className={`text-center mt-8 ${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>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}