import { useMemo, useState } from "react";

/* ================= SAMPLE DATA ================= */
const initialIncome = [
  {
    id: 1,
    name: "Transport fees",
    desc: "",
    invoice: "",
    date: "2026-05-01",
    head: "Middle class",
    amount: 900,
  },
  {
    id: 2,
    name: "Admission fees",
    desc: "",
    invoice: "",
    date: "2026-05-01",
    head: "Primary",
    amount: 2500,
  },
];

export default function Income() {
  const [income, setIncome] = useState(initialIncome);
  const [search, setSearch] = useState("");
  const [openForm, setOpenForm] = useState(true); // SIDE PANEL ALWAYS OPEN

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

  /* ================= FILTER ================= */
  const filtered = useMemo(() => {
    return income.filter((i) => {
      const q = search.toLowerCase();
      return (
        i.name.toLowerCase().includes(q) ||
        i.head.toLowerCase().includes(q) ||
        i.date.includes(q)
      );
    });
  }, [income, search]);

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

    setIncome([
      {
        id: Date.now(),
        ...form,
        amount: Number(form.amount),
      },
      ...income,
    ]);

    setForm({
      head: "",
      name: "",
      invoice: "",
      date: "",
      amount: "",
      desc: "",
    });
  };

  const handleDelete = (id) => {
    setIncome(income.filter((i) => i.id !== id));
  };

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

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

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

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

        .card {
          background: white;
          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;
          font-size: 13px;
          border-bottom: 1px solid #eee;
        }

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

        .amount {
          font-weight: 700;
          color: #16a34a;
        }

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

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

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

        .form input,
        .form select,
        .form 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 List</div>

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

            <table>
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Date</th>
                  <th>Head</th>
                  <th>Amount</th>
                  <th>Action</th>
                </tr>
              </thead>

              <tbody>
                {filtered.map((i) => (
                  <tr key={i.id}>
                    <td>{i.name}</td>
                    <td>{i.date}</td>
                    <td>{i.head}</td>
                    <td className="amount">₹{i.amount}</td>
                    <td>
                      <button
                        className="delete"
                        onClick={() => handleDelete(i.id)}
                      >
                        Delete
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* ================= RIGHT SIDE FORM ================= */}
        <div className="right">
          <div className="panel-title">➕ Add Income</div>
          <div className="hint">Fill details to add new income entry</div>

          <div className="form">
            <select
              value={form.head}
              onChange={(e) => setForm({ ...form, head: e.target.value })}
            >
              <option>Select Income Head</option>
              <option>Primary</option>
              <option>Middle class</option>
              <option>Pre primary</option>
            </select>

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

            <input
              placeholder="Invoice Number"
              value={form.invoice}
              onChange={(e) => setForm({ ...form, invoice: e.target.value })}
            />

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

            <input
              type="number"
              placeholder="Amount"
              value={form.amount}
              onChange={(e) => setForm({ ...form, amount: e.target.value })}
            />

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

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