/* eslint-disable react-hooks/rules-of-hooks */
"use client";

/* eslint-disable @typescript-eslint/no-explicit-any */

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

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

  const { props }: any = usePage();
  const errors = props.errors || {};
  const error = props.error;

  const formatDate = (date: string) => {
    if (!date) return "Not assigned";
    return new Date(date).toLocaleDateString("en-US", {
      weekday: "short",
      day: "numeric",
      month: "short",
      year: "numeric",
    });
  };

  return (
    <div className={styles.modalBackdrop}>
      <div className={styles.modalContent}>
        {/* ================= HEADER ================= */}
        <div className={styles.modalHeader}>
          <div>
            <h2>Reschedule Appointment</h2>
            <p>Update the date and time for this appointment</p>
          </div>

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

        {/* ================= GLOBAL ERROR ================= */}
        {error && <div className={styles.globalError}>{error}</div>}

        {/* ================= PREVIOUS SCHEDULE ================= */}
        <div className={styles.previousCard}>
          <h4>Current Schedule</h4>

          <div className={styles.prevRow}>
            <span>Date</span>
            <strong>{formatDate(appointment.assigned_date)}</strong>
          </div>

          <div className={styles.prevRow}>
            <span>Time</span>
            <strong>{appointment.assigned_time || "Not set"}</strong>
          </div>

          <div className={styles.prevRow}>
            <span>Venue</span>
            <strong>{appointment.venue || "Office"}</strong>
          </div>
        </div>

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

            <div
              className={`${styles.dateDisplay} ${
                errors.assigned_date ? styles.inputError : ""
              }`}
              onClick={() => setShowCalendar((p: boolean) => !p)}
            >
              {selectedDate
                ? new Date(year, month, selectedDate).toLocaleDateString(
                    "en-US",
                    {
                      weekday: "short",
                      day: "numeric",
                      month: "short",
                      year: "numeric",
                    }
                  )
                : "Select new 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>New Time *</label>

            <div style={{ gap: "10px", display: 'flex' }}
              className={`${styles.timeRow} ${
                errors.assigned_time ? styles.inputError : ""
              }`}
            >
              <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>

              <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>

              <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>

          {/* REASON */}
          <div className={styles.formGroup}>
            <label>Reason for Rescheduling *</label>

            <textarea
              placeholder="Provide a reason for rescheduling..."
              value={form.reason || ""}
              onChange={(e) =>
                handleChange("reason", e.target.value)
              }
              className={
                errors.reason ? styles.inputError : ""
              }
            />

            {errors.reason && (
              <span className={styles.error}>
                {errors.reason}
              </span>
            )}
          </div>

          {/* ACTION */}
          <button
            className={styles.submitBtn}
            onClick={onSubmit}
            disabled={!selectedDate}
          >
            Confirm Reschedule
          </button>
        </div>
      </div>
    </div>
  );
}