// Helm — Add / Edit item sheet (新增／編輯). 支援「代號+股數」自動市值 + 真寫入後端。
(function () {
  const NS = window.HelmDesignSystem_9613a7;
  const { SegmentedControl, Field, Input, Select, Button } = NS;

  const CATS = {
    "資產": ["房地產", "車輛", "ETF", "現金", "美股", "投資", "保險", "其他"],
    "負債": ["房貸", "車貸", "信用卡", "其他"],
  };

  function AddEditSheet({ item, onClose, onSaved, onDeleted }) {
    const RATE = (window.HELM && window.HELM.RATE) || 32.3;
    const editing = !!item;
    const [type, setType] = React.useState(item && item._side === "liab" ? "負債" : "資產");
    const [cat, setCat] = React.useState(item ? item.cat : "");
    const [name, setName] = React.useState(item ? item.name : "");
    const [amount, setAmount] = React.useState(item ? String(item.ccy === "USD" ? (item.usd || "") : (item.twd || "")) : "");
    const [ccy, setCcy] = React.useState(item ? item.ccy : "TWD");
    const [ticker, setTicker] = React.useState(item && item.ticker ? item.ticker : "");
    const [shares, setShares] = React.useState(item && item.shares ? String(item.shares) : "");
    const [note, setNote] = React.useState(item && item.note ? item.note : "");
    const [date, setDate] = React.useState(item && item.date ? item.date.replace(/\//g, "-") : new Date().toISOString().slice(0, 10));
    const [saving, setSaving] = React.useState(false);
    const [deleting, setDeleting] = React.useState(false);
    const [confirmDel, setConfirmDel] = React.useState(false);
    const [touched, setTouched] = React.useState(false);

    const num = parseFloat(amount.replace(/,/g, "")) || 0;
    const shareNum = parseFloat(String(shares).replace(/,/g, "")) || 0;
    const hasStock = !!ticker && shareNum > 0;
    const grouped = num ? num.toLocaleString("en-US") : "";
    const nameErr = touched && !name.trim();
    const amtErr = touched && !hasStock && num <= 0;   // 有代號+股數時金額可留空
    const shareErr = touched && !!ticker && shareNum <= 0;

    function save() {
      setTouched(true);
      if (!name.trim() || !cat) return;
      if (!hasStock && num <= 0) return;
      if (ticker && shareNum <= 0) return;
      setSaving(true);
      const fields = {
        type: type, category: cat, name: name.trim(),
        amount: num, currency: ccy, note: note,
        updatedAt: date.replace(/-/g, "/"),
        ticker: ticker.trim(), shares: hasStock ? shareNum : "",
      };
      const p = editing
        ? window.HelmData.updateItem(Object.assign({ _row: item._row }, fields))
        : window.HelmData.addItem(fields);
      p.then(function () { onSaved(editing ? "已更新「" + name + "」" : "已新增「" + name + "」"); });
    }

    function doDelete() {
      setDeleting(true);
      window.HelmData.deleteItem(item._row).then(function () { onDeleted("已刪除「" + name + "」"); });
    }

    return (
      <div className="sheet-scrim" onClick={onClose}>
        <div className="sheet" onClick={(e) => e.stopPropagation()}>
          <div className="sheet__grip" />
          <header className="sheet__head">
            <button className="sheet__cancel" onClick={onClose}>取消</button>
            <span className="sheet__title">{editing ? "編輯項目" : "新增項目"}</span>
            <button className="sheet__save" onClick={save} disabled={saving}>
              {saving ? "儲存中…" : "儲存"}
            </button>
          </header>

          <div className="sheet__body">
            <Field label="類型" required>
              <SegmentedControl options={["資產", "負債"]} value={type}
                onChange={(v) => { setType(v); setCat(""); }} tones={["positive", "negative"]} />
            </Field>

            <Field label="類別" required>
              <Select placeholder="選擇類別" value={cat} onChange={(e) => setCat(e.target.value)} options={CATS[type]} />
            </Field>

            <Field label="項目名稱" required error={nameErr ? "幫這筆項目取個名字吧" : null}>
              <Input placeholder="例:玉山活存 / 0050" value={name} invalid={nameErr} onChange={(e) => setName(e.target.value)} />
            </Field>

            {/* 股票/ETF:填代號+股數 → 市值每天自動更新 */}
            <Field label="股票代號" hint="台股加 .TW(如 009816.TW)、美股直接打(如 SPCX);填了就每天自動抓市價算市值">
              <Input placeholder="留空 = 手動填金額" value={ticker} onChange={(e) => setTicker(e.target.value)} />
            </Field>
            {ticker ? (
              <Field label="股數" required error={shareErr ? "請輸入股數" : null}>
                <Input inputMode="decimal" placeholder="例:1000" value={shares} invalid={shareErr} onChange={(e) => setShares(e.target.value)} />
              </Field>
            ) : null}

            <Field label={hasStock ? "金額(自動更新,可留空)" : "金額"} required={!hasStock}
              error={amtErr ? "請輸入大於 0 的金額" : null}
              hint={hasStock ? "市值會依市價每天自動算" : "自動套用千分位"}>
              <Input amount affix={ccy === "USD" ? "US$" : "NT$"} inputMode="decimal"
                placeholder={hasStock ? "自動" : "0"} value={grouped} invalid={amtErr}
                onChange={(e) => setAmount(e.target.value)} />
            </Field>

            <Field label="幣別">
              <SegmentedControl options={["TWD", "USD"]} value={ccy} onChange={setCcy} />
              {ccy === "USD" && !hasStock && (
                <div className="sheet__fx">≈ NT$ {Math.round(num * RATE).toLocaleString("en-US")}　（1 USD = NT$ {RATE}）</div>
              )}
            </Field>

            <Field label="備註" hint="選填">
              <Input as="textarea" placeholder="寫點筆記…" value={note} onChange={(e) => setNote(e.target.value)} />
            </Field>

            <Field label="更新日期">
              <Input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
            </Field>

            {editing && (
              <div className="sheet__danger">
                {!confirmDel ? (
                  <Button variant="danger" block iconLeft="ph-trash" onClick={() => setConfirmDel(true)}>刪除這筆項目</Button>
                ) : (
                  <div className="sheet__confirm">
                    <p className="sheet__confirm-q">確定刪除「{name}」?此動作無法復原。</p>
                    <div className="sheet__confirm-row">
                      <Button variant="secondary" block onClick={() => setConfirmDel(false)} disabled={deleting}>取消</Button>
                      <Button variant="danger" block onClick={doDelete} loading={deleting}>確定刪除</Button>
                    </div>
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }

  window.AddEditSheet = AddEditSheet;
})();