/* ============================================================
   Dinasty Control — AI Override Panel
   ============================================================ */

const VALID_DECISIONS = ["", "ALLOW", "BLOCK", "TEST_SMALL"];

function ToggleSwitch({ value, onChange, disabled }) {
  return (
    <button
      className={`ov-toggle ${value ? "ov-toggle-on" : "ov-toggle-off"}`}
      onClick={() => !disabled && onChange(!value)}
      disabled={disabled}
      type="button"
    >
      <span className="ov-toggle-thumb" />
    </button>
  );
}

function StatusRow({ label, current, override, active }) {
  return (
    <div className="ov-statusrow">
      <span className="ov-statusrow-label">{label}</span>
      <span className="ov-statusrow-cur">{current ?? "—"}</span>
      {active && override != null && (
        <span className="ov-statusrow-ov">→ <b>{String(override)}</b></span>
      )}
    </div>
  );
}

function ControlPanel() {
  const [state, setState] = useState(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [msg, setMsg] = useState(null);

  const [riskBuy, setRiskBuy]     = useState("");
  const [riskSell, setRiskSell]   = useState("");
  const [allowBuy, setAllowBuy]   = useState(true);
  const [allowSell, setAllowSell] = useState(true);
  const [decision, setDecision]   = useState("");

  useEffect(() => { loadState(); }, []);

  async function loadState() {
    setLoading(true);
    try {
      const r = await fetch("/api/ai-control/get");
      const d = await r.json();
      if (d.ok && d.data) {
        const s = d.data;
        setState(s);
        if (s.override_active) {
          setRiskBuy(s.risk_buy_override != null ? String(s.risk_buy_override) : "");
          setRiskSell(s.risk_sell_override != null ? String(s.risk_sell_override) : "");
          setAllowBuy(s.allow_buy_override != null ? s.allow_buy_override : true);
          setAllowSell(s.allow_sell_override != null ? s.allow_sell_override : true);
          setDecision(s.decision_override || "");
        }
      }
    } catch (e) {
      setMsg({ type: "err", text: "Gagal load state: " + e.message });
    }
    setLoading(false);
  }

  async function applyOverride(active) {
    setSaving(true); setMsg(null);
    try {
      const payload = active ? {
        override_active: true,
        risk_buy_override:  riskBuy  !== "" ? parseFloat(riskBuy)  : null,
        risk_sell_override: riskSell !== "" ? parseFloat(riskSell) : null,
        allow_buy_override: allowBuy,
        allow_sell_override: allowSell,
        decision_override: decision || null,
      } : { override_active: false };

      const r = await fetch("/api/ai-control/set", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      const d = await r.json();
      if (d.ok) {
        setMsg({ type: "ok", text: d.message });
        setState(s => ({ ...s, override_active: active }));
      } else {
        setMsg({ type: "err", text: d.message || "Gagal" });
      }
    } catch (e) {
      setMsg({ type: "err", text: String(e) });
    }
    setSaving(false);
  }

  const isActive = state?.override_active;

  return (
    <div className="screen">
      <div className="screen-head">
        <span className="screen-title">AI Override</span>
        <span className="screen-sub">Kontrol risk &amp; entry tanpa ubah set file atau restart EA</span>
      </div>

      <div className="ov-grid">

        {/* Status AI saat ini */}
        <div className="ov-card">
          <div className="ov-card-head">
            Status Engine (realtime)
            {!loading && (
              <span className={`ov-badge ${isActive ? "ov-badge-warn" : "ov-badge-ok"}`}>
                {isActive ? "OVERRIDE AKTIF" : "AI AUTO"}
              </span>
            )}
          </div>
          {loading ? <div className="ov-loading">Memuat...</div> : state ? (
            <div className="ov-statuslist">
              <StatusRow label="Regime"        current={state.regime}           override={null} active={false} />
              <StatusRow label="Risk BUY"      current={state.risk_buy != null ? state.risk_buy + "%" : "—"}  override={state.risk_buy_override != null ? state.risk_buy_override + "%" : null}  active={isActive} />
              <StatusRow label="Risk SELL"     current={state.risk_sell != null ? state.risk_sell + "%" : "—"} override={state.risk_sell_override != null ? state.risk_sell_override + "%" : null} active={isActive} />
              <StatusRow label="Allow BUY"     current={state.allow_buy != null ? String(state.allow_buy) : "—"}  override={state.allow_buy_override != null ? String(state.allow_buy_override) : null}  active={isActive} />
              <StatusRow label="Allow SELL"    current={state.allow_sell != null ? String(state.allow_sell) : "—"} override={state.allow_sell_override != null ? String(state.allow_sell_override) : null} active={isActive} />
              <StatusRow label="Decision"      current={state.decision || "—"}  override={state.decision_override || null} active={isActive} />
              <StatusRow label="Conf BUY/SELL" current={`${state.confidence_buy ?? "?"} / ${state.confidence_sell ?? "?"}`} override={null} active={false} />
              <div className="ov-ts">Diperbarui: {state.updated_at ? state.updated_at.slice(0,19).replace("T"," ") : "—"} UTC
                {isActive && state.override_updated_at && (
                  <span className="ov-ts-ov"> · Override: {state.override_updated_at.slice(0,19).replace("T"," ")} UTC</span>
                )}
              </div>
            </div>
          ) : <div className="ov-empty">Tidak ada data ai_control. Engine mungkin belum pernah run.</div>}
        </div>

        {/* Form override */}
        <div className="ov-card">
          <div className="ov-card-head">Manual Override</div>
          <div className="ov-form">

            <div className="ov-row">
              <label className="ov-label">Risk BUY (%)</label>
              <input
                className="ov-input"
                type="number" min="0.01" max="5" step="0.01"
                placeholder={state?.risk_buy != null ? String(state.risk_buy) : "0.50"}
                value={riskBuy}
                onChange={e => setRiskBuy(e.target.value)}
              />
            </div>

            <div className="ov-row">
              <label className="ov-label">Risk SELL (%)</label>
              <input
                className="ov-input"
                type="number" min="0.01" max="5" step="0.01"
                placeholder={state?.risk_sell != null ? String(state.risk_sell) : "0.50"}
                value={riskSell}
                onChange={e => setRiskSell(e.target.value)}
              />
            </div>

            <div className="ov-row ov-row-toggle">
              <label className="ov-label">Allow BUY</label>
              <ToggleSwitch value={allowBuy} onChange={setAllowBuy} disabled={saving} />
            </div>

            <div className="ov-row ov-row-toggle">
              <label className="ov-label">Allow SELL</label>
              <ToggleSwitch value={allowSell} onChange={setAllowSell} disabled={saving} />
            </div>

            <div className="ov-row">
              <label className="ov-label">Decision</label>
              <select className="ov-select" value={decision} onChange={e => setDecision(e.target.value)}>
                {VALID_DECISIONS.map(d => (
                  <option key={d} value={d}>{d || "(ikut engine)"}</option>
                ))}
              </select>
            </div>

            <div className="ov-note">
              Kosongkan risk = pakai nilai engine. Allow + Decision menimpa engine sepenuhnya saat override aktif.
              Poller propagasi ke 144 set MT5 dalam ±1 menit.
            </div>

            <div className="ov-actions">
              <button
                className="ov-btn ov-btn-apply"
                onClick={() => applyOverride(true)}
                disabled={saving}
              >
                {saving ? "Menyimpan..." : "Terapkan Override"}
              </button>
              {isActive && (
                <button
                  className="ov-btn ov-btn-reset"
                  onClick={() => applyOverride(false)}
                  disabled={saving}
                >
                  Reset ke AI
                </button>
              )}
              <button
                className="ov-btn ov-btn-refresh"
                onClick={loadState}
                disabled={loading || saving}
              >
                Refresh
              </button>
            </div>

            {msg && (
              <div className={`ov-msg ov-msg-${msg.type}`}>{msg.text}</div>
            )}
          </div>
        </div>

      </div>
    </div>
  );
}