import { useMemo, useState } from "react";

const STUDENTS_DATA = [
  {
    id: 1,
    admissionNo: "11068001",
    libraryCard: "LIB-001",
    rollNo: "01",
    name: "Pooja Yadav",
    class: "10",
    section: "A",
    phone: "9876543210",
    status: "Active",
  },
  {
    id: 2,
    admissionNo: "11068002",
    libraryCard: "LIB-002",
    rollNo: "02",
    name: "Khushi Rajput",
    class: "10",
    section: "B",
    phone: "9632587412",
    status: "Active",
  },
  {
    id: 3,
    admissionNo: "11068003",
    libraryCard: "LIB-003",
    rollNo: "03",
    name: "Aryan Sharma",
    class: "9",
    section: "A",
    phone: "8523697410",
    status: "Inactive",
  },
];

export default function AddStudent() {
  const [students, setStudents] = useState(STUDENTS_DATA);

  const [search, setSearch] = useState("");

  const [selectedClass, setSelectedClass] = useState("");

  const [selectedSection, setSelectedSection] = useState("");

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

  const [form, setForm] = useState({
    admissionNo: "",
    libraryCard: "",
    rollNo: "",
    name: "",
    class: "",
    section: "",
    phone: "",
    status: "Active",
  });

  const filteredStudents = useMemo(() => {
    return students.filter((student) => {
      const matchSearch =
        student.name.toLowerCase().includes(search.toLowerCase()) ||
        student.admissionNo.includes(search);

      const matchClass = !selectedClass || student.class === selectedClass;

      const matchSection =
        !selectedSection || student.section === selectedSection;

      return matchSearch && matchClass && matchSection;
    });
  }, [students, search, selectedClass, selectedSection]);

  const handleAddStudent = () => {
    if (!form.name || !form.admissionNo) return;

    setStudents((prev) => [
      ...prev,
      {
        ...form,
        id: Date.now(),
      },
    ]);

    setForm({
      admissionNo: "",
      libraryCard: "",
      rollNo: "",
      name: "",
      class: "",
      section: "",
      phone: "",
      status: "Active",
    });

    setShowModal(false);
  };

  const handleDelete = (id) => {
    setStudents((prev) => prev.filter((s) => s.id !== id));
  };

  return (
    <>
      <style>{`
        *{
          margin:0;
          padding:0;
          box-sizing:border-box;
        }

        body{
          font-family:'Poppins',sans-serif;
          background:#f1f5f9;
        }

        .page{
          padding:24px;
          min-height:100vh;
        }

        .topbar{
          display:flex;
          justify-content:space-between;
          align-items:center;
          margin-bottom:24px;
          flex-wrap:wrap;
          gap:14px;
        }

        .title{
          font-size:30px;
          font-weight:700;
          color:#0f172a;
        }

        .subtitle{
          margin-top:5px;
          color:#64748b;
          font-size:14px;
        }

        .add-btn{
          border:none;
          background:linear-gradient(135deg,#2563eb,#3b82f6);
          color:white;
          padding:14px 24px;
          border-radius:14px;
          font-weight:600;
          cursor:pointer;
          box-shadow:0 10px 24px rgba(37,99,235,0.25);
        }

        .card{
          background:white;
          border-radius:22px;
          padding:24px;
          border:1px solid #e2e8f0;
          box-shadow:0 4px 24px rgba(15,23,42,0.05);
          margin-bottom:24px;
        }

        .criteria-title{
          font-size:20px;
          font-weight:700;
          color:#0f172a;
          margin-bottom:18px;
        }

        .criteria-grid{
          display:grid;
          grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
          gap:18px;
          align-items:end;
        }

        .field{
          display:flex;
          flex-direction:column;
          gap:8px;
        }

        .field label{
          font-size:13px;
          font-weight:600;
          color:#334155;
        }

        .input{
          height:48px;
          border:1px solid #cbd5e1;
          border-radius:14px;
          padding:0 14px;
          outline:none;
          font-size:14px;
          background:white;
        }

        .search-btn{
          height:48px;
          border:none;
          border-radius:14px;
          background:linear-gradient(135deg,#2563eb,#3b82f6);
          color:white;
          font-weight:600;
          cursor:pointer;
        }

        .toolbar{
          display:flex;
          gap:14px;
          flex-wrap:wrap;
          margin-bottom:22px;
        }

        .search{
          flex:1;
          min-width:250px;
        }

        .table-wrap{
          background:white;
          border-radius:22px;
          overflow:hidden;
          border:1px solid #e2e8f0;
          box-shadow:0 4px 24px rgba(15,23,42,0.05);
        }

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

        th{
          background:#f8fafc;
          padding:16px;
          text-align:left;
          font-size:13px;
          color:#64748b;
          border-bottom:1px solid #e2e8f0;
          white-space:nowrap;
        }

        td{
          padding:16px;
          border-bottom:1px solid #f1f5f9;
          white-space:nowrap;
          font-size:14px;
          color:#0f172a;
        }

        tr:hover{
          background:#f8fafc;
        }

        .student{
          display:flex;
          align-items:center;
          gap:12px;
        }

        .avatar{
          width:42px;
          height:42px;
          border-radius:50%;
          background:linear-gradient(135deg,#2563eb,#3b82f6);
          color:white;
          display:flex;
          align-items:center;
          justify-content:center;
          font-weight:700;
        }

        .status{
          padding:6px 12px;
          border-radius:999px;
          font-size:12px;
          font-weight:600;
        }

        .active{
          background:#dcfce7;
          color:#16a34a;
        }

        .inactive{
          background:#fee2e2;
          color:#dc2626;
        }

        .actions{
          display:flex;
          gap:8px;
        }

        .edit-btn{
          width:36px;
          height:36px;
          border:none;
          border-radius:10px;
          background:#dbeafe;
          color:#2563eb;
          cursor:pointer;
        }

        .delete-btn{
          width:36px;
          height:36px;
          border:none;
          border-radius:10px;
          background:#fee2e2;
          color:#dc2626;
          cursor:pointer;
        }

        .footer{
          padding:18px;
          font-size:13px;
          color:#64748b;
        }

        .modal-overlay{
          position:fixed;
          inset:0;
          background:rgba(15,23,42,0.45);
          display:flex;
          align-items:center;
          justify-content:center;
          z-index:999;
          padding:20px;
        }

        .modal{
          width:850px;
          max-width:100%;
          background:white;
          border-radius:26px;
          padding:30px;
          max-height:90vh;
          overflow:auto;
        }

        .modal-title{
          font-size:28px;
          font-weight:700;
          margin-bottom:24px;
          color:#0f172a;
        }

        .form-grid{
          display:grid;
          grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
          gap:18px;
        }

        .modal-buttons{
          display:flex;
          justify-content:flex-end;
          gap:12px;
          margin-top:28px;
        }

        .cancel-btn{
          border:1px solid #cbd5e1;
          background:white;
          padding:12px 20px;
          border-radius:12px;
          cursor:pointer;
          font-weight:600;
        }

        .save-btn{
          border:none;
          background:linear-gradient(135deg,#2563eb,#3b82f6);
          color:white;
          padding:12px 22px;
          border-radius:12px;
          cursor:pointer;
          font-weight:600;
        }

        @media(max-width:768px){
          .title{
            font-size:24px;
          }

          .page{
            padding:16px;
          }
        }
      `}</style>

      <div className="page">
        {/* TOPBAR */}

        <div className="topbar">
          <div>
            <div className="title">📚 Library Student</div>

            <div className="subtitle">Manage students library records</div>
          </div>

          <button className="add-btn" onClick={() => setShowModal(true)}>
            + Add Student
          </button>
        </div>

        {/* SELECT CRITERIA */}

        <div className="card">
          <div className="criteria-title">Select Criteria</div>

          <div className="criteria-grid">
            <div className="field">
              <label>Class *</label>

              <select
                className="input"
                value={selectedClass}
                onChange={(e) => setSelectedClass(e.target.value)}
              >
                <option value="">Select</option>

                <option value="6">Class 6</option>

                <option value="7">Class 7</option>

                <option value="8">Class 8</option>

                <option value="9">Class 9</option>

                <option value="10">Class 10</option>
              </select>
            </div>

            <div className="field">
              <label>Section</label>

              <select
                className="input"
                value={selectedSection}
                onChange={(e) => setSelectedSection(e.target.value)}
              >
                <option value="">Select</option>

                <option value="A">Section A</option>

                <option value="B">Section B</option>

                <option value="C">Section C</option>
              </select>
            </div>

            <button className="search-btn">Search</button>
          </div>
        </div>

        {/* SEARCH */}

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

        {/* TABLE */}

        <div className="table-wrap">
          <div
            style={{
              overflowX: "auto",
            }}
          >
            <table>
              <thead>
                <tr>
                  <th>Library Card</th>

                  <th>Admission No</th>

                  <th>Roll No</th>

                  <th>Student Name</th>

                  <th>Class</th>

                  <th>Section</th>

                  <th>Phone</th>

                  <th>Status</th>

                  <th>Action</th>
                </tr>
              </thead>

              <tbody>
                {filteredStudents.map((student) => (
                  <tr key={student.id}>
                    <td>{student.libraryCard}</td>

                    <td>{student.admissionNo}</td>

                    <td>{student.rollNo}</td>

                    <td>
                      <div className="student">
                        <div className="avatar">
                          {student.name.charAt(0).toUpperCase()}
                        </div>

                        <div>
                          <div
                            style={{
                              fontWeight: "600",
                            }}
                          >
                            {student.name}
                          </div>
                        </div>
                      </div>
                    </td>

                    <td>{student.class}</td>

                    <td>{student.section}</td>

                    <td>{student.phone}</td>

                    <td>
                      <span
                        className={`status ${
                          student.status === "Active" ? "active" : "inactive"
                        }`}
                      >
                        {student.status}
                      </span>
                    </td>

                    <td>
                      <div className="actions">
                        <button className="edit-btn">✏️</button>

                        <button
                          className="delete-btn"
                          onClick={() => handleDelete(student.id)}
                        >
                          🗑️
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="footer">
            Records: 1 to {filteredStudents.length} of {students.length}
          </div>
        </div>

        {/* MODAL */}

        {showModal && (
          <div className="modal-overlay">
            <div className="modal">
              <div className="modal-title">➕ Add Student</div>

              <div className="form-grid">
                <div className="field">
                  <label>Admission No</label>

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

                <div className="field">
                  <label>Library Card</label>

                  <input
                    className="input"
                    placeholder="LIB-004"
                    value={form.libraryCard}
                    onChange={(e) =>
                      setForm({
                        ...form,
                        libraryCard: e.target.value,
                      })
                    }
                  />
                </div>

                <div className="field">
                  <label>Roll No</label>

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

                <div className="field">
                  <label>Student Name</label>

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

                <div className="field">
                  <label>Class</label>

                  <select
                    className="input"
                    value={form.class}
                    onChange={(e) =>
                      setForm({
                        ...form,
                        class: e.target.value,
                      })
                    }
                  >
                    <option value="">Select</option>

                    <option value="6">Class 6</option>

                    <option value="7">Class 7</option>

                    <option value="8">Class 8</option>

                    <option value="9">Class 9</option>

                    <option value="10">Class 10</option>
                  </select>
                </div>

                <div className="field">
                  <label>Section</label>

                  <select
                    className="input"
                    value={form.section}
                    onChange={(e) =>
                      setForm({
                        ...form,
                        section: e.target.value,
                      })
                    }
                  >
                    <option value="">Select</option>

                    <option value="A">A</option>

                    <option value="B">B</option>

                    <option value="C">C</option>
                  </select>
                </div>

                <div className="field">
                  <label>Phone</label>

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

                <div className="field">
                  <label>Status</label>

                  <select
                    className="input"
                    value={form.status}
                    onChange={(e) =>
                      setForm({
                        ...form,
                        status: e.target.value,
                      })
                    }
                  >
                    <option>Active</option>

                    <option>Inactive</option>
                  </select>
                </div>
              </div>

              <div className="modal-buttons">
                <button
                  className="cancel-btn"
                  onClick={() => setShowModal(false)}
                >
                  Cancel
                </button>

                <button className="save-btn" onClick={handleAddStudent}>
                  Save Student
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </>
  );
}
