import React, { useMemo, useState } from "react";

const ALUMNI_DATA = [
  {
    id: 1,
    admissionNo: "SCH-1001",
    name: "Aarav Sharma",
    father: "Rakesh Sharma",
    class: "12",
    section: "A",
    session: "2024-25",
    phone: "9876543210",
    email: "aarav@gmail.com",
    college: "IIT Delhi",
    profession: "Engineering",
    status: "Higher Studies",
  },
  {
    id: 2,
    admissionNo: "SCH-1002",
    name: "Khushi Rajput",
    father: "Mahesh Rajput",
    class: "10",
    section: "B",
    session: "2023-24",
    phone: "9632587412",
    email: "khushi@gmail.com",
    college: "LNCT Bhopal",
    profession: "BCA",
    status: "College",
  },
  {
    id: 3,
    admissionNo: "SCH-1003",
    name: "Aryan Sharma",
    father: "Dinesh Sharma",
    class: "12",
    section: "C",
    session: "2022-23",
    phone: "8523697410",
    email: "aryan@gmail.com",
    college: "Business Startup",
    profession: "Business",
    status: "Business",
  },
];

export default function ManageAlumni() {
  const [alumni, setAlumni] = useState(ALUMNI_DATA);

  const [selectedSession, setSelectedSession] = useState("");

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

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

  const [searchAdmission, setSearchAdmission] = useState("");

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

  const [form, setForm] = useState({
    admissionNo: "",
    name: "",
    father: "",
    class: "",
    section: "",
    session: "",
    phone: "",
    email: "",
    college: "",
    profession: "",
    status: "",
  });

  const filteredAlumni = useMemo(() => {
    return alumni.filter((item) => {
      const matchSession = !selectedSession || item.session === selectedSession;

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

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

      const matchAdmission =
        !searchAdmission ||
        item.admissionNo.toLowerCase().includes(searchAdmission.toLowerCase());

      return matchSession && matchClass && matchSection && matchAdmission;
    });
  }, [
    alumni,
    selectedSession,
    selectedClass,
    selectedSection,
    searchAdmission,
  ]);

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

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

    setForm({
      admissionNo: "",
      name: "",
      father: "",
      class: "",
      section: "",
      session: "",
      phone: "",
      email: "",
      college: "",
      profession: "",
      status: "",
    });

    setShowModal(false);
  };

  const handleDelete = (id) => {
    setAlumni((prev) => prev.filter((a) => a.id !== id));
  };

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

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

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

        .header{
          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{
          color:#64748b;
          margin-top:6px;
          font-size:14px;
        }

        .add-btn{
          border:none;
          padding:14px 24px;
          border-radius:14px;
          background:linear-gradient(135deg,#2563eb,#3b82f6);
          color:white;
          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;
          margin-bottom:24px;
          box-shadow:0 4px 24px rgba(15,23,42,0.05);
        }

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

        .filter-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{
          border:none;
          height:48px;
          border-radius:14px;
          background:#2563eb;
          color:white;
          font-weight:600;
          cursor:pointer;
        }

        .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;
          font-size:14px;
          color:#0f172a;
          white-space:nowrap;
        }

        tr:hover{
          background:#f8fafc;
        }

        .student-box{
          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;
        }

        .name{
          font-weight:600;
        }

        .father{
          font-size:12px;
          color:#64748b;
          margin-top:3px;
        }

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

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

        .college{
          background:#dbeafe;
          color:#2563eb;
        }

        .business{
          background:#fef3c7;
          color:#d97706;
        }

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

        .edit-btn,
        .delete-btn{
          width:36px;
          height:36px;
          border:none;
          border-radius:10px;
          cursor:pointer;
        }

        .edit-btn{
          background:#dbeafe;
        }

        .delete-btn{
          background:#fee2e2;
        }

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

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

        .modal{
          width:950px;
          max-width:100%;
          background:white;
          border-radius:24px;
          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:30px;
        }

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

        .save-btn{
          border:none;
          background:#2563eb;
          color:white;
          padding:12px 24px;
          border-radius:12px;
          font-weight:600;
          cursor:pointer;
        }

        @media(max-width:768px){

          .page{
            padding:16px;
          }

          .title{
            font-size:24px;
          }
        }
      `}</style>

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

        <div className="header">
          <div>
            <div className="title">🎓 Alumni Management</div>

            <div className="subtitle">
              School alumni students management system
            </div>
          </div>

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

        {/* FILTER SECTION */}

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

          <div className="filter-grid">
            <div className="field">
              <label>Pass Out Session *</label>

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

                <option value="2024-25">2024-25</option>

                <option value="2023-24">2023-24</option>

                <option value="2022-23">2022-23</option>
              </select>
            </div>

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

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

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

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

                <option value="12">Class 12</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>

            <div className="field">
              <label>Search By Admission Number</label>

              <input
                className="input"
                placeholder="Search Admission No"
                value={searchAdmission}
                onChange={(e) => setSearchAdmission(e.target.value)}
              />
            </div>

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

        {/* TABLE */}

        <div className="table-wrap">
          <div style={{ overflowX: "auto" }}>
            <table>
              <thead>
                <tr>
                  <th>Admission No</th>
                  <th>Student</th>
                  <th>Class</th>
                  <th>Session</th>
                  <th>Phone</th>
                  <th>College / Work</th>
                  <th>Status</th>
                  <th>Action</th>
                </tr>
              </thead>

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

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

                        <div>
                          <div className="name">{student.name}</div>

                          <div className="father">Father: {student.father}</div>
                        </div>
                      </div>
                    </td>

                    <td>
                      Class {student.class} ({student.section})
                    </td>

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

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

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

                    <td>
                      <span
                        className={`status ${
                          student.status === "Higher Studies"
                            ? "higher"
                            : student.status === "College"
                              ? "college"
                              : "business"
                        }`}
                      >
                        {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 {filteredAlumni.length} of {alumni.length}
          </div>
        </div>

        {/* MODAL */}

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

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

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

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

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

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

                  <input
                    className="input"
                    placeholder="Father name"
                    value={form.father}
                    onChange={(e) =>
                      setForm({
                        ...form,
                        father: 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="10">Class 10</option>

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

                    <option value="12">Class 12</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>Pass Out Session</label>

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

                    <option value="2024-25">2024-25</option>

                    <option value="2023-24">2023-24</option>

                    <option value="2022-23">2022-23</option>
                  </select>
                </div>

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

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

                <div className="field">
                  <label>Email Address</label>

                  <input
                    className="input"
                    placeholder="student@gmail.com"
                    value={form.email}
                    onChange={(e) =>
                      setForm({
                        ...form,
                        email: e.target.value,
                      })
                    }
                  />
                </div>

                <div className="field">
                  <label>College / Company</label>

                  <input
                    className="input"
                    placeholder="College or company"
                    value={form.college}
                    onChange={(e) =>
                      setForm({
                        ...form,
                        college: e.target.value,
                      })
                    }
                  />
                </div>

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

                  <input
                    className="input"
                    placeholder="Engineering / Business"
                    value={form.profession}
                    onChange={(e) =>
                      setForm({
                        ...form,
                        profession: 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 value="">Select</option>

                    <option>Higher Studies</option>

                    <option>College</option>

                    <option>Business</option>
                  </select>
                </div>
              </div>

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

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