/* Tachiara client — Add/edit expense modal with 5 split modes. */

function ExpenseModal({ open, onClose, room, members, me, editing, onSaved }) {
  const toast = useToast();
  const [title, setTitle] = React.useState("");
  const [amount, setAmount] = React.useState(0);
  const [paidById, setPaidById] = React.useState(me.id);
  const [splitMode, setSplitMode] = React.useState("equal");
  const [participantIds, setParticipantIds] = React.useState([]);
  const [shares, setShares] = React.useState({});
  const [note, setNote] = React.useState("");
  const [step, setStep] = React.useState(0);
  const [submitting, setSubmitting] = React.useState(false);

  React.useEffect(() => {
    if (!open) return;
    if (editing) {
      setTitle(editing.title);
      setAmount(editing.totalAmount);
      setPaidById(editing.paidById);
      setSplitMode(editing.splitMode);
      setParticipantIds(editing.participantIds.slice());
      setShares({ ...(editing.shares || {}) });
      setNote(editing.note || "");
    } else {
      setTitle("");
      setAmount(0);
      setPaidById(me.id);
      setSplitMode("equal");
      setParticipantIds(members.map(m => m.id));
      setShares({});
      setNote("");
    }
    setStep(0);
  }, [open, editing?.id]);

  React.useEffect(() => {
    if (participantIds.length === 0) setParticipantIds(members.map(m => m.id));
  }, [splitMode]);

  const previewAmounts = React.useMemo(() => {
    return window.QC.splitToAmounts({ participantIds, splitMode, shares, totalAmount: amount });
  }, [participantIds, splitMode, shares, amount]);

  const validation = React.useMemo(() => {
    if (!title.trim()) return "Cần tên khoản chi";
    if (!amount || amount <= 0) return "Cần số tiền > 0";
    if (participantIds.length === 0) return "Chọn ít nhất 1 người chia";
    if (splitMode === "amount") {
      const sum = participantIds.reduce((s, id) => s + Number(shares[id] || 0), 0);
      if (Math.abs(sum - amount) > 1) {
        return `Tổng số tiền nhập vào (${window.QC.formatVND(sum)}) khác với ${window.QC.formatVND(amount)}`;
      }
    }
    if (splitMode === "percent") {
      const sum = participantIds.reduce((s, id) => s + Number(shares[id] || 0), 0);
      if (Math.abs(sum - 100) > 0.01) return `Tổng % phải bằng 100 (hiện đang ${sum}%)`;
    }
    if (splitMode === "shares") {
      const sum = participantIds.reduce((s, id) => s + Number(shares[id] || 0), 0);
      if (sum <= 0) return "Cần ít nhất 1 phần";
    }
    return null;
  }, [title, amount, participantIds, splitMode, shares]);

  const submit = async () => {
    if (validation) { toast(validation); return; }
    setSubmitting(true);
    const payload = {
      roomId: room.id,
      title: title.trim(),
      totalAmount: amount,
      paidById,
      splitMode,
      participantIds: participantIds.slice(),
      shares: ["amount", "percent", "shares"].includes(splitMode) ? { ...shares } : {},
      note: note.trim(),
    };
    try {
      if (editing) await window.api.bills.update(editing.id, payload);
      else await window.api.bills.create(payload);
      toast(editing ? "Đã cập nhật" : "Đã thêm khoản chi");
      onSaved();
    } catch (err) { toast(err.message); }
    finally { setSubmitting(false); }
  };

  const toggleParticipant = (id) => {
    setParticipantIds(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
    if (participantIds.includes(id)) {
      setShares(prev => { const c = { ...prev }; delete c[id]; return c; });
    }
  };

  const previewSum = participantIds.reduce((s, id) => s + (previewAmounts[id] || 0), 0);

  return (
    <Modal open={open} onClose={onClose} size="lg"
           title={editing ? "Sửa khoản chi" : "Thêm khoản chi"}
           footer={<>
             {step === 1 && <Button variant="ghost" onClick={() => setStep(0)}>← Quay lại</Button>}
             <div style={{ flex: 1, alignSelf: "center", fontSize: 12, color: validation ? "var(--danger)" : "var(--wf-fg-muted)" }}>
               {validation || (step === 1 && `Tổng đã chia: ${window.QC.formatVND(previewSum)}`)}
             </div>
             <Button variant="ghost" onClick={onClose}>Huỷ</Button>
             {step === 0 ? (
               <Button variant="primary" onClick={() => setStep(1)} disabled={!title.trim() || !amount}>
                 Tiếp tục →
               </Button>
             ) : (
               <Button variant="primary" onClick={submit} disabled={!!validation || submitting}>
                 {submitting ? "Đang lưu..." : editing ? "Lưu thay đổi" : "Thêm khoản chi"}
               </Button>
             )}
           </>}>
        {step === 0 && (
          <div className="stack stack-md">
            <Field label="Tên khoản chi" hint='Ví dụ: "Ăn tối quán Như Hảo"'>
              <input className="input" value={title} onChange={e => setTitle(e.target.value)}
                     placeholder="Vé xe, BBQ, homestay..." autoFocus />
            </Field>
            <div className="grid-2">
              <Field label="Số tiền">
                <MoneyInput value={amount} onChange={setAmount} placeholder="0" />
              </Field>
              <Field label="Người trả">
                <select className="select" value={paidById} onChange={e => setPaidById(e.target.value)}>
                  {members.map(m => (
                    <option key={m.id} value={m.id}>{m.name}{m.id === me.id ? " (bạn)" : ""}</option>
                  ))}
                </select>
              </Field>
            </div>
            <Field label="Ghi chú (tuỳ chọn)">
              <input className="input" value={note} onChange={e => setNote(e.target.value)}
                     placeholder="Bonus info..." />
            </Field>
          </div>
        )}

        {step === 1 && (
          <div className="stack stack-md">
            <div>
              <div className="field-label" style={{ marginBottom: 8 }}>Cách chia</div>
              <div className="split-modes">
                <SplitModeBtn active={splitMode === "equal"}   title="Chia đều"    desc="Mỗi người như nhau"     onClick={() => setSplitMode("equal")} />
                <SplitModeBtn active={splitMode === "select"}  title="Chọn người"  desc="Chia đều cho 1 nhóm"    onClick={() => setSplitMode("select")} />
                <SplitModeBtn active={splitMode === "amount"}  title="Theo số tiền" desc="Nhập tiền từng người"  onClick={() => setSplitMode("amount")} />
                <SplitModeBtn active={splitMode === "percent"} title="Theo %"      desc="Tổng = 100%"            onClick={() => setSplitMode("percent")} />
                <SplitModeBtn active={splitMode === "shares"}  title="Theo phần"   desc="A 1 phần, B 2 phần..."  onClick={() => setSplitMode("shares")} />
              </div>
            </div>

            <div className="row-h-between" style={{ background: "var(--wf-bg-subtle)", padding: "10px 14px", borderRadius: "var(--r-md)", fontSize: 13 }}>
              <span className="text-muted">Tổng khoản chi</span>
              <span className="mono fw-700" style={{ fontSize: 16 }}>{window.QC.formatVND(amount)}</span>
            </div>

            <div>
              <div className="row-h-between" style={{ marginBottom: 8 }}>
                <div className="field-label" style={{ margin: 0 }}>Chia cho ai</div>
                <div className="row-h" style={{ gap: 4 }}>
                  <button className="btn btn-ghost btn-sm" onClick={() => setParticipantIds(members.map(m => m.id))}>Chọn tất cả</button>
                  <button className="btn btn-ghost btn-sm" onClick={() => setParticipantIds([])}>Bỏ chọn</button>
                </div>
              </div>
              {members.map(m => {
                const checked = participantIds.includes(m.id);
                const previewAmt = previewAmounts[m.id] || 0;
                return (
                  <div key={m.id} className={"person-split" + (checked ? "" : " muted")}>
                    <button className={"checkbox" + (checked ? " checked" : "")} onClick={() => toggleParticipant(m.id)} aria-label="Chọn">
                      {checked && <span className="icon icon-sm"><I.check /></span>}
                    </button>
                    <div className="row-h" style={{ gap: 10 }}>
                      <Avatar user={m} size="sm" />
                      <div>
                        <div className="person-split-name">{m.name}</div>
                        {checked && !["amount", "percent", "shares"].includes(splitMode) && (
                          <div className="text-xs text-muted mono">{window.QC.formatVND(previewAmt)}</div>
                        )}
                      </div>
                    </div>
                    <SplitInput mode={splitMode} disabled={!checked} member={m} shares={shares} setShares={setShares}
                                preview={previewAmt} total={amount} />
                  </div>
                );
              })}
            </div>

            {!validation && (
              <div style={{ background: "var(--success-soft)", color: "var(--success)", padding: "8px 12px", borderRadius: "var(--r-md)", fontSize: 13, display: "flex", alignItems: "center", gap: 8 }}>
                <span className="icon icon-sm"><I.check /></span>
                Cách chia hợp lệ — sẵn sàng lưu.
              </div>
            )}
          </div>
        )}
    </Modal>
  );
}

function SplitModeBtn({ active, title, desc, onClick }) {
  return (
    <button className={"split-mode" + (active ? " active" : "")} onClick={onClick}>
      <div className="split-mode-title">{title}</div>
      <div className="split-mode-desc">{desc}</div>
    </button>
  );
}

function SplitInput({ mode, disabled, member, shares, setShares, preview }) {
  if (mode === "equal" || mode === "select") {
    return <div className="text-xs text-muted mono">{disabled ? "—" : window.QC.formatVND(preview)}</div>;
  }
  const value = shares[member.id] || "";
  const update = (v) => setShares(prev => ({ ...prev, [member.id]: v }));
  if (mode === "amount") {
    return (
      <div className="row-h" style={{ gap: 4 }}>
        <input className="person-split-input" disabled={disabled} type="text" inputMode="numeric"
               value={value ? Number(value).toLocaleString("vi-VN") : ""}
               placeholder="0"
               onChange={e => { const raw = e.target.value.replace(/[^0-9]/g, ""); update(raw ? Number(raw) : 0); }} />
        <span className="text-xs text-muted">₫</span>
      </div>
    );
  }
  if (mode === "percent") {
    return (
      <div className="row-h" style={{ gap: 4 }}>
        <input className="person-split-input" disabled={disabled} type="number" step="0.01"
               value={value || ""} placeholder="0"
               onChange={e => update(e.target.value ? Number(e.target.value) : 0)} />
        <span className="text-xs text-muted">%</span>
        {!disabled && (
          <span className="text-xs text-muted mono" style={{ minWidth: 80, textAlign: "right" }}>
            = {window.QC.formatVND(preview)}
          </span>
        )}
      </div>
    );
  }
  if (mode === "shares") {
    return (
      <div className="row-h" style={{ gap: 4 }}>
        <input className="person-split-input" disabled={disabled} type="number" step="1" min="0"
               value={value || ""} placeholder="0"
               onChange={e => update(e.target.value ? Number(e.target.value) : 0)}
               style={{ width: 70 }} />
        <span className="text-xs text-muted">phần</span>
        {!disabled && (
          <span className="text-xs text-muted mono" style={{ minWidth: 80, textAlign: "right" }}>
            = {window.QC.formatVND(preview)}
          </span>
        )}
      </div>
    );
  }
  return null;
}

window.ExpenseModal = ExpenseModal;