// Faithful KoiFi chrome + dashboard cards, reconstructed from real source
// (koifi_theme, navigation_shell, koifi_app_header, dashboard_page + card widgets).
// Tokens: koiGold #C9987E · gradient 135° D8B098→C9987E→B08A6E · card r14 border #E6E3DF
// shadow2 0 3px 8px rgba(80,60,40,.10) · surface #F9F8F7 · text #3E3C39/#7E7B75

const T = () => window.KOI.light;
const serif = () => window.KOI.serif;
const sans = () => window.KOI.sans;
const GRAD = 'linear-gradient(135deg,#D8B098 0%,#C9987E 50%,#B08A6E 100%)';

// —— Global header (space switcher · [middle] · eye · bell · gear) ——
const MHeader = ({ middle=null }) => {
  const c = T();
  return (
    <div style={{ height:52, display:'flex', alignItems:'center', padding:'0 16px', background:'#fff', 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, display:'flex', justifyContent:'center' }}>{middle}</div>
      <Icon name="eye" size={21} color={c.n700}/>
      <div style={{ position:'relative' }}>
        <Icon name="bell" size={21} color={c.n700}/>
        <div style={{ position:'absolute', top:0, right:0, width:7, height:7, borderRadius:99, background:c.danger }}/>
      </div>
      <Icon name="sliders" size={21} color={c.n700}/>
    </div>
  );
};

// —— 5-tab bottom bar with sliding rose-gold pill (house/wallet/trending-up/target/sparkles) ——
const MTab = ({ active=0 }) => {
  const c = T();
  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:GRAD }}/>
        {tabs.map(([label,icon],i) => (
          <div key={label} style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:2, paddingTop:9, color: i===active ? c.koiGold : '#A8A49E' }}>
            <Icon name={icon} size={22} strokeWidth={i===active?1.9:1.6}/>
            <div style={{ fontSize:10, fontWeight:500, fontFamily:sans() }}>{label}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

// —— Card primitives ——
const Card = ({ children, pad=16, style={} }) => {
  const c = T();
  return <div style={{ background:'#fff', borderRadius:14, border:`1px solid ${c.border}`, boxShadow:'0 3px 8px rgba(80,60,40,0.10)', padding:pad, ...style }}>{children}</div>;
};
const CardLabel = ({ children }) => {
  const c = T();
  return <div style={{ fontSize:12, fontWeight:500, letterSpacing:'0.04em', color:c.ts, fontFamily:sans() }}>{children}</div>;
};

// —— Faithful dashboard cards ——
const CardAddExpense = () => {
  const c = T();
  return (
    <div style={{ background:GRAD, borderRadius:14, boxShadow:'0 4px 16px rgba(201,152,126,0.30)', padding:'12px 16px', display:'flex', alignItems:'center', gap:12 }}>
      <div style={{ width:42, height:42, borderRadius:10, background:'rgba(255,255,255,0.20)', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon name="plus" size={22} color="#fff" strokeWidth={2.2}/></div>
      <div style={{ flex:1 }}>
        <div style={{ fontSize:15, fontWeight:600, color:'#fff' }}>Add a transaction</div>
        <div style={{ fontSize:13, color:'rgba(255,255,255,0.85)' }}>Log spending in a tap</div>
      </div>
      <div style={{ width:30, height:30, borderRadius:99, background:'rgba(255,255,255,0.22)', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon name="chevR" size={16} color="#fff"/></div>
    </div>
  );
};

const Sparkline = ({ color, h=40, fill=false }) => (
  <svg width="100%" height={h} viewBox={`0 0 300 ${h}`} preserveAspectRatio="none">
    {fill && <defs><linearGradient id="spk" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stopColor={color} stopOpacity="0.2"/><stop offset="100%" stopColor={color} stopOpacity="0"/></linearGradient></defs>}
    {fill && <path d={`M0 ${h-6} C40 ${h-9} 60 ${h-16} 90 ${h-18} S150 ${h-26} 180 ${h-28} S240 ${h-33} 300 ${h-36} L300 ${h} L0 ${h} Z`} fill="url(#spk)"/>}
    <path d={`M0 ${h-6} C40 ${h-9} 60 ${h-16} 90 ${h-18} S150 ${h-26} 180 ${h-28} S240 ${h-33} 300 ${h-36}`} fill="none" stroke={color} strokeWidth="1.5"/>
  </svg>
);

const PeriodPills = ({ sel=2 }) => {
  const c = T();
  return (
    <div style={{ display:'flex', gap:6 }}>
      {['1D','1W','1M','3M','6M','1Y'].map((p,i) => (
        <div key={p} style={{ flex:1, textAlign:'center', fontSize:12, padding:'6px 0', borderRadius:6, background:i===sel?c.n100:'transparent', color:i===sel?c.tp:c.ts, fontWeight:i===sel?600:400 }}>{p}</div>
      ))}
    </div>
  );
};

const CardNetWorth = () => {
  const c = T();
  return (
    <Card>
      <div style={{ display:'flex' }}><CardLabel>NET WORTH</CardLabel><div style={{ flex:1 }}/><Icon name="info" size={15} color={c.ts}/></div>
      <div style={{ fontFamily:serif(), fontSize:40, fontWeight:300, lineHeight:1.1, color:c.tp, marginTop:2, letterSpacing:'0.02em', fontVariantNumeric:'tabular-nums' }}>₴142,800</div>
      <div style={{ fontSize:13, fontWeight:500, color:c.success, marginTop:2 }}>▲ 2.4%</div>
      <div style={{ marginTop:12 }}><Sparkline color={c.success}/></div>
      <div style={{ marginTop:12 }}><PeriodPills/></div>
    </Card>
  );
};

const CardCashFlow = () => {
  const c = T();
  return (
    <Card>
      <CardLabel>CASH FLOW</CardLabel>
      <div style={{ display:'flex', gap:16, marginTop:12 }}>
        <div style={{ flex:1 }}>
          <div style={{ fontSize:12, color:c.ts }}><span style={{ color:c.success }}>↑</span> Income</div>
          <div style={{ fontFamily:sans(), fontSize:18, fontWeight:600, marginTop:4, color:c.tp }}>₴54,000</div>
        </div>
        <div style={{ flex:1 }}>
          <div style={{ fontSize:12, color:c.ts }}><span style={{ color:c.danger }}>↓</span> Expenses</div>
          <div style={{ fontFamily:sans(), fontSize:18, fontWeight:600, marginTop:4, color:c.tp }}>₴32,140</div>
        </div>
      </div>
      <div style={{ display:'flex', gap:10, alignItems:'flex-end', height:100, marginTop:14, paddingBottom:18, position:'relative' }}>
        {[[3200,2400],[3400,2800],[4100,2600],[5100,3400],[4800,2900],[5400,3120]].map(([inc,exp],i) => (
          <div key={i} style={{ flex:1, display:'flex', justifyContent:'center', gap:3, alignItems:'flex-end', position:'relative' }}>
            <div style={{ width:9, height:inc/60, background:c.success, borderRadius:2 }}/>
            <div style={{ width:9, height:exp/60, background:c.danger, borderRadius:2 }}/>
            <div style={{ position:'absolute', bottom:-16, fontSize:10, color:c.ts }}>{['Nov','Dec','Jan','Feb','Mar','Apr'][i]}</div>
          </div>
        ))}
      </div>
      <div style={{ textAlign:'center', marginTop:6, fontSize:14, fontWeight:600, color:c.success }}>Net Cash Flow: +₴21,860</div>
    </Card>
  );
};

const Ring = ({ pct, size=56, stroke=4, color, children }) => {
  const c = T();
  const r = size/2 - stroke;
  const circ = 2*Math.PI*r;
  return (
    <div style={{ position:'relative', width:size, height:size }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={c.n200} strokeWidth={stroke}/>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth={stroke} strokeDasharray={`${pct*circ} ${circ}`} strokeLinecap="round" transform={`rotate(-90 ${size/2} ${size/2})`}/>
      </svg>
      <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center' }}>{children}</div>
    </div>
  );
};

const CardBudget = () => {
  const c = T();
  return (
    <Card>
      <CardLabel>QUICK BUDGET</CardLabel>
      <div style={{ display:'flex', alignItems:'center', gap:16, marginTop:12 }}>
        <Ring pct={0.72} color={c.success}><span style={{ fontSize:14, fontWeight:700, color:c.success }}>72</span></Ring>
        <div style={{ flex:1 }}>
          <div style={{ fontSize:14, fontWeight:600, color:c.success }}>Good</div>
          <div style={{ display:'flex', gap:6, marginTop:8, flexWrap:'wrap' }}>
            <Pill size="sm" bg="rgba(74,155,111,0.12)" color={c.success} bold>3 on track</Pill>
            <Pill size="sm" bg="rgba(212,133,58,0.12)" color="#D4853A" bold>2 warning</Pill>
            <Pill size="sm" bg="rgba(201,74,74,0.12)" color={c.danger} bold>1 over</Pill>
          </div>
        </div>
      </div>
    </Card>
  );
};

const CardHealth = () => {
  const c = T();
  const dims = [['Emergency fund',38,c.danger],['Debt',55,'#D4853A'],['Spending',72,'#8FB339'],['Savings',80,c.success],['Goals',84,c.success]];
  return (
    <Card>
      <div style={{ display:'flex', alignItems:'center', gap:16 }}>
        <Ring pct={0.78} size={64} stroke={8} color="#8FB339"><span style={{ fontFamily:serif(), fontSize:23, color:'#8FB339' }}>78</span></Ring>
        <div style={{ flex:1 }}>
          <div style={{ display:'flex', alignItems:'center', gap:6, color:c.ts }}><Icon name="heart" size={15} color={c.ts}/><span style={{ fontSize:13, fontWeight:600 }}>FINANCIAL HEALTH</span></div>
          <div style={{ fontFamily:serif(), fontSize:20, color:'#8FB339', marginTop:2 }}>On the right track</div>
        </div>
      </div>
      <div style={{ marginTop:14, display:'flex', flexDirection:'column', gap:7 }}>
        {dims.map(([n,v]) => (
          <div key={n}>
            <div style={{ display:'flex', justifyContent:'space-between', fontSize:11 }}>
              <span style={{ color:c.ts, fontWeight:600, letterSpacing:'0.04em' }}>{n}</span>
              <span style={{ color:c.tp, fontWeight:700, fontVariantNumeric:'tabular-nums' }}>{v}%</span>
            </div>
            <div style={{ height:5, borderRadius:99, background:c.n200, marginTop:5, overflow:'hidden' }}>
              <div style={{ width:`${v}%`, height:'100%', background:`linear-gradient(90deg,${c.koiGoldLight},${c.koiGoldDark})` }}/>
            </div>
          </div>
        ))}
      </div>
    </Card>
  );
};

const CardGoals = () => {
  const c = T();
  const goals = [['Emergency Fund',4200,10000,0.42],['Vacation',1200,3000,0.40],['New Laptop',800,2500,0.32]];
  return (
    <Card>
      <CardLabel>GOALS</CardLabel>
      <div style={{ marginTop:8 }}>
        {goals.map(([n,cur,tgt,p],i) => (
          <div key={n}>
            <div style={{ display:'flex', alignItems:'center', gap:12, padding:'8px 0' }}>
              <Ring pct={p} size={44} stroke={3} color={c.koiGold}><span style={{ fontSize:11, fontWeight:600, color:c.tp }}>{Math.round(p*100)}%</span></Ring>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:13, fontWeight:500, color:c.tp }}>{n}</div>
                <div style={{ fontSize:12, color:c.ts, marginTop:2, fontVariantNumeric:'tabular-nums' }}>₴{cur.toLocaleString()} / ₴{tgt.toLocaleString()}</div>
              </div>
            </div>
            {i<goals.length-1 && <div style={{ height:1, background:c.border }}/>}
          </div>
        ))}
      </div>
    </Card>
  );
};

const CardPortfolio = () => {
  const c = T();
  return (
    <Card>
      <CardLabel>PORTFOLIO</CardLabel>
      <div style={{ display:'flex', alignItems:'baseline', marginTop:8 }}>
        <div style={{ fontFamily:serif(), fontSize:22, fontWeight:400, flex:1, color:c.tp }}>₴284,500</div>
        <div style={{ fontSize:13, fontWeight:500, color:c.success }}>▲ 12.4%</div>
      </div>
      <div style={{ display:'flex', height:10, borderRadius:99, overflow:'hidden', marginTop:12, gap:2 }}>
        <div style={{ flex:50, background:'#B08A6E' }}/><div style={{ flex:25, background:'#6B9E8A' }}/><div style={{ flex:15, background:'#7A95B8' }}/><div style={{ flex:10, background:'#8E7CC3' }}/>
      </div>
      <div style={{ fontSize:12, color:c.ts, marginTop:10 }}>4 asset classes</div>
    </Card>
  );
};

const CardMascot = () => {
  const c = T();
  return (
    <div style={{ padding:16, borderRadius:28, background:'linear-gradient(135deg,rgba(216,176,152,0.12),rgba(201,152,126,0.08))', border:'1.5px solid rgba(201,152,126,0.25)', display:'flex', gap:12 }}>
      <div style={{ width:48, height:48, borderRadius:99, background:'rgba(255,255,255,0.5)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:26 }}>🐟</div>
      <div style={{ flex:1 }}>
        <div style={{ fontSize:13, lineHeight:1.5, color:c.tp }}>You stayed under your Dining budget 3 weeks running. Nice work!</div>
        <div style={{ marginTop:8, fontSize:13, fontWeight:600, color:c.koiGold }}>See details →</div>
      </div>
    </div>
  );
};

const CardReports = () => {
  const c = T();
  return (
    <Card>
      <div style={{ display:'flex', alignItems:'center', gap:12 }}>
        <div style={{ width:40, height:40, borderRadius:10, background:c.n100, display:'flex', alignItems:'center', justifyContent:'center' }}><Icon name="chart" size={19} color={c.koiGold}/></div>
        <div style={{ flex:1 }}>
          <div style={{ fontSize:15, fontWeight:600, color:c.tp }}>Reports & insights</div>
          <div style={{ fontSize:12, color:c.ts, marginTop:1 }}>12 reports · spending, net worth, gains</div>
        </div>
        <Icon name="chevR" size={18} color={c.ts}/>
      </div>
    </Card>
  );
};

const CardWisdom = () => {
  const c = T();
  return (
    <Card>
      <div style={{ display:'flex' }}><CardLabel>WISDOM OF THE DAY</CardLabel><div style={{ flex:1 }}/><Icon name="bookmark" size={15} color={c.ts}/></div>
      <div style={{ fontFamily:serif(), fontStyle:'italic', fontSize:18, color:c.tp, marginTop:8, lineHeight:1.35 }}>"Do not save what is left after spending, but spend what is left after saving."</div>
      <div style={{ fontSize:12, color:c.ts, marginTop:8 }}>— Warren Buffett</div>
    </Card>
  );
};

Object.assign(window, {
  MHeader, MTab, Card, CardLabel, Ring, Sparkline, PeriodPills, GRAD,
  CardAddExpense, CardNetWorth, CardCashFlow, CardBudget, CardHealth,
  CardGoals, CardPortfolio, CardMascot, CardReports, CardWisdom,
});