"use client";

import { Fragment, memo, useCallback, useMemo, useState, useRef, useEffect } from "react";
import {
  useSharedTransactions,
  useParticipantBalances,
  useParticipants,
  useCreateParticipant,
  useRecordPayment,
  usePaymentHistory,
  useDeletePayment,
  useCurrentUser,
  useTags,
  useTrips,
  type SplitPayment,
} from "@/lib/hooks";
import type { SharedTransactionRow } from "@/lib/queries";
import { EditTransactionModal } from "@/components/edit-transaction-modal";
import { OrderDetails } from "@/components/order-details";
import { formatCategory } from "@/lib/categories";
import { CATEGORY_COLORS } from "@/lib/category-colors";

// One formatter, reused. `toLocaleDateString` constructs a fresh
// Intl.DateTimeFormat per call, and this page renders every split row at once —
// 2,558 calls per render was 520ms of the expand-click freeze on its own.
const DATE_FMT = new Intl.DateTimeFormat("en-AU", { day: "numeric", month: "short", year: "numeric" });
function formatDate(d: string) {
  return DATE_FMT.format(new Date(d));
}

const SPEND_TYPES = new Set(["debit", "fee", "interest"]);

function formatAmount(n: number, type?: string, currency?: string) {
  // A bare "$" on a non-AUD row was the visible half of the problem: the row
  // read as dollars while the participant balances converted to AUD, so the
  // two disagreed on screen with nothing to explain why.
  const value = Number(n).toFixed(2);
  const formatted = !currency || currency === "AUD" ? `$${value}` : `${currency} ${value}`;
  return type && !SPEND_TYPES.has(type) ? `+${formatted}` : formatted;
}

// ── Tag multi-select ──────────────────────────────────────────────────────────
function TagFilter({ value, onChange }: { value: string[]; onChange: (v: string[]) => void }) {
  const { data: tags = [] } = useTags();
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    function handler(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    }
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, []);

  const toggle = (id: string) => {
    let next: string[];
    if (value.includes(id)) {
      next = value.filter((x) => x !== id);
    } else if (id === "untagged") {
      next = ["untagged"];
    } else {
      next = [...value.filter((x) => x !== "untagged"), id];
    }
    onChange(next);
  };

  const label = value.length === 0 ? "All Tags"
    : value.includes("untagged") ? "No tags"
    : value.length === 1 ? (tags.find((t) => String(t.id) === value[0])?.name ?? "1 tag")
    : `${value.length} tags`;

  return (
    <div ref={ref} className="relative">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className={`border rounded px-3 py-1.5 text-sm flex items-center gap-2 min-w-[120px] bg-zinc-900 ${value.length > 0 ? "border-indigo-500 text-white" : "border-zinc-700 text-zinc-400"}`}
      >
        <span className="flex-1 text-left">{label}</span>
        <span className="text-zinc-500 text-xs">▾</span>
      </button>
      {open && (
        <div className="absolute top-full mt-1 z-20 bg-zinc-900 border border-zinc-700 rounded-lg shadow-xl min-w-[160px] max-h-56 overflow-y-auto">
          <label className="flex items-center gap-2 px-3 py-1.5 hover:bg-zinc-800 cursor-pointer text-sm border-b border-zinc-800">
            <input type="checkbox" checked={value.includes("untagged")} onChange={() => toggle("untagged")}
              className="accent-indigo-500 flex-shrink-0" />
            <span className="text-zinc-400 italic">No tags</span>
          </label>
          {tags.map((t) => (
            <label key={t.id} className="flex items-center gap-2 px-3 py-1.5 hover:bg-zinc-800 cursor-pointer text-sm">
              <input type="checkbox" checked={value.includes(String(t.id))} onChange={() => toggle(String(t.id))}
                className="accent-indigo-500 flex-shrink-0" />
              <span className="w-2 h-2 rounded-full flex-shrink-0" style={{ backgroundColor: t.color }} />
              {t.name}
            </label>
          ))}
        </div>
      )}
    </div>
  );
}

// ── Add Participant ───────────────────────────────────────────────────────────
function AddParticipantForm({ onDone }: { onDone: () => void }) {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");
  const create = useCreateParticipant();

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError("");
    if (!name.trim()) { setError("Name is required"); return; }
    try {
      await create.mutateAsync({ name: name.trim(), email: email.trim() || undefined });
      onDone();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to create");
    }
  }

  return (
    <form onSubmit={handleSubmit} className="bg-zinc-900 border border-zinc-700 rounded-xl p-4 space-y-3">
      <p className="text-sm font-medium">Add Participant</p>
      <div className="flex gap-2">
        <input type="text" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)}
          className="flex-1 bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:border-zinc-500" />
        <input type="email" placeholder="Email (optional)" value={email} onChange={(e) => setEmail(e.target.value)}
          className="flex-1 bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:border-zinc-500" />
        <button type="submit" disabled={create.isPending}
          className="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white rounded-lg text-sm font-medium">
          {create.isPending ? "Adding..." : "Add"}
        </button>
        <button type="button" onClick={onDone}
          className="px-3 py-1.5 bg-zinc-800 hover:bg-zinc-700 text-zinc-400 rounded-lg text-sm">
          Cancel
        </button>
      </div>
      {error && <p className="text-red-400 text-xs">{error}</p>}
    </form>
  );
}

// ── Record Payment modal ──────────────────────────────────────────────────────
function RecordPaymentModal({
  participant,
  currentUserId,
  currentBalance,
  onClose,
}: {
  participant: { id: number; name: string };
  currentUserId: number;
  currentBalance: number; // positive = they owe me, negative = I owe them
  onClose: () => void;
}) {
  const record = useRecordPayment();
  const { data: trips = [] } = useTrips();
  const theyOweMe = currentBalance > 0;

  // Default direction matches the debt direction
  const [amount, setAmount] = useState(Math.abs(currentBalance).toFixed(2));
  const [date, setDate] = useState(new Date().toISOString().slice(0, 10));
  const [notes, setNotes] = useState("");
  // direction: "received" = they paid me, "sent" = I paid them
  const [direction, setDirection] = useState<"received" | "sent">(theyOweMe ? "received" : "sent");
  // Which tab this settles. "" = the ongoing household tab (trip_id NULL).
  const [tripId, setTripId] = useState("");
  const [error, setError] = useState("");

  async function handleSave() {
    setError("");
    const amt = parseFloat(amount);
    if (!amt || amt <= 0) { setError("Enter a valid amount"); return; }
    try {
      await record.mutateAsync({
        from_participant_id: direction === "received" ? participant.id : currentUserId,
        to_participant_id: direction === "received" ? currentUserId : participant.id,
        amount: amt,
        payment_date: date,
        notes: notes || undefined,
        trip_id: tripId ? Number(tripId) : null,
      });
      onClose();
    } catch (e) {
      setError(e instanceof Error ? e.message : "Failed to record payment");
    }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60" onClick={onClose}>
      <div className="bg-zinc-900 border border-zinc-700 rounded-xl w-full max-w-sm mx-4 shadow-2xl p-6 space-y-4"
        onClick={(e) => e.stopPropagation()}>
        <h3 className="font-semibold text-sm text-zinc-300">Record Payment</h3>

        {/* Direction toggle */}
        <div className="flex rounded-lg overflow-hidden border border-zinc-700 text-sm">
          <button
            type="button"
            onClick={() => setDirection("received")}
            className={`flex-1 py-1.5 transition-colors ${direction === "received" ? "bg-emerald-700 text-white" : "bg-zinc-800 text-zinc-400 hover:bg-zinc-700"}`}
          >
            {participant.name} paid me
          </button>
          <button
            type="button"
            onClick={() => setDirection("sent")}
            className={`flex-1 py-1.5 transition-colors ${direction === "sent" ? "bg-blue-700 text-white" : "bg-zinc-800 text-zinc-400 hover:bg-zinc-700"}`}
          >
            I paid {participant.name}
          </button>
        </div>

        <div className="grid grid-cols-2 gap-3">
          <div>
            <label className="block text-xs text-zinc-500 mb-1">Amount</label>
            <div className="relative">
              <span className="absolute left-2.5 top-1/2 -translate-y-1/2 text-zinc-500 text-sm">$</span>
              <input type="number" step="0.01" min="0.01" value={amount}
                onChange={(e) => setAmount(e.target.value)}
                className="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1.5 text-sm pl-6" />
            </div>
          </div>
          <div>
            <label className="block text-xs text-zinc-500 mb-1">Date</label>
            <input type="date" value={date} onChange={(e) => setDate(e.target.value)}
              className="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1.5 text-sm" />
          </div>
        </div>

        {/* Scope. Until now every payment recorded here landed on the household
            tab, because the API dropped trip_id — so a $11k Europe settlement
            silently reduced the ongoing household balance instead. */}
        <div>
          <label className="block text-xs text-zinc-500 mb-1">Settles</label>
          <select value={tripId} onChange={(e) => setTripId(e.target.value)}
            className="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1.5 text-sm">
            <option value="">Household (ongoing)</option>
            {trips.filter((t) => !t.archived).map((t) => (
              <option key={t.id} value={t.id}>{t.name}</option>
            ))}
          </select>
          <p className="text-[11px] text-zinc-600 mt-1">
            Covering more than one tab? Record it once per tab — the parts add back
            up to the transfer.
          </p>
        </div>

        <div>
          <label className="block text-xs text-zinc-500 mb-1">Notes (optional)</label>
          <input value={notes} onChange={(e) => setNotes(e.target.value)}
            placeholder="e.g. Bank transfer, cash"
            className="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1.5 text-sm" />
        </div>

        {error && <p className="text-red-400 text-xs">{error}</p>}

        <div className="flex gap-2">
          <button type="button" onClick={onClose}
            className="flex-1 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded-lg text-sm">
            Cancel
          </button>
          <button type="button" onClick={handleSave} disabled={record.isPending}
            className="flex-1 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white rounded-lg text-sm font-medium">
            {record.isPending ? "Saving…" : "Record"}
          </button>
        </div>
      </div>
    </div>
  );
}

// ── Payment history inline ────────────────────────────────────────────────────
function PaymentHistory({ participantId, currentUserId }: { participantId: number; currentUserId: number }) {
  const { data: payments = [], isLoading } = usePaymentHistory(participantId);
  const deletePayment = useDeletePayment();

  if (isLoading) return <p className="text-xs text-zinc-600 mt-2">Loading payments…</p>;
  if (payments.length === 0) return <p className="text-xs text-zinc-600 italic mt-2">No payments recorded</p>;

  return (
    <div className="mt-3 space-y-1.5">
      <p className="text-xs text-zinc-500 font-medium">Payment history</p>
      {payments.map((p: SplitPayment) => {
        const theyPaidMe = p.to_participant_id === currentUserId;
        return (
          <div key={p.id} className="flex items-center gap-2 text-xs">
            <span className={`font-mono font-medium ${theyPaidMe ? "text-emerald-400" : "text-blue-400"}`}>
              {theyPaidMe ? "+" : "-"}${Number(p.amount).toFixed(2)}
            </span>
            <span className="text-zinc-500">{formatDate(p.payment_date)}</span>
            {/* Scope, so a grouped transfer stops looking like a duplicate: two
                rows of the same amount and date differ only by which tab they
                settle, and that was invisible until the API returned trip_id. */}
            <span className="text-[11px] px-1.5 py-0.5 rounded bg-zinc-800 text-zinc-400 flex-shrink-0">
              {p.trip_name ?? "Household"}
            </span>
            {p.notes && <span className="text-zinc-600 truncate flex-1">{p.notes}</span>}
            <button
              onClick={() => deletePayment.mutate(p.id)}
              className="text-zinc-600 hover:text-red-400 leading-none ml-auto flex-shrink-0"
              title="Delete payment"
            >
              ×
            </button>
          </div>
        );
      })}
    </div>
  );
}

// ── Split transaction row ─────────────────────────────────────────────────────
// Memoized: this table renders every split row at once (1,279 today, no
// pagination), so any state change on the page — expanding a receipt, each of
// its two query results arriving — re-rendered all of them, ~800ms per pass on
// a fast machine and a multi-second browser freeze on a slow one. With memo,
// only the row whose `isExpanded` flipped re-renders. Every prop must stay
// referentially stable: `tx` objects come straight out of the query cache, and
// the callbacks are a state setter and a useCallback.
const SharedTxRow = memo(function SharedTxRow({
  tx,
  isExpanded,
  meId,
  onToggle,
  onEdit,
}: {
  tx: SharedTransactionRow;
  isExpanded: boolean;
  meId: number | undefined;
  onToggle: (id: number) => void;
  onEdit: (tx: SharedTransactionRow) => void;
}) {
  const splits = Array.isArray(tx.splits) ? tx.splits : [];
  return (
    <Fragment>
      <tr className="border-b border-zinc-800/50 hover:bg-zinc-800/30">
        <td className="px-4 py-3 text-zinc-400 whitespace-nowrap">{formatDate(tx.transaction_date)}</td>
        <td className="px-4 py-3 text-zinc-500 text-xs whitespace-nowrap">{formatDate(tx.created_at)}</td>
        <td className="px-4 py-3 max-w-xs sticky left-0 z-10 bg-zinc-900 border-r border-zinc-800/80">
          <div className="flex items-start gap-1.5">
            {tx.order_platform && (
              <button
                onClick={() => onToggle(tx.id)}
                className="text-zinc-600 hover:text-zinc-300 leading-none mt-0.5 shrink-0"
                title={isExpanded ? "Hide receipt" : "Show the receipt this came from"}
                aria-expanded={isExpanded}
              >
                {isExpanded ? "▾" : "▸"}
              </button>
            )}
            <p className="font-medium break-words">{tx.effective_merchant || tx.description}</p>
          </div>
          {tx.effective_merchant && (
            <p className="text-xs text-zinc-500 break-words">{tx.description}</p>
          )}
          {tx.notes && (
            <p className="text-xs text-zinc-500 italic mt-0.5 break-words">{tx.notes}</p>
          )}
        </td>
        {/* Category is the effective one — the override wins over the
            extracted value, the same COALESCE every other view uses,
            so a correction made elsewhere shows up here too. */}
        <td className="px-4 py-3 whitespace-nowrap">
          {tx.effective_category ? (
            <span
              className="inline-flex items-center gap-1.5 text-xs text-zinc-300"
              title={formatCategory(tx.effective_category)}
            >
              <span
                className="w-1.5 h-1.5 rounded-full flex-shrink-0"
                style={{ background: CATEGORY_COLORS[tx.effective_category] ?? "#71717a" }}
              />
              {formatCategory(tx.effective_category)}
            </span>
          ) : (
            <span className="text-xs text-zinc-600 italic">uncategorised</span>
          )}
        </td>
        <td className={`px-4 py-3 text-right font-medium tabular-nums ${SPEND_TYPES.has(tx.transaction_type) ? "" : "text-green-400"}`}>
          {formatAmount(tx.amount, tx.transaction_type, tx.currency)}
          {tx.currency !== "AUD" && (
            // Splits settle on the AUD figure, so show it next to the
            // native one rather than leaving the two to differ silently.
            <span className="block text-xs font-normal text-zinc-500">
              {tx.amount_unconverted
                ? "AUD value unknown"
                : `≈ ${formatAmount(Number(tx.amount_aud), tx.transaction_type, "AUD")} AUD`}
            </span>
          )}
        </td>
        {/* Whose money actually left. This is the effective owner —
            COALESCE(t.owner_id, s.owner_id) — so it is the account the
            spend came out of, which is what every balance on this page
            is computed from. "Me" matches the split chips rather than
            printing your own name twice in one row. */}
        <td className="px-4 py-3 whitespace-nowrap">
          <span className={`text-xs ${tx.owner_id === meId ? "text-zinc-400" : "text-indigo-300"}`}>
            {tx.owner_id === meId ? "Me" : tx.owner_name}
          </span>
        </td>
        <td className="px-4 py-3">
          <div className="flex flex-wrap gap-1">
            {splits.map((s) => (
              <span key={s.participant_id}
                className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-zinc-800 text-zinc-300">
                {s.participant_id === meId ? "Me" : s.name} {s.share_percent}%
              </span>
            ))}
          </div>
        </td>
        <td className="px-4 py-3">
          <button
            onClick={() => onEdit(tx)}
            className="text-xs text-zinc-500 hover:text-zinc-200 px-2 py-0.5 rounded hover:bg-zinc-800 transition-colors"
          >
            Edit
          </button>
        </td>
      </tr>
      {isExpanded && (
        <tr className="border-b border-zinc-800/50 bg-zinc-900/40">
          <td colSpan={8} className="px-4 py-3">
            <OrderDetails transactionId={tx.id} currency={tx.currency ?? null} bare />
          </td>
        </tr>
      )}
    </Fragment>
  );
});

// ── Main page ─────────────────────────────────────────────────────────────────
type SortCol = "transaction_date" | "created_at" | "amount";

/**
 * Sort direction marker for a column header.
 *
 * Declared at module scope and given the sort state as props, rather than
 * closing over it inside SharedPage: a component defined during render is a
 * new type on every render, so React unmounts and remounts it each time
 * instead of updating it.
 */
function SortIcon({ col, sortCol, sortDir }: { col: SortCol; sortCol: SortCol; sortDir: "asc" | "desc" }) {
  if (sortCol !== col) return <span className="text-zinc-600 ml-0.5">↕</span>;
  return <span className="ml-0.5">{sortDir === "desc" ? "↓" : "↑"}</span>;
}

export default function SharedPage() {
  const [tagIds, setTagIds] = useState<string[]>([]);
  const [participantId, setParticipantId] = useState<number | undefined>(undefined);
  const [sortCol, setSortCol] = useState<SortCol>("transaction_date");
  const [sortDir, setSortDir] = useState<"asc" | "desc">("desc");
  const [search, setSearch] = useState("");
  const realTagIds = tagIds.filter((id) => id !== "untagged");
  const { data: participants = [] } = useParticipants();
  const { data: rawTransactions = [], isLoading: txLoading } = useSharedTransactions(tagIds, participantId);

  // Filtered client-side, like the sort above and unlike the transactions page.
  // This endpoint returns every split row in one go (1,267 today) with no
  // pagination, so there is nothing for a server round-trip to narrow — and a
  // server search would have to be added to a query the balance cards share.
  //
  // Deliberately does NOT match participant names: the participant dropdown
  // already does that properly, and typing "sonu" matching every row she is
  // split on would make the box look broken. The payer IS matched, because
  // nothing else on the page filters by who paid.
  const transactions = useMemo(
    () =>
      [...rawTransactions]
        .filter((tx) => {
          const q = search.trim().toLowerCase();
          if (!q) return true;
          return [
            tx.description,
            tx.effective_merchant,
            tx.notes,
            tx.effective_category ? formatCategory(tx.effective_category) : null,
            tx.owner_name,
          ].some((f) => f?.toLowerCase().includes(q));
        })
        .sort((a, b) => {
          const av = sortCol === "amount" ? Number(a.amount) : new Date(a[sortCol]).getTime();
          const bv = sortCol === "amount" ? Number(b.amount) : new Date(b[sortCol]).getTime();
          return sortDir === "desc" ? bv - av : av - bv;
        }),
    [rawTransactions, search, sortCol, sortDir]
  );

  function toggleSort(col: SortCol) {
    if (sortCol === col) setSortDir((d) => (d === "desc" ? "asc" : "desc"));
    else { setSortCol(col); setSortDir("desc"); }
  }

  const { data: balances = [], isLoading: balLoading } = useParticipantBalances(realTagIds);
  const { data: allTags = [] } = useTags();
  const { data: me } = useCurrentUser();

  // Names the tag scope when one is active. Non-empty means the cards below are
  // split totals rather than payable balances.
  const tagScopeLabel =
    realTagIds.length === 0
      ? null
      : realTagIds.length === 1
        ? (allTags.find((t) => String(t.id) === realTagIds[0])?.name ?? "this tag")
        : `${realTagIds.length} tags`;
  const [addingParticipant, setAddingParticipant] = useState(false);
  const [paymentModal, setPaymentModal] = useState<{ id: number; name: string; balance: number } | null>(null);
  const [showHistory, setShowHistory] = useState<number | null>(null);
  const [editModal, setEditModal] = useState<SharedTransactionRow | null>(null);
  // Rendering is windowed even though the data is not: the query returns every
  // split row (1,279 as of 2026-08, growing ~600/yr) so search and sort stay
  // instant over full history, but the DOM stops at visibleCount — an unbounded
  // table was what made expanding a receipt freeze the browser. "Show more"
  // extends the window; changing any filter resets it.
  const [visibleCount, setVisibleCount] = useState(100);
  // Reset during render behind a previous-value guard rather than in an effect.
  // Note the key joins `tagIds` by value: as a raw dependency it was a fresh
  // array on many renders, so the window was being reset more often than
  // "changing any filter" claims — including after "Show more", which is the
  // one interaction this must not undo.
  const windowKey = `${search}|${sortCol}|${sortDir}|${tagIds.join(",")}|${participantId ?? ""}`;
  const [lastWindowKey, setLastWindowKey] = useState(windowKey);
  if (windowKey !== lastWindowKey) {
    setLastWindowKey(windowKey);
    setVisibleCount(100);
  }
  const visible = (transactions as SharedTransactionRow[]).slice(0, visibleCount);

  // Receipt expansion, same pattern as the transactions page. The shared
  // viewer is a split participant, so /api/transactions/[id]/order
  // authorises them — the item list is part of what was shared.
  const [expanded, setExpanded] = useState<Set<number>>(new Set());
  // Stable identity so SharedTxRow's memo holds — an inline closure here would
  // change every render and re-render all 1,279 rows anyway.
  const toggleExpanded = useCallback((id: number) => {
    setExpanded((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id); else next.add(id);
      return next;
    });
  }, []);

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between gap-3">
        <h2 className="text-2xl font-display">Shared Expenses</h2>
        <div className="flex items-center gap-2 ml-auto flex-wrap">
          <div className="relative">
            <input
              type="search"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search description, merchant, category, payer…"
              aria-label="Search split transactions"
              className="w-64 bg-zinc-800 border border-zinc-700 rounded-lg pl-8 pr-2 py-1.5 text-sm placeholder:text-zinc-600 focus:outline-none focus:border-zinc-500"
            />
            <span className="absolute left-2.5 top-1/2 -translate-y-1/2 text-zinc-500 text-sm pointer-events-none">⌕</span>
          </div>
          <select
            value={participantId ?? ""}
            onChange={(e) => setParticipantId(e.target.value ? Number(e.target.value) : undefined)}
            className={`border rounded px-3 py-1.5 text-sm bg-zinc-900 ${participantId ? "border-indigo-500 text-white" : "border-zinc-700 text-zinc-400"}`}
          >
            <option value="">All People</option>
            {participants.map((p: { id: number; name: string }) => (
              <option key={p.id} value={p.id}>{p.name}</option>
            ))}
          </select>
          <TagFilter value={tagIds} onChange={setTagIds} />
          {!addingParticipant && (
            <button onClick={() => setAddingParticipant(true)}
              className="text-sm px-3 py-1.5 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded-lg whitespace-nowrap">
              + Add Participant
            </button>
          )}
        </div>
      </div>

      {addingParticipant && <AddParticipantForm onDone={() => setAddingParticipant(false)} />}

      {/* Balance cards */}
      {realTagIds.length === 0 && tagIds.includes("untagged") ? null : realTagIds.length > 0 && (
        <p className="text-xs text-zinc-500 mb-2">Showing split totals for selected tag — payments excluded (payments settle overall debt, not per-tag)</p>
      )}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {balLoading ? (
          <p className="text-zinc-500 text-sm col-span-3">Loading balances...</p>
        ) : balances.length === 0 ? (
          <p className="text-zinc-500 text-sm col-span-3">No participants yet.</p>
        ) : (
          balances.map((b) => {
            const theyOweMe = b.total_owed > 0;
            const net = Math.abs(b.total_owed);
            const settled = net < 0.005;
            return (
              <div key={b.id} className="bg-zinc-900 border border-zinc-700 rounded-xl p-4">
                <div className="flex items-start justify-between mb-3">
                  <div>
                    <p className="font-medium">{b.name}</p>
                    <p className="text-xs text-zinc-500">
                      {/* With a tag filter on, payments are deliberately not
                          subtracted — so this is a split total, not a payable
                          balance, and must not claim to be one. */}
                      {tagScopeLabel
                        ? `split total in ${tagScopeLabel}`
                        : settled ? "all square" : theyOweMe ? "owes you" : "you owe"}
                    </p>
                  </div>
                  <div className="text-right">
                    <p className={`text-lg font-semibold ${tagScopeLabel ? "text-zinc-300" : settled ? "text-zinc-500" : theyOweMe ? "text-amber-400" : "text-blue-400"}`}>
                      ${net.toFixed(2)}
                    </p>
                    {b.unconverted_count > 0 && (
                      <p className="text-[11px] text-amber-500/80 mt-0.5">
                        approx · {b.unconverted_count} unconverted
                      </p>
                    )}
                  </div>
                </div>

                <div className="flex gap-2">
                  {/* Settling against a tag-scoped total would record a payment
                      for a figure that never was the debt. */}
                  {!tagScopeLabel && (
                    <button
                      onClick={() => setPaymentModal({ id: b.id, name: b.name, balance: b.total_owed })}
                      className="flex-1 py-1.5 text-xs font-medium bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded-lg"
                    >
                      Record Payment
                    </button>
                  )}
                  <button
                    onClick={() => setShowHistory(showHistory === b.id ? null : b.id)}
                    className={`px-3 py-1.5 text-xs rounded-lg ${showHistory === b.id ? "bg-zinc-700 text-white" : "bg-zinc-800 text-zinc-500 hover:text-zinc-300"}`}
                  >
                    History
                  </button>
                </div>

                {showHistory === b.id && me && (
                  <PaymentHistory participantId={b.id} currentUserId={me.id} />
                )}
              </div>
            );
          })
        )}
      </div>

      {/* Transaction list */}
      <div className="bg-zinc-900 border border-zinc-700 rounded-xl overflow-x-auto">
        <div className="px-4 py-3 border-b border-zinc-800 flex items-center gap-2">
          <h3 className="text-sm font-medium">Split Transactions</h3>
          {search.trim() && !txLoading && (
            <span className="text-xs text-zinc-500">
              {transactions.length} of {rawTransactions.length} match “{search.trim()}”
            </span>
          )}
        </div>
        {txLoading ? (
          <p className="text-zinc-500 text-sm px-4 py-6">Loading...</p>
        ) : transactions.length === 0 ? (
          // "None yet" is wrong when a search simply matched nothing, and it reads
          // as though the splits were lost.
          search.trim() ? (
            <p className="text-zinc-500 text-sm px-4 py-6">
              Nothing matches “{search.trim()}”.{" "}
              <button onClick={() => setSearch("")} className="text-zinc-400 hover:text-zinc-200 underline">
                Clear search
              </button>
            </p>
          ) : (
            <p className="text-zinc-500 text-sm px-4 py-6">
              No split transactions yet. Use the Split button on any transaction.
            </p>
          )
        ) : (
          <table className="w-full text-sm min-w-[760px]">
            {/* min-w raised from 520px with the Category and Paid-by columns: the
                wrapper scrolls horizontally, so a too-small minimum crushes cells
                rather than letting them scroll. */}
            <thead>
              <tr className="border-b border-zinc-800">
                <th
                  className="text-left px-4 py-2 text-xs text-zinc-500 font-medium cursor-pointer hover:text-white whitespace-nowrap"
                  onClick={() => toggleSort("transaction_date")}
                >
                  Date <SortIcon col="transaction_date" sortCol={sortCol} sortDir={sortDir} />
                </th>
                <th
                  className="text-left px-4 py-2 text-xs text-zinc-500 font-medium cursor-pointer hover:text-white whitespace-nowrap"
                  onClick={() => toggleSort("created_at")}
                >
                  Imported <SortIcon col="created_at" sortCol={sortCol} sortDir={sortDir} />
                </th>
                <th className="text-left px-4 py-2 text-xs text-zinc-500 font-medium sticky left-0 z-10 bg-zinc-900 border-r border-zinc-800/80">Description</th>
                <th className="text-left px-4 py-2 text-xs text-zinc-500 font-medium">Category</th>
                <th
                  className="text-right px-4 py-2 text-xs text-zinc-500 font-medium cursor-pointer hover:text-white"
                  onClick={() => toggleSort("amount")}
                >
                  Amount <SortIcon col="amount" sortCol={sortCol} sortDir={sortDir} />
                </th>
                {/* Paid by sits next to Splits deliberately: together they are the
                    two halves of the question this page exists to answer — whose
                    money went out, and whose share it was. */}
                <th className="text-left px-4 py-2 text-xs text-zinc-500 font-medium whitespace-nowrap">Paid by</th>
                <th className="text-left px-4 py-2 text-xs text-zinc-500 font-medium">Splits</th>
                <th className="px-4 py-2"></th>
              </tr>
            </thead>
            <tbody>
              {visible.map((tx) => (
                <SharedTxRow
                  key={tx.id}
                  tx={tx}
                  isExpanded={expanded.has(tx.id)}
                  meId={me?.id}
                  onToggle={toggleExpanded}
                  onEdit={setEditModal}
                />
              ))}
            </tbody>
          </table>
        )}
        {!txLoading && transactions.length > visible.length && (
          <div className="px-4 py-3 border-t border-zinc-800 flex items-center gap-3 text-xs">
            <button
              onClick={() => setVisibleCount((c) => c + 100)}
              className="px-3 py-1.5 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded-lg"
            >
              Show more
            </button>
            <button
              onClick={() => setVisibleCount(transactions.length)}
              className="text-zinc-500 hover:text-zinc-300 underline underline-offset-2"
            >
              Show all
            </button>
            <span className="text-zinc-600 ml-auto tabular-nums">
              showing {visible.length} of {transactions.length}
            </span>
          </div>
        )}
      </div>

      {/* Payment modal */}
      {paymentModal && me && (
        <RecordPaymentModal
          participant={{ id: paymentModal.id, name: paymentModal.name }}
          currentUserId={me.id}
          currentBalance={paymentModal.balance}
          onClose={() => setPaymentModal(null)}
        />
      )}

      {editModal && (
        <EditTransactionModal
          transaction={editModal}
          onClose={() => setEditModal(null)}
        />
      )}
    </div>
  );
}