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

const STAFF_DATA = [
  {
    id: 1,
    memberId: "STF-9000",
    cardNo: "LIB-001",
    name: "Super Admin",
    email: "radhika@nyea.in",
    dob: "01/01/2020",
    phone: "9876543210",
  },
  {
    id: 2,
    memberId: "STF-1234",
    cardNo: "LIB-002",
    name: "Gulshan Khan",
    email: "Gulshan@gmail.com",
    dob: "05/13/2001",
    phone: "9876543456",
  },
  {
    id: 3,
    memberId: "STF-2334",
    cardNo: "LIB-003",
    name: "Ravina Sharma",
    email: "Ravina@gmail.com",
    dob: "05/16/2002",
    phone: "6754890767",
  },
  {
    id: 4,
    memberId: "STF-1245",
    cardNo: "LIB-004",
    name: "Anjali Jadon",
    email: "Anjali@gmail.com",
    dob: "05/12/2002",
    phone: "7689067890",
  },
  {
    id: 5,
    memberId: "STF-3452",
    cardNo: "LIB-005",
    name: "Mansi Jadon",
    email: "Mansi@gmail.com",
    dob: "05/15/2021",
    phone: "9856789066",
  },
];

const S = {
  page: {
    minHeight: "100vh",
    background: "#f4f7fb",
    padding: "30px",
    fontFamily: "'Poppins', sans-serif",
  },

  topbar: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: "25px",
    flexWrap: "wrap",
    gap: "15px",
  },

  title: {
    fontSize: "32px",
    fontWeight: "700",
    color: "#0f172a",
  },

  subtitle: {
    marginTop: "5px",
    color: "#64748b",
    fontSize: "14px",
  },

  addBtn: {
    border: "none",
    background: "linear-gradient(135deg,#2563eb,#3b82f6)",
    color: "white",
    height: "48px",
    padding: "0 22px",
    borderRadius: "14px",
    cursor: "pointer",
    fontWeight: "600",
    fontSize: "14px",
    boxShadow: "0 8px 24px rgba(37,99,235,0.25)",
  },

  toolbar: {
    background: "white",
    borderRadius: "20px",
    padding: "18px",
    marginBottom: "24px",
    border: "1px solid #e2e8f0",
    boxShadow: "0 4px 20px rgba(15,23,42,0.05)",
  },

  search: {
    width: "100%",
    height: "50px",
    borderRadius: "14px",
    border: "1px solid #cbd5e1",
    padding: "0 16px",
    fontSize: "14px",
    outline: "none",
  },

  tableWrap: {
    background: "white",
    borderRadius: "24px",
    overflow: "hidden",
    border: "1px solid #e2e8f0",
    boxShadow: "0 6px 30px rgba(15,23,42,0.05)",
  },

  table: {
    width: "100%",
    borderCollapse: "collapse",
  },

  th: {
    background: "#f8fafc",
    padding: "18px",
    textAlign: "left",
    fontSize: "13px",
    color: "#64748b",
    borderBottom: "1px solid #e2e8f0",
    whiteSpace: "nowrap",
  },

  td: {
    padding: "18px",
    borderBottom: "1px solid #f1f5f9",
    fontSize: "14px",
    color: "#0f172a",
    whiteSpace: "nowrap",
  },

  staffInfo: {
    display: "flex",
    alignItems: "center",
    gap: "12px",
  },

  avatar: {
    width: "42px",
    height: "42px",
    borderRadius: "50%",
    background: "linear-gradient(135deg,#3b82f6,#2563eb)",
    color: "white",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontWeight: "700",
    fontSize: "14px",
  },

  email: {
    color: "#64748b",
    fontSize: "13px",
    marginTop: "3px",
  },

  actionWrap: {
    display: "flex",
    gap: "8px",
  },

  editBtn: {
    border: "none",
    background: "#dbeafe",
    color: "#2563eb",
    width: "36px",
    height: "36px",
    borderRadius: "10px",
    cursor: "pointer",
  },

  deleteBtn: {
    border: "none",
    background: "#fee2e2",
    color: "#dc2626",
    width: "36px",
    height: "36px",
    borderRadius: "10px",
    cursor: "pointer",
  },

  modalOverlay: {
    position: "fixed",
    inset: 0,
    background: "rgba(15,23,42,0.45)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    zIndex: 999,
  },

  modal: {
    width: "650px",
    maxWidth: "95%",
    background: "white",
    borderRadius: "26px",
    padding: "30px",
  },

  modalTitle: {
    fontSize: "28px",
    fontWeight: "700",
    marginBottom: "24px",
    color: "#0f172a",
  },

  formGrid: {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))",
    gap: "18px",
  },

  group: {
    display: "flex",
    flexDirection: "column",
    gap: "8px",
  },

  label: {
    fontSize: "13px",
    fontWeight: "600",
    color: "#334155",
  },

  input: {
    height: "48px",
    borderRadius: "14px",
    border: "1px solid #cbd5e1",
    padding: "0 14px",
    fontSize: "14px",
    outline: "none",
  },

  modalBtns: {
    display: "flex",
    justifyContent: "flex-end",
    gap: "12px",
    marginTop: "28px",
  },

  cancelBtn: {
    border: "1px solid #cbd5e1",
    background: "white",
    padding: "12px 18px",
    borderRadius: "12px",
    cursor: "pointer",
    fontWeight: "600",
  },

  saveBtn: {
    border: "none",
    background: "linear-gradient(135deg,#2563eb,#3b82f6)",
    color: "white",
    padding: "12px 22px",
    borderRadius: "12px",
    cursor: "pointer",
    fontWeight: "600",
  },

  footer: {
    padding: "18px",
    fontSize: "13px",
    color: "#64748b",
  },
};

export default function StaffMemberList() {
  const [staff, setStaff] = useState(STAFF_DATA);

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

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

  const [form, setForm] = useState({
    memberId: "",
    cardNo: "",
    name: "",
    email: "",
    dob: "",
    phone: "",
  });

  const filtered = useMemo(() => {
    return staff.filter((item) => {
      return (
        item.name.toLowerCase().includes(search.toLowerCase()) ||
        item.memberId.toLowerCase().includes(search.toLowerCase())
      );
    });
  }, [staff, search]);

  const handleAddStaff = () => {
    if (!form.name || !form.memberId) return;

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

    setForm({
      memberId: "",
      cardNo: "",
      name: "",
      email: "",
      dob: "",
      phone: "",
    });

    setShowModal(false);
  };

  const handleDelete = (id) => {
    setStaff((prev) => prev.filter((item) => item.id !== id));
  };

  return (
    <div style={S.page}>
      {/* HEADER */}
      <div style={S.topbar}>
        <div>
          <div style={S.title}>👨‍🏫 Staff Member List</div>

          <div style={S.subtitle}>Manage all library staff members</div>
        </div>

        <button style={S.addBtn} onClick={() => setShowModal(true)}>
          + Add Staff Member
        </button>
      </div>

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

      {/* TABLE */}
      <div style={S.tableWrap}>
        <div style={{ overflowX: "auto" }}>
          <table style={S.table}>
            <thead>
              <tr>
                <th style={S.th}>Member ID</th>

                <th style={S.th}>Library Card No.</th>

                <th style={S.th}>Staff Name</th>

                <th style={S.th}>Email</th>

                <th style={S.th}>Date Of Birth</th>

                <th style={S.th}>Phone</th>

                <th style={S.th}>Action</th>
              </tr>
            </thead>

            <tbody>
              {filtered.map((item) => (
                <tr key={item.id}>
                  <td style={S.td}>{item.memberId}</td>

                  <td style={S.td}>{item.cardNo}</td>

                  <td style={S.td}>
                    <div style={S.staffInfo}>
                      <div style={S.avatar}>
                        {item.name.charAt(0).toUpperCase()}
                      </div>

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

                        <div style={S.email}>Staff Member</div>
                      </div>
                    </div>
                  </td>

                  <td style={S.td}>{item.email}</td>

                  <td style={S.td}>{item.dob}</td>

                  <td style={S.td}>{item.phone}</td>

                  <td style={S.td}>
                    <div style={S.actionWrap}>
                      <button style={S.editBtn}>✏️</button>

                      <button
                        style={S.deleteBtn}
                        onClick={() => handleDelete(item.id)}
                      >
                        🗑️
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div style={S.footer}>
          Records: 1 to {filtered.length} of {staff.length}
        </div>
      </div>

      {/* MODAL */}
      {showModal && (
        <div style={S.modalOverlay}>
          <div style={S.modal}>
            <div style={S.modalTitle}>➕ Add Staff Member</div>

            <div style={S.formGrid}>
              <div style={S.group}>
                <label style={S.label}>Member ID</label>

                <input
                  style={S.input}
                  placeholder="STF-1001"
                  value={form.memberId}
                  onChange={(e) =>
                    setForm({
                      ...form,
                      memberId: e.target.value,
                    })
                  }
                />
              </div>

              <div style={S.group}>
                <label style={S.label}>Library Card No.</label>

                <input
                  style={S.input}
                  placeholder="LIB-001"
                  value={form.cardNo}
                  onChange={(e) =>
                    setForm({
                      ...form,
                      cardNo: e.target.value,
                    })
                  }
                />
              </div>

              <div style={S.group}>
                <label style={S.label}>Staff Name</label>

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

              <div style={S.group}>
                <label style={S.label}>Email</label>

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

              <div style={S.group}>
                <label style={S.label}>Date Of Birth</label>

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

              <div style={S.group}>
                <label style={S.label}>Phone</label>

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

            <div style={S.modalBtns}>
              <button style={S.cancelBtn} onClick={() => setShowModal(false)}>
                Cancel
              </button>

              <button style={S.saveBtn} onClick={handleAddStaff}>
                Save Staff
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
