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

const MEMBERS_DATA = [
  {
    id: 1,
    memberId: "01",
    cardNo: "0003",
    admissionNo: "11001",
    name: "Pooja Yadav",
    type: "Student",
    phone: "5870032568",
    issuedBook: "Science Explorer",
    returnDate: "2026-06-10",
    status: "Issued",
  },
  {
    id: 2,
    memberId: "02",
    cardNo: "0004",
    admissionNo: "11002",
    name: "Khushi Rajput",
    type: "Student",
    phone: "2201770356",
    issuedBook: "",
    returnDate: "",
    status: "Available",
  },
  {
    id: 3,
    memberId: "03",
    cardNo: "0005",
    admissionNo: "11003",
    name: "Aryan Sharma",
    type: "Student",
    phone: "9632587412",
    issuedBook: "Maths Magic",
    returnDate: "2026-06-14",
    status: "Issued",
  },
];

const books = [
  "Science Explorer",
  "Maths Magic",
  "Computer Basics",
  "The Hunger Games",
  "History of India",
];

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

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

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

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

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

  search: {
    flex: 1,
    padding: "14px 16px",
    borderRadius: "14px",
    border: "1px solid #cbd5e1",
    outline: "none",
    fontSize: "14px",
  },

  tableWrap: {
    background: "white",
    borderRadius: "22px",
    overflow: "hidden",
    border: "1px solid #e2e8f0",
    boxShadow: "0 4px 24px 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",
  },

  td: {
    padding: "18px",
    borderBottom: "1px solid #f1f5f9",
    fontSize: "14px",
  },

  badge: (status) => ({
    padding: "6px 12px",
    borderRadius: "999px",
    fontSize: "12px",
    fontWeight: "600",
    background: status === "Issued" ? "#dbeafe" : "#dcfce7",
    color: status === "Issued" ? "#2563eb" : "#16a34a",
  }),

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

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

  returnBtn: {
    border: "none",
    padding: "10px 14px",
    borderRadius: "12px",
    background: "linear-gradient(135deg,#16a34a,#22c55e)",
    color: "white",
    cursor: "pointer",
    fontWeight: "600",
    fontSize: "13px",
  },

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

  modal: {
    width: "500px",
    background: "white",
    borderRadius: "24px",
    padding: "28px",
  },

  modalTitle: {
    fontSize: "26px",
    fontWeight: "700",
    marginBottom: "22px",
    color: "#0f172a",
  },

  formGroup: {
    display: "flex",
    flexDirection: "column",
    gap: "8px",
    marginBottom: "18px",
  },

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

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

  buttons: {
    display: "flex",
    justifyContent: "flex-end",
    gap: "12px",
    marginTop: "24px",
  },

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

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

export default function IssueReturnMembers() {
  const [members, setMembers] = useState(MEMBERS_DATA);

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

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

  const [selectedMember, setSelectedMember] = useState(null);

  const [selectedBook, setSelectedBook] = useState("");

  const [returnDate, setReturnDate] = useState("");

  const filteredMembers = useMemo(() => {
    return members.filter((member) => {
      return (
        member.name.toLowerCase().includes(search.toLowerCase()) ||
        member.memberId.includes(search)
      );
    });
  }, [search, members]);

  const openIssueModal = (member) => {
    setSelectedMember(member);
    setShowModal(true);
  };

  const handleIssueBook = () => {
    if (!selectedBook || !returnDate) return;

    const updated = members.map((member) =>
      member.id === selectedMember.id
        ? {
            ...member,
            issuedBook: selectedBook,
            returnDate,
            status: "Issued",
          }
        : member,
    );

    setMembers(updated);

    setShowModal(false);

    setSelectedBook("");
    setReturnDate("");
  };

  const handleReturnBook = (id) => {
    const updated = members.map((member) =>
      member.id === id
        ? {
            ...member,
            issuedBook: "",
            returnDate: "",
            status: "Available",
          }
        : member,
    );

    setMembers(updated);
  };

  return (
    <div style={styles.page}>
      {/* HEADER */}
      <div style={styles.header}>
        <div>
          <div style={styles.title}>📚 Issue / Return Books</div>

          <div style={styles.sub}>Manage library members and books</div>
        </div>
      </div>

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

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

                <th style={styles.th}>Library Card</th>

                <th style={styles.th}>Admission No</th>

                <th style={styles.th}>Name</th>

                <th style={styles.th}>Member Type</th>

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

                <th style={styles.th}>Issued Book</th>

                <th style={styles.th}>Return Date</th>

                <th style={styles.th}>Status</th>

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

            <tbody>
              {filteredMembers.map((member) => (
                <tr key={member.id}>
                  <td style={styles.td}>{member.memberId}</td>

                  <td style={styles.td}>{member.cardNo}</td>

                  <td style={styles.td}>{member.admissionNo}</td>

                  <td style={styles.td}>{member.name}</td>

                  <td style={styles.td}>{member.type}</td>

                  <td style={styles.td}>{member.phone}</td>

                  <td style={styles.td}>{member.issuedBook || "-"}</td>

                  <td style={styles.td}>{member.returnDate || "-"}</td>

                  <td style={styles.td}>
                    <span style={styles.badge(member.status)}>
                      {member.status}
                    </span>
                  </td>

                  <td style={styles.td}>
                    <div style={styles.actionWrap}>
                      {member.status === "Available" ? (
                        <button
                          style={styles.issueBtn}
                          onClick={() => openIssueModal(member)}
                        >
                          Issue
                        </button>
                      ) : (
                        <button
                          style={styles.returnBtn}
                          onClick={() => handleReturnBook(member.id)}
                        >
                          Return
                        </button>
                      )}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* ISSUE MODAL */}
      {showModal && (
        <div style={styles.modalOverlay}>
          <div style={styles.modal}>
            <div style={styles.modalTitle}>📖 Issue Book</div>

            <div style={styles.formGroup}>
              <label style={styles.label}>Member</label>

              <input
                style={styles.input}
                value={selectedMember?.name}
                disabled
              />
            </div>

            <div style={styles.formGroup}>
              <label style={styles.label}>Select Book</label>

              <select
                style={styles.input}
                value={selectedBook}
                onChange={(e) => setSelectedBook(e.target.value)}
              >
                <option value="">Choose Book</option>

                {books.map((book) => (
                  <option key={book}>{book}</option>
                ))}
              </select>
            </div>

            <div style={styles.formGroup}>
              <label style={styles.label}>Return Date</label>

              <input
                type="date"
                style={styles.input}
                value={returnDate}
                onChange={(e) => setReturnDate(e.target.value)}
              />
            </div>

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

              <button style={styles.saveBtn} onClick={handleIssueBook}>
                Issue Book
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
