// Add transaction modal — writes to Supabase, then triggers a refetch.

function AddTransactionModal({ onClose, onSaved }) {
  const { CARDS, ACCOUNTS, CATEGORIES, SETTINGS } = window.FIN_DATA;
  const fxRate = Number(SETTINGS?.fx_rate_usd_to_sgd) || 1.35;

  const [type, setType] = React.useState("expense");
  const [amount, setAmount] = React.useState("");
  const [currency, setCurrency] = React.useState("SGD");
  const [merchant, setMerchant] = React.useState("");
  const [category, setCategory] = React.useState(CATEGORIES[0]?.id || "food");
  const [paymentMode, setPaymentMode] = React.useState("card");  // 'card' | 'bank'
  const [cardId, setCardId] = React.useState(CARDS.find(c => c.type === "credit")?.id || "");
  const [account, setAccount] = React.useState(ACCOUNTS.find(a => a.type === "bank" && a.primary)?.id || ACCOUNTS[0]?.id || "");
  const [paymentMethod, setPaymentMethod] = React.useState("GIRO");
  const [fromAcc, setFromAcc] = React.useState(ACCOUNTS.find(a => a.type === "bank")?.id || "");
  const [toAcc, setToAcc] = React.useState(ACCOUNTS.find(a => a.type === "bank" && !a.primary)?.id || "");
  const [incomeType, setIncomeType] = React.useState("salary");
  const [date, setDate] = React.useState(() => new Date().toISOString().slice(0, 10));
  const [time, setTime] = React.useState(() => {
    const d = new Date();
    return String(d.getHours()).padStart(2, "0") + ":" + String(d.getMinutes()).padStart(2, "0");
  });
  const [note, setNote] = React.useState("");
  const [reimbursable, setReimbursable] = React.useState(false);
  const [reimbursableAmount, setReimbursableAmount] = React.useState("");
  const [reimbursableFrom, setReimbursableFrom] = React.useState("");
  const [recurring, setRecurring] = React.useState(false);

  // Card-specific tagging
  const [ppvMode, setPpvMode] = React.useState("online");
  const [prviRegion, setPrviRegion] = React.useState("local");
  const [krisflyerMode, setKrisflyerMode] = React.useState("other");
  const [maribankOverseas, setMaribankOverseas] = React.useState(false);

  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(null);

  const selectedCard = CARDS.find(c => c.id === cardId);
  const cardKind = selectedCard?.bonus?.kind;

  const types = [
    { id: "expense", label: "Expense", icon: "arrow-up-right", color: "var(--danger)" },
    { id: "income",  label: "Income",  icon: "arrow-down-left", color: "var(--success)" },
    { id: "transfer",label: "Transfer",icon: "swap",            color: "var(--info)" },
  ];

  const buildPayload = () => {
    const numAmount = parseFloat(amount);
    if (!numAmount || numAmount <= 0) throw new Error("Amount must be greater than zero.");
    const amountSgd = currency === "USD" ? numAmount * fxRate : numAmount;

    const base = {
      date,
      time: time || null,
      type,
      amount: numAmount,
      currency,
      amount_sgd: Math.round(amountSgd * 100) / 100,
      fx_rate: currency === "USD" ? fxRate : 1,
      note: note || null,
    };

    if (type === "expense") {
      if (!merchant) throw new Error("Merchant is required.");
      if (!category) throw new Error("Category is required.");
      const expensePayload = {
        ...base,
        merchant,
        category_id: category,
        recurring,
      };
      if (paymentMode === "card") {
        if (!cardId) throw new Error("Pick a card.");
        expensePayload.card_id = cardId;
        // Card-specific tags
        if (cardKind === "ppv") expensePayload.ppv_mode = ppvMode;
        if (cardKind === "prvi") expensePayload.prvi_region = prviRegion;
        if (cardKind === "krisflyer") expensePayload.krisflyer_mode = krisflyerMode;
        if (cardKind === "cashback-overseas") {
          expensePayload.is_overseas = maribankOverseas;
        }
      } else {
        if (!account) throw new Error("Pick a bank account.");
        expensePayload.account_id = account;
        expensePayload.payment_method = paymentMethod;
      }
      if (reimbursable) {
        const reAmt = parseFloat(reimbursableAmount);
        if (!reAmt || reAmt <= 0) throw new Error("Reimbursable amount must be greater than zero.");
        expensePayload.reimbursable = true;
        expensePayload.reimbursable_amount = reAmt;
        expensePayload.reimbursable_status = "pending";
        expensePayload.reimbursable_from = reimbursableFrom || null;
      }
      return expensePayload;
    }

    if (type === "income") {
      if (!merchant) throw new Error("Source is required.");
      if (!account) throw new Error("Pick an account.");
      return {
        ...base,
        merchant,
        income_type: incomeType,
        account_id: account,
      };
    }

    if (type === "transfer") {
      if (!fromAcc) throw new Error("Pick a from account.");
      if (!toAcc) throw new Error("Pick a to account.");
      if (fromAcc === toAcc) throw new Error("From and to accounts can't be the same.");
      return {
        ...base,
        merchant: merchant || null,
        from_account_id: fromAcc,
        to_account_id: toAcc,
      };
    }

    throw new Error("Unknown transaction type.");
  };

  const handleSave = async () => {
    setError(null);
    let payload;
    try {
      payload = buildPayload();
    } catch (err) {
      setError(err.message);
      return;
    }
    setSubmitting(true);
    try {
      await window.insertTransaction(payload);
      if (onSaved) onSaved();
    } catch (err) {
      setError(err.message || "Failed to save.");
      setSubmitting(false);
    }
  };

  return (
    <div style={{
      position: "fixed", inset: 0,
      background: "rgba(0,0,0,0.5)",
      display: "grid", placeItems: "center",
      zIndex: 1000, backdropFilter: "blur(4px)",
    }} onClick={onClose}>
      <div className="card" style={{
        width: 540, maxWidth: "calc(100vw - 32px)",
        maxHeight: "calc(100vh - 32px)",
        padding: 0, overflow: "hidden",
        display: "flex", flexDirection: "column",
        boxShadow: "0 20px 60px -10px rgba(0,0,0,0.4)",
      }} onClick={e => e.stopPropagation()}>

        <div style={{ padding: "18px 22px", display: "flex", justifyContent: "space-between", alignItems: "center", borderBottom: "1px solid var(--border-subtle)", flexShrink: 0 }}>
          <h2 style={{ fontSize: 16, fontWeight: 600, margin: 0, color: "var(--text-1)", letterSpacing: "-0.01em" }}>New transaction</h2>
          <button onClick={onClose} className="btn-ghost-sm"><Icon name="x" size={16}/></button>
        </div>

        <div style={{ padding: 22, display: "flex", flexDirection: "column", gap: 14, overflowY: "auto", flex: 1 }}>

          {/* Type selector */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8 }}>
            {types.map(t => (
              <button key={t.id} onClick={() => setType(t.id)} style={{
                padding: "12px 8px", borderRadius: 10,
                border: type === t.id ? `1.5px solid ${t.color}` : "1px solid var(--border-subtle)",
                background: type === t.id ? `${t.color}10` : "var(--bg)",
                color: type === t.id ? t.color : "var(--text-2)",
                cursor: "pointer", fontSize: 13, fontWeight: 500,
                display: "flex", flexDirection: "column", alignItems: "center", gap: 6,
                transition: "all 0.15s",
                fontFamily: "inherit",
              }}>
                <Icon name={t.icon} size={18}/>
                {t.label}
              </button>
            ))}
          </div>

          {/* Amount + currency + date */}
          <div style={{ display: "grid", gridTemplateColumns: "1.6fr 0.8fr 1fr", gap: 8 }}>
            <Field label="Amount">
              <div style={{ position: "relative" }}>
                <span style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", fontSize: 12, fontWeight: 500, color: "var(--text-muted)" }}>{currency === "USD" ? "US$" : "S$"}</span>
                <input
                  value={amount}
                  onChange={e => setAmount(e.target.value)}
                  placeholder="0.00"
                  type="number"
                  step="0.01"
                  style={{
                    width: "100%", padding: "10px 12px 10px 38px",
                    fontSize: 17, fontWeight: 600, fontVariantNumeric: "tabular-nums",
                    background: "var(--bg-muted)", border: "1px solid transparent",
                    borderRadius: 8, color: "var(--text-1)", outline: "none",
                    fontFamily: "inherit",
                  }}/>
              </div>
            </Field>
            <Field label="Currency">
              <select value={currency} onChange={e => setCurrency(e.target.value)} className="input">
                <option value="SGD">SGD</option>
                <option value="USD">USD</option>
              </select>
            </Field>
            <Field label="Date">
              <input type="date" value={date} onChange={e => setDate(e.target.value)} className="input"/>
            </Field>
          </div>
          {currency === "USD" && (
            <div style={{ fontSize: 11, color: "var(--text-muted)", marginTop: -8 }}>
              Will be recorded as {fmt.sgd(parseFloat(amount || 0) * fxRate)} at FX 1 USD = {fxRate} SGD
            </div>
          )}

          {type === "expense" && (
            <>
              <Field label="Merchant">
                <input value={merchant} onChange={e => setMerchant(e.target.value)} placeholder="e.g. Tim Ho Wan" className="input"/>
              </Field>

              <Field label="Category">
                <select value={category} onChange={e => setCategory(e.target.value)} className="input">
                  {CATEGORIES.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                </select>
              </Field>

              {/* Payment mode toggle */}
              <Field label="Pay via">
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
                  <button onClick={() => setPaymentMode("card")} style={segStyle(paymentMode === "card")}>
                    <Icon name="card" size={13}/> Card
                  </button>
                  <button onClick={() => setPaymentMode("bank")} style={segStyle(paymentMode === "bank")}>
                    <Icon name="wallet" size={13}/> Bank (GIRO/PayNow)
                  </button>
                </div>
              </Field>

              {paymentMode === "card" ? (
                <>
                  <Field label="Card">
                    <select value={cardId} onChange={e => setCardId(e.target.value)} className="input">
                      <optgroup label="Credit">
                        {CARDS.filter(c => c.type === "credit").map(c => <option key={c.id} value={c.id}>{c.name} ····{c.last4}</option>)}
                      </optgroup>
                      <optgroup label="Debit">
                        {CARDS.filter(c => c.type === "debit").map(c => <option key={c.id} value={c.id}>{c.name} ····{c.last4}</option>)}
                      </optgroup>
                    </select>
                  </Field>

                  <CardTagger
                    cardKind={cardKind}
                    ppvMode={ppvMode} setPpvMode={setPpvMode}
                    prviRegion={prviRegion} setPrviRegion={setPrviRegion}
                    krisflyerMode={krisflyerMode} setKrisflyerMode={setKrisflyerMode}
                    maribankOverseas={maribankOverseas} setMaribankOverseas={setMaribankOverseas}
                  />
                </>
              ) : (
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
                  <Field label="From account">
                    <select value={account} onChange={e => setAccount(e.target.value)} className="input">
                      {ACCOUNTS.filter(a => a.type === "bank").map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
                    </select>
                  </Field>
                  <Field label="Method">
                    <select value={paymentMethod} onChange={e => setPaymentMethod(e.target.value)} className="input">
                      <option value="GIRO">GIRO</option>
                      <option value="PayNow">PayNow</option>
                      <option value="Bank transfer">Bank transfer</option>
                      <option value="Cash">Cash</option>
                    </select>
                  </Field>
                </div>
              )}

              {/* Reimbursable */}
              <label style={{ display: "flex", alignItems: "flex-start", gap: 10, cursor: "pointer", padding: "10px 12px", borderRadius: 8, background: "var(--bg-muted)" }}>
                <input type="checkbox" checked={reimbursable} onChange={e => setReimbursable(e.target.checked)} style={{ marginTop: 2, accentColor: "var(--accent)" }}/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 500, color: "var(--text-1)" }}>Reimbursable</div>
                  <div style={{ fontSize: 11, color: "var(--text-muted)" }}>Mark if a friend or work will pay you back</div>
                  {reimbursable && (
                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginTop: 8 }}>
                      <input value={reimbursableAmount} onChange={e => setReimbursableAmount(e.target.value)} placeholder="Amount owed" type="number" step="0.01" className="input" style={{ background: "var(--bg)" }}/>
                      <input value={reimbursableFrom} onChange={e => setReimbursableFrom(e.target.value)} placeholder="From whom" className="input" style={{ background: "var(--bg)" }}/>
                    </div>
                  )}
                </div>
              </label>

              {/* Recurring */}
              <label style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer", padding: "8px 12px", borderRadius: 8, background: "var(--bg-muted)" }}>
                <input type="checkbox" checked={recurring} onChange={e => setRecurring(e.target.checked)} style={{ accentColor: "var(--accent)" }}/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 500, color: "var(--text-1)" }}>Recurring (subscription/bill)</div>
                </div>
              </label>
            </>
          )}

          {type === "income" && (
            <>
              <Field label="Source">
                <input value={merchant} onChange={e => setMerchant(e.target.value)} placeholder="e.g. Salary, IBKR Dividend, Jamie" className="input"/>
              </Field>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
                <Field label="Type">
                  <select value={incomeType} onChange={e => setIncomeType(e.target.value)} className="input">
                    <option value="salary">Salary</option>
                    <option value="reservist">Reservist</option>
                    <option value="reimbursement">Reimbursement</option>
                    <option value="dividend">Dividend</option>
                    <option value="refund">Refund</option>
                    <option value="other">Other</option>
                  </select>
                </Field>
                <Field label="Deposit to">
                  <select value={account} onChange={e => setAccount(e.target.value)} className="input">
                    {ACCOUNTS.filter(a => a.type === "bank").map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
                  </select>
                </Field>
              </div>
            </>
          )}

          {type === "transfer" && (
            <>
              <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", gap: 8, alignItems: "flex-end" }}>
                <Field label="From">
                  <select value={fromAcc} onChange={e => setFromAcc(e.target.value)} className="input">
                    <optgroup label="Bank">
                      {ACCOUNTS.filter(a => a.type === "bank").map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
                    </optgroup>
                    <optgroup label="Investment">
                      {ACCOUNTS.filter(a => a.type === "investment").map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
                    </optgroup>
                  </select>
                </Field>
                <div style={{ paddingBottom: 10 }}>
                  <Icon name="arrow-right" size={16} style={{ color: "var(--text-muted)" }}/>
                </div>
                <Field label="To">
                  <select value={toAcc} onChange={e => setToAcc(e.target.value)} className="input">
                    <optgroup label="Bank">
                      {ACCOUNTS.filter(a => a.type === "bank").map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
                    </optgroup>
                    <optgroup label="Investment">
                      {ACCOUNTS.filter(a => a.type === "investment").map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
                    </optgroup>
                  </select>
                </Field>
              </div>
              <Field label="Description (optional)">
                <input value={merchant} onChange={e => setMerchant(e.target.value)} placeholder="e.g. Monthly DCA to Syfe" className="input"/>
              </Field>
            </>
          )}

          <Field label="Note (optional)">
            <input value={note} onChange={e => setNote(e.target.value)} placeholder="Add a note…" className="input"/>
          </Field>

          {error && (
            <div style={{
              padding: "9px 12px",
              background: "var(--danger-soft)",
              color: "var(--danger)",
              borderRadius: 8,
              fontSize: 12,
              display: "flex", alignItems: "center", gap: 6,
            }}>
              <Icon name="alert" size={13}/>
              {error}
            </div>
          )}
        </div>

        <div style={{ padding: "14px 22px", display: "flex", justifyContent: "flex-end", gap: 8, borderTop: "1px solid var(--border-subtle)", background: "var(--bg-muted)", flexShrink: 0 }}>
          <button onClick={onClose} className="btn-ghost" disabled={submitting}>Cancel</button>
          <button onClick={handleSave} className="btn-primary" disabled={submitting} style={{ opacity: submitting ? 0.6 : 1 }}>
            {submitting ? "Saving…" : (<><Icon name="check" size={14}/> Save transaction</>)}
          </button>
        </div>
      </div>
    </div>
  );
}

function Field({ label, children }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
      <label style={{ fontSize: 11, fontWeight: 600, color: "var(--text-muted)", textTransform: "uppercase", letterSpacing: "0.04em" }}>{label}</label>
      {children}
    </div>
  );
}

function segStyle(active) {
  return {
    padding: "9px 10px", borderRadius: 7,
    border: active ? "1.5px solid var(--text-1)" : "1px solid var(--border-subtle)",
    background: "var(--bg)",
    color: active ? "var(--text-1)" : "var(--text-2)",
    cursor: "pointer", fontSize: 12, fontWeight: active ? 600 : 500,
    display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
    fontFamily: "inherit",
    transition: "all 0.12s",
  };
}

function CardTagger({ cardKind, ppvMode, setPpvMode, prviRegion, setPrviRegion, krisflyerMode, setKrisflyerMode, maribankOverseas, setMaribankOverseas }) {
  if (!cardKind) return null;

  if (cardKind === "ppv") {
    return (
      <TagPanel title="UOB Preferred Platinum" subtitle="Mark how you charged this — separate S$600 cap each">
        <SegRow value={ppvMode} onChange={setPpvMode} options={[
          { id: "online", label: "Online", icon: "external" },
          { id: "contactless", label: "Contactless", icon: "zap" },
        ]}/>
      </TagPanel>
    );
  }

  if (cardKind === "prvi") {
    return (
      <TagPanel title="UOB PRVI Miles" subtitle="Where was this charged?">
        <SegRow value={prviRegion} onChange={setPrviRegion} options={[
          { id: "hotel", label: "Agoda/Expedia", icon: "home" },
          { id: "local", label: "Local", icon: "card" },
          { id: "sea", label: "SEA", icon: "plane" },
          { id: "other", label: "Other O/S", icon: "external" },
        ]}/>
        <div style={{ fontSize: 11, color: "var(--text-muted)", marginTop: 8 }}>
          {prviRegion === "hotel" && "Up to 8mpd on Agoda/Expedia bookings"}
          {prviRegion === "local" && "1.4mpd on local SGD spend"}
          {prviRegion === "sea" && "3mpd on Malaysia, Indonesia, Thailand, Vietnam"}
          {prviRegion === "other" && "2.4mpd on all other overseas spend"}
        </div>
      </TagPanel>
    );
  }

  if (cardKind === "krisflyer") {
    return (
      <TagPanel title="UOB KrisFlyer" subtitle="Is this an SQ-related transaction?">
        <SegRow value={krisflyerMode} onChange={setKrisflyerMode} options={[
          { id: "sq", label: "SQ flight / KrisShop / Lounge", icon: "plane" },
          { id: "other", label: "Other spend", icon: "card" },
        ]}/>
        <div style={{ fontSize: 11, color: "var(--text-muted)", marginTop: 8 }}>
          {krisflyerMode === "sq" ? "Flat 3mpd on all SQ-related" : "Counts toward S$1k SQ unlock for 2.4mpd on accelerated"}
        </div>
      </TagPanel>
    );
  }

  if (cardKind === "cashback-overseas") {
    return (
      <TagPanel title="Maribank" subtitle="1.5% cashback only applies to overseas spend">
        <SegRow value={maribankOverseas ? "overseas" : "local"} onChange={v => setMaribankOverseas(v === "overseas")} options={[
          { id: "local", label: "Local (no cashback)", icon: "card" },
          { id: "overseas", label: "Overseas (1.5%)", icon: "external" },
        ]}/>
      </TagPanel>
    );
  }

  return null;
}

function TagPanel({ title, subtitle, children }) {
  return (
    <div style={{ padding: "12px 14px", background: "var(--accent-soft)", border: "1px solid var(--border-subtle)", borderRadius: 10 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 2 }}>
        <Icon name="sparkle" size={11} style={{ color: "var(--accent)" }}/>
        <div style={{ fontSize: 11.5, fontWeight: 600, color: "var(--text-1)" }}>{title}</div>
      </div>
      <div style={{ fontSize: 11, color: "var(--text-muted)", marginBottom: 10 }}>{subtitle}</div>
      {children}
    </div>
  );
}

function SegRow({ value, onChange, options }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: `repeat(${options.length}, 1fr)`, gap: 6 }}>
      {options.map(o => (
        <button key={o.id} onClick={() => onChange(o.id)} style={{
          padding: "8px 6px", borderRadius: 7,
          border: value === o.id ? "1.5px solid var(--accent)" : "1px solid var(--border-subtle)",
          background: "var(--bg)",
          color: value === o.id ? "var(--text-1)" : "var(--text-2)",
          cursor: "pointer", fontSize: 11.5, fontWeight: value === o.id ? 600 : 500,
          display: "flex", alignItems: "center", justifyContent: "center", gap: 5,
          fontFamily: "inherit",
          transition: "all 0.12s",
        }}>
          <Icon name={o.icon} size={12}/>
          {o.label}
        </button>
      ))}
    </div>
  );
}

window.AddTransactionModal = AddTransactionModal;