// expenses.jsx — Udlæg-sektion: log expenses, compute settlements

function settleExpenses(expenses, attendingMemberIds) {
  // Only settle among those actually attending (yes-RSVPs)
  if (!attendingMemberIds.length) return { perPerson: 0, balances: {}, settlements: [] };
  const total = expenses.reduce((s, e) => s + (Number(e.amount) || 0), 0);
  const perPerson = total / attendingMemberIds.length;

  // Balance = paid - owed
  const balances = {};
  attendingMemberIds.forEach((id) => { balances[id] = -perPerson; });
  expenses.forEach((e) => {
    if (balances[e.payer] !== undefined) {
      balances[e.payer] = (balances[e.payer] || 0) + (Number(e.amount) || 0);
    } else {
      // Payer not attending — still credit them, and add a debt slot
      balances[e.payer] = (Number(e.amount) || 0);
    }
  });

  // Greedy settlement: largest creditor pays largest debtor
  const creditors = Object.entries(balances)
    .filter(([, b]) => b > 0.5)
    .map(([id, b]) => ({ id, amount: b }))
    .sort((a, b) => b.amount - a.amount);
  const debtors = Object.entries(balances)
    .filter(([, b]) => b < -0.5)
    .map(([id, b]) => ({ id, amount: -b }))
    .sort((a, b) => b.amount - a.amount);

  const settlements = [];
  let ci = 0, di = 0;
  while (ci < creditors.length && di < debtors.length) {
    const pay = Math.min(creditors[ci].amount, debtors[di].amount);
    settlements.push({
      from: debtors[di].id,
      to: creditors[ci].id,
      amount: Math.round(pay),
    });
    creditors[ci].amount -= pay;
    debtors[di].amount -= pay;
    if (creditors[ci].amount < 0.5) ci++;
    if (debtors[di].amount < 0.5) di++;
  }
  return { total, perPerson, balances, settlements };
}

function fmtKr(n) {
  return new Intl.NumberFormat('da-DK', { maximumFractionDigits: 0 }).format(Math.round(n)) + ' kr';
}

function ExpensesSection({ trip, expenses, attendingIds, currentUserId, onAdd, onRemove }) {
  const [showForm, setShowForm] = React.useState(false);
  const [draftDesc, setDraftDesc] = React.useState('');
  const [draftAmount, setDraftAmount] = React.useState('');
  const [draftPayer, setDraftPayer] = React.useState(currentUserId || 'jonathan');

  React.useEffect(() => {
    if (currentUserId) setDraftPayer(currentUserId);
  }, [currentUserId]);

  const { total, perPerson, balances, settlements } = settleExpenses(expenses, attendingIds);
  const attending = attendingIds.map((id) => window.MEMBERS.find((m) => m.id === id)).filter(Boolean);

  const submit = () => {
    const amt = Number(draftAmount.replace(',', '.'));
    if (!draftDesc.trim() || !amt || amt <= 0) return;
    onAdd({
      id: `exp-${Date.now()}`,
      payer: draftPayer,
      desc: draftDesc.trim(),
      amount: amt,
      createdAt: new Date().toISOString(),
    });
    setDraftDesc('');
    setDraftAmount('');
    setShowForm(false);
  };

  return (
    <section className="td-section">
      <div className="td-section-head">
        <h3>Udlæg</h3>
        <div className="td-section-rule"></div>
        <span className="td-section-meta">
          {expenses.length} {expenses.length === 1 ? 'post' : 'poster'} ·&nbsp;
          {fmtKr(total)} i alt
        </span>
      </div>

      {/* Summary card */}
      {attending.length > 0 ? (
        <div className="exp-summary">
          <div className="exp-summary-row">
            <span className="exp-summary-lbl">Total udlagt</span>
            <span className="exp-summary-val">{fmtKr(total)}</span>
          </div>
          <div className="exp-summary-row">
            <span className="exp-summary-lbl">Pr. dreng ({attending.length} fremmødte)</span>
            <span className="exp-summary-val">{fmtKr(perPerson)}</span>
          </div>
        </div>
      ) : (
        <div className="exp-empty">
          <em>Ingen har endnu meldt sig til — udlæg fordeles når fremmødet er klart.</em>
        </div>
      )}

      {/* Expense list */}
      {expenses.length > 0 && (
        <div className="exp-list">
          {expenses.map((e) => {
            const payer = window.MEMBERS.find((m) => m.id === e.payer);
            const isMine = e.payer === currentUserId;
            return (
              <div key={e.id} className="exp-row">
                <div className="exp-row-payer">
                  {payer && <Avatar member={payer} size={22} status="yes"/>}
                  <span className="exp-row-name">{payer?.name || e.payer}</span>
                </div>
                <div className="exp-row-desc">{e.desc}</div>
                <div className="exp-row-amount">{fmtKr(e.amount)}</div>
                {isMine && (
                  <button className="exp-row-remove"
                          onClick={() => onRemove(e.id)}
                          title="Slet udlæg">×</button>
                )}
              </div>
            );
          })}
        </div>
      )}

      {/* Add expense */}
      {!showForm ? (
        <button className="exp-add-btn"
                disabled={!currentUserId}
                onClick={() => setShowForm(true)}>
          + Tilføj udlæg
        </button>
      ) : (
        <div className="exp-form">
          <div className="exp-form-row">
            <label className="exp-form-lbl">Hvad</label>
            <input type="text"
                   className="exp-form-input"
                   placeholder="fx. indkøb hos Føtex, kasse vin, brænde…"
                   value={draftDesc}
                   autoFocus
                   onChange={(e) => setDraftDesc(e.target.value)}
                   onKeyDown={(e) => { if (e.key === 'Enter') submit(); }}/>
          </div>
          <div className="exp-form-grid">
            <div className="exp-form-row">
              <label className="exp-form-lbl">Beløb (kr)</label>
              <input type="text" inputMode="decimal"
                     className="exp-form-input"
                     placeholder="0"
                     value={draftAmount}
                     onChange={(e) => setDraftAmount(e.target.value)}
                     onKeyDown={(e) => { if (e.key === 'Enter') submit(); }}/>
            </div>
            <div className="exp-form-row">
              <label className="exp-form-lbl">Lagt ud af</label>
              <select className="exp-form-input"
                      value={draftPayer}
                      onChange={(e) => setDraftPayer(e.target.value)}>
                {window.MEMBERS.map((m) => (
                  <option key={m.id} value={m.id}>{m.name}</option>
                ))}
              </select>
            </div>
          </div>
          <div className="exp-form-actions">
            <button className="chore-note-btn primary" onClick={submit}>Tilføj</button>
            <button className="chore-note-btn"
                    onClick={() => { setShowForm(false); setDraftDesc(''); setDraftAmount(''); }}>
              Annullér
            </button>
          </div>
        </div>
      )}

      {/* Settlements */}
      {settlements.length > 0 && (
        <div className="exp-settlements">
          <div className="exp-settlements-head">
            <span>Sådan udlignes regnskabet</span>
          </div>
          {settlements.map((s, i) => {
            const from = window.MEMBERS.find((m) => m.id === s.from);
            const to   = window.MEMBERS.find((m) => m.id === s.to);
            if (!from || !to) return null;
            const fromMine = s.from === currentUserId;
            const toMine   = s.to === currentUserId;
            return (
              <div key={i} className={`exp-settlement ${fromMine ? 'is-mine-from' : ''} ${toMine ? 'is-mine-to' : ''}`}>
                <div className="exp-settlement-from">
                  <Avatar member={from} size={22}/>
                  <span>{from.name}</span>
                </div>
                <div className="exp-settlement-arrow">
                  <span className="exp-settlement-amount">{fmtKr(s.amount)}</span>
                  <svg width="40" height="10" viewBox="0 0 40 10">
                    <line x1="0" y1="5" x2="34" y2="5" stroke="currentColor" strokeWidth="0.6"/>
                    <path d="M30 1 L34 5 L30 9" fill="none" stroke="currentColor" strokeWidth="0.6"/>
                  </svg>
                </div>
                <div className="exp-settlement-to">
                  <Avatar member={to} size={22} status="yes"/>
                  <span>{to.name}</span>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </section>
  );
}

Object.assign(window, { ExpensesSection, settleExpenses, fmtKr });