// Trade Axis Copier MT5 — interactive Windows-app mock
// Uses: React global, LogoMark from primitives

const { useState: useStateC } = React;

function CopierApp({ strings }) {
  const [tab, setTab] = useStateC("accounts");
  const [running, setRunning] = useStateC(true);
  const [slaves, setSlaves] = useStateC([
    { id: "67190395", broker: "RoboForex-ECN", online: true, running: true },
    { id: "67190401", broker: "RoboForex-ECN", online: true, running: false },
  ]);

  const toggleSlave = (idx) => {
    setSlaves((s) => s.map((sl, i) => i === idx ? { ...sl, running: !sl.running } : sl));
  };

  const tabs = [
    { id: "accounts", label: strings.tab_accounts },
    { id: "log", label: strings.tab_log },
  ];

  return (
    <div style={{
      background: "#0E1A2F",
      border: "1px solid #1F2E4D",
      borderRadius: 10,
      boxShadow: "var(--shadow-lg)",
      overflow: "hidden",
      fontFamily: "var(--sans)",
      color: "#C8D2E8",
      display: "grid",
      gridTemplateColumns: "200px 1fr",
      minHeight: 580,
    }}>
      {/* Windows titlebar */}
      <div style={{
        gridColumn: "1 / 3",
        padding: "8px 14px",
        background: "#0A1325",
        borderBottom: "1px solid #1F2E4D",
        display: "flex", alignItems: "center", gap: 10,
        fontSize: 12,
      }}>
        <div style={{ width: 14, height: 14, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <LogoMark size={14} />
        </div>
        <span style={{ color: "#8894B2" }}>Trade Axis Copier MT5</span>
        <div style={{ marginLeft: "auto", display: "flex", gap: 6, color: "#5A6987" }}>
          <span>—</span><span>▢</span><span>×</span>
        </div>
      </div>

      {/* Sidebar */}
      <div style={{
        background: "#0B1626",
        borderRight: "1px solid #1F2E4D",
        padding: "16px 0",
        display: "flex", flexDirection: "column",
        fontSize: 13,
      }}>
        <SidebarGroup label="ГОЛОВНА">
          <SidebarItem icon="dashboard" label="Дашборд" active={false} />
        </SidebarGroup>

        <SidebarGroup label="ПРОЄКТИ">
          <SidebarItem icon="plus" label="Додати проєкт" muted />
          <SidebarItem icon="dot" label={strings.project} active />
        </SidebarGroup>

        <SidebarGroup label="СИСТЕМА">
          <SidebarItem icon="gear" label="Налаштування" />
          <SidebarItem icon="key" label="Ліцензія" />
        </SidebarGroup>

        <div style={{ marginTop: "auto", padding: 16 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
            <LogoMark size={28} />
          </div>
          <div style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 18, color: "#E8EDF7" }}>
            Trade <span style={{ color: "#5FAF3F" }}>Axis</span>
          </div>
          <button style={{
            marginTop: 10, padding: "6px 14px",
            background: "#3A1820", border: "1px solid #6B2638", color: "#E84A6A",
            borderRadius: 6, fontSize: 11, cursor: "pointer", fontWeight: 600,
          }}>Вийти</button>
        </div>
      </div>

      {/* Main content */}
      <div style={{ padding: "18px 26px", overflow: "hidden" }}>
        {/* Breadcrumb */}
        <div style={{ color: "#5A6987", fontSize: 12, marginBottom: 12 }}>{strings.back}</div>

        {/* Project header */}
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
          <h1 style={{
            fontFamily: "var(--display)", fontSize: 32, fontWeight: 700,
            margin: 0, color: "#E8EDF7", letterSpacing: "-.01em",
          }}>{strings.project}</h1>
          <span style={{ color: "#5A6987", fontSize: 14 }}>🔗</span>
          <StatusBadge running={running} stoppedLabel={strings.stopped} />

          <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
            <ControlBtn variant="run"   active={running}  onClick={() => setRunning(true)}>▶ {strings.cta_run}</ControlBtn>
            <ControlBtn variant="pause" active={!running} onClick={() => setRunning(false)}>❚❚ {strings.cta_pause}</ControlBtn>
            <ControlBtn variant="stop"  onClick={() => setRunning(false)}>■ {strings.cta_stop}</ControlBtn>
          </div>
        </div>

        {/* Tabs */}
        <div style={{ display: "flex", gap: 24, borderBottom: "1px solid #1F2E4D", marginBottom: 22 }}>
          {tabs.map((tb) => (
            <button key={tb.id} onClick={() => setTab(tb.id)} style={{
              padding: "10px 0",
              background: "none", border: "none",
              color: tab === tb.id ? "#5FB8E8" : "#8894B2",
              borderBottom: tab === tb.id ? "2px solid #5FB8E8" : "2px solid transparent",
              fontSize: 14, fontWeight: 500, cursor: "pointer",
              fontFamily: "inherit",
            }}>{tb.label}</button>
          ))}
        </div>

        {tab === "accounts" ? (
          <CopierAccounts strings={strings} slaves={slaves} toggleSlave={toggleSlave} />
        ) : (
          <CopierLog strings={strings} />
        )}
      </div>
    </div>
  );
}

function StatusBadge({ running, stoppedLabel }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: "4px 10px",
      background: running ? "rgba(95, 184, 232, 0.12)" : "rgba(95, 184, 232, 0.12)",
      border: "1px solid #2C5B7C",
      borderRadius: 4,
      fontSize: 12,
      color: "#5FB8E8",
      fontFamily: "var(--mono)",
    }}>
      <span style={{
        width: 8, height: 8, borderRadius: 2,
        background: running ? "#5FAF3F" : "#5FB8E8",
      }} />
      {running ? "Активно" : stoppedLabel}
    </span>
  );
}

function ControlBtn({ variant, active, onClick, children }) {
  const colors = {
    run:   { bg: "#0F2A18", border: "#2D6B3F", color: "#5FAF3F" },
    pause: { bg: "#0F1F38", border: "#2C5B7C", color: "#5FB8E8" },
    stop:  { bg: "#3A1820", border: "#6B2638", color: "#E84A6A" },
  };
  const c = colors[variant];
  return (
    <button onClick={onClick} style={{
      padding: "7px 14px",
      background: c.bg,
      border: `1px solid ${active ? c.color : c.border}`,
      borderRadius: 4,
      color: c.color,
      fontSize: 12, fontWeight: 600,
      fontFamily: "var(--mono)",
      cursor: "pointer",
      letterSpacing: ".02em",
    }}>{children}</button>
  );
}

function SidebarGroup({ label, children }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <div style={{
        padding: "0 16px 6px", fontSize: 10, color: "#5A6987",
        textTransform: "uppercase", letterSpacing: ".12em", fontWeight: 600,
      }}>{label}</div>
      {children}
    </div>
  );
}

function SidebarItem({ icon, label, active, muted }) {
  return (
    <div style={{
      padding: "8px 16px",
      display: "flex", alignItems: "center", gap: 10,
      background: active ? "#142340" : "transparent",
      borderLeft: active ? "2px solid #5FB8E8" : "2px solid transparent",
      color: active ? "#E8EDF7" : muted ? "#5FB8E8" : "#8894B2",
      fontSize: 13,
      cursor: "pointer",
    }}>
      <SidebarIcon kind={icon} active={active} muted={muted} />
      <span>{label}</span>
    </div>
  );
}

function SidebarIcon({ kind, active, muted }) {
  const c = active ? "#5FB8E8" : muted ? "#5FB8E8" : "#5A6987";
  if (kind === "dashboard") return (
    <svg width="14" height="14" viewBox="0 0 14 14"><rect x="1" y="1" width="5" height="5" stroke={c} fill="none"/><rect x="8" y="1" width="5" height="5" stroke={c} fill="none"/><rect x="1" y="8" width="5" height="5" stroke={c} fill="none"/><rect x="8" y="8" width="5" height="5" stroke={c} fill="none"/></svg>
  );
  if (kind === "plus") return (
    <svg width="14" height="14" viewBox="0 0 14 14"><line x1="7" y1="2" x2="7" y2="12" stroke={c} strokeWidth="1.5"/><line x1="2" y1="7" x2="12" y2="7" stroke={c} strokeWidth="1.5"/></svg>
  );
  if (kind === "dot") return (
    <svg width="14" height="14" viewBox="0 0 14 14"><circle cx="7" cy="7" r="3" fill="#5FB8E8"/></svg>
  );
  if (kind === "gear") return (
    <svg width="14" height="14" viewBox="0 0 14 14"><circle cx="7" cy="7" r="3" stroke={c} fill="none"/><circle cx="7" cy="7" r="6" stroke={c} fill="none" strokeDasharray="2 2"/></svg>
  );
  if (kind === "key") return (
    <svg width="14" height="14" viewBox="0 0 14 14"><circle cx="4" cy="7" r="3" stroke={c} fill="none"/><line x1="7" y1="7" x2="13" y2="7" stroke={c} strokeWidth="1.5"/><line x1="11" y1="7" x2="11" y2="10" stroke={c} strokeWidth="1.5"/></svg>
  );
  return null;
}

function CopierAccounts({ strings, slaves, toggleSlave }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
      {/* Master section */}
      <AccountsBlock
        title={strings.master_accounts}
        titleColor="#5FB8E8"
        addLabel={strings.add_master}
      >
        <AccountRow
          kind="M"
          kindColor="#5FB8E8"
          id="67137179"
          broker="RoboForex-ECN"
          online
          onlineLabel={strings.online}
          running
        />
      </AccountsBlock>

      {/* Slave section */}
      <AccountsBlock
        title={strings.slave_accounts}
        titleColor="#5FAF3F"
        addLabel={strings.add_slave}
      >
        {slaves.map((sl, i) => (
          <AccountRow
            key={sl.id}
            kind="S"
            kindColor="#5FAF3F"
            id={sl.id}
            broker={sl.broker}
            online={sl.online}
            onlineLabel={strings.online}
            running={sl.running}
            stoppedLabel={strings.stopped}
            showSubrow
            onToggle={() => toggleSlave(i)}
          />
        ))}
      </AccountsBlock>
    </div>
  );
}

function AccountsBlock({ title, titleColor, addLabel, children }) {
  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", marginBottom: 12 }}>
        <h3 style={{
          color: titleColor, fontSize: 18, fontWeight: 700, margin: 0,
          fontFamily: "var(--display)",
        }}>{title}</h3>
        <button style={{
          marginLeft: "auto",
          padding: "5px 12px",
          background: "transparent",
          border: "1px solid #2C4570",
          borderRadius: 4,
          color: "#5FB8E8",
          fontSize: 12,
          fontFamily: "var(--mono)",
          cursor: "pointer",
        }}>+ {addLabel}</button>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {children}
      </div>
    </div>
  );
}

function AccountRow({ kind, kindColor, id, broker, online, onlineLabel, running, stoppedLabel, showSubrow, onToggle }) {
  return (
    <div style={{
      border: "1px solid " + (running ? kindColor + "55" : "#1F2E4D"),
      borderRadius: 8,
      background: "rgba(15, 26, 47, 0.5)",
      overflow: "hidden",
    }}>
      <div style={{
        display: "flex", alignItems: "center", gap: 14,
        padding: "14px 16px",
      }}>
        <div style={{
          width: 32, height: 32, borderRadius: 6,
          background: kindColor + "22",
          border: "1px solid " + kindColor + "66",
          display: "flex", alignItems: "center", justifyContent: "center",
          color: kindColor, fontWeight: 700, fontSize: 14,
          fontFamily: "var(--mono)",
        }}>{kind}</div>

        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 700, fontSize: 15, color: "#E8EDF7", fontFamily: "var(--mono)" }}>{id}</div>
          <div style={{ fontSize: 12, color: "#8894B2" }}>{broker}</div>
        </div>

        <span style={{ width: 8, height: 8, borderRadius: 99, background: online ? "#5FAF3F" : "#5A6987" }} />
        <span style={{
          fontSize: 12, color: "#5FAF3F", fontFamily: "var(--mono)",
          display: "inline-flex", alignItems: "center", gap: 6,
          padding: "3px 8px",
          background: "rgba(95, 175, 63, 0.12)",
          border: "1px solid rgba(95, 175, 63, 0.3)",
          borderRadius: 3,
        }}>
          <svg width="9" height="9" viewBox="0 0 9 9"><path d="M2 4.5l2 2 4-4" stroke="#5FAF3F" strokeWidth="1.5" fill="none"/></svg>
          {onlineLabel}
        </span>

        <RowIconBtn icon="play" />
        {kind === "M" ? <RowIconBtn icon="msg" /> : <RowIconBtn icon="gear" />}
        <RowIconBtn icon="x" />
      </div>

      {showSubrow && (
        <div style={{
          display: "flex", alignItems: "center",
          padding: "8px 16px",
          borderTop: "1px solid #1F2E4D",
          background: "rgba(10, 19, 37, 0.5)",
          fontSize: 12,
          color: running ? "#5FAF3F" : "#5A6987",
          fontFamily: "var(--mono)",
        }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
            <span style={{ width: 6, height: 6, borderRadius: 99, background: running ? "#5FAF3F" : "#5A6987" }} />
            {running ? "Копіюється" : stoppedLabel}
          </span>
          <div style={{ marginLeft: "auto", display: "flex", gap: 6 }}>
            <RowIconBtn icon="play" onClick={onToggle} />
            <RowIconBtn icon="square" filled />
            <RowIconBtn icon="square" filled />
          </div>
        </div>
      )}
    </div>
  );
}

function RowIconBtn({ icon, filled, onClick }) {
  return (
    <button onClick={onClick} style={{
      width: 24, height: 24,
      background: filled ? "#1A3A5C" : "transparent",
      border: filled ? "1px solid #2C5B7C" : "none",
      borderRadius: 3,
      color: "#5FB8E8",
      cursor: "pointer",
      display: "flex", alignItems: "center", justifyContent: "center",
      padding: 0,
    }}>
      {icon === "play" && <svg width="10" height="10" viewBox="0 0 10 10"><polygon points="2,1 9,5 2,9" fill="#5FB8E8"/></svg>}
      {icon === "square" && <svg width="10" height="10" viewBox="0 0 10 10"><rect x="1.5" y="1.5" width="7" height="7" fill="none" stroke="#5FB8E8" strokeWidth="1.2"/></svg>}
      {icon === "msg" && <svg width="12" height="10" viewBox="0 0 12 10"><rect x="1" y="1" width="10" height="7" fill="none" stroke="#5FB8E8" strokeWidth="1"/><line x1="3" y1="3.5" x2="9" y2="3.5" stroke="#5FB8E8"/><line x1="3" y1="5.5" x2="7" y2="5.5" stroke="#5FB8E8"/></svg>}
      {icon === "gear" && <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="2" fill="none" stroke="#5FB8E8"/><circle cx="6" cy="6" r="5" fill="none" stroke="#5FB8E8" strokeDasharray="1.5 1.5"/></svg>}
      {icon === "x" && <svg width="10" height="10" viewBox="0 0 10 10"><line x1="2" y1="2" x2="8" y2="8" stroke="#5A6987" strokeWidth="1.5"/><line x1="8" y1="2" x2="2" y2="8" stroke="#5A6987" strokeWidth="1.5"/></svg>}
    </button>
  );
}

function CopierLog({ strings }) {
  const lines = [
    { t: "12:08:14", lvl: "OK",   msg: "Master 67137179 → connected" },
    { t: "12:08:16", lvl: "OK",   msg: "Slave 67190395 → connected" },
    { t: "12:08:16", lvl: "OK",   msg: "Slave 67190401 → connected (paused)" },
    { t: "12:14:32", lvl: "TRADE", msg: "Master BUY XAUUSD 0.10 @ 4834.40 → copied to 67190395 (×1.00)" },
    { t: "12:14:32", lvl: "SKIP",  msg: "67190401 skipped — slave paused" },
    { t: "12:31:08", lvl: "TRADE", msg: "Master CLOSE XAUUSD +18.20 → mirrored on 67190395 (+18.20)" },
    { t: "12:42:55", lvl: "TRADE", msg: "Master SELL EURUSD 0.20 @ 1.0842 → reversed on 67190395 (BUY 0.20)" },
    { t: "12:43:01", lvl: "OK",    msg: "Risk check passed — 0.34% of 67190395 balance" },
  ];
  const lvlColors = { OK: "#5FAF3F", TRADE: "#5FB8E8", SKIP: "#C8A04A" };
  return (
    <div style={{
      background: "#0A1325",
      border: "1px solid #1F2E4D",
      borderRadius: 6,
      padding: "14px 18px",
      fontFamily: "var(--mono)",
      fontSize: 12,
      lineHeight: 1.7,
      maxHeight: 360,
      overflow: "hidden",
    }}>
      {lines.map((l, i) => (
        <div key={i} style={{ display: "flex", gap: 12 }}>
          <span style={{ color: "#5A6987" }}>{l.t}</span>
          <span style={{ color: lvlColors[l.lvl], fontWeight: 700, minWidth: 48 }}>{l.lvl}</span>
          <span style={{ color: "#C8D2E8" }}>{l.msg}</span>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { CopierApp });