// DOMAIN 08 — Goals. Faithful to goals_page.dart on main:
// serif "Goals" header + sparkles Habits button; goal cards = 64px progress ring +
// name + priority badge + "X of Y" + est month/year + pacing bar (25/50/75 ticks) +
// pace status badge (ahead/on-track/behind/almost/reached) + linked source chips;
// collapsed "Completed & abandoned" section; custom gradient-circle FAB.
const G8 = () => window.KOI.light;
const G8S = "'Cormorant Garamond', serif", G8N = "'Inter', system-ui, sans-serif";
const G8GRAD = 'linear-gradient(135deg,#D8B098,#C9987E,#B08A6E)';

const GRing = ({ pct, size = 64, accent }) => {
  const c = G8();
  const r = size / 2 - 3;
  return (
    <div style={{ position: 'relative', width: size, height: size, flexShrink: 0 }}>
      <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="6" /><circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={accent || c.koiGold} strokeWidth="6" strokeDasharray={`${pct * 2 * Math.PI * r} ${2 * Math.PI * r}`} strokeLinecap="round" transform={`rotate(-90 ${size / 2} ${size / 2})`} /></svg>
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: G8S, fontSize: 15, fontWeight: 500, color: c.tp }}>{Math.round(pct * 100)}%</div>
    </div>
  );
};
const GBadge = ({ label, bg, fg }) => <span style={{ padding: '2px 8px', borderRadius: 99, background: bg, color: fg, fontSize: 10, fontWeight: 600 }}>{label}</span>;
const GPacing = ({ v }) => {
  const c = G8();
  return (
    <div style={{ height: 8, borderRadius: 99, background: c.n200, position: 'relative', overflow: 'hidden' }}>
      <div style={{ width: `${v * 100}%`, height: '100%', background: v >= 1 ? 'linear-gradient(135deg,#6BB890,#4A9B6F)' : G8GRAD }} />
      {v < 1 && [0.25, 0.5, 0.75].map(f => <div key={f} style={{ position: 'absolute', left: `${f * 100}%`, top: 0, width: 1.5, height: 8, background: 'rgba(255,255,255,0.75)' }} />)}
    </div>
  );
};
const GoalCard = ({ name, cur, tgt, pct, est, accent, icon, priority, pace, paceBg, paceFg, linked }) => {
  const c = G8();
  return (
    <div style={{ padding: 16, background: c.surfaceElevated, border: `1px solid ${c.border}`, borderRadius: 14, marginBottom: 16, display: 'flex', gap: 14 }}>
      <GRing pct={pct} accent={accent} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
          <Icon name={icon} size={14} color={accent} />
          <div style={{ flex: 1, fontSize: 15, fontWeight: 600, color: c.tp, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{name}</div>
          {priority && <GBadge label="Priority" bg="rgba(201,152,126,0.12)" fg={c.koiGoldDark} />}
        </div>
        <div style={{ fontSize: 13, color: c.ts, marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>{cur} of {tgt}</div>
        <div style={{ fontSize: 11, color: c.koiSilver, marginTop: 3 }}>{est}</div>
        <div style={{ marginTop: 6 }}><GPacing v={pct} /></div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 }}>
          <GBadge label={pace} bg={paceBg} fg={paceFg} />
          {linked && <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: c.koiSilver }}><Icon name="tag" size={11} color={c.koiSilver} />{linked}</div>}
        </div>
      </div>
    </div>
  );
};
const GoalsAsis = () => {
  const c = G8();
  return (
    <div style={{ height: '100%', background: c.n50, position: 'relative', overflow: 'hidden', fontFamily: G8N }}>
      <StatusBar color={c.tp} />
      {/* No in-page title — the bottom-nav "Goals" tab labels this screen.
          Body opens straight on the Progress hero (faithful to main). */}
      <div style={{ position: 'absolute', top: 44, bottom: 0, left: 0, right: 0, overflowY: 'auto', padding: '16px 20px 96px' }}>
        {/* Progress hero: saved / target + monthly funding */}
        <div style={{ marginBottom: 16 }}>
          <div style={{ fontSize: 12, color: c.ts }}>Saved across 3 goals</div>
          <div style={{ fontFamily: G8S, fontSize: 44, fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.5px', color: c.tp, marginTop: 2, fontVariantNumeric: 'tabular-nums' }}>₴6,200 <span style={{ color: c.n400 }}>/ ₴15,500</span></div>
          <div style={{ fontSize: 13, fontWeight: 600, color: c.koiGoldDark, marginTop: 8 }}>₴780/mo funding · on pace for all</div>
        </div>
        {/* Plan row: Smart Habits + Insights (re-homed from Mascot) */}
        <div style={{ display: 'flex', gap: 10, marginBottom: 18 }}>
          {[['Smart Habits', 'wand', '2 active'], ['Insights', 'chart', '12 reports']].map(([t, ic, s]) => (
            <div key={t} style={{ flex: 1, minHeight: 78, padding: 14, background: c.surfaceElevated, border: `1px solid ${c.border}`, borderRadius: 14 }}>
              <div style={{ width: 34, height: 34, borderRadius: 10, background: c.n100, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 8 }}><Icon name={ic} size={17} color={c.koiGoldDark} /></div>
              <div style={{ fontSize: 13, fontWeight: 600, color: c.tp }}>{t}</div>
              <div style={{ fontSize: 11, color: c.ts, marginTop: 1 }}>{s}</div>
            </div>
          ))}
        </div>
        {/* "Your goals" italic serif header + rule */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
          <div style={{ fontFamily: G8S, fontStyle: 'italic', fontSize: 18, color: c.n700 }}>Your goals</div>
          <div style={{ flex: 1, height: 1, background: c.border }} />
        </div>
        <GoalCard name="Emergency Fund" cur="₴4,200" tgt="₴10,000" pct={0.42} est="Dec 2026" accent="#4A9B6F" icon="shield" priority pace="On track" paceBg={c.infoSubtle} paceFg={c.info} linked="Revolut Vault" />
        <GoalCard name="Vacation" cur="₴1,200" tgt="₴3,000" pct={0.40} est="Aug 2026" accent="#C9987E" icon="mapPin" pace="Ahead" paceBg={c.successSubtle} paceFg={c.success} />
        <GoalCard name="New Laptop" cur="₴800" tgt="₴2,500" pct={0.32} est="Oct 2026" accent="#7A95B8" icon="grid" pace="Behind" paceBg={c.dangerSubtle} paceFg={c.danger} />
        <div style={{ textAlign: 'center', marginTop: 8 }}><span style={{ fontSize: 13, color: c.ts }}>⌄ Completed & abandoned (2)</span></div>
      </div>
      <div style={{ position: 'absolute', right: 20, bottom: 100, width: 56, height: 56, borderRadius: 99, background: G8GRAD, 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>
      <GTabs active={3} />
    </div>
  );
};
const GTabs = ({ active }) => {
  const c = G8();
  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: G8GRAD }} />
        {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>
  );
};

// TO-BE: total-across-goals hero + Plan home row (Habits + Insights re-homed here)
const GoalsTobe = () => {
  const c = G8();
  return (
    <div style={{ height: '100%', background: c.n50, position: 'relative', overflow: 'hidden', fontFamily: G8N }}>
      <StatusBar color={c.tp} />
      <div style={{ position: 'absolute', top: 44, bottom: 80, left: 0, right: 0, overflowY: 'auto', padding: '4px 20px 24px' }}>
        <div style={{ fontFamily: G8S, fontSize: 28, fontWeight: 300, color: c.tp, padding: '8px 0' }}>Plan</div>
        {/* hero: total saved across goals + monthly funding */}
        <div style={{ marginBottom: 16 }}>
          <div style={{ fontSize: 12, color: c.ts }}>Saved across 3 goals</div>
          <div style={{ fontFamily: G8S, fontSize: 46, fontWeight: 300, lineHeight: 1, color: c.n900, letterSpacing: '-0.01em', marginTop: 2 }}><span style={{ fontSize: 24, color: c.ts, marginRight: 6 }}>₴</span>6,200 <span style={{ fontSize: 15, color: c.n400 }}>/ ₴15,500</span></div>
          <div style={{ fontSize: 13, color: c.koiGoldDark, fontWeight: 600, marginTop: 8 }}>₴780/mo funding · on pace for all</div>
        </div>
        {/* Plan home row: Habits + Insights (re-homed from Mascot) */}
        <div style={{ display: 'flex', gap: 10, marginBottom: 18 }}>
          {[['Smart Habits', 'wand', '2 active'], ['Insights', 'chart', '12 reports']].map(([t, ic, s]) => (
            <div key={t} style={{ flex: 1, padding: 14, background: '#fff', border: `1px solid ${c.border}`, borderRadius: 14 }}><div style={{ width: 34, height: 34, borderRadius: 10, background: c.n100, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 8 }}><Icon name={ic} size={17} color={c.koiGoldDark} /></div><div style={{ fontSize: 13, fontWeight: 600, color: c.tp }}>{t}</div><div style={{ fontSize: 11, color: c.ts, marginTop: 1 }}>{s}</div></div>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 12 }}><div style={{ fontFamily: G8S, fontStyle: 'italic', fontSize: 18, color: c.n700 }}>Your goals</div><div style={{ flex: 1, height: 1, background: c.border }} /></div>
        <GoalCard name="Emergency Fund" cur="₴4,200" tgt="₴10,000" pct={0.42} est="Dec 2026" accent="#4A9B6F" icon="shield" priority pace="On track" paceBg={c.infoSubtle} paceFg={c.info} linked="Revolut Vault" />
        <GoalCard name="Vacation" cur="₴1,200" tgt="₴3,000" pct={0.40} est="Aug 2026" accent="#C9987E" icon="mapPin" pace="Ahead" paceBg={c.successSubtle} paceFg={c.success} />
      </div>
      <div style={{ position: 'absolute', right: 20, bottom: 100, width: 56, height: 56, borderRadius: 99, background: G8GRAD, 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>
      <GTabs active={3} />
    </div>
  );
};

Object.assign(window, { GoalsAsis, GoalsTobe });