// ============================================================
// 分析画面 (Magic番号別)
// ============================================================
const T_an = window.TOKENS;

const AnalysisScreen = ({ onNav }) => {
  const [sort, setSort] = React.useState('pnl');
  const [expanded, setExpanded] = React.useState(null);

  const sorted = [...window.MAGICS].sort((a, b) => {
    if (sort === 'pnl') return b.pnl - a.pnl;
    if (sort === 'dd')  return b.maxDd - a.maxDd;
    if (sort === 'wr')  return b.winRate - a.winRate;
    if (sort === 'tr')  return b.trades - a.trades;
    return 0;
  });

  const totalPnl = window.MAGICS.reduce((s, m) => s + m.pnl, 0);
  const totalTrades = window.MAGICS.reduce((s, m) => s + m.trades, 0);
  const totalWr = totalTrades > 0 ? window.MAGICS.reduce((s, m) => s + m.winRate * m.trades, 0) / totalTrades : 0;

  return (
    <div>
      <TopBar
        title="分析"
        sub={<span style={{ color: T_an.fg3 }}>Magic番号 · EA別成績</span>}
      />

      <div style={{ padding: '16px 16px 100px', display: 'flex', flexDirection: 'column', gap: 16 }}>

        {/* KPI */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
          <MetricCard label="累計損益" value={window.fmt.jpy(totalPnl, { sign: true, compact: true })} tone={totalPnl >= 0 ? 'profit' : 'loss'} />
          <MetricCard label="取引数" value={totalTrades.toLocaleString()} tone="default" />
          <MetricCard label="勝率" value={totalWr.toFixed(1) + '%'} tone="default" />
        </div>

        {window.MAGICS.length === 0 && (
          <Card padding={20} style={{ textAlign: 'center' }}>
            <Icon name="ea" size={28} color={T_an.fg4} />
            <div style={{ marginTop: 10, fontSize: 13, color: T_an.fg2, fontFamily: T_an.fontUi }}>
              Magic番号がまだありません
            </div>
            <div style={{ marginTop: 4, fontSize: 11, color: T_an.fg3, fontFamily: T_an.fontUi }}>
              HUBから取引履歴を受信すると表示されます
            </div>
          </Card>
        )}

        {/* 未分類警告 */}
        {window.MAGICS.some(m => m.unknown) && (
          <div style={{
            padding: '12px 14px', background: T_an.warnBg,
            border: `1px solid ${T_an.warn}30`, borderRadius: 12,
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <Icon name="warn" size={20} color={T_an.warn} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: T_an.fg, fontFamily: T_an.fontUi }}>
                未分類のEAが1つあります
              </div>
              <div style={{ fontSize: 11, color: T_an.fg2, fontFamily: T_an.fontUi, marginTop: 2 }}>
                Magic番号にEA名を付けると集計が見やすくなります
              </div>
            </div>
            <Button variant="secondary" size="sm">
              分類
            </Button>
          </div>
        )}

        {/* 割合バー */}
        <Card padding={14}>
          <div style={{ fontSize: 11, color: T_an.fg3, letterSpacing: 0.4, textTransform: 'uppercase', fontFamily: T_an.fontUi, fontWeight: 600, marginBottom: 10 }}>
            EA別 損益シェア
          </div>
          <div style={{
            height: 8, borderRadius: 4, background: T_an.raised,
            display: 'flex', overflow: 'hidden', marginBottom: 12,
          }}>
            {window.MAGICS.filter(m => m.pnl > 0).map(m => {
              const positiveSum = window.MAGICS.filter(x => x.pnl > 0).reduce((s, x) => s + x.pnl, 0);
              return <div key={m.magic} style={{ width: `${(m.pnl / positiveSum) * 100}%`, background: m.color }} />;
            })}
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {window.MAGICS.map(m => (
              <div key={m.magic} style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 10, color: T_an.fg2, fontFamily: T_an.fontUi }}>
                <span style={{ width: 8, height: 8, borderRadius: 2, background: m.color }} />
                {m.name?.split(' ')[0] || `#${m.magic}`}
              </div>
            ))}
          </div>
        </Card>

        {/* ソート */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontSize: 12, color: T_an.fg3, fontWeight: 600, letterSpacing: 0.5, textTransform: 'uppercase', fontFamily: T_an.fontUi }}>
            EA一覧
          </div>
          <PillTabs
            value={sort}
            onChange={setSort}
            options={[
              { value: 'pnl', label: '損益' },
              { value: 'dd',  label: 'DD' },
              { value: 'wr',  label: '勝率' },
              { value: 'tr',  label: '取引数' },
            ]}
          />
        </div>

        {/* EA一覧 */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {sorted.map(m => {
            const isOpen = expanded === m.magic;
            return (
              <div key={m.magic} style={{
                background: T_an.surface, border: `1px solid ${T_an.line}`,
                borderRadius: 12, overflow: 'hidden',
              }}>
                <div onClick={() => setExpanded(isOpen ? null : m.magic)} style={{
                  padding: 14, display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
                }}>
                  <div style={{ width: 4, height: 40, background: m.color, borderRadius: 2, flexShrink: 0 }} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <span style={{ fontSize: 14, fontWeight: 700, color: T_an.fg, fontFamily: T_an.fontUi }}>
                        {m.name || <span style={{ color: T_an.fg3, fontWeight: 500 }}>未分類</span>}
                      </span>
                      {m.unknown && <Badge tone="warn" size="xs">要分類</Badge>}
                    </div>
                    <div style={{ fontSize: 11, color: T_an.fg3, fontFamily: T_an.fontMono, marginTop: 3, letterSpacing: 0.3 }}>
                      Magic #{m.magic} · {m.trades}取引 · 勝率{m.winRate}%
                    </div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <PnL value={m.pnl} size={14} sign={true} />
                    <div style={{ fontSize: 10, color: T_an.fg3, marginTop: 2, fontFamily: T_an.fontMono }}>
                      DD -{window.fmt.jpy(m.maxDd, { compact: true }).replace('¥','¥')}
                    </div>
                  </div>
                </div>

                {isOpen && (
                  <div style={{ padding: '4px 14px 14px', borderTop: `1px solid ${T_an.lineSoft}`, background: T_an.bg }}>
                    {/* EA名編集 */}
                    <div style={{ paddingTop: 12 }}>
                      <div style={{ fontSize: 10, color: T_an.fg3, letterSpacing: 0.4, textTransform: 'uppercase', fontFamily: T_an.fontUi, fontWeight: 600, marginBottom: 6 }}>
                        EA名(このMagicに割り当て)
                      </div>
                      <div style={{ display: 'flex', gap: 8 }}>
                        <input
                          defaultValue={m.name || ''}
                          placeholder="例: Scalper Pro v2"
                          style={{
                            flex: 1, padding: '10px 12px',
                            background: T_an.surface, border: `1px solid ${T_an.line}`,
                            borderRadius: 8, color: T_an.fg, fontSize: 13,
                            fontFamily: T_an.fontUi, outline: 'none',
                            boxSizing: 'border-box',
                          }}
                        />
                        <button style={{
                          padding: '10px 14px', background: T_an.raised,
                          border: `1px solid ${T_an.line}`, borderRadius: 8,
                          color: T_an.fg, fontSize: 12, fontWeight: 600,
                          fontFamily: T_an.fontUi, cursor: 'pointer',
                        }}>
                          保存
                        </button>
                      </div>
                    </div>

                    {/* 直近パフォーマンス */}
                    <div style={{ marginTop: 14 }}>
                      <div style={{ fontSize: 10, color: T_an.fg3, letterSpacing: 0.4, textTransform: 'uppercase', fontFamily: T_an.fontUi, fontWeight: 600, marginBottom: 8 }}>
                        直近30日
                      </div>
                      <Sparkline
                        data={window.DAILY.slice(-30).map((d, i) => window.DAILY.slice(-30).slice(0, i + 1).reduce((s, x) => s + x.pnl * m.pnl / (totalPnl || 1), 0))}
                        width={330} height={50}
                        color={m.color}
                      />
                    </div>

                    {/* 詳細指標 */}
                    <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                      {[
                        { l: '平均利益', v: '¥' + Math.round(m.pnl / m.trades / 100) * 100 + '(推定)' },
                        { l: 'プロフィットファクター', v: (1 + m.winRate / 100).toFixed(2) },
                        { l: '連勝', v: '8回' },
                        { l: '連敗', v: '3回' },
                      ].map((s, i) => (
                        <div key={i} style={{ padding: '10px 12px', background: T_an.surface, borderRadius: 8, border: `1px solid ${T_an.line}` }}>
                          <div style={{ fontSize: 10, color: T_an.fg3, fontFamily: T_an.fontUi }}>{s.l}</div>
                          <div style={{ fontFamily: T_an.fontMono, fontSize: 13, fontWeight: 600, color: T_an.fg, marginTop: 3 }}>{s.v}</div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            );
          })}
        </div>

      </div>
    </div>
  );
};

Object.assign(window, { AnalysisScreen });