// app/admin/events/page.tsx

"use client";

import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import { ColumnDef } from "@tanstack/react-table";
import { toast } from "react-toastify";
import DataTable from "@/components/common/DataTable";
import CustomLoader from "@/components/common/CustomLoader";

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

export default function Events() {
  const [data, setData] = useState<Event[]>([]);
  const [loading, setLoading] = useState(true);

  const fetchEvents = async () => {
    try {
      const res = await fetch("/api/admin/events");
      const json = await res.json();
      if (json.success) {
        setData(json.data);
      } else {
        toast.error("Failed to load events");
      }
    } catch {
      toast.error("Failed to load events");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchEvents();
  }, []);

  const handleDelete = async (id: number) => {
    if (!confirm("Are you sure you want to delete this event?")) return;
    try {
      const res = await fetch(`/api/admin/events/${id}`, { method: "DELETE" });
      const json = await res.json();
      if (json.success) {
        toast.success("Event deleted successfully");
        setData((prev) => prev.filter((e) => e.id !== id));
      } else {
        toast.error(json.message || "Failed to delete event");
      }
    } catch {
      toast.error("Failed to delete event");
    }
  };

  const columns = useMemo<ColumnDef<Event>[]>(
    () => [
      {
        accessorKey: "event_pic",
        header: "Image",
        cell: ({ row }) => (
          <img
            src={row.original.event_pic}
            alt={row.original.event_text}
            style={{ width: 60, height: 40, objectFit: "cover", borderRadius: 4 }}
          />
        ),
      },
      {
        accessorKey: "event_text",
        header: "Title",
      },
      {
        accessorKey: "event_sub_text",
        header: "Sub Text",
        cell: ({ row }) => row.original.event_sub_text || "—",
      },
      {
        accessorKey: "event_location",
        header: "Location",
        cell: ({ row }) => row.original.event_location || "—",
      },
      {
        header: "Date",
        cell: ({ row }) => {
          const { event_start_date, event_end_date } = row.original;
          return event_start_date === event_end_date
            ? event_start_date
            : `${event_start_date} – ${event_end_date}`;
        },
      },
      {
        header: "Time",
        cell: ({ row }) => {
          const { event_start_time, event_end_time } = row.original;
          if (!event_start_time && !event_end_time) return "—";
          return `${event_start_time || ""} – ${event_end_time || ""}`;
        },
      },
      {
        accessorKey: "is_current_event",
        header: "Current",
        cell: ({ row }) =>
          row.original.is_current_event === 1 ? (
            <span className="badge bg-primary">Current</span>
          ) : (
            <span className="badge bg-secondary">No</span>
          ),
      },
      {
        accessorKey: "active_status",
        header: "Status",
        cell: ({ row }) =>
          row.original.active_status ? (
            <span className="badge bg-success">Active</span>
          ) : (
            <span className="badge bg-secondary">Inactive</span>
          ),
      },
      {
        header: "Actions",
        cell: ({ row }) => {
          const event = row.original;
          return (
            <div className="d-flex gap-1">
              <Link
                href={`/admin/events/view/${event.id}`}
                className="btn btn-info btn-sm table-action-btn"
              >
                <i className="bi bi-eye" />
              </Link>
              <Link
                href={`/admin/events/edit/${event.id}`}
                className="btn btn-warning btn-sm table-action-btn"
              >
                <i className="bi bi-pencil-square" />
              </Link>
              <button
                onClick={() => handleDelete(event.id)}
                className="btn btn-danger btn-sm table-action-btn"
              >
                <i className="bi bi-trash" />
              </button>
            </div>
          );
        },
      },
    ],
    []
  );

  if (loading) return <CustomLoader />;

  return (
    <div className="admin-page-wrapper">
      <div className="admin-page-header">
        <div className="d-flex justify-content-between align-items-center">
          <div>
            <h2 className="admin-page-title">Events</h2>
            <p className="admin-page-subtitle">Manage all events</p>
          </div>
          <Link href="/admin/events/create" className="admin-theme-btn">
            <i className="bi bi-plus-circle me-1" />
            Add Event
          </Link>
        </div>
      </div>

      <div className="admin-table-section">
        <DataTable columns={columns} data={data} />
      </div>
    </div>
  );
}