import { useMemo, useState } from "react";

/* ================= SAMPLE DATA ================= */
const incomeData = [
  {
    id: 1,
    name: "Transport fees",
    invoice: "INV-001",
    head: "Middle class",
    date: "2026-05-01",
    amount: 900,
  },
  {
    id: 2,
    name: "Admission fees",
    invoice: "INV-002",
    head: "Primary",
    date: "2026-05-02",
    amount: 2500,
  },
  {
    id: 3,
    name: "Examination fees",
    invoice: "INV-003",
    head: "Primary",
    date: "2026-05-03",
    amount: 700,
  },
];

export default function SearchIncome() {
  const [searchType, setSearchType] = useState("name");
  const [search, setSearch] = useState("");

  /* ================= FILTER ================= */
  const filtered = useMemo(() => {
    return incomeData.filter((item) => {
      if (!search) return true;

      const value = search.toLowerCase();

      if (searchType === "name") {
        return item.name.toLowerCase().includes(value);
      }

      if (searchType === "invoice") {
        return item.invoice.toLowerCase().includes(value);
      }

      if (searchType === "head") {
        return item.head.toLowerCase().includes(value);
      }

      if (searchType === "date") {
        return item.date.includes(value);
      }

      return true;
    });
  }, [search, searchType]);

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

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

        .container {
          padding: 20px;
        }

        .card {
          background: #fff;
          border-radius: 12px;
          padding: 18px;
          border: 1px solid #eee;
        }

        .title {
          font-size: 20px;
          font-weight: 700;
          margin-bottom: 12px;
        }

        .filters {
          display: flex;
          gap: 10px;
          margin-bottom: 12px;
        }

        select, input {
          padding: 10px;
          border: 1px solid #ddd;
          border-radius: 8px;
          width: 100%;
        }

        table {
          width: 100%;
          border-collapse: collapse;
          margin-top: 10px;
        }

        th {
          background: #f9fafb;
          padding: 10px;
          text-align: left;
          border-bottom: 1px solid #eee;
          font-size: 13px;
        }

        td {
          padding: 10px;
          border-bottom: 1px solid #eee;
          font-size: 13px;
        }

        .no-data {
          text-align: center;
          padding: 20px;
          color: #6b7280;
        }

        .footer {
          margin-top: 10px;
          font-size: 12px;
          color: #6b7280;
        }

      `}</style>

      <div className="container">
        <div className="card">
          {/* TITLE */}
          <div className="title">🔍 Search Income</div>

          {/* FILTER */}
          <div className="filters">
            <select
              value={searchType}
              onChange={(e) => setSearchType(e.target.value)}
            >
              <option value="name">Search By Income</option>
              <option value="invoice">Invoice Number</option>
              <option value="head">Income Head</option>
              <option value="date">Date</option>
            </select>

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

          {/* TABLE */}
          <table>
            <thead>
              <tr>
                <th>Name</th>
                <th>Invoice Number</th>
                <th>Income Head</th>
                <th>Date</th>
                <th>Amount ($)</th>
              </tr>
            </thead>

            <tbody>
              {filtered.length === 0 ? (
                <tr>
                  <td colSpan="5" className="no-data">
                    No data available in table <br />
                    <small>
                      Add new record or search with different criteria.
                    </small>
                  </td>
                </tr>
              ) : (
                filtered.map((item) => (
                  <tr key={item.id}>
                    <td>{item.name}</td>
                    <td>{item.invoice}</td>
                    <td>{item.head}</td>
                    <td>{item.date}</td>
                    <td>${item.amount}</td>
                  </tr>
                ))
              )}
            </tbody>
          </table>

          {/* FOOTER */}
          <div className="footer">
            Records: 0 to {filtered.length} of {incomeData.length}
          </div>
        </div>
      </div>
    </>
  );
}
