import { useMemo, useState } from "react";

/* ================= SAMPLE DATA ================= */
const initialNews = [
  {
    id: 1,
    title: "School Updates",
    url: "https://radhikademo.nyea.in/read/school-updates",
  },
];

/* ================= COMPONENT ================= */
export default function NewsList() {
  const [news, setNews] = useState(initialNews);
  const [search, setSearch] = useState("");
  const [showModal, setShowModal] = useState(false);

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

  /* ================= FILTER ================= */
  const filtered = useMemo(() => {
    return news.filter((n) => {
      const q = search.toLowerCase();
      return (
        n.title.toLowerCase().includes(q) || n.url.toLowerCase().includes(q)
      );
    });
  }, [news, search]);

  /* ================= ADD NEWS ================= */
  const handleAdd = () => {
    if (!form.title || !form.url) return;

    setNews([
      {
        id: Date.now(),
        ...form,
      },
      ...news,
    ]);

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

  /* ================= DELETE ================= */
  const handleDelete = (id) => {
    setNews(news.filter((n) => n.id !== id));
  };

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

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

        .container {
          padding: 20px;
        }

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

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

        .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;
        }

        a {
          color: #2563eb;
          text-decoration: none;
        }

        a:hover {
          text-decoration: underline;
        }

        .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;
          justify-content: flex-end;
          gap: 8px;
        }

        .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">📰 News List</div>
            <button className="btn" onClick={() => setShowModal(true)}>
              + Add News
            </button>
          </div>

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

          {/* TABLE */}
          <table>
            <thead>
              <tr>
                <th>Title</th>
                <th>URL</th>
                <th>Action</th>
              </tr>
            </thead>

            <tbody>
              {filtered.length === 0 ? (
                <tr>
                  <td colSpan="3" style={{ textAlign: "center" }}>
                    No News Found
                  </td>
                </tr>
              ) : (
                filtered.map((n) => (
                  <tr key={n.id}>
                    <td>{n.title}</td>
                    <td>
                      <a href={n.url} target="_blank">
                        {n.url}
                      </a>
                    </td>
                    <td>
                      <button
                        className="delete"
                        onClick={() => handleDelete(n.id)}
                      >
                        Delete
                      </button>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>

          <p style={{ marginTop: 10, fontSize: 12, color: "#6b7280" }}>
            Records: 1 to {filtered.length} of {news.length}
          </p>
        </div>
      </div>

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

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

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

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