// app/admin/events/create/page.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { toast } from "react-toastify";
import Link from "next/link";

export default function CreateEvent() {
  const router = useRouter();
  const [saving, setSaving] = useState(false);

  const [form, setForm] = useState({
    event_text: "",
    event_sub_text: "",
    event_start_date: "",
    event_end_date: "",
    event_location: "",
    event_start_time: "",
    event_end_time: "",
    is_current_event: "0",
    active_status: "true",
  });

  const [errors, setErrors] = useState({
    event_text: "",
    event_sub_text: "",
    event_start_date: "",
    event_end_date: "",
    event_location: "",
    event_start_time: "",
    event_end_time: "",
    event_pic: "",
  });

  const [imageFile, setImageFile] = useState<File | null>(null);
  const [imagePreview, setImagePreview] = useState<string | null>(null);

  const validateField = (name: string, value: string): string => {
    switch (name) {
      case "event_text":
        if (!value.trim()) return "Event title is required";
        return "";
      case "event_start_date":
        if (!value) return "Start date is required";
        return "";
      case "event_end_date":
        if (!value) return "End date is required";
        if (form.event_start_date && value < form.event_start_date)
          return "End date cannot be before start date";
        return "";
      case "event_pic":
        if (!value) return "Event image is required";
        return "";
      default:
        return "";
    }
  };

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
  ) => {
    const { name, value } = e.target;
    setForm((prev) => ({ ...prev, [name]: value }));
    const error = validateField(name, value);
    setErrors((prev) => ({ ...prev, [name]: error }));

    // Re-validate end date if start date changes
    if (name === "event_start_date" && form.event_end_date) {
      setErrors((prev) => ({
        ...prev,
        event_end_date:
          form.event_end_date < value
            ? "End date cannot be before start date"
            : "",
      }));
    }
  };

  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0] || null;
    setImageFile(file);
    if (file) {
      setImagePreview(URL.createObjectURL(file));
      setErrors((prev) => ({ ...prev, event_pic: "" }));
    } else {
      setImagePreview(null);
      setErrors((prev) => ({ ...prev, event_pic: "Event image is required" }));
    }
  };

  const validateAll = () => {
    const newErrors = {
      event_text: validateField("event_text", form.event_text),
      event_sub_text: "",
      event_start_date: validateField("event_start_date", form.event_start_date),
      event_end_date: validateField("event_end_date", form.event_end_date),
      event_location: "",
      event_start_time: "",
      event_end_time: "",
      event_pic: imageFile ? "" : "Event image is required",
    };
    setErrors(newErrors);
    return !Object.values(newErrors).some((e) => e !== "");
  };

  const handleSubmit = async () => {
    if (!validateAll()) return;

    try {
      setSaving(true);

      const payload = new FormData();
      Object.entries(form).forEach(([key, value]) => payload.append(key, value));
      payload.append("event_pic", imageFile!);

      const res = await fetch("/api/admin/events", {
        method: "POST",
        body: payload,
      });

      const json = await res.json();

      if (json.success) {
        toast.success("Event created successfully");
        router.push("/admin/events");
      } else {
        toast.error(json.message || "Failed to create event");
      }
    } catch {
      toast.error("Failed to create event");
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="admin-page-wrapper">
      {/* Header */}
      <div className="admin-page-header mb-4">
        <div className="d-flex justify-content-between align-items-center">
          <div>
            <h2 className="admin-page-title">Create Event</h2>
            <p className="admin-page-subtitle">Add a new event to the system</p>
          </div>
          <Link href="/admin/events" className="btn btn-light px-4">
            <i className="bi bi-arrow-left me-2" />
            Back to Events
          </Link>
        </div>
      </div>

      {/* Form Card */}
      <div className="card-theme p-4 p-md-4">
        <div className="row g-3">

          {/* Event Title */}
          <div className="col-md-6">
            <label className="form-label">
              Event Title <span className="text-danger">*</span>
            </label>
            <input
              type="text"
              className={`form-control ${errors.event_text ? "is-invalid" : form.event_text ? "is-valid" : ""}`}
              name="event_text"
              value={form.event_text}
              onChange={handleChange}
              placeholder="Enter event title"
            />
            {errors.event_text && (
              <div className="invalid-feedback d-block">{errors.event_text}</div>
            )}
          </div>

          {/* Sub Text */}
          <div className="col-md-6">
            <label className="form-label">Sub Text</label>
            <input
              type="text"
              className="form-control"
              name="event_sub_text"
              value={form.event_sub_text}
              onChange={handleChange}
              placeholder="Short description (optional)"
            />
          </div>

          {/* Location */}
          <div className="col-md-6">
            <label className="form-label">Location</label>
            <input
              type="text"
              className="form-control"
              name="event_location"
              value={form.event_location}
              onChange={handleChange}
              placeholder="Enter event location"
            />
          </div>

          {/* Start Date */}
          <div className="col-md-3">
            <label className="form-label">
              Start Date <span className="text-danger">*</span>
            </label>
            <input
              type="date"
              className={`form-control ${errors.event_start_date ? "is-invalid" : form.event_start_date ? "is-valid" : ""}`}
              name="event_start_date"
              value={form.event_start_date}
              onChange={handleChange}
            />
            {errors.event_start_date && (
              <div className="invalid-feedback d-block">{errors.event_start_date}</div>
            )}
          </div>

          {/* End Date */}
          <div className="col-md-3">
            <label className="form-label">
              End Date <span className="text-danger">*</span>
            </label>
            <input
              type="date"
              className={`form-control ${errors.event_end_date ? "is-invalid" : form.event_end_date ? "is-valid" : ""}`}
              name="event_end_date"
              value={form.event_end_date}
              onChange={handleChange}
            />
            {errors.event_end_date && (
              <div className="invalid-feedback d-block">{errors.event_end_date}</div>
            )}
          </div>

          {/* Start Time */}
          <div className="col-md-3">
            <label className="form-label">Start Time</label>
            <input
              type="time"
              className="form-control"
              name="event_start_time"
              value={form.event_start_time}
              onChange={handleChange}
            />
          </div>

          {/* End Time */}
          <div className="col-md-3">
            <label className="form-label">End Time</label>
            <input
              type="time"
              className="form-control"
              name="event_end_time"
              value={form.event_end_time}
              onChange={handleChange}
            />
          </div>

          {/* Current Event */}
          <div className="col-md-3">
            <label className="form-label">Mark as Current Event</label>
            <select
              name="is_current_event"
              className="form-select"
              value={form.is_current_event}
              onChange={handleChange}
            >
              <option value="0">No</option>
              <option value="1">Yes</option>
            </select>
          </div>

          {/* Active Status */}
          <div className="col-md-3">
            <label className="form-label">Status</label>
            <select
              name="active_status"
              className="form-select"
              value={form.active_status}
              onChange={handleChange}
            >
              <option value="true">Active</option>
              <option value="false">Inactive</option>
            </select>
          </div>

          {/* Event Image */}
          <div className="col-md-6">
            <label className="form-label">
              Event Image <span className="text-danger">*</span>
            </label>
            <input
              type="file"
              accept="image/jpeg,image/png,image/webp,image/gif"
              className={`form-control ${errors.event_pic ? "is-invalid" : imageFile ? "is-valid" : ""}`}
              onChange={handleImageChange}
            />
            <div className="form-text text-muted">JPG, PNG, WEBP or GIF · Max 5MB</div>
            {errors.event_pic && (
              <div className="invalid-feedback d-block">{errors.event_pic}</div>
            )}
            {imagePreview && (
              <div className="mt-2">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={imagePreview}
                  alt="Preview"
                  style={{ height: 80, width: "auto", objectFit: "cover", borderRadius: 8, border: "1px solid #dee2e6" }}
                />
              </div>
            )}
          </div>
        </div>

        {/* Actions */}
        <div className="d-flex justify-content-end gap-2 mt-4">
          <Link href="/admin/events" className="btn btn-light px-4">
            Cancel
          </Link>
          <button
            className="admin-theme-btn"
            onClick={handleSubmit}
            disabled={saving}
          >
            {saving ? (
              <><span className="spinner-border spinner-border-sm me-1" />Creating...</>
            ) : (
              <><i className="bi bi-plus-circle me-1" />Create Event</>
            )}
          </button>
        </div>
      </div>
    </div>
  );
}