/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable prefer-const */
"use client";

import styles from "./create-event.module.scss";
import { useForm, router } from "@inertiajs/react";
import React from "react";

interface EventData {
  id?: any;
  name?: string;
  status?: string;
  description?: string;
  date?: string;
  time?: string;
  location?: string;
  reserved_slots?: number;
  total_slots?: number;
  fee_type?: string;
  price?: number;
  event_type?: string; // physical or virtual
}

interface CreateEventModalProps {
  closeModal: () => void;
  type: "add" | "update";
  event?: EventData | null;
}

const CreateEventModal: React.FC<CreateEventModalProps> = ({
  closeModal,
  type,
  event,
}) => {
  /** Converts 12-hour formatted time (e.g. "2:30 PM") to 24-hour format */
  const formatTimeTo24Hour = (timeStr?: string): string => {
    if (!timeStr) return "";
    const [time, modifier] = timeStr.split(" ");
    if (!modifier) return time;
    let [hours, minutes] = time.split(":");
    let hrs = parseInt(hours, 10);
    if (modifier.toLowerCase() === "pm" && hrs !== 12) hrs += 12;
    if (modifier.toLowerCase() === "am" && hrs === 12) hrs = 0;
    return `${String(hrs).padStart(2, "0")}:${minutes}`;
  };

  /** Normalize date to YYYY-MM-DD for input[type=date] */
  const formatDateForInput = (dateStr?: string): string => {
    if (!dateStr) return "";
    const d = new Date(dateStr);
    const year = d.getFullYear();
    const month = String(d.getMonth() + 1).padStart(2, "0");
    const day = String(d.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  };

  const { data, setData, post, put, processing, reset } = useForm({
    name: event?.name || "",
    status: event?.status || "upcoming",
    description: event?.description || "",
    date: formatDateForInput(event?.date),
    time: formatTimeTo24Hour(event?.time),
    location: event?.location || "",
    reserved_slots: event?.reserved_slots || 0,
    total_slots: event?.total_slots || 0,
    fee_type: event?.fee_type || "free",
    price: event?.price || 0,
    event_type: event?.event_type || "physical",
  });

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (type === "add") {
      post(route("admin_event_store"), {
        onSuccess: () => {
          reset();
          closeModal();
          router.reload({ only: ["flash"] });
        },
      });
      return;
    }

    if (type === "update" && event?.id) {
      put(route("admin_event_update", event.id), {
        onSuccess: () => {
          reset();
          closeModal();
          router.reload({ only: ["flash"] });
        },
      });
    }
  };

  return (
    <div className={styles["add__event"]}>
      <div className={styles["add__event__content"]}>
        <div
          onClick={closeModal}
          className={styles["add__event__content--close"]}
        >
          Close
        </div>

        <div className={styles["add__event__content--details"]}>
          <div className={styles["add__event__content--details--header"]}>
            <div
              className={
                styles["add__event__content--details--header--helper"]
              }
            >
              {type === "add" ? "Create" : "Update"}
            </div>

            <h2>{type === "add" ? "Create New Event" : "Update Event"}</h2>

            <p>
              {type === "add"
                ? "Create new event today. It will be available to users on your platform."
                : "Simply update the fields you want to change and submit."}
            </p>
          </div>

          <form onSubmit={handleSubmit}>
            {/* TITLE */}
            <div>
              <label htmlFor="title">Title *</label>
              <input
                type="text"
                id="title"
                placeholder="Enter event title"
                value={data.name}
                onChange={(e) => setData("name", e.target.value)}
                required
              />
            </div>

            {/* STATUS */}
            <div>
              <label htmlFor="status">Status *</label>
              <select
                id="status"
                value={data.status}
                onChange={(e) => setData("status", e.target.value)}
              >
                <option value="upcoming">Upcoming</option>
                <option value="on-going">Ongoing</option>
                <option value="completed">Completed</option>
              </select>
            </div>

            {/* DATE */}
            <div>
              <label htmlFor="date">Date *</label>
              <input
                type="date"
                id="date"
                value={data.date}
                onChange={(e) => setData("date", e.target.value)}
                required
              />
            </div>

            {/* TIME */}
            <div>
              <label htmlFor="time">Time *</label>
              <input
                type="time"
                id="time"
                value={data.time}
                onChange={(e) => setData("time", e.target.value)}
                required
              />
            </div>

            {/* LOCATION */}
            <div>
              <label htmlFor="location">Location *</label>
              <input
                type="text"
                id="location"
                placeholder="Enter event location"
                value={data.location}
                onChange={(e) => setData("location", e.target.value)}
                required
              />

              {/* 🔹 Helper text */}
              <small
                style={{
                  display: "block",
                  marginTop: "4px",
                  fontSize: "12px",
                  color: "#6b7280",
                }}
              >
                If this is a virtual event, simply type <strong>Online</strong> or{" "}
                <strong>Virtual</strong>.
              </small>
            </div>

            {/* EVENT TYPE */}
            <div>
              <label htmlFor="event_type">Event Type *</label>
              <select
                id="event_type"
                value={data.event_type}
                onChange={(e) => setData("event_type", e.target.value)}
                required
              >
                <option value="physical">Physical</option>
                <option value="virtual">Virtual</option>
              </select>
            </div>

            {/* TOTAL SLOTS */}
            <div>
              <label htmlFor="total_slots">Total Seats *</label>
              <input
                type="number"
                id="total_slots"
                value={data.total_slots}
                onChange={(e) => setData("total_slots", parseInt(e.target.value))}
                required
              />
            </div>

            {/* RESERVED SLOTS */}
            <div>
              <label htmlFor="reserved_slots">Seats Bought *</label>
              <input
                type="number"
                id="reserved_slots"
                value={data.reserved_slots}
                onChange={(e) =>
                  setData("reserved_slots", parseInt(e.target.value))
                }
                required
              />
            </div>

            {/* FEE TYPE */}
            <div>
              <label htmlFor="fee_type">Fee Type *</label>
              <select
                id="fee_type"
                value={data.fee_type}
                onChange={(e) => setData("fee_type", e.target.value)}
                required
              >
                <option value="free">Free</option>
                <option value="paid">Paid</option>
              </select>
            </div>

            {/* PRICE */}
            {data.fee_type === "paid" && (
              <div>
                <label htmlFor="price">Price *</label>
                <input
                  type="number"
                  id="price"
                  placeholder="Enter price"
                  value={data.price}
                  onChange={(e) =>
                    setData("price", parseFloat(e.target.value))
                  }
                  required
                />
              </div>
            )}

            {/* DESCRIPTION */}
            <div>
              <label htmlFor="description">Description *</label>
              <textarea
                id="description"
                placeholder="Enter event description"
                value={data.description}
                onChange={(e) => setData("description", e.target.value)}
                required
              />
            </div>

            {/* SUBMIT */}
            <button type="submit" disabled={processing}>
              {processing
                ? "Please wait..."
                : type === "add"
                ? "Create Event"
                : "Update Event"}
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default CreateEventModal;