// Refund flow — pick refundable items + qty, choose method, save.

function RefundSheet({ order, onClose }) {
  const { refundOrder } = usePOS();
  // Already-refunded amount caps the new refund
  const maxByLine = (it) => it.qty;
  const [picks, setPicks] = React.useState(() => order.items.map(() => 0));
  const [method, setMethod] = React.useState(order.paymentMethod || "cash");
  const [reason, setReason] = React.useState("");

  const setQty = (i, q) => setPicks((p) => p.map((v, idx) => idx === i
    ? Math.max(0, Math.min(maxByLine(order.items[i]), q)) : v));

  const refundTotal = order.items.reduce((s, it, i) =>
    s + (it.price + (it.modPrice || 0)) * picks[i], 0);
  const everything = order.items.every((it, i) => picks[i] === it.qty);
  const nothing = refundTotal === 0;

  const fullRefund = () => setPicks(order.items.map((it) => it.qty));

  return (
    <div className="sheet-wrap" onMouseDown={onClose}>
      <div className="sheet sheet-wide" onMouseDown={(e) => e.stopPropagation()}>
        <header className="sheet-head">
          <div>
            <div className="eyebrow mono">REFUND · #{order.shortId}</div>
            <h3>{order.customer || "Walk-in"} · Table {order.table || "—"}</h3>
            <div className="muted mono" style={{ fontSize: 12 }}>
              Original total {money(order.total)} · paid via {(order.paymentMethod || "—").toUpperCase()}
              {order.refundedAmount > 0 && <span> · already refunded {money(order.refundedAmount)}</span>}
            </div>
          </div>
          <button className="icon-x" onClick={onClose}>×</button>
        </header>

        <div className="sheet-body">
          <div className="row" style={{ justifyContent: "flex-end", gap: 8 }}>
            <button className="btn-ghost-sm" onClick={fullRefund}>Refund everything</button>
          </div>
          <table className="data-table" style={{ marginTop: 8 }}>
            <thead><tr><th>Item</th><th style={{ width: 80 }}>Sold</th><th style={{ width: 160 }}>Refund qty</th><th style={{ width: 120, textAlign: "right" }}>Amount</th></tr></thead>
            <tbody>
              {order.items.map((it, i) => (
                <tr key={i}>
                  <td>
                    <div>{it.name}{it.sku ? ` (${it.sku})` : ""}</div>
                    {it.mods && it.mods.length > 0 && <div className="muted mono" style={{ fontSize: 11 }}>{it.mods.join(" · ")}</div>}
                    {it.notes && <div className="muted mono" style={{ fontSize: 11 }}>* {it.notes}</div>}
                  </td>
                  <td><Mono>{it.qty}</Mono></td>
                  <td>
                    <div className="qty-stepper">
                      <button onClick={() => setQty(i, picks[i] - 1)} disabled={picks[i] <= 0}>–</button>
                      <Mono>{picks[i]}</Mono>
                      <button onClick={() => setQty(i, picks[i] + 1)} disabled={picks[i] >= maxByLine(it)}>+</button>
                    </div>
                  </td>
                  <td style={{ textAlign: "right" }}><Mono>{money((it.price + (it.modPrice || 0)) * picks[i])}</Mono></td>
                </tr>
              ))}
            </tbody>
          </table>

          <div className="row" style={{ gap: 12, marginTop: 14, alignItems: "flex-end" }}>
            <label className="field" style={{ flex: 1 }}>
              <span className="field-label mono">Reason (optional)</span>
              <input value={reason} onChange={(e) => setReason(e.target.value)} placeholder="Wrong item, customer disliked, ..." />
            </label>
            <label className="field" style={{ flex: "0 0 200px" }}>
              <span className="field-label mono">Refund via</span>
              <select value={method} onChange={(e) => setMethod(e.target.value)}>
                <option value="cash">CASH</option>
                <option value="qris">QRIS</option>
                <option value="card">CARD</option>
              </select>
            </label>
          </div>

          <div className="due-row" style={{ marginTop: 16, fontSize: 16 }}>
            <span>{everything ? "Full refund" : "Partial refund"}</span>
            <Mono style={{ color: "var(--alert)", fontWeight: 600 }}>−{money(refundTotal)}</Mono>
          </div>
        </div>

        <footer className="sheet-foot">
          <button className="btn-ghost" onClick={onClose}>Cancel</button>
          <button className="btn-primary" disabled={nothing}
            onClick={async () => {
              const items = order.items
                .map((it, i) => picks[i] > 0 ? { ...it, qty: picks[i] } : null)
                .filter(Boolean);
              await refundOrder(order, { items, reason, method });
              onClose();
            }}>
            Confirm refund
          </button>
        </footer>
      </div>
    </div>
  );
}

// Today's receipts list shown from the cashier — pick one to refund.
function ReceiptsListSheet({ onClose, onRefund }) {
  const { orders } = usePOS();
  const list = orders
    .filter((o) => o.paid !== false && o.status !== "refunded")
    .sort((a, b) => (b.createdAt?.seconds || 0) - (a.createdAt?.seconds || 0));
  return (
    <div className="sheet-wrap" onMouseDown={onClose}>
      <div className="sheet sheet-wide" onMouseDown={(e) => e.stopPropagation()}>
        <header className="sheet-head">
          <div>
            <div className="eyebrow mono">TODAY'S RECEIPTS</div>
            <h3>Find an order to refund</h3>
          </div>
          <button className="icon-x" onClick={onClose}>×</button>
        </header>
        <div className="sheet-body">
          {list.length === 0 && <div className="muted mono">No paid orders today.</div>}
          <table className="data-table">
            <thead><tr><th>Time</th><th>#</th><th>Customer</th><th>Table</th><th>Items</th><th>Payment</th><th>Total</th><th>Refunded</th><th></th></tr></thead>
            <tbody>
              {list.map((o) => (
                <tr key={o.id}>
                  <td><Mono>{o.createdAt?.toDate ? o.createdAt.toDate().toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" }) : "—"}</Mono></td>
                  <td><Mono>{o.shortId}</Mono></td>
                  <td>{o.customer}</td>
                  <td><Mono>{o.table}</Mono></td>
                  <td><Mono>{o.items.reduce((a, i) => a + i.qty, 0)}</Mono></td>
                  <td><Mono>{(o.paymentMethod || "—").toUpperCase()}</Mono></td>
                  <td><Mono>{money(o.total)}</Mono></td>
                  <td><Mono className={o.refundedAmount ? "stock-low" : "muted"}>{o.refundedAmount ? "−" + money(o.refundedAmount) : "—"}</Mono></td>
                  <td><button className="btn-ghost-sm" onClick={() => onRefund(o)}>Refund</button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { RefundSheet, ReceiptsListSheet });