import { useMemo, useState } from "react";

/* ================= SAMPLE EVENTS ================= */
const initialEvents = [
  {
    id: 1,
    title: "Farewell Party",
    date: "2026-05-12",
    venue: "School Auditorium",
  },
  {
    id: 2,
    title: "Independence Day",
    date: "2026-08-15",
    venue: "School Ground",
  },
  {
    id: 3,
    title: "Republic Day",
    date: "2026-01-26",
    venue: "School Ground",
  },
  {
    id: 4,
    title: "Sports Day",
    date: "2026-08-29",
    venue: "Play Ground",
  },
];

/* ================= HELPERS ================= */
const getStatus = (dateStr) => {
  const today = new Date().toISOString().split("T")[0];
  if (dateStr === today) return "Today";
  if (dateStr > today) return "Upcoming";
  return "Past";
};

/* ================= COMPONENT ================= */
export default function Event() {
  const [events, setEvents] = useState(initialEvents);
  const [search, setSearch] = useState("");

  const [showModal, setShowModal] = useState(false);

  const [form, setForm] = useState({
    title: "",
    date: "",
    venue: "",
  });

  /* ================= FILTER ================= */
  const filtered = useMemo(() => {
    return events.filter((e) => {
      const q = search.toLowerCase();
      return (
        e.title.toLowerCase().includes(q) ||
        e.date.toLowerCase().includes(q) ||
        e.venue.toLowerCase().includes(q)
      );
    });
  }, [events, search]);

  /* ================= ADD EVENT ================= */
  const handleAdd = () => {
    if (!form.title || !form.date || !form.venue) return;

    setEvents([
      {
        id: Date.now(),
        ...form,
      },
      ...events,
    ]);

    setForm({ title: "", date: "", venue: "" });
    setShowModal(false);
  };

  /* ================= DELETE ================= */
  const handleDelete = (id) => {
    setEvents(events.filter((e) => e.id !== id));
  };

  return (
    <>
      {/* ================= CSS ================= */}
      <style>{`
        * { box-sizing: border-box; font-family: Arial; }

        body { margin: 0; background: #f4f6f9; }

        .container { padding: 20px; }

        .card {
          background: white;
          border-radius: 10px;
          padding: 18px;
          border: 1px solid #e5e7eb;
        }

        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
        }

        .title {
          font-size: 20px;
          font-weight: 600;
        }

        .btn {
          background: #2563eb;
          color: white;
          border: none;
          padding: 8px 12px;
          border-radius: 6px;
          cursor: pointer;
        }

        .search {
          width: 100%;
          padding: 10px;
          margin: 10px 0;
          border: 1px solid #d1d5db;
          border-radius: 6px;
        }

        table {
          width: 100%;
          border-collapse: collapse;
        }

        th {
          background: #f9fafb;
          text-align: left;
          padding: 10px;
          font-size: 13px;
        }

        td {
          padding: 10px;
          border-bottom: 1px solid #e5e7eb;
          font-size: 13px;
        }

        .badge {
          padding: 3px 8px;
          border-radius: 12px;
          font-size: 12px;
          background: #e0f2fe;
          color: #0369a1;
        }

        .status {
          padding: 3px 8px;
          border-radius: 10px;
          font-size: 11px;
        }

        .Upcoming { background: #fef3c7; color: #92400e; }
        .Today { background: #dcfce7; color: #166534; }
        .Past { background: #fee2e2; color: #991b1b; }

        .delete {
          background: #ef4444;
          color: white;
          border: none;
          padding: 5px 10px;
          border-radius: 6px;
          cursor: pointer;
        }

        .delete:hover { background: #dc2626; }

        /* ================= MODAL ================= */
        .modal {
          position: fixed;
          inset: 0;
          background: rgba(0,0,0,0.5);
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .modal-box {
          background: white;
          padding: 20px;
          border-radius: 10px;
          width: 350px;
        }

        .input {
          width: 100%;
          padding: 10px;
          margin-bottom: 10px;
          border: 1px solid #d1d5db;
          border-radius: 6px;
        }

        .row {
          display: flex;
          gap: 8px;
          justify-content: flex-end;
        }

        .save {
          background: #16a34a;
          color: white;
          border: none;
          padding: 8px 10px;
          border-radius: 6px;
        }

        .cancel {
          background: #6b7280;
          color: white;
          border: none;
          padding: 8px 10px;
          border-radius: 6px;
        }
      `}</style>

      {/* ================= UI ================= */}
      <div className="container">
        <div className="card">
          {/* HEADER */}
          <div className="header">
            <div className="title">📅 Event List</div>
            <button className="btn" onClick={() => setShowModal(true)}>
              + Add Event
            </button>
          </div>

          {/* SEARCH */}
          <input
            className="search"
            placeholder="Search..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
          />

          {/* TABLE */}
          <table>
            <thead>
              <tr>
                <th>Title</th>
                <th>Date</th>
                <th>Venue</th>
                <th>Status</th>
                <th>Action</th>
              </tr>
            </thead>

            <tbody>
              {filtered.map((e) => (
                <tr key={e.id}>
                  <td>
                    <span className="badge">{e.title}</span>
                  </td>
                  <td>{e.date}</td>
                  <td>{e.venue}</td>
                  <td>
                    <span className={`status ${getStatus(e.date)}`}>
                      {getStatus(e.date)}
                    </span>
                  </td>
                  <td>
                    <button
                      className="delete"
                      onClick={() => handleDelete(e.id)}
                    >
                      Delete
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* ================= MODAL ================= */}
      {showModal && (
        <div className="modal">
          <div className="modal-box">
            <h3>➕ Add Event</h3>

            <input
              className="input"
              placeholder="Event Title"
              value={form.title}
              onChange={(e) => setForm({ ...form, title: e.target.value })}
            />

            <input
              className="input"
              type="date"
              value={form.date}
              onChange={(e) => setForm({ ...form, date: e.target.value })}
            />

            <input
              className="input"
              placeholder="Venue"
              value={form.venue}
              onChange={(e) => setForm({ ...form, venue: e.target.value })}
            />

            <div className="row">
              <button className="cancel" onClick={() => setShowModal(false)}>
                Cancel
              </button>
              <button className="save" onClick={handleAdd}>
                Save
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}
