// Settle.jsx — net-balance summary + one-click "settle to zero"
const { useState } = React;

function SettleScreen({ transactions, names, accent, onSettle }) {
  const allTx = transactions;
  const bal = netBalance(allTx);
  const [confirmOpen, setConfirmOpen] = useState(false);

  // After a settle, the cumulative "代墊付" effectively zeroes out.
  // Only count payments made AFTER the most recent settle.
  const lastSettleIso = allTx.
  filter((t) => t.type === "settle").
  reduce((max, t) => t.date > max ? t.date : max, "");

  const sinceLast = allTx.filter((t) => t.date > lastSettleIso);

  const aPaidForB = sinceLast.
  filter((t) => t.type !== "settle" && !t.pending && t.payer === "A").
  reduce((s, t) => s + shareOf(t, "B"), 0);
  const bPaidForA = sinceLast.
  filter((t) => t.type !== "settle" && !t.pending && t.payer === "B").
  reduce((s, t) => s + shareOf(t, "A"), 0);

  const lastSettle = [...allTx].sort((a, b) => b.date.localeCompare(a.date)).find((t) => t.type === "settle");

  let owedFrom, owedTo, owedAmount;
  if (bal > 0) { owedFrom = "B"; owedTo = "A"; owedAmount = bal; } else
  if (bal < 0) { owedFrom = "A"; owedTo = "B"; owedAmount = -bal; } else
  { owedFrom = null; owedTo = null; owedAmount = 0; }

  return (
    <div className="screen settle" data-screen-label="03 結算">
      <div className="settle-card">
        <div className="settle-period">全部帳本 · 累計</div>
        {owedAmount === 0 ?
        <>
            <div className="settle-zero">已結清</div>
          </> :

        <>
            <div className="settle-eq">
              <span className="settle-from">{names[owedFrom]}</span>
              <span className="settle-arrow">→</span>
              <span className="settle-to" style={{ color: accent }}>{names[owedTo]}</span>
            </div>
            <div className="settle-amount num">
              <span className="settle-cur">NT$</span>
              {fmtMoney(owedAmount)}
            </div>
            <div className="settle-action">
              <button className="settle-btn" style={{ background: accent }} onClick={() => setConfirmOpen(true)}>
                結算清零
              </button>
            </div>
          </>
        }
      </div>

      <div className="settle-break">
        <div className="settle-break-title">明細</div>
        <div className="settle-break-row">
          <span>{names.A} 代 {names.B} 墊付</span>
          <span className="num">{fmtMoney(aPaidForB)}</span>
        </div>
        <div className="settle-break-row">
          <span>{names.B} 代 {names.A} 墊付</span>
          <span className="num">{fmtMoney(bPaidForA)}</span>
        </div>
        {lastSettle &&
        <div className="settle-break-row muted">
            <span>上次結算</span>
            <span className="num">{ymd(lastSettle.date)}</span>
          </div>
        }
      </div>

      <Sheet open={confirmOpen} onClose={() => setConfirmOpen(false)} title="結算清零">
        <div className="confirm-body">
          <div className="confirm-line">
            <span>{names[owedFrom]} 給 {names[owedTo]}</span>
            <span className="num confirm-amt" style={{ color: accent }}>NT$ {fmtMoney(owedAmount)}</span>
          </div>
          <div className="confirm-actions">
            <button className="ocr-btn" onClick={() => setConfirmOpen(false)}>取消</button>
            <button className="ocr-btn solid" style={{ background: accent, borderColor: accent }}
            onClick={() => { onSettle({ from: owedFrom, to: owedTo, amount: owedAmount }); setConfirmOpen(false); }}>
              確認清零
            </button>
          </div>
        </div>
      </Sheet>
    </div>);
}

window.SettleScreen = SettleScreen;