// ============================================================
// ホーム画面 (A案: 縦積みメトリック / B案: ヒーロー損益)
// ============================================================
const T_h = window.TOKENS;

// ─────────────────────────────────────────
// 同期ステータスバー
// ─────────────────────────────────────────
const SyncBar = ({ status, lastSync, mode }) => {
  const cfg = {
    online:  { color: T_h.profit, label: `最終同期 ${window.fmt.ago(lastSync)}` },
    syncing: { color: T_h.info,   label: '同期中…' },
    offline: { color: T_h.loss,   label: 'HUB未接続' },
  }[status] || { color: T_h.fg3, label: '不明' };
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 8,
      fontSize: 11, color: T_h.fg2, fontFamily: T_h.fontUi,
    }}>
      <StatusDot status={status} size={6} />
      <span>{cfg.label}</span>
      {mode === 'empty' && <span style={{ color: T_h.warn }}>· 設定未完了</span>}
    </div>
  );
};

// ─────────────────────────────────────────
// A案 : メトリックカード縦積み
// ─────────────────────────────────────────
const HomeScreenA = ({ onNav, mode, onStartSetup, onRefresh, loadState }) => {
  const [period, setPeriod] = React.useState('month');
  const empty = mode === 'empty';
  const accounts = window.ACCOUNTS || [];
  const activeAccounts = accounts.filter(a => a.status === 'online').length;
  const positionedAccounts = accounts.filter(a => a.hasPosition && a.marginLevel);
  const minMarginLevel = positionedAccounts.length
    ? Math.min(...positionedAccounts.map(a => Number(a.marginLevel)))
    : null;

  const periodPnl = empty ? 0 :
    period === 'today' ? window.SUMMARY.today :
    period === 'month' ? window.SUMMARY.month :
    window.SUMMARY.total;

  const dailySlice = empty ? window.DAILY.map(d => ({ ...d, running: 0, pnl: 0 })) :
    period === 'today' ? window.DAILY.slice(-1) :
    period === 'month' ? window.DAILY.slice(-30) :
    window.DAILY;

  return (
    <div>
      <TopBar
        title="ホーム"
        sub={<SyncBar status={window.APP_STATE.syncStatus || (empty ? 'offline' : 'online')} lastSync={window.APP_STATE.lastSync || 0} mode={mode} />}
        right={
          <button onClick={onRefresh} style={{
            width: 34, height: 34, borderRadius: 999, border: `1px solid ${T_h.line}`,
            background: T_h.surface, display: 'flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer',
          }}>
            <Icon name="sync" size={16} color={T_h.fg2} />
          </button>
        }
      />

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

        {empty && <EmptyHero onStart={onStartSetup} />}

        {/* 期間切替 */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <PillTabs
            value={period}
            onChange={setPeriod}
            options={[
              { value: 'today', label: '今日' },
              { value: 'month', label: '今月' },
              { value: 'all',   label: '全期間' },
              { value: 'custom', label: 'カスタム' },
            ]}
          />
        </div>

        {/* ヒーロー損益 */}
        <Card padding={20} style={{ background: T_h.surface }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
            <div>
              <div style={{ fontSize: 11, color: T_h.fg3, letterSpacing: 0.5, textTransform: 'uppercase', fontWeight: 600, fontFamily: T_h.fontUi, marginBottom: 6 }}>
                {period === 'today' ? '本日損益' : period === 'month' ? '今月損益' : '累計損益'}
              </div>
              <PnL value={periodPnl} size={30} sign={true} weight={700} />
              {!empty && period !== 'today' && (
                <div style={{ marginTop: 8, fontSize: 12, color: T_h.fg3, fontFamily: T_h.fontUi }}>
                  <span style={{ color: window.SUMMARY.today >= 0 ? T_h.profit : T_h.loss, fontFamily: T_h.fontMono, fontWeight: 600 }}>
                    {window.fmt.jpy(window.SUMMARY.today, { sign: true })}
                  </span>
                  <span style={{ marginLeft: 6 }}>今日</span>
                </div>
              )}
            </div>
            <Sparkline data={dailySlice} width={110} height={44} />
          </div>
        </Card>

        {/* リスクメトリック */}
        <div>
          <SectionHead title="リスク指標" />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <MetricCard
              label="最大DD"
              value={empty ? '—' : window.fmt.jpy(-window.SUMMARY.maxDd, { compact: true })}
              sub={empty ? '—' : '記録値'}
              tone={empty ? 'default' : 'loss'}
              tooltip
            />
            <MetricCard
              label="含み損益"
              value={empty ? '—' : window.fmt.jpy(window.SUMMARY.floating, { sign: true })}
              sub={empty ? '—' : `${accounts.length}口座集計`}
              tone={empty ? 'default' : (window.SUMMARY.floating < 0 ? 'loss' : 'profit')}
            />
            <MetricCard
              label="証拠金維持率(最低)"
              value={empty ? '—' : window.fmt.marginLevel(minMarginLevel)}
              sub={empty ? '—' : (minMarginLevel ? 'ポジション保有口座' : 'ポジションなし')}
              tone={empty ? 'default' : (minMarginLevel && minMarginLevel < 500 ? 'warn' : 'default')}
              tooltip
            />
            <MetricCard
              label="稼働口座"
              value={empty ? '0 / 0' : `${activeAccounts} / ${accounts.length}`}
              sub={empty ? '未登録' : (loadState === 'error' ? '受信エラー' : '同期済み')}
              tone="default"
            />
          </div>
        </div>

        {/* 口座一覧 */}
        <div>
          <SectionHead title="口座" action={() => onNav('acc')} actionLabel="すべて見る" />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {empty ? (
              <Card padding={20} style={{ textAlign: 'center' }}>
                <Icon name="wallet" size={28} color={T_h.fg4} />
                <div style={{ marginTop: 10, fontSize: 13, color: T_h.fg2, fontFamily: T_h.fontUi }}>
                  口座がまだ登録されていません
                </div>
                <div style={{ marginTop: 4, fontSize: 11, color: T_h.fg3, fontFamily: T_h.fontUi }}>
                  HUBを起動すると自動で追加されます
                </div>
              </Card>
            ) : window.ACCOUNTS.map(a => <AccountRow key={a.id} acc={a} onClick={() => onNav('acc-detail', a.id)} />)}
          </div>
        </div>

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

// ─────────────────────────────────────────
// 口座行(小)
// ─────────────────────────────────────────
const AccountRow = ({ acc, onClick, dense = false }) => {
  return (
    <div onClick={onClick} style={{
      background: T_h.surface, border: `1px solid ${T_h.line}`,
      borderRadius: 12, padding: dense ? '10px 12px' : '12px 14px',
      display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
    }}>
      <StatusDot status={acc.status} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 3 }}>
          <span style={{ fontSize: 14, fontWeight: 600, color: T_h.fg, fontFamily: T_h.fontUi }}>
            {acc.broker}
          </span>
          <Badge tone={acc.type === 'MT5' ? 'mt5' : 'mt4'} size="xs">{acc.type}</Badge>
        </div>
        <div style={{ fontSize: 11, color: T_h.fg3, fontFamily: T_h.fontMono, letterSpacing: 0.3 }}>
          #{acc.number} · {acc.currency} · {acc.group}
        </div>
      </div>
      <div style={{ textAlign: 'right' }}>
        <PnL value={acc.todayPnl} size={13} sign={true} />
        <div style={{ fontSize: 10, color: T_h.fg3, marginTop: 2, fontFamily: T_h.fontUi }}>今日</div>
      </div>
      <Icon name="chevR" size={14} color={T_h.fg4} />
    </div>
  );
};

// ─────────────────────────────────────────
// B案 : ヒーロー損益 + ミニチャート強調
// ─────────────────────────────────────────
const HomeScreenB = ({ onNav, mode, onStartSetup }) => {
  const [period, setPeriod] = React.useState('month');
  const empty = mode === 'empty';
  const periodPnl = empty ? 0 :
    period === 'today' ? window.SUMMARY.today :
    period === 'month' ? window.SUMMARY.month :
    window.SUMMARY.total;
  const dailySlice = empty ? [] :
    period === 'today' ? window.DAILY.slice(-7) :
    period === 'month' ? window.DAILY.slice(-30) :
    window.DAILY;

  // 累計チャート用
  const runningData = dailySlice.map((d, i, arr) => {
    return arr.slice(0, i + 1).reduce((s, x) => s + x.pnl, 0);
  });

  return (
    <div>
      <div style={{
        padding: '54px 16px 20px',
        background: `linear-gradient(180deg, ${T_h.bg} 0%, ${T_h.surface} 100%)`,
        borderBottom: `1px solid ${T_h.lineSoft}`,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: T_h.fg2, fontFamily: T_h.fontUi }}>
            HUB Console
          </div>
          <SyncBar status={empty ? 'offline' : 'online'} lastSync={2} mode={mode} />
        </div>

        {/* ヒーロー損益(大きい) */}
        <div style={{ marginBottom: 14 }}>
          <div style={{ fontSize: 11, color: T_h.fg3, letterSpacing: 0.5, textTransform: 'uppercase', fontWeight: 600, fontFamily: T_h.fontUi, marginBottom: 4 }}>
            {period === 'today' ? '本日の損益' : period === 'month' ? '今月の損益' : '累計損益'}
          </div>
          <div style={{
            fontFamily: T_h.fontMono, fontSize: 40, fontWeight: 700, lineHeight: 1.1,
            color: empty ? T_h.fg2 : (periodPnl >= 0 ? T_h.profit : T_h.loss),
            letterSpacing: -1, fontVariantNumeric: 'tabular-nums',
          }}>
            {empty ? '¥0' : window.fmt.jpy(periodPnl, { sign: true })}
          </div>
          {!empty && (
            <div style={{ marginTop: 6, display: 'flex', gap: 12, fontSize: 12, color: T_h.fg3, fontFamily: T_h.fontUi }}>
              <span>今日 <span style={{ color: window.SUMMARY.today >= 0 ? T_h.profit : T_h.loss, fontFamily: T_h.fontMono, fontWeight: 600 }}>
                {window.fmt.jpy(window.SUMMARY.today, { sign: true })}
              </span></span>
              <span>取引 <span style={{ color: T_h.fg, fontFamily: T_h.fontMono, fontWeight: 600 }}>24</span></span>
              <span>勝率 <span style={{ color: T_h.fg, fontFamily: T_h.fontMono, fontWeight: 600 }}>66.7%</span></span>
            </div>
          )}
        </div>

        {/* ミニチャート */}
        {!empty && (
          <div style={{ margin: '0 -4px' }}>
            <Sparkline data={runningData} width={338} height={70} />
          </div>
        )}

        <div style={{ marginTop: 14 }}>
          <PillTabs
            value={period}
            onChange={setPeriod}
            options={[
              { value: 'today', label: '今日' },
              { value: 'month', label: '今月' },
              { value: 'all',   label: '全期間' },
              { value: 'custom', label: 'カスタム' },
            ]}
          />
        </div>
      </div>

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

        {empty && <EmptyHero onStart={onStartSetup} />}

        {/* リスク指標 3列 */}
        <div>
          <SectionHead title="リスクスナップショット" />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
            <MetricCard
              label="最大DD"
              value={empty ? '—' : window.fmt.jpy(-window.SUMMARY.maxDd, { compact: true })}
              sub={empty ? '' : '-14.8%'}
              tone={empty ? 'default' : 'loss'}
            />
            <MetricCard
              label="含み損"
              value={empty ? '—' : window.fmt.jpy(window.SUMMARY.floating, { sign: true, compact: true })}
              sub={empty ? '' : '1口座'}
              tone={empty ? 'default' : 'loss'}
            />
            <MetricCard
              label="維持率↓"
              value={empty ? '—' : '312%'}
              sub={empty ? '' : '要注意'}
              tone={empty ? 'default' : 'warn'}
            />
          </div>
        </div>

        {/* 口座 */}
        <div>
          <SectionHead title="口座" action={() => onNav('acc')} actionLabel="すべて" />
          {empty ? (
            <Card padding={20} style={{ textAlign: 'center' }}>
              <Icon name="wallet" size={28} color={T_h.fg4} />
              <div style={{ marginTop: 10, fontSize: 13, color: T_h.fg2, fontFamily: T_h.fontUi }}>
                口座がまだ登録されていません
              </div>
            </Card>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {window.ACCOUNTS.map(a => <AccountRow key={a.id} acc={a} onClick={() => {}} />)}
            </div>
          )}
        </div>

        {/* トップEA */}
        {!empty && (
          <div>
            <SectionHead title="EA成績(今月)" action={() => onNav('ana')} actionLabel="分析へ" />
            <Card padding={0}>
              {window.MAGICS.slice().sort((a,b) => b.pnl - a.pnl).slice(0, 3).map((m, i) => (
                <div key={m.magic} style={{
                  padding: '12px 14px',
                  borderBottom: i < 2 ? `1px solid ${T_h.lineSoft}` : 'none',
                  display: 'flex', alignItems: 'center', gap: 12,
                }}>
                  <div style={{ width: 6, height: 32, background: m.color, borderRadius: 3, flexShrink: 0 }} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, color: T_h.fg, fontWeight: 600, fontFamily: T_h.fontUi }}>
                      {m.name || <span style={{ color: T_h.fg3 }}>未分類</span>}
                    </div>
                    <div style={{ fontSize: 11, color: T_h.fg3, fontFamily: T_h.fontMono, marginTop: 2 }}>
                      Magic #{m.magic} · {m.trades}取引 · {m.winRate}%
                    </div>
                  </div>
                  <PnL value={m.pnl} size={13} sign={true} />
                </div>
              ))}
            </Card>
          </div>
        )}

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

Object.assign(window, { HomeScreenA, HomeScreenB, AccountRow, SyncBar });