// INVESTMENTS tab — faithful to portfolio_page.dart on main.
// Segment control (Portfolios / Watchlist / Activity, Portfolios active) →
// open Total-invested hero (label + ⓘ, serif-50 count figure, ▲ today chip,
// supporting line "▲ ₴X · N.N% · 1M · N portfolios" + FX badge, gradient trend,
// gold period pills, allocation bar + legend) → portfolio rows (icon, name,
// "N assets · UAH", value, all-time %, 1-month sparkline).
const IV = () => window.KOI.light;
const IVS = "'Cormorant Garamond', serif", IVN = "'Inter', system-ui, sans-serif";
const IVGRAD = 'linear-gradient(135deg,#D8B098,#C9987E,#B08A6E)';

const IVTabs = ({ active = 2 }) => { const c = IV(); const tabs = [['Home', 'home'], ['Expenses', 'wallet'], ['Investments', 'trendingUp'], ['Goals', 'target'], ['Mascot', 'sparkle']]; return (
  <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 80, background: '#fff', borderTop: `1px solid ${c.border}`, paddingBottom: 24 }}><div style={{ display: 'flex', position: 'relative', height: 56 }}><div style={{ position: 'absolute', top: 5, left: `calc(${active * 20}% + ${(20 - 7.12) / 2}%)`, width: '7.12%', height: 4, borderRadius: 99, background: IVGRAD }} />{tabs.map(([l, ic], i) => <div key={l} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2, paddingTop: 9, color: i === active ? c.koiGold : '#A8A49E' }}><Icon name={ic} size={22} strokeWidth={i === active ? 1.9 : 1.6} /><div style={{ fontSize: 10, fontWeight: 500 }}>{l}</div></div>)}</div></div>
); };

const IVSpark = ({ up, w = 60, h = 26 }) => {
  const col = up ? '#4A9B6F' : '#C94A4A';
  const d = up ? 'M2 22 L14 18 L26 20 L38 12 L50 8 L58 4' : 'M2 6 L14 10 L26 8 L38 15 L50 18 L58 22';
  return <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{ overflow: 'visible' }}><path d={d} fill="none" stroke={col} strokeWidth="1.8" strokeLinecap="round" /></svg>;
};

const IVPortRow = (name, ic, iconCol, meta, val, chg, up) => {
  const c = IV();
  return (
    <div key={name} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 14, background: c.surfaceElevated, border: `1px solid ${c.border}`, borderRadius: 14, marginBottom: 12 }}>
      <div style={{ width: 40, height: 40, borderRadius: 12, background: iconCol, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name={ic} size={18} color="#fff" /></div>
      <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontSize: 14, fontWeight: 600, color: c.tp }}>{name}</div><div style={{ fontSize: 12, color: c.ts, marginTop: 2 }}>{meta}</div></div>
      <IVSpark up={up} />
      <div style={{ textAlign: 'right', minWidth: 78 }}><div style={{ fontSize: 15, fontWeight: 600, color: c.tp, fontVariantNumeric: 'tabular-nums' }}>{val}</div><div style={{ fontSize: 12, fontWeight: 600, color: up ? c.success : c.danger, fontVariantNumeric: 'tabular-nums' }}>{chg}</div></div>
    </div>
  );
};

const ALLOC_IV = [['Stocks', 50, '#B0855F'], ['Crypto', 25, '#5E9E86'], ['Bonds', 15, '#7A95B8'], ['Cash', 10, '#9B84C4']];

const InvestmentsAsis = () => {
  const c = IV();
  const pills = ['1W', '1M', '3M', '6M', '1Y', 'ALL'];
  return (
    <div style={{ height: '100%', background: c.surface, position: 'relative', overflow: 'hidden', fontFamily: IVN, display: 'flex', flexDirection: 'column' }}>
      <StatusBar color={c.tp} />
      {/* nav-shell header (logo/eye/bell/gear provided by shell) */}
      <div style={{ height: 52, flexShrink: 0, display: 'flex', alignItems: 'center', padding: '0 16px', background: c.surface, gap: 12 }}>
        <div style={{ padding: '5px 8px', background: 'rgba(230,227,223,0.5)', borderRadius: 6, display: 'flex', alignItems: 'center', gap: 4, fontSize: 13, fontWeight: 500, color: c.ts }}>Personal <Icon name="chevD" size={13} color={c.ts} /></div>
        <div style={{ flex: 1 }} /><Icon name="eye" size={21} color={c.n700} /><Icon name="bell" size={21} color={c.n700} /><Icon name="sliders" size={21} color={c.n700} />
      </div>
      {/* segment control */}
      <div style={{ margin: '4px 16px 8px', flexShrink: 0, height: 38, padding: 3, background: c.n100, borderRadius: 10, display: 'flex' }}>
        {['Portfolios', 'Watchlist', 'Activity'].map((s, i) => <div key={s} style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 8, fontSize: 13, fontWeight: i === 0 ? 600 : 500, background: i === 0 ? '#fff' : 'transparent', color: i === 0 ? c.tp : c.ts, boxShadow: i === 0 ? '0 1px 2px rgba(0,0,0,0.06)' : 'none' }}>{s}</div>)}
      </div>
      <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '4px 0 96px' }}>
        {/* open total-invested hero */}
        <div style={{ padding: '0 16px' }}>
          <div style={{ display: 'flex', alignItems: 'center' }}><div style={{ flex: 1, fontSize: 13, color: c.ts }}>Total invested value</div><Icon name="info" size={14} color={c.n300} /></div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, marginTop: 2 }}>
            <div style={{ fontFamily: IVS, fontSize: 50, fontWeight: 300, lineHeight: 1.02, letterSpacing: '-1px', color: c.tp, fontVariantNumeric: 'tabular-nums' }}>₴284,500</div>
            <div style={{ paddingBottom: 8 }}><span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, padding: '3px 8px', borderRadius: 99, background: 'rgba(74,155,111,0.10)', color: c.success, fontSize: 12, fontWeight: 600 }}>▲ ₴1,240</span></div>
          </div>
          {/* supporting line */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8, flexWrap: 'wrap' }}>
            <span style={{ fontSize: 13, fontWeight: 600, color: c.success, fontVariantNumeric: 'tabular-nums' }}>▲ ₴7,100 · 2.6% · 1M</span>
            <span style={{ fontSize: 13, color: c.n300 }}>·</span>
            <span style={{ fontSize: 13, color: c.ts }}>4 portfolios</span>
            <span style={{ fontSize: 10, fontWeight: 600, color: c.koiGoldDark, background: 'rgba(201,152,126,0.14)', padding: '2px 7px', borderRadius: 99 }}>FX ✓</span>
          </div>
          {/* gradient trend */}
          <div style={{ marginTop: 14 }}>
            <svg width="100%" height="56" viewBox="0 0 320 56" preserveAspectRatio="none" style={{ overflow: 'visible' }}>
              <defs><linearGradient id="ivfill" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stopColor="#4A9B6F" stopOpacity="0.24" /><stop offset="100%" stopColor="#4A9B6F" stopOpacity="0" /></linearGradient></defs>
              <path d="M0 46 C50 44 90 34 150 28 S250 12 320 8 L320 56 L0 56 Z" fill="url(#ivfill)" />
              <path d="M0 46 C50 44 90 34 150 28 S250 12 320 8" fill="none" stroke="#4A9B6F" strokeWidth="2" strokeLinecap="round" />
              <circle cx="320" cy="8" r="3.2" fill="#4A9B6F" />
            </svg>
          </div>
          {/* gold period pills */}
          <div style={{ display: 'flex', gap: 4, marginTop: 8 }}>
            {pills.map((p, i) => <div key={p} style={{ flex: 1, textAlign: 'center', fontSize: 11.5, padding: '6px 0', borderRadius: 8, background: i === 1 ? 'rgba(201,152,126,0.16)' : 'transparent', color: i === 1 ? c.koiGoldDark : c.ts, fontWeight: i === 1 ? 700 : 500 }}>{p}</div>)}
          </div>
          {/* allocation */}
          <div style={{ height: 1, background: c.border, margin: '18px 0 14px' }} />
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.5px', color: c.ts }}>ASSET ALLOCATION</div>
          <div style={{ display: 'flex', height: 14, borderRadius: 99, overflow: 'hidden', marginTop: 10, gap: 2 }}>{ALLOC_IV.map(([n, p, col]) => <div key={n} style={{ flex: p, background: col }} />)}</div>
          <div style={{ display: 'flex', gap: 14, marginTop: 10, flexWrap: 'wrap' }}>{ALLOC_IV.map(([n, p, col]) => <span key={n} style={{ fontSize: 11, color: c.ts, display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 8, height: 8, borderRadius: 99, background: col }} />{n} {p}%</span>)}</div>
        </div>
        {/* portfolio rows */}
        <div style={{ padding: '18px 16px 0' }}>
          {IVPortRow('Long-term Stocks', 'trendingUp', '#B0855F', '12 assets · UAH', '₴168,200', '+14.2%', true)}
          {IVPortRow('Crypto', 'zap', '#5E9E86', '6 assets · exchange · UAH', '₴71,300', '+31.0%', true)}
          {IVPortRow('Bonds & Cash', 'shield', '#7A95B8', '4 assets · UAH', '₴45,000', '−1.1%', false)}
        </div>
      </div>
      <div style={{ position: 'absolute', right: 20, bottom: 100, width: 56, height: 56, borderRadius: 99, background: IVGRAD, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 16px rgba(201,152,126,0.3)' }}><Icon name="plus" size={26} color="#fff" strokeWidth={2.2} /></div>
      <IVTabs active={2} />
    </div>
  );
};

Object.assign(window, { InvestmentsAsis });