"use client";

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

interface Event {
  id: number;
  event_pic: string;
  event_text: string;
  event_sub_text: string | null;
  event_start_date: string;
  event_end_date: string;
  event_location: string | null;
  event_start_time: string | null;
  event_end_time: string | null;
  is_current_event: number;
  active_status: boolean;
}

export default function ViewEvent() {
  const params = useParams();

  const [event, setEvent] = useState<Event | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`/api/admin/events/${params.id}`)
      .then((res) => res.json())
      .then((data) => {
        if (data.success) {
          setEvent(data.data);
        } else {
          toast.error(data.message || "Failed to load event");
        }
      })
      .catch(() => {
        toast.error("Failed to load event details");
      })
      .finally(() => {
        setLoading(false);
      });
  }, [params.id]);

  if (loading) {
    return (
      <div
        className="admin-page-wrapper d-flex justify-content-center align-items-center"
        style={{ minHeight: 300 }}
      >
        <span className="spinner-border text-secondary" />
      </div>
    );
  }

  if (!event) {
    return (
      <div
        className="admin-page-wrapper d-flex justify-content-center align-items-center"
        style={{ minHeight: 300 }}
      >
        <div className="text-center text-muted">
          <i className="bi bi-exclamation-circle fs-1 d-block mb-2" />
          Event not found
        </div>
      </div>
    );
  }

  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">Event Details</h2>
            <p className="admin-page-subtitle">
              Viewing event information
            </p>
          </div>

          <div className="d-flex gap-2">
            <Link
              href="/admin/events"
              className="btn btn-light px-4"
            >
              <i className="bi bi-arrow-left me-2" />
              Back to Events
            </Link>
          </div>
        </div>
      </div>

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

          {/* Event Image */}
          <div className="col-md-12">
            <p className="text-muted mb-1 small">
              Event Image
            </p>

            {event.event_pic ? (
              <img
                src={event.event_pic}
                alt={event.event_text}
                className="rounded border"
                style={{
                  width: "120px",
                  height: "80px",
                  objectFit: "cover",
                }}
              />
            ) : (
              <p className="fw-semibold mb-0">
                No Image Available
              </p>
            )}
          </div>

          <div className="col-md-6">
            <p className="text-muted mb-1 small">
              Event Title
            </p>
            <p className="fw-semibold mb-0">
              {event.event_text}
            </p>
          </div>

          <div className="col-md-6">
            <p className="text-muted mb-1 small">
              Event Subtitle
            </p>
            <p className="fw-semibold mb-0">
              {event.event_sub_text || "-"}
            </p>
          </div>

          <div className="col-md-6">
            <p className="text-muted mb-1 small">
              Start Date
            </p>
            <p className="fw-semibold mb-0">
              {event.event_start_date}
            </p>
          </div>

          <div className="col-md-6">
            <p className="text-muted mb-1 small">
              End Date
            </p>
            <p className="fw-semibold mb-0">
              {event.event_end_date}
            </p>
          </div>

          <div className="col-md-6">
            <p className="text-muted mb-1 small">
              Start Time
            </p>
            <p className="fw-semibold mb-0">
              {event.event_start_time || "-"}
            </p>
          </div>

          <div className="col-md-6">
            <p className="text-muted mb-1 small">
              End Time
            </p>
            <p className="fw-semibold mb-0">
              {event.event_end_time || "-"}
            </p>
          </div>

          <div className="col-md-6">
            <p className="text-muted mb-1 small">
              Location
            </p>
            <p className="fw-semibold mb-0">
              {event.event_location || "-"}
            </p>
          </div>

          <div className="col-md-6">
            <p className="text-muted mb-1 small">
              Current Event
            </p>
            <p className="fw-semibold mb-0">
              {event.is_current_event === 1
                ? "Yes"
                : "No"}
            </p>
          </div>

          <div className="col-md-6">
            <p className="text-muted mb-1 small">
              Status
            </p>
            <p className="fw-semibold mb-0">
              {event.active_status
                ? "Active"
                : "Inactive"}
            </p>
          </div>
        </div>

        {/* Actions */}
        <div className="d-flex justify-content-end gap-2 mt-4">
          <Link
            href="/admin/events"
            className="btn btn-light px-4"
          >
            Back
          </Link>

          <Link
            href={`/admin/events/edit/${params.id}`}
            className="admin-theme-btn"
          >
            <i className="bi bi-pencil me-1" />
            Edit Event
          </Link>
        </div>
      </div>
    </div>
  );
}