import { useMemo, useState } from "react";

/* ================= SAMPLE DATA ================= */
const initialHeads = [
  { id: 1, name: "Pre primary", desc: "" },
  { id: 2, name: "Primary", desc: "" },
  { id: 3, name: "Middle class", desc: "" },
];

export default function IncomeHead() {
  const [heads, setHeads] = useState(initialHeads);
  const [search, setSearch] = useState("");

  const [form, setForm] = useState({
    name: "",
    desc: "",
  });

  /* ================= FILTER ================= */
  const filtered = useMemo(() => {
    return heads.filter((h) =>
      h.name.toLowerCase().includes(search.toLowerCase()),
    );
  }, [heads, search]);

  /* ================= ADD ================= */
  const handleSave = () => {
    if (!form.name) return;

    setHeads([
      {
        id: Date.now(),
        name: form.name,
        desc: form.desc,
      },
      ...heads,
    ]);

    setForm({ name: "", desc: "" });
  };

  /* ================= DELETE ================= */
  const handleDelete = (id) => {
    setHeads(heads.filter((h) => h.id !== id));
  };

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

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

        .page {
          display: flex;
          height: 100vh;
        }

        /* LEFT */
        .left {
          flex: 2;
          padding: 20px;
        }

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

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

        .search {
          width: 100%;
          padding: 10px;
          border: 1px solid #ddd;
          border-radius: 8px;
          margin-bottom: 12px;
        }

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

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

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

        .delete {
          background: #ef4444;
          color: white;
          border: none;
          padding: 6px 10px;
          border-radius: 6px;
          cursor: pointer;
        }

        /* RIGHT FORM */
        .right {
          flex: 1;
          background: #fff;
          border-left: 1px solid #eee;
          padding: 20px;
        }

        .panel-title {
          font-size: 18px;
          font-weight: 700;
          margin-bottom: 14px;
        }

        input, textarea {
          width: 100%;
          padding: 10px;
          margin-bottom: 10px;
          border: 1px solid #ddd;
          border-radius: 8px;
          outline: none;
        }

        .btn {
          width: 100%;
          padding: 10px;
          background: #2563eb;
          color: white;
          border: none;
          border-radius: 8px;
          cursor: pointer;
          font-weight: 600;
        }

        .hint {
          font-size: 12px;
          color: #6b7280;
          margin-bottom: 10px;
        }
      `}</style>

      <div className="page">
        {/* ================= LEFT SIDE ================= */}
        <div className="left">
          <div className="card">
            <div className="title">💰 Income Head List</div>

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

            <table>
              <thead>
                <tr>
                  <th>Income Head</th>
                  <th>Description</th>
                  <th>Action</th>
                </tr>
              </thead>

              <tbody>
                {filtered.map((h) => (
                  <tr key={h.id}>
                    <td>{h.name}</td>
                    <td>{h.desc || "-"}</td>
                    <td>
                      <button
                        className="delete"
                        onClick={() => handleDelete(h.id)}
                      >
                        Delete
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* ================= RIGHT SIDE ================= */}
        <div className="right">
          <div className="panel-title">➕ Add Income Head</div>
          <div className="hint">Create new income categories</div>

          <input
            placeholder="Income Head *"
            value={form.name}
            onChange={(e) => setForm({ ...form, name: e.target.value })}
          />

          <textarea
            rows="3"
            placeholder="Description"
            value={form.desc}
            onChange={(e) => setForm({ ...form, desc: e.target.value })}
          />

          <button className="btn" onClick={handleSave}>
            Save Income Head
          </button>
        </div>
      </div>
    </>
  );
}
