/* Stratiphy demo — SHARED CORE
   Brand theme tokens, icon/format helpers, the device PhoneFrame, and the
   shared provider data (PROVIDERS) + Logo/Stroke primitives. Every use-case
   module depends only on this file (+ shared/ios-frame.jsx) — never on the app
   shell or on another use case. Load this after shared/ios-frame.jsx and before
   any usecases/*.jsx. Exports everything onto window. */

/* ===================== BRAND TOKENS ===================== */
const STR_PURPLE = '#5B3DF5'; // brand violet — primary CTAs, strategy accents
const STR_PURPLE_DEEP = '#4A2ED6'; // pressed
const STR_PURPLE_SOFT = '#ECE7FE'; // light violet fills
const STR_GOLD = '#F7B500'; // amber — active tabs / highlights
const STR_GOLD_SOFT = '#FFF2CF';
const STR_GREEN = '#16BE72'; // gains, positive deltas
const STR_GREEN_SOFT = '#E0F6EC';
const STR_INK = '#16161D'; // near-black text

/* ===================== ICON + FORMAT HELPERS ===================== */
/* inline icon helper (line, 2px, rounded — DS iconography) */
function PI({ size = 24, c = STR_INK, w = 1.9, children }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke={c} strokeWidth={w} strokeLinecap="round" strokeLinejoin="round" style={{ display: 'block' }}>
      {children}
    </svg>);

}

/* Stratiphy mark — three-segment donut (portfolio allocation). */
function StratDonut({ size = 24, sw = 5 }) {
  const r = 9;
  const c = 2 * Math.PI * r;
  const seg = (f) => `${(c * f).toFixed(2)} ${(c - c * f).toFixed(2)}`;
  const off = (f) => (-c * f).toFixed(2);
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: 'block', transform: 'rotate(-90deg)' }}>
      <circle cx="12" cy="12" r={r} fill="none" stroke={STR_PURPLE} strokeWidth={sw} strokeDasharray={seg(0.55)} />
      <circle cx="12" cy="12" r={r} fill="none" stroke={STR_GOLD} strokeWidth={sw} strokeDasharray={seg(0.28)} strokeDashoffset={off(0.55)} />
      <circle cx="12" cy="12" r={r} fill="none" stroke={STR_GREEN} strokeWidth={sw} strokeDasharray={seg(0.17)} strokeDashoffset={off(0.83)} />
    </svg>);

}

/* Chat assistant avatar — purple circle with a white pie wedge */
function StratAvatar({ size = 30 }) {
  return (
    <span style={{ width: size, height: size, borderRadius: '50%', background: STR_PURPLE, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
      <svg width={size * 0.58} height={size * 0.58} viewBox="0 0 24 24" style={{ display: 'block' }}>
        <circle cx="12" cy="12" r="8.4" fill="none" stroke="#fff" strokeWidth="2.2" />
        <path d="M12 12V3.6 A8.4 8.4 0 0 1 19.4 8.4 Z" fill="#fff" />
      </svg>
    </span>);

}

function gbp(n) {
  return '£' + n.toLocaleString('en-GB', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

/* big balance — whole large, pence raised + smaller */
function Money({ value, size = 44, color = STR_INK }) {
  const [whole, dec] = value.toFixed(2).split('.');
  return (
    <span style={{ fontFamily: 'var(--font-body)', fontWeight: 700, color, letterSpacing: '-1.2px', fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>
      <span style={{ fontSize: size }}>£{whole}</span>
      <span style={{ fontSize: size * 0.56, verticalAlign: 'baseline' }}>.{dec}</span>
    </span>);

}

/* Stroke — generic SVG icon helper (path via `d` or children) */
function Stroke({ d, size = 24, c = 'rgba(40,46,32,0.72)', w = 1.8, children }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke={c} strokeWidth={w} strokeLinecap="round" strokeLinejoin="round">
      {d && <path d={d} />}{children}
    </svg>);

}

/* ===================== SHARED STYLES ===================== */
const iconBtn = { appearance: 'none', border: 'none', background: 'transparent', padding: 2, cursor: 'pointer', display: 'flex' };
const strIconBtn = { appearance: 'none', border: 'none', background: 'transparent', padding: 2, cursor: 'pointer', display: 'flex', alignItems: 'center' };
const strTabBtn = { appearance: 'none', border: 'none', background: 'transparent', padding: '4px 4px', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5 };

/* ===================== PROVIDERS (shared demo data) ===================== */
const PROVIDERS = [
{ name: 'Barclays', accountType: 'Stocks & Shares ISA', accounts: [{ type: 'Stocks & Shares ISA', balance: 30200.00 }, { type: 'Cash ISA', balance: 24000.00 }], logo: 'images/logos/barclays.png', balance: 54200.00, feeRate: 0.0105, ytd: 2.0, dip: 1.3, isaRate: 4.30, isaTerm: '1-year fixed', monthly: 220 },
{ name: 'Chase', accountType: 'Cash ISA', accounts: [{ type: 'Cash ISA', balance: 18950.40 }], logo: 'images/logos/chase.png', balance: 18950.40, feeRate: 0.0060, ytd: 2.4, dip: 1.6, isaRate: 4.35, isaTerm: 'Easy access', monthly: 180 },
{ name: 'Freetrade', accountType: 'Stocks & Shares ISA', accounts: [{ type: 'Stocks & Shares ISA', balance: 84560.18 }, { type: 'General Investment Account', balance: 40000.00 }], logo: 'images/logos/freetrade.png', balance: 124560.18, feeRate: 0.0042, ytd: 3.8, dip: 2.1, isaRate: 4.55, isaTerm: '1-year fixed', monthly: 450 },
{ name: 'Halifax', accountType: 'Fixed Rate ISA', accounts: [{ type: 'Fixed Rate ISA', balance: 88240.55 }], logo: 'images/logos/halifax.png', balance: 88240.55, feeRate: 0.0115, ytd: 1.9, dip: 1.4, isaRate: 4.25, isaTerm: '1-year fixed', monthly: 200 },
{ name: 'Hargreaves Lansdown', accountType: 'Self-Invested Personal Pension', accounts: [{ type: 'Self-Invested Personal Pension', balance: 140900.00 }, { type: 'Stocks & Shares ISA', balance: 75000.00 }], logo: 'images/logos/hl.png', balance: 215900.00, feeRate: 0.0095, ytd: 2.6, dip: 1.8, isaRate: 4.40, isaTerm: '18-month fixed', monthly: 600 },
{ name: 'HSBC UK', accountType: 'Cash ISA', accounts: [{ type: 'Cash ISA', balance: 41400.00 }, { type: 'Lifetime ISA', balance: 26000.00 }], logo: 'images/logos/hsbc.png', balance: 67400.00, feeRate: 0.0110, ytd: 1.8, dip: 1.2, isaRate: 4.20, isaTerm: '1-year fixed', monthly: 240 },
{ name: 'Interactive Investor', accountType: 'General Investment Account', accounts: [{ type: 'General Investment Account', balance: 92300.00 }, { type: 'Stocks & Shares ISA', balance: 50000.00 }], logo: 'images/logos/ii.png', balance: 142300.00, feeRate: 0.0050, ytd: 3.1, dip: 2.0, isaRate: 4.60, isaTerm: '1-year fixed', monthly: 520 },
{ name: 'Lloyds Bank', accountType: 'Fixed Rate ISA', accounts: [{ type: 'Fixed Rate ISA', balance: 39800.00 }], logo: 'images/logos/lloyds.png', balance: 39800.00, feeRate: 0.0120, ytd: 1.6, dip: 1.1, isaRate: 4.15, isaTerm: 'Easy access', monthly: 160 },
{ name: 'Moneybox', accountType: 'Lifetime ISA', accounts: [{ type: 'Lifetime ISA', balance: 20180.40 }, { type: 'Cash ISA', balance: 12000.00 }], logo: 'images/logos/moneybox.png', balance: 32180.40, feeRate: 0.0070, ytd: 2.2, dip: 1.1, isaRate: 4.65, isaTerm: '1-year fixed', monthly: 250 },
{ name: 'Monzo', accountType: 'Cash ISA', accounts: [{ type: 'Cash ISA', balance: 21450.00 }], logo: 'images/logos/monzo.png', balance: 21450.00, feeRate: 0.0055, ytd: 2.5, dip: 1.7, isaRate: 4.45, isaTerm: 'Easy access', monthly: 190 },
{ name: 'Natwest', accountType: 'Fixed Rate ISA', accounts: [{ type: 'Fixed Rate ISA', balance: 31015.22 }, { type: 'Cash ISA', balance: 15000.00 }], logo: 'images/logos/natwest.png', balance: 46015.22, feeRate: 0.0125, ytd: 1.5, dip: 1.0, isaRate: 4.05, isaTerm: 'Easy access', monthly: 150 },
{ name: 'Revolut', accountType: 'General Investment Account', accounts: [{ type: 'General Investment Account', balance: 12450.75 }], logo: 'images/logos/revolut.png', balance: 12450.75, feeRate: 0.0050, ytd: 4.1, dip: 2.6, isaRate: 4.50, isaTerm: '1-year fixed', monthly: 300 },
{ name: 'Santander UK', accountType: 'UK Occupational Pension', accounts: [{ type: 'UK Occupational Pension', balance: 42900.00 }, { type: 'Cash ISA', balance: 16000.00 }], logo: 'images/logos/santander.png', balance: 58900.00, feeRate: 0.0118, ytd: 1.7, dip: 1.2, isaRate: 4.10, isaTerm: '1-year fixed', monthly: 210 },
{ name: 'Trading 212', accountType: 'Stocks & Shares ISA', accounts: [{ type: 'Stocks & Shares ISA', balance: 108549.64 }, { type: 'General Investment Account', balance: 55000.00 }], logo: 'images/logos/trading212.png', balance: 163549.64, feeRate: 0.0040, ytd: 3.5, dip: 2.3, isaRate: 4.90, isaTerm: '2-year fixed', monthly: 500 }];

/* Provider logo — image with initials-circle fallback. Resolves logo paths
   through window.assetUrl (shared/asset-resolver.js). */
function Logo({ p, size = 42 }) {
  const [failed, setFailed] = React.useState(false);
  const resolve = (typeof window !== 'undefined' && window.assetUrl) ? window.assetUrl : (x) => x;
  if (p.logo && !failed) {
    return (
      <img src={resolve(p.logo)} alt={p.name} onError={() => setFailed(true)} style={{
        width: size, height: size, borderRadius: '50%', objectFit: 'cover',
        flexShrink: 0, display: 'block', background: '#fff'
      }} />);

  }
  const initials = p.mono || (p.name ? p.name.trim()[0].toUpperCase() : '?');
  return (
    <span style={{
      width: size, height: size, borderRadius: '50%', background: p.color || 'var(--midnight)', color: '#fff',
      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      fontFamily: 'var(--font-body)', fontWeight: 700,
      fontSize: initials.length > 1 ? 13 : 17, letterSpacing: initials.length > 1 ? '-0.4px' : 0
    }}>{initials}</span>);

}

/* ===================== DEVICE FRAME ===================== */
function PhoneFrame({ children }) {
  const btn = { position: 'absolute', background: 'linear-gradient(180deg,#3a3a3c,#1c1c1e)', boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.12)' };
  return (
    <div style={{ position: 'relative', padding: 13, borderRadius: 62, background: 'linear-gradient(135deg,#46464a 0%,#1c1c1e 22%,#3a3a3d 50%,#161618 78%,#46464a 100%)', boxShadow: '0 40px 90px rgba(30,20,60,0.4), 0 0 0 1px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.08)' }}>
      <div style={{ position: 'absolute', inset: 9, borderRadius: 54, boxShadow: 'inset 0 0 0 2px rgba(0,0,0,0.85)', pointerEvents: 'none', zIndex: 70 }} />
      <div style={{ ...btn, left: -2.5, top: 152, width: 3.5, height: 30, borderRadius: '3px 0 0 3px' }} />
      <div style={{ ...btn, left: -3, top: 205, width: 4, height: 56, borderRadius: '3px 0 0 3px' }} />
      <div style={{ ...btn, left: -3, top: 275, width: 4, height: 56, borderRadius: '3px 0 0 3px' }} />
      <div style={{ ...btn, right: -3, top: 232, width: 4, height: 86, borderRadius: '0 3px 3px 0' }} />
      {children}
    </div>);

}

Object.assign(window, {
  STR_PURPLE, STR_PURPLE_DEEP, STR_PURPLE_SOFT, STR_GOLD, STR_GOLD_SOFT,
  STR_GREEN, STR_GREEN_SOFT, STR_INK,
  PI, StratDonut, StratAvatar, gbp, Money, strIconBtn, strTabBtn,
  PhoneFrame, Logo, PROVIDERS, Stroke, iconBtn
});