/* eslint-disable */
// Rentals — internal rental item management, transaction tracking, and cash tracker

const RENTAL_STORE = 'familyhub_rentals';

const ITEM_CATEGORIES = [
  "Equipment", "Tools", "Electronics", "Furniture", "Vehicles",
  "Sporting Goods", "Party Supplies", "Other"
];

const ITEM_STATUS_TONE = { available: "success", rented: "info", maintenance: "warn" };
const RENTAL_STATUS_TONE = { active: "info", returned: "success", cancelled: "gray" };
const CASH_TYPE_TONE = { income: "success", manual: "info", expense: "danger" };
const CASH_TYPE_LABEL = { income: "Rental Income", manual: "Cash Added", expense: "Expense/Withdrawal" };

// ── Helpers ──────────────────────────────────────────────────────────────────

const fmtMoney = (n) => "$" + (parseFloat(n) || 0).toFixed(2);

const fmtDate = (d) => {
  if (!d) return "";
  const [y, m, day] = d.split("-");
  return new Date(y, m - 1, day).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
};

const todayStr = () => new Date().toISOString().split("T")[0];

const saveRentalsField = (fieldName, value) => {
  const store = Storage.get(RENTAL_STORE) || {};
  store[fieldName] = value;
  Storage.set(RENTAL_STORE, store);
};

const getMonthlyIncome = (rentals, months) => {
  const now = new Date();
  return Array.from({ length: months }, (_, i) => {
    const d = new Date(now.getFullYear(), now.getMonth() - (months - 1 - i), 1);
    const prefix = d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0");
    const total = rentals
      .filter(r => r.status === "returned" && (r.startDate || "").startsWith(prefix))
      .reduce((s, r) => s + (parseFloat(r.rentalAmount) || 0), 0);
    return { label: d.toLocaleDateString('en-US', { month: 'short' }), total };
  });
};

// ── Shared sub-components ────────────────────────────────────────────────────

const StatCard = ({ label, value, color, sub }) => (
  <Card className="!p-4">
    <p className="text-xs text-gray-500 dark:text-gray-400">{label}</p>
    <p className={"text-2xl font-bold " + (color || "text-gray-900 dark:text-white")}>{value}</p>
    {sub && <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{sub}</p>}
  </Card>
);

const MiniBarChart = ({ data, title }) => {
  const maxVal = Math.max(...data.map(d => d.total), 1);
  return (
    <Card>
      <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4">{title}</h3>
      <div className="flex items-end gap-2 h-28">
        {data.map((d, i) => (
          <div key={i} className="flex-1 flex flex-col items-center gap-1">
            <span className="text-xs text-gray-500 dark:text-gray-400">
              {d.total >= 1000 ? "$" + (d.total / 1000).toFixed(1) + "k" : d.total > 0 ? "$" + Math.round(d.total) : ""}
            </span>
            <div
              className="w-full bg-teal-500 dark:bg-teal-400 rounded-t transition-all"
              style={{ height: Math.max(4, (d.total / maxVal) * 88) + "px" }}
            />
            <span className="text-xs text-gray-500 dark:text-gray-400">{d.label}</span>
          </div>
        ))}
      </div>
    </Card>
  );
};

// ── Dashboard tab ────────────────────────────────────────────────────────────

const RentalsDashboard = ({ items, rentals, cashTransactions }) => {
  const today = todayStr();
  const activeRentals = rentals.filter(r => r.status === "active");

  const totalRentalIncome =
    rentals.filter(r => r.status === "returned").reduce((s, r) => s + (parseFloat(r.rentalAmount) || 0), 0);

  const cashOnHand = cashTransactions.reduce((s, t) => {
    const amt = parseFloat(t.amount) || 0;
    return t.type === "expense" ? s - amt : s + amt;
  }, 0);

  const overdueCount = activeRentals.filter(r => r.dueDate && r.dueDate < today).length;
  const upcomingCount = activeRentals.filter(r => r.dueDate && r.dueDate >= today).length;

  const monthlyIncome = React.useMemo(
    () => getMonthlyIncome(rentals, 6),
    [rentals]
  );

  const recentRentals = [...rentals]
    .sort((a, b) => (b.startDate || "").localeCompare(a.startDate || ""))
    .slice(0, 5);

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        <StatCard
          label="Total Rental Income"
          value={fmtMoney(totalRentalIncome)}
          color="text-teal-600 dark:text-teal-400"
        />
        <StatCard
          label="Cash on Hand"
          value={fmtMoney(cashOnHand)}
          color={cashOnHand >= 0 ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"}
        />
        <StatCard
          label="Active Rentals"
          value={activeRentals.length}
          color="text-blue-600 dark:text-blue-400"
          sub={overdueCount > 0 ? overdueCount + " overdue" : undefined}
        />
        <StatCard
          label="Total Items"
          value={items.length}
          color="text-purple-600 dark:text-purple-400"
          sub={upcomingCount > 0 ? upcomingCount + " returns upcoming" : undefined}
        />
      </div>

      <MiniBarChart data={monthlyIncome} title="Monthly Rental Income (Last 6 Months)" />

      <Card>
        <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Recent Rentals</h3>
        {recentRentals.length === 0 && (
          <p className="text-gray-400 text-sm text-center py-4">No rentals yet</p>
        )}
        <div className="space-y-2">
          {recentRentals.map(r => (
            <div key={r.id} className="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700 last:border-0">
              <div>
                <p className="text-sm font-medium text-gray-900 dark:text-white">{r.customerName || "Unknown"}</p>
                <p className="text-xs text-gray-500 dark:text-gray-400">{fmtDate(r.startDate)}</p>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-sm font-bold text-gray-900 dark:text-white">{fmtMoney(r.rentalAmount)}</span>
                <Pill tone={RENTAL_STATUS_TONE[r.status]}>{r.status}</Pill>
              </div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
};

// ── Rental Items tab ─────────────────────────────────────────────────────────

const BLANK_ITEM = {
  name: "", category: "Equipment", rentalPrice: "", pricingType: "daily",
  depositAmount: "", quantity: "1", status: "available", notes: ""
};

const ItemForm = ({ data, onChange }) => (
  <div className="space-y-4">
    <div>
      <Label required>Item Name</Label>
      <Input placeholder="e.g. Pressure Washer" value={data.name} onChange={e => onChange({ ...data, name: e.target.value })} autoFocus />
    </div>
    <div className="grid grid-cols-2 gap-3">
      <div>
        <Label required>Category</Label>
        <Select value={data.category} onChange={e => onChange({ ...data, category: e.target.value })}>
          {ITEM_CATEGORIES.map(c => <option key={c} value={c}>{c}</option>)}
        </Select>
      </div>
      <div>
        <Label required>Status</Label>
        <Select value={data.status} onChange={e => onChange({ ...data, status: e.target.value })}>
          <option value="available">Available</option>
          <option value="rented">Rented</option>
          <option value="maintenance">Maintenance</option>
        </Select>
      </div>
    </div>
    <div className="grid grid-cols-2 gap-3">
      <div>
        <Label required>Rental Price ($)</Label>
        <Input type="number" step="0.01" placeholder="0.00" value={data.rentalPrice} onChange={e => onChange({ ...data, rentalPrice: e.target.value })} />
      </div>
      <div>
        <Label required>Pricing Type</Label>
        <Select value={data.pricingType} onChange={e => onChange({ ...data, pricingType: e.target.value })}>
          <option value="daily">Daily</option>
          <option value="weekly">Weekly</option>
          <option value="monthly">Monthly</option>
        </Select>
      </div>
    </div>
    <div className="grid grid-cols-2 gap-3">
      <div>
        <Label>Deposit Amount ($)</Label>
        <Input type="number" step="0.01" placeholder="0.00" value={data.depositAmount} onChange={e => onChange({ ...data, depositAmount: e.target.value })} />
      </div>
      <div>
        <Label>Quantity</Label>
        <Input type="number" min="1" placeholder="1" value={data.quantity} onChange={e => onChange({ ...data, quantity: e.target.value })} />
      </div>
    </div>
    <div>
      <Label>Notes</Label>
      <Textarea rows="2" placeholder="Optional notes" value={data.notes} onChange={e => onChange({ ...data, notes: e.target.value })} />
    </div>
  </div>
);

const RentalItemsView = ({ items, onSave }) => {
  const [showAdd, setShowAdd] = React.useState(false);
  const [editItem, setEditItem] = React.useState(null);
  const [draft, setDraft] = React.useState(BLANK_ITEM);
  const [search, setSearch] = React.useState("");
  const [filterStatus, setFilterStatus] = React.useState("");

  const filtered = React.useMemo(() => {
    let result = [...items];
    if (search) {
      const q = search.toLowerCase();
      result = result.filter(i => (i.name || "").toLowerCase().includes(q) || (i.category || "").toLowerCase().includes(q));
    }
    if (filterStatus) result = result.filter(i => i.status === filterStatus);
    return result;
  }, [items, search, filterStatus]);

  const addItem = () => {
    if (!draft.name?.trim() || !draft.rentalPrice) return;
    onSave([...items, {
      ...draft,
      id: Date.now() + "-" + Math.random().toString(36).slice(2),
      name: draft.name.trim(),
      rentalPrice: parseFloat(draft.rentalPrice),
      depositAmount: parseFloat(draft.depositAmount) || 0,
      quantity: parseInt(draft.quantity) || 1,
    }]);
    setDraft(BLANK_ITEM);
    setShowAdd(false);
  };

  const saveEdit = () => {
    if (!editItem.name?.trim() || !editItem.rentalPrice) return;
    onSave(items.map(i => i.id === editItem.id ? {
      ...i,
      name: editItem.name.trim(),
      category: editItem.category,
      rentalPrice: parseFloat(editItem.rentalPrice),
      pricingType: editItem.pricingType,
      depositAmount: parseFloat(editItem.depositAmount) || 0,
      quantity: parseInt(editItem.quantity) || 1,
      status: editItem.status,
      notes: editItem.notes,
    } : i));
    setEditItem(null);
  };

  const deleteItem = (id) => {
    if (!window.confirm("Delete this rental item?")) return;
    onSave(items.filter(i => i.id !== id));
  };

  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <p className="text-sm text-gray-500 dark:text-gray-400">{filtered.length} item{filtered.length !== 1 ? "s" : ""}</p>
        <BtnPrimary onClick={() => setShowAdd(true)}>+ Add Item</BtnPrimary>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <Input placeholder="Search items..." value={search} onChange={e => setSearch(e.target.value)} />
        <Select value={filterStatus} onChange={e => setFilterStatus(e.target.value)}>
          <option value="">All Statuses</option>
          <option value="available">Available</option>
          <option value="rented">Rented</option>
          <option value="maintenance">Maintenance</option>
        </Select>
      </div>

      <div className="space-y-3">
        {filtered.length === 0 && <p className="text-gray-400 text-center py-8">No items found</p>}
        {filtered.map(item => (
          <Card key={item.id}>
            <div className="flex justify-between items-start">
              <div className="min-w-0 flex-1">
                <h3 className="text-base font-semibold text-gray-900 dark:text-white">{item.name}</h3>
                <div className="flex items-center gap-2 mt-1 flex-wrap">
                  <Pill tone="gray">{item.category}</Pill>
                  <Pill tone={ITEM_STATUS_TONE[item.status]}>{item.status}</Pill>
                  <span className="text-xs text-gray-500 dark:text-gray-400">Qty: {item.quantity}</span>
                </div>
                {item.notes && <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{item.notes}</p>}
              </div>
              <div className="text-right ml-3 shrink-0">
                <p className="text-base font-bold text-teal-600 dark:text-teal-400">
                  {fmtMoney(item.rentalPrice)}
                  <span className="text-xs font-normal text-gray-500 dark:text-gray-400">/{item.pricingType}</span>
                </p>
                {item.depositAmount > 0 && (
                  <p className="text-xs text-gray-500 dark:text-gray-400">Deposit: {fmtMoney(item.depositAmount)}</p>
                )}
              </div>
            </div>
            <div className="flex gap-3 mt-2 text-sm">
              <button
                onClick={() => setEditItem({ ...item, rentalPrice: String(item.rentalPrice), depositAmount: String(item.depositAmount || ""), quantity: String(item.quantity) })}
                className="text-blue-600 dark:text-blue-400 hover:underline"
              >Edit</button>
              <button onClick={() => deleteItem(item.id)} className="text-red-600 dark:text-red-400 hover:underline">Delete</button>
            </div>
          </Card>
        ))}
      </div>

      {showAdd && (
        <Modal title="Add Rental Item" onClose={() => setShowAdd(false)} onSubmit={addItem} submitLabel="Add Item">
          <ItemForm data={draft} onChange={setDraft} />
        </Modal>
      )}

      {editItem && (
        <Modal title="Edit Rental Item" onClose={() => setEditItem(null)} onSubmit={saveEdit} submitLabel="Save">
          <ItemForm data={editItem} onChange={setEditItem} />
        </Modal>
      )}
    </div>
  );
};

// ── Rentals / Transactions tab ───────────────────────────────────────────────

const BLANK_RENTAL = {
  itemId: "", customerName: "", startDate: "", dueDate: "",
  rentalAmount: "", depositAmount: "", notes: "", status: "active",
  paymentMethod: "cash"
};

const RentalForm = ({ data, onChange, items }) => (
  <div className="space-y-4">
    <div>
      <Label>Rental Item</Label>
      <Select value={data.itemId} onChange={e => onChange({ ...data, itemId: e.target.value })}>
        <option value="">— Select item (optional) —</option>
        {items.map(i => <option key={i.id} value={i.id}>{i.name}</option>)}
      </Select>
    </div>
    <div>
      <Label required>Customer / Borrower Name</Label>
      <Input placeholder="Full name" value={data.customerName} onChange={e => onChange({ ...data, customerName: e.target.value })} autoFocus />
    </div>
    <div className="grid grid-cols-2 gap-3">
      <div>
        <Label required>Start Date</Label>
        <Input type="date" value={data.startDate} onChange={e => onChange({ ...data, startDate: e.target.value })} />
      </div>
      <div>
        <Label>Return / Due Date</Label>
        <Input type="date" value={data.dueDate} onChange={e => onChange({ ...data, dueDate: e.target.value })} />
      </div>
    </div>
    <div className="grid grid-cols-2 gap-3">
      <div>
        <Label required>Rental Amount ($)</Label>
        <Input type="number" step="0.01" placeholder="0.00" value={data.rentalAmount} onChange={e => onChange({ ...data, rentalAmount: e.target.value })} />
      </div>
      <div>
        <Label>Deposit ($)</Label>
        <Input type="number" step="0.01" placeholder="0.00" value={data.depositAmount} onChange={e => onChange({ ...data, depositAmount: e.target.value })} />
      </div>
    </div>
    <div className="grid grid-cols-2 gap-3">
      <div>
        <Label required>Status</Label>
        <Select value={data.status} onChange={e => onChange({ ...data, status: e.target.value })}>
          <option value="active">Active</option>
          <option value="returned">Returned</option>
          <option value="cancelled">Cancelled</option>
        </Select>
      </div>
      <div>
        <Label required>Payment Method</Label>
        <Select value={data.paymentMethod || "cash"} onChange={e => onChange({ ...data, paymentMethod: e.target.value })}>
          <option value="cash">Cash</option>
          <option value="interac">Interac (Bank Transfer)</option>
        </Select>
      </div>
    </div>
    <div>
      <Label>Notes</Label>
      <Textarea rows="2" placeholder="Optional notes" value={data.notes} onChange={e => onChange({ ...data, notes: e.target.value })} />
    </div>
  </div>
);

const RentalTransactionsView = ({ rentals, items, onSave, onItemsUpdated, cashTransactions, onCashUpdated }) => {
  const [showAdd, setShowAdd] = React.useState(false);
  const [editRental, setEditRental] = React.useState(null);
  const [draft, setDraft] = React.useState({ ...BLANK_RENTAL, startDate: todayStr() });
  const [filterStatus, setFilterStatus] = React.useState("");
  const [search, setSearch] = React.useState("");

  const filtered = React.useMemo(() => {
    let result = [...rentals];
    if (search) {
      const q = search.toLowerCase();
      result = result.filter(r => (r.customerName || "").toLowerCase().includes(q));
    }
    if (filterStatus) result = result.filter(r => r.status === filterStatus);
    return result.sort((a, b) => (b.startDate || "").localeCompare(a.startDate || ""));
  }, [rentals, search, filterStatus]);

  const getItemName = (itemId) => (items.find(i => i.id === itemId) || {}).name || "";

  // Auto-add a cash income entry when a rental is paid by cash
  const autoAddCashIncome = (rental) => {
    if ((rental.paymentMethod || "cash") !== "cash") return;
    onCashUpdated([...cashTransactions, {
      id: Date.now() + "-" + Math.random().toString(36).slice(2),
      type: "income",
      amount: parseFloat(rental.rentalAmount) || 0,
      notes: "Rental income — " + rental.customerName,
      date: todayStr(),
    }]);
  };

  const handleAdd = () => {
    if (!draft.customerName?.trim() || !draft.startDate || !draft.rentalAmount) return;
    const newRental = {
      ...draft,
      id: Date.now() + "-" + Math.random().toString(36).slice(2),
      customerName: draft.customerName.trim(),
      rentalAmount: parseFloat(draft.rentalAmount),
      depositAmount: parseFloat(draft.depositAmount) || 0,
    };
    onSave([...rentals, newRental]);
    if (draft.itemId) {
      onItemsUpdated(items.map(i => i.id === draft.itemId ? { ...i, status: "rented" } : i));
    }
    if (newRental.status === "returned") autoAddCashIncome(newRental);
    setDraft({ ...BLANK_RENTAL, startDate: todayStr() });
    setShowAdd(false);
  };

  const handleSaveEdit = () => {
    if (!editRental.customerName?.trim() || !editRental.startDate || !editRental.rentalAmount) return;
    const prev = rentals.find(r => r.id === editRental.id);
    onSave(rentals.map(r => r.id === editRental.id ? {
      ...r,
      itemId: editRental.itemId,
      customerName: editRental.customerName.trim(),
      startDate: editRental.startDate,
      dueDate: editRental.dueDate,
      rentalAmount: parseFloat(editRental.rentalAmount),
      depositAmount: parseFloat(editRental.depositAmount) || 0,
      notes: editRental.notes,
      status: editRental.status,
      paymentMethod: editRental.paymentMethod || "cash",
    } : r));
    const becomingReturned = prev && prev.status !== "returned" && editRental.status === "returned";
    if (becomingReturned && editRental.itemId) {
      onItemsUpdated(items.map(i => i.id === editRental.itemId ? { ...i, status: "available" } : i));
    }
    if (becomingReturned) autoAddCashIncome(editRental);
    setEditRental(null);
  };

  const deleteRental = (id) => {
    if (!window.confirm("Delete this rental record?")) return;
    onSave(rentals.filter(r => r.id !== id));
  };

  const today = todayStr();

  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <p className="text-sm text-gray-500 dark:text-gray-400">{filtered.length} rental{filtered.length !== 1 ? "s" : ""}</p>
        <BtnPrimary onClick={() => setShowAdd(true)}>+ Add Rental</BtnPrimary>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <Input placeholder="Search by customer..." value={search} onChange={e => setSearch(e.target.value)} />
        <Select value={filterStatus} onChange={e => setFilterStatus(e.target.value)}>
          <option value="">All Statuses</option>
          <option value="active">Active</option>
          <option value="returned">Returned</option>
          <option value="cancelled">Cancelled</option>
        </Select>
      </div>

      <div className="space-y-3">
        {filtered.length === 0 && <p className="text-gray-400 text-center py-8">No rentals found</p>}
        {filtered.map(r => {
          const isOverdue = r.status === "active" && r.dueDate && r.dueDate < today;
          const itemName = r.itemId ? getItemName(r.itemId) : "";
          return (
            <Card key={r.id}>
              <div className="flex justify-between items-start">
                <div className="min-w-0 flex-1">
                  <h3 className="text-base font-semibold text-gray-900 dark:text-white">{r.customerName}</h3>
                  <div className="flex items-center gap-2 mt-1 flex-wrap">
                    <Pill tone={RENTAL_STATUS_TONE[r.status]}>{r.status}</Pill>
                    {isOverdue && <Pill tone="danger">Overdue</Pill>}
                    {(r.paymentMethod || "cash") === "interac" && <Pill tone="purple">Interac</Pill>}
                    {itemName && <span className="text-xs text-gray-500 dark:text-gray-400">{itemName}</span>}
                  </div>
                  <div className="flex gap-3 text-xs text-gray-500 dark:text-gray-400 mt-1">
                    <span>Start: {fmtDate(r.startDate)}</span>
                    {r.dueDate && <span>Due: {fmtDate(r.dueDate)}</span>}
                  </div>
                  {r.notes && <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{r.notes}</p>}
                </div>
                <div className="text-right ml-3 shrink-0">
                  <p className="text-base font-bold text-teal-600 dark:text-teal-400">{fmtMoney(r.rentalAmount)}</p>
                  {r.depositAmount > 0 && (
                    <p className="text-xs text-gray-500 dark:text-gray-400">Deposit: {fmtMoney(r.depositAmount)}</p>
                  )}
                </div>
              </div>
              <div className="flex gap-3 mt-2 text-sm">
                <button
                  onClick={() => setEditRental({ ...r, rentalAmount: String(r.rentalAmount), depositAmount: String(r.depositAmount || "") })}
                  className="text-blue-600 dark:text-blue-400 hover:underline"
                >Edit</button>
                <button onClick={() => deleteRental(r.id)} className="text-red-600 dark:text-red-400 hover:underline">Delete</button>
              </div>
            </Card>
          );
        })}
      </div>

      {showAdd && (
        <Modal title="Add Rental" onClose={() => setShowAdd(false)} onSubmit={handleAdd} submitLabel="Add Rental">
          <RentalForm data={draft} onChange={setDraft} items={items} />
        </Modal>
      )}

      {editRental && (
        <Modal title="Edit Rental" onClose={() => setEditRental(null)} onSubmit={handleSaveEdit} submitLabel="Save">
          <RentalForm data={editRental} onChange={setEditRental} items={items} />
        </Modal>
      )}
    </div>
  );
};

// ── Cash on Hand tab ─────────────────────────────────────────────────────────

const CashView = ({ cashTransactions, onSave }) => {
  const [showAdd, setShowAdd] = React.useState(false);
  const [draft, setDraft] = React.useState({ type: "manual", amount: "", notes: "", date: todayStr() });

  const balance = cashTransactions.reduce((s, t) => {
    const amt = parseFloat(t.amount) || 0;
    return t.type === "expense" ? s - amt : s + amt;
  }, 0);

  const sorted = [...cashTransactions].sort((a, b) => (b.date || "").localeCompare(a.date || ""));

  const addTransaction = () => {
    if (!draft.amount || parseFloat(draft.amount) <= 0) return;
    onSave([...cashTransactions, {
      ...draft,
      id: Date.now() + "-" + Math.random().toString(36).slice(2),
      amount: parseFloat(draft.amount),
      date: draft.date || todayStr(),
    }]);
    setDraft({ type: "manual", amount: "", notes: "", date: todayStr() });
    setShowAdd(false);
  };

  const deleteTransaction = (id) => {
    if (!window.confirm("Delete this cash entry?")) return;
    onSave(cashTransactions.filter(t => t.id !== id));
  };

  return (
    <div className="space-y-4">
      <div className="flex items-start gap-4">
        <Card className="!p-4 flex-1">
          <p className="text-xs text-gray-500 dark:text-gray-400">Current Cash on Hand</p>
          <p className={"text-3xl font-bold " + (balance >= 0 ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400")}>
            {fmtMoney(balance)}
          </p>
          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Income + Cash Added − Expenses</p>
        </Card>
        <BtnPrimary className="shrink-0 mt-1" onClick={() => setShowAdd(true)}>+ Add Entry</BtnPrimary>
      </div>

      <div className="space-y-3">
        {sorted.length === 0 && <p className="text-gray-400 text-center py-8">No cash entries yet</p>}
        {sorted.map(t => (
          <Card key={t.id} className="!p-4">
            <div className="flex justify-between items-center">
              <div>
                <div className="flex items-center gap-2">
                  <Pill tone={CASH_TYPE_TONE[t.type]}>{CASH_TYPE_LABEL[t.type]}</Pill>
                  <span className="text-xs text-gray-500 dark:text-gray-400">{fmtDate(t.date)}</span>
                </div>
                {t.notes && <p className="text-sm text-gray-700 dark:text-gray-300 mt-1">{t.notes}</p>}
              </div>
              <div className="flex items-center gap-3 ml-3 shrink-0">
                <p className={"text-base font-bold " + (t.type === "expense" ? "text-red-600 dark:text-red-400" : "text-green-600 dark:text-green-400")}>
                  {t.type === "expense" ? "−" : "+"}{fmtMoney(t.amount)}
                </p>
                <button onClick={() => deleteTransaction(t.id)} className="text-red-600 dark:text-red-400 hover:underline text-sm">Delete</button>
              </div>
            </div>
          </Card>
        ))}
      </div>

      {showAdd && (
        <Modal title="Add Cash Entry" onClose={() => setShowAdd(false)} onSubmit={addTransaction} submitLabel="Add">
          <div className="space-y-4">
            <div>
              <Label required>Type</Label>
              <Select value={draft.type} onChange={e => setDraft({ ...draft, type: e.target.value })}>
                <option value="manual">Cash Added</option>
                <option value="income">Rental Income</option>
                <option value="expense">Expense / Withdrawal</option>
              </Select>
            </div>
            <div>
              <Label required>Amount ($)</Label>
              <Input type="number" step="0.01" inputMode="decimal" placeholder="0.00" value={draft.amount} onChange={e => setDraft({ ...draft, amount: e.target.value })} autoFocus />
            </div>
            <div>
              <Label>Date</Label>
              <Input type="date" value={draft.date} onChange={e => setDraft({ ...draft, date: e.target.value })} />
            </div>
            <div>
              <Label>Notes / Reason</Label>
              <Textarea rows="2" placeholder="Optional notes" value={draft.notes} onChange={e => setDraft({ ...draft, notes: e.target.value })} />
            </div>
          </div>
        </Modal>
      )}
    </div>
  );
};

// ── Main Screen ──────────────────────────────────────────────────────────────

const RentalsScreen = () => {
  const [tab, setTab] = React.useState("dashboard");
  const [items, setItems] = React.useState(() => Storage.getArray(RENTAL_STORE, 'items'));
  const [rentals, setRentals] = React.useState(() => Storage.getArray(RENTAL_STORE, 'rentals'));
  const [cashTransactions, setCashTransactions] = React.useState(() => Storage.getArray(RENTAL_STORE, 'cashTransactions'));

  React.useEffect(() => {
    const onSync = () => {
      setItems(Storage.getArray(RENTAL_STORE, 'items'));
      setRentals(Storage.getArray(RENTAL_STORE, 'rentals'));
      setCashTransactions(Storage.getArray(RENTAL_STORE, 'cashTransactions'));
    };
    window.addEventListener('familyhub-synced', onSync);
    return () => window.removeEventListener('familyhub-synced', onSync);
  }, []);

  const saveItems = (val) => { setItems(val); saveRentalsField('items', val); };
  const saveRentals = (val) => { setRentals(val); saveRentalsField('rentals', val); };
  const saveCash = (val) => { setCashTransactions(val); saveRentalsField('cashTransactions', val); };

  const TABS = [
    { id: "dashboard", label: "Dashboard" },
    { id: "items",     label: "Rental Items" },
    { id: "rentals",   label: "Rentals" },
    { id: "cash",      label: "Cash on Hand" },
  ];

  return (
    <section className="p-4 md:p-6">
      <h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-4">Rentals</h2>

      <div className="flex gap-1 mb-6 overflow-x-auto pb-1 border-b border-gray-200 dark:border-gray-700 -mx-4 px-4 md:mx-0 md:px-0">
        {TABS.map(t => (
          <button
            key={t.id}
            onClick={() => setTab(t.id)}
            className={
              "whitespace-nowrap px-3 py-2 text-sm font-medium border-b-2 transition-colors " +
              (tab === t.id
                ? "border-blue-500 text-blue-600 dark:text-blue-400"
                : "border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
            }
          >
            {t.label}
          </button>
        ))}
      </div>

      {tab === "dashboard" && (
        <RentalsDashboard items={items} rentals={rentals} cashTransactions={cashTransactions} />
      )}
      {tab === "items" && (
        <RentalItemsView items={items} onSave={saveItems} />
      )}
      {tab === "rentals" && (
        <RentalTransactionsView rentals={rentals} items={items} onSave={saveRentals} onItemsUpdated={saveItems} cashTransactions={cashTransactions} onCashUpdated={saveCash} />
      )}
      {tab === "cash" && (
        <CashView cashTransactions={cashTransactions} onSave={saveCash} />
      )}
    </section>
  );
};

window.RentalsScreen = RentalsScreen;