// Trade Axis Pro — interactive EA panel mock
// Requires: React global, LiveChart, StatusPill, useCandles (from primitives.jsx)

const { useState: useStateP } = React;

function ProPanel({ strings, compact = false }) {
  const [tab, setTab] = useStateP("MAIN");
  const tabs = [
    { id: "MAIN", label: strings.tab_main },
    { id: "STRATEGY", label: strings.tab_strategy },
    { id: "TRADING", label: strings.tab_trading },
    { id: "MONITOR", label: strings.tab_monitor },
  ];

  return (
    <div style={{
      background: "#0A1220",
      border: "1px solid #1A2540",
      borderRadius: 8,
      fontFamily: "var(--mono)",
      fontSize: compact ? 11 : 12,
      color: "#C8D2E8",
      boxShadow: "var(--shadow-lg)",
      overflow: "hidden",
      minWidth: compact ? 360 : 440,
    }}>
      {/* Title bar */}
      <div style={{
        padding: "10px 14px",
        background: "linear-gradient(180deg, #152139, #0E1930)",
        borderBottom: "1px solid #1A2540",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: 12
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <svg width="16" height="16" viewBox="0 0 64 64">
            <rect x="28" y="4" width="8" height="56" fill="#2B5BB8" rx="1"/>
            <rect x="18" y="30" width="6" height="12" fill="var(--ta-green)" rx="1"/>
            <rect x="42" y="22" width="6" height="12" fill="var(--ta-green)" rx="1"/>
          </svg>
          <span style={{ color: "#E8EDF7", fontWeight: 600 }}>{strings.panel_title}</span>
        </div>
        <div style={{ display: "flex", gap: 14 }}>
          <StatusPill kind="stopped" label={strings.panel_status_stopped} />
          <StatusPill kind="active" label={strings.panel_status_active} />
        </div>
      </div>

      {/* Tabs */}
      <div style={{ display: "flex", borderBottom: "1px solid #1A2540", background: "#0C1528" }}>
        {tabs.map(t => (
          <button
            key={t.id}
            onClick={() => setTab(t.id)}
            style={{
              flex: 1,
              padding: "10px 8px",
              fontFamily: "var(--mono)",
              fontSize: 11, fontWeight: 600,
              color: tab === t.id ? "#4A8EE8" : "#8894B2",
              borderBottom: tab === t.id ? "2px solid #4A8EE8" : "2px solid transparent",
              letterSpacing: ".08em",
              transition: "all .15s",
            }}
          >{t.label}</button>
        ))}
      </div>

      {/* Panel content */}
      <div style={{ padding: 14 }}>
        {tab === "MAIN" && <MainTab />}
        {tab === "STRATEGY" && <StrategyTab />}
        {tab === "TRADING" && <TradingTab />}
        {tab === "MONITOR" && <MonitorTab />}
      </div>

      {/* Emergency stop */}
      <div style={{ padding: "0 14px 14px" }}>
        <button style={{
          width: "100%",
          padding: "10px",
          background: "#2A0F12",
          border: "1px solid #6A1F24",
          color: "#E8553B",
          borderRadius: 4,
          fontFamily: "var(--mono)",
          fontSize: 11, fontWeight: 700,
          letterSpacing: ".1em",
          cursor: "pointer",
        }}>⚠ EMERGENCY STOP ⚠</button>
      </div>
    </div>
  );
}

function Row({ label, value, valueColor = "#4A8EE8", extra }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "100px 90px 50px 1fr", alignItems: "center", padding: "5px 0", borderBottom: "1px dashed #172239" }}>
      <span style={{ color: "#8894B2" }}>{label}</span>
      <span style={{ color: valueColor, fontWeight: 600 }}>{value}</span>
      <span style={{ color: "#6B7898", fontSize: 10 }}>{extra?.pct}</span>
      <span style={{ color: extra?.statusColor || "#5FAF3F", fontSize: 10, display: "flex", alignItems: "center", gap: 4 }}>
        {extra?.status && <><span style={{ width: 6, height: 6, borderRadius: 99, background: extra?.statusColor || "#5FAF3F" }} />{extra.status}</>}
      </span>
    </div>
  );
}

function MainTab() {
  return (
    <div>
      <div style={{ display: "grid", gridTemplateColumns: "100px 90px 50px 1fr", padding: "4px 0", borderBottom: "1px solid #1A2540", color: "#6B7898", fontSize: 10, letterSpacing: ".08em", textTransform: "uppercase", fontWeight: 600 }}>
        <span>Risk limits</span><span>Remain</span><span>%</span><span>Status / protection</span>
      </div>
      <Row label="Week:"    value="$6 835"   extra={{ pct: "68%",  status: "ACTIVE" }} />
      <Row label="W.Profit:" value="$-3 165"  valueColor="#E8553B" extra={{ pct: "WPT $10 000", status: "" }} />
      <Row label="Prev week:" value="$-31 406" valueColor="#E8553B" extra={{ pct: "no profit last week", status: "" }} />
      <Row label="Day:"     value="$5 000"   extra={{ pct: "100%", status: "ACTIVE" }} />
      <Row label="Profit:"  value="$129"     valueColor="#5FAF3F" extra={{ pct: "DPT $4 000", status: "prot $90 (70%)" , statusColor: "#8894B2"}} />
      <Row label="Trade:"   value="$2 000"   extra={{ status: "ACTIVE" }} />
      <Row label="Losses:"  value="0/3"      valueColor="#C8D2E8" extra={{ status: "ACTIVE" }} />
      <Row label="Pause:"   value="30 min"   valueColor="#C8D2E8" extra={{ status: "ACTIVE" }} />
    </div>
  );
}

function Seg({ items, activeId }) {
  return (
    <div style={{ display: "flex", gap: 4 }}>
      {items.map(it => (
        <div key={it.id} style={{
          flex: 1, padding: "7px 10px",
          borderRadius: 3,
          textAlign: "center",
          fontSize: 11, fontWeight: 600,
          background: activeId === it.id ? "#13294D" : "#0E1A30",
          border: activeId === it.id ? "1px solid #3A6BC6" : "1px solid #1A2540",
          color: activeId === it.id ? "#4A8EE8" : it.danger ? "#E8553B" : "#8894B2",
        }}>{it.label}</div>
      ))}
    </div>
  );
}

function StrategyTab() {
  return (
    <div style={{ display: "grid", gap: 10 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <div>
          <div style={{ color: "#6B7898", fontSize: 10, letterSpacing: ".1em", marginBottom: 5 }}>DIRECTION</div>
          <Seg activeId="SELL" items={[{ id: "BUY", label: "▲ BUY" }, { id: "SELL", label: "▼ SELL", danger: true }]} />
        </div>
        <div>
          <div style={{ color: "#6B7898", fontSize: 10, letterSpacing: ".1em", marginBottom: 5 }}>LOT MODE</div>
          <Seg activeId="Mult" items={[{ id: "Mult", label: "× Mult" }, { id: "Fixed", label: "≡ Fixed" }]} />
        </div>
      </div>
      <div>
        <div style={{ color: "#6B7898", fontSize: 10, letterSpacing: ".1em", marginBottom: 5 }}>PARAMETERS</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, background: "#0E1A30", padding: 10, borderRadius: 4, border: "1px solid #1A2540" }}>
          <span style={{ color: "#8894B2" }}>Lot:</span>         <span style={{ color: "#4A8EE8", fontWeight: 600, textAlign: "right" }}>0.10</span>
          <span style={{ color: "#8894B2" }}>Step, pts:</span>   <span style={{ color: "#4A8EE8", fontWeight: 600, textAlign: "right" }}>30.0</span>
          <span style={{ color: "#8894B2" }}>Mult:</span>        <span style={{ color: "#4A8EE8", fontWeight: 600, textAlign: "right" }}>1.10×</span>
          <span style={{ color: "#8894B2" }}>Stop, pts:</span>   <span style={{ color: "#4A8EE8", fontWeight: 600, textAlign: "right" }}>400.0</span>
          <span style={{ color: "#8894B2" }}>Max orders:</span>  <span style={{ color: "#4A8EE8", fontWeight: 600, textAlign: "right" }}>13</span>
          <span style={{ color: "#8894B2" }}>Risk:</span>        <span style={{ color: "#5FAF3F", fontWeight: 600, textAlign: "right" }}>$3201 (0.72%)</span>
        </div>
      </div>
      <div>
        <div style={{ color: "#6B7898", fontSize: 10, letterSpacing: ".1em", marginBottom: 5 }}>AUTO START MODE</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 4 }}>
          <div style={{ padding: 7, borderRadius: 3, border: "1px solid #3A6BC6", background: "#13294D", color: "#4A8EE8", fontSize: 11, fontWeight: 600, textAlign: "center", gridColumn: "1 / 3" }}>Market</div>
          <div style={{ padding: 7, borderRadius: 3, border: "1px solid #1A2540", background: "#0E1A30", color: "#8894B2", fontSize: 11, textAlign: "center" }}>Pending</div>
          <div style={{ padding: 7, borderRadius: 3, border: "1px solid #1A2540", background: "#0E1A30", color: "#8894B2", fontSize: 11, textAlign: "center" }}>H1 (6)</div>
          <div style={{ padding: 7, borderRadius: 3, border: "1px solid #1A2540", background: "#0E1A30", color: "#8894B2", fontSize: 11, textAlign: "center" }}>H4 (4)</div>
          <div style={{ padding: 7, borderRadius: 3, border: "1px solid #1A2540", background: "#0E1A30", color: "#8894B2", fontSize: 11, textAlign: "center" }}>M15 (8)</div>
          <div style={{ padding: 7, borderRadius: 3, border: "1px solid #1A2540", background: "#0E1A30", color: "#8894B2", fontSize: 11, textAlign: "center" }}>D1 (3)</div>
          <div style={{ padding: 7, borderRadius: 3, border: "1px solid #1A2540", background: "#0E1A30", color: "#8894B2", fontSize: 11, textAlign: "center" }}>W1 (1)</div>
        </div>
      </div>
    </div>
  );
}

function TradingTab() {
  const Btn = ({ children, active }) => (
    <div style={{
      padding: 9, textAlign: "center", fontSize: 11, fontWeight: 600,
      background: active ? "#13294D" : "#0E1A30",
      border: active ? "1px solid #3A6BC6" : "1px solid #1A2540",
      color: active ? "#4A8EE8" : "#8894B2",
      borderRadius: 3,
    }}>{children}</div>
  );
  return (
    <div style={{ display: "grid", gap: 10 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 6 }}>
        <Btn>Leave 1</Btn><Btn>Close 50%</Btn><Btn>Set BreakEven</Btn>
        <Btn>Leave 2</Btn><Btn>Close 100%</Btn><Btn>Close Safe</Btn>
      </div>
      <div style={{ color: "#6B7898", fontSize: 11, fontStyle: "italic", padding: "6px 0", borderTop: "1px solid #1A2540", borderBottom: "1px solid #1A2540", display: "flex", justifyContent: "space-between" }}>
        <span>— No open positions</span>
        <span style={{ color: "#5FAF3F" }}>Magic: ALL</span>
      </div>
      <div>
        <div style={{ color: "#6B7898", fontSize: 10, letterSpacing: ".1em", marginBottom: 5 }}>PROFIT AUTO CLOSE MODE</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 4 }}>
          <Btn active>% Dep</Btn><Btn>$ Amt</Btn><Btn>Pts</Btn><Btn>Cross</Btn><Btn>Extremum</Btn>
        </div>
        <div style={{ padding: "10px 4px", display: "flex", justifyContent: "space-between", fontSize: 11 }}>
          <span style={{ color: "#8894B2" }}>TP %:</span>
          <span style={{ color: "#4A8EE8", fontWeight: 600 }}>1.00%</span>
        </div>
      </div>
    </div>
  );
}

function MonitorTab() {
  const cell = (label, val, color = "#4A8EE8") => (
    <div style={{ display: "flex", justifyContent: "space-between", padding: "3px 0", borderBottom: "1px dashed #172239" }}>
      <span style={{ color: "#8894B2" }}>{label}</span>
      <span style={{ color, fontWeight: 600 }}>{val}</span>
    </div>
  );
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
      <div>
        <div style={{ color: "#6B7898", fontSize: 10, letterSpacing: ".1em", marginBottom: 5 }}>PROFIT</div>
        {cell("Week Close:", "$-3165", "#E8553B")}
        {cell("Week %:", "-0.71%", "#E8553B")}
        {cell("Day Close:", "$129", "#5FAF3F")}
        {cell("Day %:", "0.03%", "#5FAF3F")}
      </div>
      <div>
        <div style={{ color: "#6B7898", fontSize: 10, letterSpacing: ".1em", marginBottom: 5 }}>POSITIONS</div>
        {cell("Total Trades:", "4")}
        {cell("Winning:", "2", "#5FAF3F")}
        {cell("Losing:", "0", "#C8D2E8")}
        {cell("Closed Orders:", "9")}
      </div>
      <div style={{ gridColumn: "1 / 3" }}>
        <div style={{ color: "#6B7898", fontSize: 10, letterSpacing: ".1em", marginBottom: 5, marginTop: 4 }}>EFFICIENCY XAUUSD</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 14px" }}>
          {cell("MAE avg:", "9.9 pts")}
          {cell("MFE avg:", "64.0 pts")}
          {cell("MAE max:", "35.4 pts")}
          {cell("MFE max:", "104.8 pts")}
          {cell("Reward/Risk:", "6.48", "#5FAF3F")}
          {cell("WinRate:", "50%")}
        </div>
      </div>
    </div>
  );
}

/* ---------- MT5 Chart window wrap (shown behind the panel) ---------- */
function MT5Window({ strings, children }) {
  return (
    <div style={{
      background: "#0A1220",
      border: "1px solid #1A2540",
      borderRadius: 10,
      overflow: "hidden",
      boxShadow: "var(--shadow-lg)",
      position: "relative",
    }}>
      {/* top bar */}
      <div style={{ padding: "8px 12px", borderBottom: "1px solid #1A2540", display: "flex", alignItems: "center", gap: 10, background: "#0E1930" }}>
        <svg width="14" height="14" viewBox="0 0 16 16"><rect x="2" y="4" width="3" height="8" fill="var(--ta-green)"/><rect x="6" y="2" width="3" height="10" fill="var(--ta-red)"/><rect x="10" y="5" width="3" height="7" fill="var(--ta-green)"/></svg>
        <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "#5FAF3F", fontWeight: 600 }}>XAUUSD, M1</span>
      </div>
      <div style={{ padding: 16, position: "relative", minHeight: 380 }}>
        <div style={{ width: "100%", maxWidth: "100%", overflow: "hidden" }}>
          <LiveChart width={720} height={340} symbol="XAUUSD" />
        </div>
        {/* Panel overlay */}
        <div className="ta-mt5-panel-pos" style={{ position: "absolute", top: 40, right: 24 }}>
          <ProPanel strings={strings} compact />
        </div>
        {/* BID/ASK gadget */}
        <div style={{
          position: "absolute",
          top: 28, left: 28,
          background: "#0E1930",
          border: "1px solid #1A2540",
          borderRadius: 6,
          padding: "6px 10px",
          fontFamily: "var(--mono)",
          display: "flex",
          gap: 10,
          alignItems: "center",
        }}>
          <span style={{ color: "#E8553B", fontSize: 11, fontWeight: 700 }}>SELL</span>
          <span style={{ color: "#C8D2E8", fontSize: 11 }}>0.01</span>
          <span style={{ color: "#5FAF3F", fontSize: 11, fontWeight: 700 }}>BUY</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ProPanel, MT5Window });