/* eslint-disable react-hooks/rules-of-hooks */
/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import { FiX } from "react-icons/fi";
import styles from "../modal-styles.module.scss";
import { usePage } from "@inertiajs/react";

export default function AssignAppointmentModal({
  isOpen,
  onClose,
  onAssign,
  month,
  year,
  setMonth,
  setYear,
  selectedDate,
  setSelectedDate,
  showCalendar,
  setShowCalendar,
  form,
  handleChange,
  CalendarUI,
}: any) {
  if (!isOpen) return null;

const { props }: any = usePage();
const errors = props.errors || {};
const error = props.error;
console.log(errors, error)
 
  return (
    <div className={styles.modalBackdrop}>
      <div className={styles.modalContent}>
        {/* ================= HEADER ================= */}
        <div className={styles.modalHeader}>
          <h2>Assign Appointment</h2>
          <p>Assign a date and time to confirm this appointment</p>

          <button className={styles.closeBtn} onClick={onClose}>
            <FiX size={16} />
          </button>
        </div>

        {/* ================= FORM ================= */}
        <div className={styles.modalForm}>
          
          {/* DATE */}
          <div className={styles.formGroup}>
            <label>Select Date *</label>

            <div
              className={styles.dateDisplay}
              onClick={() => setShowCalendar((p: boolean) => !p)}
            >
              {selectedDate
                ? new Date(year, month, selectedDate).toLocaleDateString(
                    "en-US",
                    {
                      weekday: "short",
                      day: "numeric",
                      month: "short",
                      year: "numeric",
                    }
                  )
                : "Select date"}
            </div>
              {errors.assigned_date && (
                <span className={styles.error}>
                    {errors.assigned_date}
                </span>
            )}


            {showCalendar && (
              <div className={styles.calendarDropdown}>
                <CalendarUI
                  month={month}
                  year={year}
                  setMonth={setMonth}
                  setYear={setYear}
                  handleSelect={(d: number) => {
                    setSelectedDate(d);
                    setShowCalendar(false);
                  }}
                />
              </div>
            )}
          </div>

          {/* TIME */}
          <div className={styles.formGroup}>
            <label>Select Time *</label>

            <div style={{ display: "flex", gap: "0.5rem" }}>
              {/* HOURS */}
              <select
                value={form.hour}
                onChange={(e) => handleChange("hour", e.target.value)}
              >
                {[...Array(12)].map((_, i) => {
                  const val = String(i + 1).padStart(2, "0");
                  return <option key={val}>{val}</option>;
                })}
              </select>

              {/* MINUTES */}
              <select
                value={form.minute}
                onChange={(e) => handleChange("minute", e.target.value)}
              >
                {[...Array(60)].map((_, i) => {
                  const val = String(i).padStart(2, "0");
                  return <option key={val}>{val}</option>;
                })}
              </select>

              {/* AM/PM */}
              <select
                value={form.period}
                onChange={(e) => handleChange("period", e.target.value)}
              >
                <option>AM</option>
                <option>PM</option>
              </select>
            </div>
            {errors.assigned_time && (
                <span className={styles.error}>
                    {errors.assigned_time}
                    </span>
                )}
          </div>

          {/* INFO */}
          <div className={styles.infoBox}>
            <span>
              The member will be notified once this appointment is assigned.
            </span>
          </div>

          {/* ACTION */}
          <button
            className={styles.submitBtn}
            onClick={onAssign}
            disabled={!selectedDate}
          >
            Assign Appointment
          </button>
        </div>
      </div>
    </div>
  );
}