// src/add-transaction-modal.jsx — Modal para agregar/editar transaccion.
// Fase 2.1: integra auto-categorizacion al escribir la descripcion.
(() => {
  function AddTransactionModal({ onClose, transaction: tx }) {
    const { lang } = window.useApp();
    const t = window.I18N[lang];
    const isEdit = !!tx;

    const settings = window.Storage.get("settings") || {};
    const defaultCurrency = settings.currency || "PEN";

    const [type, setType] = React.useState(tx ? (tx.amt > 0 ? "income" : "expense") : "expense");
    const [amount, setAmount] = React.useState(tx ? Math.abs(tx.amt).toString() : "");
    const [currency, setCurrency] = React.useState(tx ? (tx.currency || defaultCurrency) : defaultCurrency);
    const [category, setCategory] = React.useState(tx ? (tx.cat || "") : "");
    const [description, setDescription] = React.useState(tx ? (tx.merchant_es || tx.merchant_en || "") : "");
    const [date, setDate] = React.useState(tx ? tx.date : window.todayISO());
    const [method, setMethod] = React.useState(tx ? (tx.method || "card") : "card");
    const [notes, setNotes] = React.useState(tx ? (tx.notes || "") : "");
    const [error, setError] = React.useState(null);
    const [catManuallySet, setCatManuallySet] = React.useState(isEdit); // si editamos, no auto-sugerir

    const visibleCategories = window.CATEGORIES.filter((c) => {
      if (type === "income") return c.type === "income";
      return c.type === "expense";
    });

    // Auto-categorizacion: al cambiar la descripcion, sugerir categoria
    React.useEffect(() => {
      if (catManuallySet) return;
      if (!description || description.length < 2) return;
      if (!window.AutoCat) return;
      const suggested = window.AutoCat.suggest(description);
      if (suggested && suggested !== category) {
        // Solo cambiar si la sugerida esta entre las visibles
        const isExpense = suggested !== "income";
        const expected = type === "income" ? "income" : "expense";
        if ((isExpense && expected === "expense") || (!isExpense && expected === "income")) {
          setCategory(suggested);
        }
      }
    }, [description, type, catManuallySet]); // eslint-disable-line

    // Si el usuario cambia tipo y la categoria actual no es valida, ajustar
    React.useEffect(() => {
      if (!category) {
        if (visibleCategories.length > 0) setCategory(visibleCategories[0].key);
        return;
      }
      const stillValid = visibleCategories.some(c => c.key === category);
      if (!stillValid) {
        setCategory(visibleCategories[0]?.key || "");
        setCatManuallySet(false);
      }
    }, [type]); // eslint-disable-line

    function handleSubmit(e) {
      e.preventDefault();
      setError(null);
      const amt = parseFloat(amount);
      if (isNaN(amt) || amt <= 0) { setError(lang === "es" ? "Monto invalido" : "Invalid amount"); return; }
      if (!category) { setError(lang === "es" ? "Elige una categoria" : "Pick a category"); return; }
      if (!date) { setError(lang === "es" ? "Fecha requerida" : "Date required"); return; }

      const payload = {
        date,
        merchant_es: description || (lang === "es" ? "Sin descripcion" : "No description"),
        merchant_en: description || "No description",
        cat: category,
        amt: type === "income" ? amt : -amt,
        currency,
        method,
        notes,
      };

      try {
        if (isEdit) window.Storage.update("transactions", tx.id, payload);
        else window.Storage.add("transactions", payload);
        onClose();
      } catch (err) {
        setError(err.message);
      }
    }

    function handleDelete() {
      if (!isEdit) return;
      const confirmMsg = lang === "es" ? "Borrar esta transaccion?" : "Delete this transaction?";
      if (window.confirm(confirmMsg)) {
        window.Storage.remove("transactions", tx.id);
        onClose();
      }
    }

    // Marcar como manual cuando el usuario cambia la categoria
    function onCategoryChange(v) {
      setCategory(v);
      setCatManuallySet(true);
    }

    return (
      <div className="modal-scrim" onClick={onClose}>
        <div className="modal-card" style={{ maxWidth: 480, padding: 24 }} onClick={(e) => e.stopPropagation()}>
          <button className="ob-close" onClick={onClose} aria-label="close">
            <window.Icon name="x" size={14} />
          </button>
          <div className="kicker" style={{ marginBottom: 4 }}>
            {isEdit ? (lang === "es" ? "Editar movimiento" : "Edit transaction") : (lang === "es" ? "Nuevo movimiento" : "New transaction")}
          </div>
          <div className="h2" style={{ marginBottom: 20 }}>
            {type === "income" ? (lang === "es" ? "Ingreso" : "Income") : (lang === "es" ? "Gasto" : "Expense")}
          </div>

          <form onSubmit={handleSubmit} className="tx-form">
            <div className="form-row">
              <div className="seg">
                <button type="button" className={"seg-btn " + (type === "expense" ? "on" : "")} onClick={() => setType("expense")}>
                  {lang === "es" ? "Gasto" : "Expense"}
                </button>
                <button type="button" className={"seg-btn " + (type === "income" ? "on" : "")} onClick={() => setType("income")}>
                  {lang === "es" ? "Ingreso" : "Income"}
                </button>
              </div>
            </div>

            <div className="form-row">
              <label className="form-label">{lang === "es" ? "Monto" : "Amount"}</label>
              <div style={{ display: "flex", gap: 8 }}>
                <input type="number" step="0.01" min="0" className="input mono" placeholder="0.00" value={amount} onChange={(e) => setAmount(e.target.value)} autoFocus required style={{ flex: 1 }} />
                <select className="input" value={currency} onChange={(e) => setCurrency(e.target.value)} style={{ width: 100 }}>
                  <option value="PEN">S/ PEN</option>
                  <option value="USD">$ USD</option>
                </select>
              </div>
            </div>

            <div className="form-row">
              <label className="form-label">{lang === "es" ? "Descripcion" : "Description"}</label>
              <input type="text" className="input" placeholder={lang === "es" ? "Ej. Cafe, Uber, alquiler..." : "e.g. Coffee, Uber, rent..."} value={description} onChange={(e) => setDescription(e.target.value)} />
              {!catManuallySet && description.length >= 2 && (
                <div className="caption" style={{ marginTop: 4, fontStyle: "italic" }}>
                  ✨ {lang === "es" ? "Categoria sugerida automaticamente" : "Category auto-suggested"}
                </div>
              )}
            </div>

            <div className="form-row">
              <label className="form-label">{lang === "es" ? "Categoria" : "Category"}</label>
              <select className="input" value={category} onChange={(e) => onCategoryChange(e.target.value)} required>
                {visibleCategories.map((c) => (
                  <option key={c.key} value={c.key}>{c.emoji} {lang === "es" ? c.name_es : c.name_en}</option>
                ))}
              </select>
            </div>

            <div className="form-row" style={{ display: "flex", gap: 12 }}>
              <div style={{ flex: 1 }}>
                <label className="form-label">{lang === "es" ? "Fecha" : "Date"}</label>
                <input type="date" className="input" value={date} onChange={(e) => setDate(e.target.value)} required />
              </div>
              <div style={{ flex: 1 }}>
                <label className="form-label">{lang === "es" ? "Metodo" : "Method"}</label>
                <select className="input" value={method} onChange={(e) => setMethod(e.target.value)}>
                  {window.PAYMENT_METHODS.map((m) => (
                    <option key={m.key} value={m.key}>{lang === "es" ? m.name_es : m.name_en}</option>
                  ))}
                </select>
              </div>
            </div>

            <div className="form-row">
              <label className="form-label">{lang === "es" ? "Notas (opcional)" : "Notes (optional)"}</label>
              <textarea className="input" rows={2} value={notes} onChange={(e) => setNotes(e.target.value)} />
            </div>

            {error && <div className="form-error">{error}</div>}

            <div className="form-actions">
              {isEdit && (
                <button type="button" className="btn danger" onClick={handleDelete}>
                  {lang === "es" ? "Borrar" : "Delete"}
                </button>
              )}
              <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
                <button type="button" className="btn" onClick={onClose}>{lang === "es" ? "Cancelar" : "Cancel"}</button>
                <button type="submit" className="btn warm">{isEdit ? (lang === "es" ? "Guardar" : "Save") : (lang === "es" ? "Agregar" : "Add")}</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    );
  }

  window.AddTransactionModal = AddTransactionModal;
})();