"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Calendar, Clock, Save, X, AlertTriangle } from "lucide-react";

export default function AddBookingPage() {
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(false);

  // State untuk form input
  const [formData, setFormData] = useState({
    room: "Ruang T-301",
    date: "",
    startTime: "",
    endTime: "",
    purpose: "",
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  // --- LOGIKA VALIDASI (Business Logic) ---
  const validateBookingRules = () => {
    // 1. Cek kelengkapan data dasar
    if (!formData.date || !formData.startTime || !formData.endTime) {
      alert("Mohon lengkapi Tanggal dan Jam terlebih dahulu.");
      return false;
    }

    // 2. Ambil Jam Mulai
    const startHour = parseInt(formData.startTime.split(":")[0]);
    
    // 3. Cek Jam Khusus (Diatas 21:00 ATAU Sebelum 06:00)
    const isSpecialTime = startHour >= 21 || startHour < 6;

    if (isSpecialTime) {
      const bookingDate = new Date(formData.date);
      const today = new Date();
      
      // Reset jam agar perhitungan murni berdasarkan tanggal
      bookingDate.setHours(0, 0, 0, 0);
      today.setHours(0, 0, 0, 0);

      // Hitung selisih hari
      const diffTime = bookingDate.getTime() - today.getTime();
      const diffDays = diffTime / (1000 * 3600 * 24);

      // ATURAN: Harus H-3
      if (diffDays < 3) {
        alert(
          `Gagal! Peminjaman di jam khusus (${formData.startTime}) harus dilakukan minimal 3 hari sebelumnya.\n\n` +
          `Jarak peminjaman Anda: ${diffDays} hari dari sekarang.`
        );
        return false;
      }
    }

    return true;
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    // Jalankan validasi
    if (!validateBookingRules()) return;

    setIsLoading(true);

    // --- MOCK API CALL ---
    console.log("Mengirim Data:", formData);

    setTimeout(() => {
      alert("Berhasil! Jadwal telah disimpan.");
      setIsLoading(false);
      // Redirect kembali ke halaman List Booking
      router.push("/dashboard/bookings");
    }, 1500);
  };

  return (
    <div className="mx-auto max-w-270">
      {/* Header Halaman */}
      <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <h2 className="text-2xl font-bold text-black">
          Buat Peminjaman Baru
        </h2>
        <nav>
          <ol className="flex items-center gap-2 text-sm">
            <li><a className="font-medium text-gray-500" href="/dashboard/bookings">Booking /</a></li>
            <li className="font-medium text-yellow-500">Add</li>
          </ol>
        </nav>
      </div>

      {/* Form Container */}
      <div className="rounded-xl border border-stroke bg-white shadow-sm border-gray-200 dark:bg-boxdark">
        <div className="border-b border-stroke py-4 px-6.5 border-gray-200">
          <h3 className="font-medium text-black ">
            Formulir Pengajuan Jadwal
          </h3>
        </div>
        
        <form onSubmit={handleSubmit}>
          <div className="p-6.5">
            
            {/* --- Baris 1: Ruangan & Tanggal --- */}
            <div className="mb-4.5 flex flex-col gap-6 xl:flex-row">
              {/* Input Ruangan */}
              <div className="w-full xl:w-1/2">
                <label className="mb-2.5 block text-black  font-medium">
                  Pilih Ruangan <span className="text-red-500">*</span>
                </label>
                <div className="relative z-20 bg-white border border-gray-300 text-gray-900 focus:ring-yellow-500">
                  <select
                    name="room"
                    value={formData.room}
                    onChange={handleChange}
                    className="relative z-20 w-full appearance-none rounded border border-stroke bg-transparent py-3 px-5 outline-none transition focus:border-yellow-500 active:border-yellow-500 dark:border-form-strokedark dark:bg-form-input dark:focus:border-yellow-500 text-black "
                  >
                    <option value="Ruang T-301">Ruang T-301 (Teori)</option>
                    <option value="Ruang T-302">Ruang T-302 (Teori)</option>
                    <option value="Lab Kendali">Lab Sistem Kendali</option>
                    <option value="Lab IoT">Lab IoT & Embedded</option>
                    <option value="Ruang Sidang">Ruang Sidang TA</option>
                  </select>
                  <span className="absolute top-1/2 right-4 z-30 -translate-y-1/2">
                    <svg className="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.98438 9.98438H17.0156C17.3781 9.98438 17.5656 10.4219 17.3094 10.6781L12.3094 15.6781C12.1406 15.8469 11.8594 15.8469 11.6906 15.6781L6.69062 10.6781C6.43438 10.4219 6.62188 9.98438 6.98438 9.98438Z" fill="gray" /></svg>
                  </span>
                </div>
              </div>

              {/* Input Tanggal */}
              <div className="w-full xl:w-1/2">
                <label className="mb-2.5 block text-black  font-medium">
                  Tanggal Peminjaman <span className="text-red-500">*</span>
                </label>
                <div className="relative">
                  <input
                    type="date"
                    name="date"
                    required
                    value={formData.date}
                    onChange={handleChange}
                    className="w-full rounded border border-stroke bg-gray-50 py-3 pl-11.5 pr-4.5 text-black focus:border-yellow-500 focus-visible:outline-none border-gray-200  dark:focus:border-yellow-500"
                  />
                  <Calendar className="absolute left-4.5 top-3 text-gray-400" size={20} />
                </div>
              </div>
            </div>

            {/* --- Baris 2: Waktu Mulai & Selesai --- */}
            <div className="mb-4.5 flex flex-col gap-6 xl:flex-row">
              <div className="w-full xl:w-1/2">
                <label className="mb-2.5 block text-black  font-medium">
                  Waktu Mulai <span className="text-red-500">*</span>
                </label>
                <div className="relative">
                  <input
                    type="time"
                    name="startTime"
                    required
                    value={formData.startTime}
                    onChange={handleChange}
                    className="w-full rounded border border-stroke bg-gray-50 py-3 pl-11.5 pr-4.5 text-black focus:border-yellow-500 focus-visible:outline-none border-gray-200  dark:focus:border-yellow-500"
                  />
                  <Clock className="absolute left-4.5 top-3 text-gray-400" size={20} />
                </div>
                {/* Info Validasi */}
                <p className="mt-2 text-xs text-orange-500 flex items-center gap-1">
                  <AlertTriangle size={12} />
                  Peminjaman jam 21:00 - 06:00 wajib H-3.
                </p>
              </div>

              <div className="w-full xl:w-1/2">
                <label className="mb-2.5 block text-black  font-medium">
                  Waktu Selesai <span className="text-red-500">*</span>
                </label>
                <div className="relative">
                  <input
                    type="time"
                    name="endTime"
                    required
                    value={formData.endTime}
                    onChange={handleChange}
                    className="w-full rounded border border-stroke bg-gray-50 py-3 pl-11.5 pr-4.5 text-black focus:border-yellow-500 focus-visible:outline-none border-gray-200  dark:focus:border-yellow-500"
                  />
                  <Clock className="absolute left-4.5 top-3 text-gray-400" size={20} />
                </div>
              </div>
            </div>

            {/* --- Baris 3: Keperluan --- */}
            <div className="mb-6">
              <label className="mb-2.5 block text-black  font-medium">
                Keperluan / Mata Kuliah <span className="text-red-500">*</span>
              </label>
              <textarea
                rows={4}
                name="purpose"
                required
                placeholder="Jelaskan keperluan peminjaman ruang..."
                value={formData.purpose}
                onChange={handleChange}
                className="w-full rounded border border-stroke bg-transparent py-3 px-5 text-black outline-none transition focus:border-yellow-500 active:border-yellow-500 dark:border-form-strokedark dark:bg-form-input  dark:focus:border-yellow-500"
              ></textarea>
            </div>

            {/* --- Tombol Aksi --- */}
            <div className="flex gap-4 justify-end">
              <button
                type="button"
                onClick={() => router.push("/dashboard/bookings")}
                className="flex items-center justify-center gap-2 rounded border border-stroke py-2.5 px-6 font-medium text-black hover:shadow-1 border-gray-200  transition-all hover:bg-gray-100"
              >
                <X size={18} />
                Batal
              </button>
              
              <button
                type="submit"
                disabled={isLoading}
                className={`flex items-center justify-center gap-2 rounded bg-yellow-500 py-2.5 px-6 font-medium text-white hover:bg-yellow-600 transition-all ${
                  isLoading ? "opacity-70 cursor-not-allowed" : ""
                }`}
              >
                {isLoading ? (
                  "Menyimpan..."
                ) : (
                  <>
                    <Save size={18} />
                    Simpan Jadwal
                  </>
                )}
              </button>
            </div>

          </div>
        </form>
      </div>
    </div>
  );
}