// Trade Axis Journal — interactive app mock
// Uses: React global, Sparkline, LiveNumber from primitives

const { useState: useStateJ } = React;

function JournalApp({ strings }) {
  const [tab, setTab] = useStateJ("stats");
  const tabs = [
    { id: "stats",  label: "1 · " + strings.tab_stats },
    { id: "cal",    label: "2 · " + strings.tab_cal },
    { id: "trades", label: "3 · " + strings.tab_trades },
    { id: "log",    label: "4 · " + strings.tab_log },
  ];

  return (
    <div style={{
      background: "#0F1B32",
      border: "1px solid #1F2E4D",
      borderRadius: 10,
      boxShadow: "var(--shadow-lg)",
      overflow: "hidden",
      fontFamily: "var(--sans)",
      color: "#C8D2E8",
      display: "grid",
      gridTemplateColumns: "200px 1fr",
      minHeight: 560,
    }}>
      {/* Windows titlebar */}
      <div style={{
        gridColumn: "1 / 3",
        padding: "8px 14px",
        background: "#0B1527",
        borderBottom: "1px solid #1F2E4D",
        display: "flex", alignItems: "center", gap: 10,
        fontSize: 12,
      }}>
        <div style={{ width: 14, height: 14, borderRadius: 3, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <LogoMark size={14} />
        </div>
        <span style={{ color: "#8894B2" }}>Trade Axis Journal — отчет торговли и капитала</span>
        <div style={{ marginLeft: "auto", display: "flex", gap: 6, color: "#6B7898", fontFamily: "var(--mono)", fontSize: 11 }}>
          <span>—</span><span>▢</span><span>✕</span>
        </div>
      </div>

      {/* Sidebar */}
      <aside style={{
        background: "#0B1527",
        borderRight: "1px solid #1F2E4D",
        padding: "16px 0",
        display: "flex", flexDirection: "column",
        gap: 20,
      }}>
        <div style={{ padding: "0 16px" }}>
          <div style={{ color: "#E8EDF7", fontWeight: 600, fontSize: 14 }}>Думанчук Роман</div>
          <div style={{ color: "#6B7898", fontSize: 11 }}>Администратор</div>
        </div>

        <div>
          <div style={{ padding: "0 16px 6px", color: "#6B7898", fontSize: 10, letterSpacing: ".12em", textTransform: "uppercase" }}>Капитал</div>
          <div style={{ padding: "8px 16px", color: "#8894B2", fontSize: 13 }}>Мой капитал</div>
          <div style={{ padding: "8px 16px", color: "#4A8EE8", fontSize: 13, background: "#13294D", borderLeft: "3px solid #4A8EE8" }}>Мои счета</div>
        </div>

        <div>
          <div style={{ padding: "0 16px 6px", color: "#6B7898", fontSize: 10, letterSpacing: ".12em", textTransform: "uppercase" }}>Система</div>
          <div style={{ padding: "8px 16px", color: "#8894B2", fontSize: 13 }}>Настройки</div>
        </div>

        <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 }}>
            <span style={{ color: "#4A8EE8" }}>Trade</span> <span style={{ color: "#5FAF3F" }}>Axis</span>
          </div>
          <button style={{
            marginTop: 10,
            width: "100%",
            padding: "6px",
            background: "transparent",
            border: "1px solid #6A1F24",
            color: "#E8553B",
            borderRadius: 4,
            fontSize: 11, fontWeight: 600,
            textAlign: "left", paddingLeft: 10,
          }}>Выйти</button>
        </div>
      </aside>

      {/* Main */}
      <main style={{ padding: 18, display: "flex", flexDirection: "column", gap: 14 }}>
        {/* Toolbar */}
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <button style={{ padding: "6px 12px", background: "#16263F", border: "1px solid #1F2E4D", borderRadius: 4, color: "#8894B2", fontSize: 12 }}>← Назад</button>
          <div style={{ width: 26, height: 22, background: "#E8553B", borderRadius: 3, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 10, fontWeight: 700, color: "white" }}>RE</div>
          <div>
            <div style={{ color: "#E8EDF7", fontWeight: 600, fontSize: 14 }}>RoboForex</div>
            <div style={{ color: "#6B7898", fontSize: 11 }}>MT5 · #77002018 · RoboForex-ECN · REAL</div>
          </div>
          <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
            <button style={{ padding: "8px 12px", background: "transparent", border: "1px solid #5FAF3F", color: "#5FAF3F", borderRadius: 4, fontSize: 12, fontWeight: 600 }}>↻ Обновить из MT5</button>
            <button style={{ padding: "8px 12px", background: "#2E6AD1", border: "1px solid #2E6AD1", color: "white", borderRadius: 4, fontSize: 12, fontWeight: 600 }}>Выбрать файл сделок</button>
          </div>
        </div>

        {/* Tabs */}
        <div style={{ display: "flex", gap: 20, borderBottom: "1px solid #1F2E4D", paddingBottom: 4 }}>
          {tabs.map(t => (
            <button key={t.id} onClick={() => setTab(t.id)} style={{
              padding: "6px 0",
              fontSize: 13, fontWeight: 500,
              color: tab === t.id ? "#E8EDF7" : "#6B7898",
              borderBottom: tab === t.id ? "2px solid #4A8EE8" : "2px solid transparent",
              marginBottom: -5,
            }}>{t.label}</button>
          ))}
        </div>

        {/* Tab content */}
        {tab === "stats" && <StatsTab />}
        {tab === "cal" && <CalendarTab />}
        {tab === "trades" && <TradesTab />}
        {tab === "log" && <LogTab />}
      </main>
    </div>
  );
}

function StatsTab() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 16 }}>
        <span style={{ fontFamily: "var(--mono)", fontSize: 28, fontWeight: 700, color: "#4A8EE8" }}>978.54 $</span>
        <span style={{ color: "#6B7898", fontSize: 12 }}>баланс</span>
        <span style={{ fontFamily: "var(--mono)", fontSize: 18, fontWeight: 600, color: "#4A8EE8" }}>978.54 $</span>
        <span style={{ color: "#6B7898", fontSize: 12 }}>эквити</span>
        <span style={{ fontFamily: "var(--mono)", fontSize: 15, color: "#C8D2E8" }}>+0.00 $</span>
        <span style={{ color: "#6B7898", fontSize: 12 }}>плавающий P/L</span>
        <div style={{ marginLeft: "auto", display: "flex", gap: 4 }}>
          {["Неделя", "30 дней", "Месяц", "3М", "Год", "Все"].map((p, i) => (
            <button key={p} style={{
              padding: "5px 10px",
              background: i === 1 ? "#2E6AD1" : "transparent",
              color: i === 1 ? "white" : "#8894B2",
              border: "1px solid " + (i === 1 ? "#2E6AD1" : "#1F2E4D"),
              borderRadius: 3, fontSize: 11, fontWeight: 500,
            }}>{p}</button>
          ))}
        </div>
      </div>

      {/* equity chart */}
      <div style={{ background: "#0B1527", border: "1px solid #1F2E4D", borderRadius: 6, padding: 12, height: 190 }}>
        <EquityChart />
      </div>

      {/* Stat cards grid */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10 }}>
        <StatCard title="Месяц"   value="+16.53 $" sub="+1.72%" color="#5FAF3F" />
        <StatCard title="Неделя"  value="-3.23 $"  sub="-0.33%" color="#E8553B" />
        <StatCard title="День"    value="+0.00 $"  sub="+0.00%" color="#C8D2E8" />
        <StatCard title="КОД"     value="0.21%"    sub="+4.48% / 21 дн." color="#E8B93B" />
        <StatCard title="Профит Фактор" value="2.48" color="#4A8EE8" />
        <StatCard title="Вин Рейт" value="59.2%" color="#4A8EE8" />
        <StatCard title="Средний +" value="+1.21 $" color="#5FAF3F" />
        <StatCard title="Средний −" value="−0.71 $" color="#E8553B" />
      </div>
    </div>
  );
}

function StatCard({ title, value, sub, color }) {
  return (
    <div style={{ background: "#0B1527", border: "1px solid #1F2E4D", borderRadius: 6, padding: 12 }}>
      <div style={{ color: "#6B7898", fontSize: 11, marginBottom: 6 }}>{title}</div>
      <div style={{ color, fontFamily: "var(--mono)", fontSize: 20, fontWeight: 600 }}>{value}</div>
      {sub && <div style={{ color: "#6B7898", fontSize: 11, marginTop: 2 }}>{sub}</div>}
    </div>
  );
}

function EquityChart() {
  // stylized rising curve
  const pts = "0,140 40,130 80,125 120,110 160,108 200,88 240,78 280,58 320,38 360,28 400,30 440,22 480,20";
  return (
    <svg viewBox="0 0 480 170" width="100%" height="100%" preserveAspectRatio="none">
      <defs>
        <linearGradient id="eq-grad" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#5FAF3F" stopOpacity=".35" />
          <stop offset="1" stopColor="#5FAF3F" stopOpacity="0" />
        </linearGradient>
      </defs>
      {[30, 60, 90, 120, 150].map(y => (
        <line key={y} x1="0" x2="480" y1={y} y2={y} stroke="#1F2E4D" strokeDasharray="2 3" />
      ))}
      <polygon points={`${pts} 480,170 0,170`} fill="url(#eq-grad)" />
      <polyline points={pts} fill="none" stroke="#5FAF3F" strokeWidth="2" />
      {[{ x: 0, y: 140 }, { x: 160, y: 108 }, { x: 320, y: 38 }, { x: 480, y: 20 }].map((p, i) => (
        <circle key={i} cx={p.x} cy={p.y} r="3" fill="#5FAF3F" />
      ))}
      <text x="475" y="14" textAnchor="end" fontFamily="JetBrains Mono" fontSize="10" fill="#5FAF3F">979</text>
    </svg>
  );
}

function CalendarTab() {
  const days = [
    [null, null, { n: 1, p: "+2.49$", t: 1, neg: false }, { n: 2, p: "-0.05$", t: 2, neg: true }, { n: 3, p: null }],
    [{ n: 6, p: "+9.35$", t: 1, neg: false }, { n: 7, p: null }, { n: 8, p: null }, { n: 9, p: "+9.41$", t: 3, neg: false }, { n: 10, p: null }],
    [{ n: 13, p: null }, { n: 14, p: "+5.98$", t: 1, neg: false }, { n: 15, p: "-8.23$", t: 5, neg: true }, { n: 16, p: null }, { n: 17, p: null }],
    [{ n: 20, p: null }, { n: 21, p: null }, { n: 22, p: null }, { n: 23, p: null }, { n: 24, p: null }],
  ];
  const weeks = ["Пн", "Вт", "Ср", "Чт", "Пт"];

  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
        <button style={{ width: 24, height: 24, background: "#16263F", border: "1px solid #1F2E4D", borderRadius: 3, color: "#8894B2" }}>‹</button>
        <button style={{ width: 24, height: 24, background: "#16263F", border: "1px solid #1F2E4D", borderRadius: 3, color: "#8894B2" }}>›</button>
        <span style={{ color: "#E8EDF7", fontWeight: 600, fontSize: 15 }}>Апрель 2026</span>
        <div style={{ marginLeft: "auto", display: "flex", gap: 16, alignItems: "center" }}>
          <span style={{ color: "#5FAF3F", fontFamily: "var(--mono)", fontWeight: 600 }}>P&L: +18.95 $ (+1.94%)</span>
          <span style={{ color: "#6B7898", fontSize: 12 }}>Дней: 6</span>
          <div style={{ display: "flex", gap: 2, background: "#0B1527", padding: 2, borderRadius: 3 }}>
            {["Дни", "Недели", "Месяцы"].map((l, i) => (
              <button key={l} style={{ padding: "4px 10px", fontSize: 11, borderRadius: 2,
                background: i === 0 ? "#2E6AD1" : "transparent",
                color: i === 0 ? "white" : "#8894B2" }}>{l}</button>
            ))}
          </div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "40px repeat(5, 1fr) 140px", gap: 4, fontSize: 11 }}>
        <div></div>
        {weeks.map(w => <div key={w} style={{ color: "#6B7898", fontSize: 11, padding: "0 4px" }}>{w}</div>)}
        <div style={{ color: "#6B7898", fontSize: 11 }}>Сводка по неделям</div>

        {days.map((row, ri) => (
          <React.Fragment key={ri}>
            <div style={{ color: "#6B7898", fontFamily: "var(--mono)", fontSize: 11, alignSelf: "center" }}>W{14 + ri}</div>
            {row.map((d, di) => {
              if (!d || d.p === null) return (
                <div key={di} style={{ padding: 8, background: "#0B1527", border: "1px solid #1F2E4D", borderRadius: 4, minHeight: 58, color: "#6B7898", fontSize: 11 }}>
                  {d?.n ?? ""}
                </div>
              );
              const bg = d.neg ? "rgba(232,85,59,.12)" : "rgba(95,175,63,.14)";
              const bd = d.neg ? "rgba(232,85,59,.35)" : "rgba(95,175,63,.5)";
              const col = d.neg ? "#E8553B" : "#5FAF3F";
              return (
                <div key={di} style={{ padding: 8, background: bg, border: "1px solid " + bd, borderRadius: 4, minHeight: 58 }}>
                  <div style={{ color: "#E8EDF7", fontWeight: 600, fontSize: 12 }}>{d.n}</div>
                  <div style={{ color: "#8894B2", fontSize: 10 }}>{d.t} сд.</div>
                  <div style={{ color: col, fontFamily: "var(--mono)", fontSize: 12, fontWeight: 600 }}>{d.p}</div>
                </div>
              );
            })}
            {/* weekly summary */}
            <div style={{ padding: 8, fontSize: 11 }}>
              <div style={{ color: "#6B7898" }}>W{14 + ri}</div>
              <div style={{ color: ri === 2 ? "#E8553B" : "#5FAF3F", fontWeight: 600, fontFamily: "var(--mono)", fontSize: 13 }}>
                {["+2.44 $", "+18.76 $", "-2.25 $", "Нет торгов"][ri]}
              </div>
            </div>
          </React.Fragment>
        ))}
      </div>

      <div style={{ display: "flex", gap: 16, marginTop: 14, fontSize: 11, color: "#6B7898" }}>
        <span>■ Прибыль</span><span>■ Убыток</span><span>■ Безубыток</span><span>□ Нет торгов</span>
      </div>
    </div>
  );
}

function TradesTab() {
  // MAE/MFE scatter-like chart
  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
        <span style={{ color: "#6B7898", fontSize: 11 }}>Инструмент:</span>
        <span style={{ padding: "4px 10px", background: "#16263F", border: "1px solid #1F2E4D", borderRadius: 3, fontSize: 11 }}>EURUSD ▾</span>
        <span style={{ color: "#6B7898", fontSize: 11, marginLeft: 10 }}>Показатель:</span>
        {["MAE pts", "MFE pts", "Reward/Risk", "Capture %", "Риск $", "Риск %"].map((l, i) => (
          <span key={l} style={{
            padding: "4px 9px", borderRadius: 3, fontSize: 11,
            background: i === 1 ? "#2E6AD1" : "#16263F",
            border: "1px solid " + (i === 1 ? "#2E6AD1" : "#1F2E4D"),
            color: i === 1 ? "white" : "#8894B2",
          }}>{l}</span>
        ))}
      </div>

      <div style={{ background: "#0B1527", border: "1px solid #1F2E4D", borderRadius: 6, padding: 14, marginBottom: 12 }}>
        <MFEChart />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10 }}>
        <StatCard title="Всего сделок"  value="20" color="#E8EDF7" sub="Win 13 · Loss 5 · BE 2" />
        <StatCard title="Лотов всего"   value="1.5" sub="на сделку: 0.08" color="#E8EDF7" />
        <StatCard title="Прибыльных"    value="65.0%" sub="13 из 20 сделок" color="#5FAF3F" />
        <StatCard title="Убыточных"     value="25.0%" sub="5 сделок · BE: 2" color="#E8553B" />
      </div>
    </div>
  );
}

function MFEChart() {
  const pts = [6,18,12,28,14,22,11,26,18,24,14,29,16,25,12,17,10,14,10,7,12];
  const w = 640, h = 180, pad = 30;
  const max = 32;
  const coords = pts.map((v, i) => ({
    x: pad + (i / (pts.length - 1)) * (w - pad * 2),
    y: pad + (1 - v / max) * (h - pad * 2),
  }));
  const path = coords.map((c, i) => `${i === 0 ? "M" : "L"}${c.x},${c.y}`).join(" ");
  const avg = 11.05, level = 23.2;
  const yAvg = pad + (1 - avg / max) * (h - pad * 2);
  const yLevel = pad + (1 - level / max) * (h - pad * 2);
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%">
      <line x1={pad} x2={w - pad} y1={yLevel} y2={yLevel} stroke="#E8B93B" strokeWidth="1.5" />
      <line x1={pad} x2={w - pad} y1={yAvg} y2={yAvg} stroke="#E8553B" strokeWidth="1" strokeDasharray="3 3" />
      <text x={w - pad - 3} y={yAvg - 4} textAnchor="end" fontFamily="JetBrains Mono" fontSize="10" fill="#E8553B">avg 11.1</text>
      <text x={pad + 3} y={yLevel - 4} fontFamily="JetBrains Mono" fontSize="10" fill="#E8B93B">▶ 23.2 (95% ниже)</text>
      <path d={path} fill="none" stroke="#4A8EE8" strokeWidth="1.8" />
      {coords.map((c, i) => (
        <circle key={i} cx={c.x} cy={c.y} r="3" fill="#4A8EE8" />
      ))}
      <text x={pad - 6} y={pad + 2} textAnchor="end" fontFamily="JetBrains Mono" fontSize="10" fill="#6B7898">29</text>
      <text x={pad - 6} y={h - pad + 4} textAnchor="end" fontFamily="JetBrains Mono" fontSize="10" fill="#6B7898">0</text>
      <text x={pad} y={h - 6} fontFamily="JetBrains Mono" fontSize="10" fill="#6B7898">MFE pts — EURUSD · 30 дней</text>
    </svg>
  );
}

function LogTab() {
  const rows = [
    { t: "period", label: "Ноябрь 2024" },
    { t: "period", label: "Февраль 2026" },
    { t: "period", label: "Март 2026" },
    { t: "period", label: "Апрель 2026", open: true },
    { t: "week", label: "Неделя 14 · 30.03 – 03.04" },
    { t: "day", date: "01.04.2026 Ср", n: 1, lot: "0.0", pl: "+2.85 $", plp: "+0.29%", wr: "100.0%", pf: "0.00", mae: "3.3", mfe: "15.6", rr: "4.73", cap: "91.3%" },
    { t: "day", date: "02.04.2026 Чт", n: 2, lot: "0.4", pl: "-0.41 $", plp: "-0.04%", wr: "50.0%",  pf: "0.83", mae: "25.4", mfe: "18.8", rr: "0.69", cap: "9.2%", neg: true },
    { t: "week", label: "Неделя 15 · 06.04 – 10.04" },
    { t: "day", date: "06.04.2026 Пн", n: 1, lot: "0.1", pl: "+9.35 $", plp: "+0.96%", wr: "100.0%", pf: "0.00", mae: "4.0", mfe: "19.7", rr: "4.93", cap: "79.1%" },
    { t: "day", date: "09.04.2026 Чт", n: 3, lot: "0.1", pl: "+9.41 $", plp: "+0.97%", wr: "66.7%", pf: "236.25", mae: "5.9", mfe: "6.6", rr: "1.10", cap: "30.5%" },
  ];

  return (
    <div>
      <div style={{ display: "flex", gap: 10, marginBottom: 12, alignItems: "center" }}>
        <span style={{ color: "#6B7898", fontSize: 11 }}>Символ:</span>
        <span style={{ padding: "4px 10px", background: "#16263F", border: "1px solid #1F2E4D", borderRadius: 3, fontSize: 11 }}>Все ▾</span>
        <span style={{ color: "#6B7898", fontSize: 11, marginLeft: 10 }}>Результат:</span>
        <span style={{ padding: "4px 10px", background: "#16263F", border: "1px solid #1F2E4D", borderRadius: 3, fontSize: 11 }}>Все ▾</span>
        <div style={{ marginLeft: "auto", display: "flex", gap: 4 }}>
          {["День", "Неделя", "Месяц"].map((p, i) => (
            <span key={p} style={{ padding: "4px 10px", fontSize: 11, background: i === 0 ? "#2E6AD1" : "transparent", color: i === 0 ? "white" : "#8894B2", border: "1px solid " + (i === 0 ? "#2E6AD1" : "#1F2E4D"), borderRadius: 3 }}>{p}</span>
          ))}
        </div>
      </div>

      <div style={{ background: "#0B1527", border: "1px solid #1F2E4D", borderRadius: 6, fontSize: 11 }}>
        <div style={{ display: "grid", gridTemplateColumns: "180px 30px 45px 45px 55px 70px 55px 50px 55px 45px 45px 45px 55px", padding: "8px 12px", borderBottom: "1px solid #1F2E4D", color: "#6B7898" }}>
          <span>Период / Сделка</span><span></span><span>Сд.</span><span>Лоты</span><span>Время</span><span>P/L $</span><span>P/L %</span><span>Win%</span><span>PF</span><span>MAE</span><span>MFE</span><span>R/R</span><span>Capture%</span>
        </div>
        {rows.map((r, i) => {
          if (r.t === "period") return (
            <div key={i} style={{ padding: "8px 12px", color: "#C8D2E8", fontWeight: 600, borderBottom: "1px solid #1F2E4D" }}>
              <span style={{ color: "#8894B2", marginRight: 6 }}>{r.open ? "▼" : "▶"}</span>{r.label}
            </div>
          );
          if (r.t === "week") return (
            <div key={i} style={{ padding: "6px 12px 6px 28px", color: "#6B7898", borderBottom: "1px solid #172239", fontSize: 10.5 }}>{r.label}</div>
          );
          return (
            <div key={i} style={{
              display: "grid",
              gridTemplateColumns: "180px 30px 45px 45px 55px 70px 55px 50px 55px 45px 45px 45px 55px",
              padding: "6px 12px", borderBottom: "1px solid #172239",
              fontFamily: "var(--mono)", fontSize: 11,
              color: "#C8D2E8",
            }}>
              <span style={{ color: "#C8D2E8", paddingLeft: 18 }}>▶ {r.date}</span>
              <span></span><span>{r.n}</span><span>{r.lot}</span><span>—</span>
              <span style={{ color: r.neg ? "#E8553B" : "#5FAF3F", fontWeight: 600 }}>{r.pl}</span>
              <span style={{ color: r.neg ? "#E8553B" : "#5FAF3F" }}>{r.plp}</span>
              <span>{r.wr}</span><span>{r.pf}</span><span>{r.mae}</span><span>{r.mfe}</span><span>{r.rr}</span><span>{r.cap}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { JournalApp });