// ============================================================
// Alumnus — shared primitives, demo data, common chrome
// ============================================================
// All shared atoms live here. Components in screen files import
// from window.AL.* (see bottom of file).

// ─────────────────────────────────────────────────────────────
// Demo personas + data (per the brief)
// ─────────────────────────────────────────────────────────────
const AL_MEMBER = {
  first: 'Anna',
  last: 'Reyes',
  initials: 'AR',
  classYear: '2026',
  graduation: 'April 4, 2026',
  program: 'Pine Tree Recovery — Residential',
  location: 'St. Petersburg, FL',
  pronouns: 'she / her',
  daysGraduated: 45,
  daysGraduatedLabel: 'Day 45',
  email: 'anna.reyes@hey.com',
  phone: '+1 (727) 555 0184',
  joinedOn: 'Apr 5, 2026',
};

const AL_PARTNER = {
  first: 'Maria',
  last: 'Reyes',
  initials: 'MR',
  relation: 'Mother',
  city: 'St. Petersburg, FL',
};

const AL_SPONSOR = {
  first: 'Beth',
  last: 'Whelan',
  initials: 'BW',
  relation: 'Sponsor · 8 months',
};

const AL_CLINICIAN = {
  first: 'Caleb',
  last: 'Singh',
  honorific: 'Dr.',
  initials: 'CS',
  role: 'Alumni Coordinator',
  organization: 'Pine Tree Recovery',
  email: 'caleb.singh@pinetreerecovery.org',
};

// ─────────────────────────────────────────────────────────────
// Phosphor icon
// ─────────────────────────────────────────────────────────────
const AlIcon = ({ name, size = 20, color, weight = 'regular', style = {} }) =>
  React.createElement('i', {
    className: `ph${weight === 'fill' ? '-fill' : ''} ph-${name}`,
    style: { fontSize: size, color: color || 'inherit', lineHeight: 1, ...style },
  });

// ─────────────────────────────────────────────────────────────
// Brand mark (the Letterform A)
// ─────────────────────────────────────────────────────────────
const AlCrest = ({ size = 32, dark = false, brassDot = true }) => {
  const stroke = dark ? '#F2EDE2' : '#14181F';
  const w = size;
  const h = size * 1.25;
  return (
    <svg width={w} height={h} viewBox="0 0 64 84" fill="none">
      <path d="M 32 4 L 8 70" stroke={stroke} strokeWidth="3.5" strokeLinecap="square"/>
      <path d="M 32 4 L 56 70" stroke={stroke} strokeWidth="3.5" strokeLinecap="square"/>
      <path d="M 0 80 L 64 80" stroke={stroke} strokeWidth="2.5" strokeLinecap="square"/>
      {brassDot && <circle cx="32" cy="4" r="2.4" fill="#A8843C"/>}
    </svg>
  );
};

const AlLockup = ({ size = 14, dark = false, spacing = 10 }) => {
  const color = dark ? '#F2EDE2' : '#14181F';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: spacing }}>
      <AlCrest size={size * 1.6} dark={dark} />
      <span style={{
        fontFamily: 'Spectral, Source Serif 4, Georgia, serif',
        fontSize: size, letterSpacing: '0.22em', fontWeight: 500,
        color, textTransform: 'uppercase',
      }}>Alumnus</span>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// Avatar — initials in an Ivy/Bone tile (small radius, no soft pill)
// ─────────────────────────────────────────────────────────────
const AlAvatar = ({ initials, size = 40, tone = 'ivy', radius = 4 }) => {
  const tones = {
    ivy:    { bg: '#1E3A2E', fg: '#F2EDE2' },
    brass:  { bg: '#A8843C', fg: '#14181F' },
    moss:   { bg: '#4F6A4A', fg: '#F2EDE2' },
    stone:  { bg: '#6B6A63', fg: '#F2EDE2' },
    oat:    { bg: '#E6DECC', fg: '#1E3A2E' },
  }[tone];
  return (
    <div style={{
      width: size, height: size, borderRadius: radius,
      background: tones.bg, color: tones.fg,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: 'Spectral, Source Serif 4, Georgia, serif',
      fontSize: size * 0.4, fontWeight: 500, flexShrink: 0,
      letterSpacing: '0.01em',
    }}>{initials}</div>
  );
};

// ─────────────────────────────────────────────────────────────
// Buttons (Alumnus restraint — no scale, no glow)
// ─────────────────────────────────────────────────────────────
const AlButton = ({ children, variant = 'primary', size = 'md', icon, iconRight, full = false, onClick, style = {} }) => {
  const sizes = {
    sm: { pad: '8px 14px', fs: 13, gap: 6 },
    md: { pad: '13px 20px', fs: 15, gap: 8 },
    lg: { pad: '15px 24px', fs: 16, gap: 10 },
  }[size];
  const variants = {
    primary:   { bg: 'var(--color-ivy)', fg: 'var(--color-bone)', border: 'none' },
    brass:     { bg: 'var(--color-brass)', fg: 'var(--color-ink)', border: 'none' },
    secondary: { bg: 'transparent', fg: 'var(--color-ivy)', border: '1px solid var(--color-ivy)' },
    ghost:     { bg: 'transparent', fg: 'var(--fg-primary)', border: '1px solid var(--border-hairline)' },
    quiet:     { bg: 'transparent', fg: 'var(--fg-secondary)', border: 'none' },
    danger:    { bg: 'var(--color-ember)', fg: 'var(--color-bone)', border: 'none' },
  }[variant];
  return (
    <button onClick={onClick} style={{
      ...variants, padding: sizes.pad, fontSize: sizes.fs,
      fontFamily: 'var(--font-body)', fontWeight: 500,
      borderRadius: 8, cursor: 'pointer',
      width: full ? '100%' : undefined,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      gap: sizes.gap, lineHeight: 1.2,
      ...style,
    }}>
      {icon && <AlIcon name={icon} size={sizes.fs + 2}/>}
      {children}
      {iconRight && <AlIcon name={iconRight} size={sizes.fs + 2}/>}
    </button>
  );
};

// ─────────────────────────────────────────────────────────────
// Eyebrow / label / hairline
// ─────────────────────────────────────────────────────────────
const AlEyebrow = ({ children, tone = 'tertiary', style = {} }) => {
  const colors = {
    tertiary: 'var(--fg-tertiary)',
    brass: 'var(--color-brass-dark)',
    bone: 'rgba(242,237,226,0.7)',
    ember: 'var(--color-ember)',
  };
  return (
    <div style={{
      fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase',
      color: colors[tone], fontWeight: 500, ...style,
    }}>{children}</div>
  );
};

const AlHair = ({ vertical = false, style = {} }) => (
  <div style={{
    background: 'var(--border-hairline)',
    width: vertical ? 1 : '100%',
    height: vertical ? '100%' : 1,
    ...style,
  }}/>
);

// ─────────────────────────────────────────────────────────────
// Status pill (used for "Steady", "Worth a look", etc.)
// ─────────────────────────────────────────────────────────────
const AlPill = ({ tone = 'moss', children, dot = true, style = {} }) => {
  const tones = {
    moss:    { bg: 'rgba(79,106,74,0.14)',   fg: '#3F5A3A' },
    brass:   { bg: 'rgba(168,132,60,0.16)',  fg: '#8A6A2E' },
    ember:   { bg: 'rgba(140,63,42,0.12)',   fg: '#8C3F2A' },
    ink:     { bg: 'rgba(20,24,31,0.06)',    fg: '#14181F' },
    bone:    { bg: 'rgba(242,237,226,0.16)', fg: '#F2EDE2' },
    oat:     { bg: '#E6DECC',                fg: '#2C2E33' },
    moss_strong: { bg: '#4F6A4A',            fg: '#F2EDE2' },
    ember_strong: { bg: '#8C3F2A',           fg: '#F2EDE2' },
  };
  const t = tones[tone] || tones.moss;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 7,
      padding: '4px 10px', borderRadius: 999,
      background: t.bg, color: t.fg,
      fontSize: 11.5, fontWeight: 500, letterSpacing: '0.01em',
      lineHeight: 1.3, ...style,
    }}>
      {dot && <span style={{ width: 5, height: 5, borderRadius: 999, background: t.fg }}/>}
      {children}
    </span>
  );
};

// ─────────────────────────────────────────────────────────────
// Card (no shadow, 1px hairline, radius 4)
// ─────────────────────────────────────────────────────────────
const AlCard = ({ children, surface = 'bone', padding = 18, style = {} }) => {
  const bg = surface === 'bone' ? 'var(--bg-surface)'
           : surface === 'page' ? 'var(--bg-page)'
           : surface === 'ivy'  ? 'var(--color-ivy)'
           : surface === 'white' ? 'var(--bg-elevated)'
           : 'var(--bg-surface)';
  return (
    <div style={{
      background: bg, border: '1px solid var(--border-hairline)',
      borderRadius: 4, padding, ...style,
    }}>{children}</div>
  );
};

// ─────────────────────────────────────────────────────────────
// Tab bar (mobile bottom nav, used across many screens)
// ─────────────────────────────────────────────────────────────
const AlTabBar = ({ active = 'home', onNav = () => {}, absolute = true }) => {
  const tab = (key, icon, label) => {
    const on = active === key;
    return (
      <button key={key} onClick={() => onNav(key)} style={{
        flex: 1, padding: '10px 0 4px', background: 'transparent', border: 'none',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
        color: on ? 'var(--color-ivy)' : 'var(--color-stone)',
        fontFamily: 'var(--font-body)', fontSize: 10.5, fontWeight: 500,
        cursor: 'pointer',
      }}>
        <AlIcon name={icon} size={22} weight={on ? 'fill' : 'regular'}/>
        <span>{label}</span>
      </button>
    );
  };
  return (
    <div style={{
      position: absolute ? 'absolute' : 'static',
      left: 0, right: 0, bottom: 0,
      paddingBottom: 28, background: 'var(--bg-page)',
      borderTop: '1px solid var(--border-hairline)',
      display: 'flex', zIndex: 5,
    }}>
      {tab('home', 'house-line', 'Home')}
      {tab('meetings', 'calendar-blank', 'Meetings')}
      {tab('trends', 'chart-line', 'Trends')}
      {tab('community', 'users-three', 'Community')}
      {tab('profile', 'graduation-cap', 'Alumnus')}
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// Phone shell (simpler than the iOS-26 frame for canvas use)
// ─────────────────────────────────────────────────────────────
const AlPhone = ({ children, width = 360, height = 760, label, dark = false }) => {
  // Inner status bar color depends on the screen's substrate
  const sbColor = dark ? '#F2EDE2' : '#14181F';
  return (
    <div style={{
      width, height, borderRadius: 44, overflow: 'hidden',
      position: 'relative',
      background: dark ? 'var(--color-ivy)' : 'var(--bg-page)',
      boxShadow: '0 24px 60px -20px rgba(20,24,31,0.18), 0 0 0 1px rgba(20,24,31,0.10), inset 0 0 0 6px #14181F',
      fontFamily: 'var(--font-body)', color: 'var(--fg-primary)',
    }}>
      {/* dynamic island */}
      <div style={{
        position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)',
        width: 112, height: 32, borderRadius: 22, background: '#14181F', zIndex: 50,
      }}/>
      {/* status bar */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, zIndex: 20,
        padding: '18px 28px 14px', display: 'flex', justifyContent: 'space-between',
        alignItems: 'center', pointerEvents: 'none',
      }}>
        <span style={{ fontSize: 15, fontWeight: 600, color: sbColor, fontVariantNumeric: 'tabular-nums' }}>9:41</span>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
          <svg width="18" height="11" viewBox="0 0 19 12"><rect x="0" y="7.5" width="3.2" height="4.5" rx="0.7" fill={sbColor}/><rect x="4.8" y="5" width="3.2" height="7" rx="0.7" fill={sbColor}/><rect x="9.6" y="2.5" width="3.2" height="9.5" rx="0.7" fill={sbColor}/><rect x="14.4" y="0" width="3.2" height="12" rx="0.7" fill={sbColor}/></svg>
          <svg width="14" height="11" viewBox="0 0 17 12"><path d="M8.5 3.2C10.8 3.2 12.9 4.1 14.4 5.6L15.5 4.5C13.7 2.7 11.2 1.5 8.5 1.5C5.8 1.5 3.3 2.7 1.5 4.5L2.6 5.6C4.1 4.1 6.2 3.2 8.5 3.2Z" fill={sbColor}/><path d="M8.5 6.8C9.9 6.8 11.1 7.3 12 8.2L13.1 7.1C11.8 5.9 10.2 5.1 8.5 5.1C6.8 5.1 5.2 5.9 3.9 7.1L5 8.2C5.9 7.3 7.1 6.8 8.5 6.8Z" fill={sbColor}/><circle cx="8.5" cy="10.5" r="1.5" fill={sbColor}/></svg>
          <svg width="24" height="12" viewBox="0 0 27 13"><rect x="0.5" y="0.5" width="23" height="12" rx="3.5" stroke={sbColor} strokeOpacity="0.4" fill="none"/><rect x="2" y="2" width="20" height="9" rx="2" fill={sbColor}/></svg>
        </div>
      </div>
      {/* content */}
      <div style={{ height: '100%', overflow: 'hidden' }}>{children}</div>
      {/* home indicator */}
      <div style={{
        position: 'absolute', bottom: 8, left: '50%', transform: 'translateX(-50%)',
        width: 110, height: 4, borderRadius: 100, zIndex: 60,
        background: dark ? 'rgba(242,237,226,0.7)' : 'rgba(20,24,31,0.4)',
      }}/>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// Browser shell (for partner portal & provider console mocks)
// ─────────────────────────────────────────────────────────────
const AlBrowser = ({ children, url = 'app.alumnus.care', width = 1280, height = 820, style = {}, mobile = false }) => (
  <div style={{
    width, height, borderRadius: 10, overflow: 'hidden',
    background: 'var(--bg-elevated)',
    boxShadow: '0 24px 60px -20px rgba(20,24,31,0.18), 0 0 0 1px rgba(20,24,31,0.10)',
    fontFamily: 'var(--font-body)', color: 'var(--fg-primary)',
    display: 'flex', flexDirection: 'column', ...style,
  }}>
    {/* chrome */}
    <div style={{
      height: 40, background: '#E6DECC', borderBottom: '1px solid var(--border-hairline)',
      display: 'flex', alignItems: 'center', padding: '0 14px', gap: 10,
    }}>
      <div style={{ display: 'flex', gap: 6 }}>
        {['#E27676','#E6B952','#7FA973'].map(c => (
          <span key={c} style={{ width: 11, height: 11, borderRadius: 999, background: c }}/>
        ))}
      </div>
      <div style={{
        flex: 1, height: 24, background: 'var(--bg-page)', borderRadius: 6,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 11.5, color: 'var(--fg-tertiary)', letterSpacing: 0.04,
      }}>
        <AlIcon name="lock-simple" size={11} style={{ marginRight: 5 }}/>
        {url}
      </div>
      <div style={{ display: 'flex', gap: 12, color: 'var(--color-stone)' }}>
        <AlIcon name="arrow-clockwise" size={14}/>
        <AlIcon name="share-network" size={14}/>
      </div>
    </div>
    {/* content */}
    <div style={{ flex: 1, overflow: 'hidden', background: 'var(--bg-page)' }}>{children}</div>
  </div>
);

// ─────────────────────────────────────────────────────────────
// Sparkline / mini chart helpers (used everywhere)
// ─────────────────────────────────────────────────────────────
const AlSparkline = ({ data, width = 240, height = 50, stroke = 'var(--color-ivy)', fill = null, dots = false }) => {
  const max = Math.max(...data, 1);
  const min = Math.min(...data, 0);
  const range = (max - min) || 1;
  const pts = data.map((v, i) => {
    const x = (i / Math.max(1, data.length - 1)) * (width - 8) + 4;
    const y = height - 4 - ((v - min) / range) * (height - 8);
    return [x, y];
  });
  const d = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0]},${p[1]}`).join(' ');
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
      {fill && <path d={`${d} L${width-4},${height-4} L4,${height-4} Z`} fill={fill}/>}
      <path d={d} stroke={stroke} strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      {dots && pts.map(([x,y],i) => <circle key={i} cx={x} cy={y} r="2" fill={stroke}/>)}
    </svg>
  );
};

const AlBars = ({ data, width = 240, height = 50, color = 'var(--color-ivy)', accentIndices = [], accentColor = 'var(--color-brass)', gap = 4 }) => {
  const max = Math.max(...data, 1);
  const barW = (width - gap * (data.length - 1)) / data.length;
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
      {data.map((v, i) => {
        const h = (v / max) * (height - 6);
        const x = i * (barW + gap);
        const y = height - h;
        return <rect key={i} x={x} y={y} width={barW} height={h} rx="1.5"
                     fill={accentIndices.includes(i) ? accentColor : color}/>;
      })}
    </svg>
  );
};

// ─────────────────────────────────────────────────────────────
// Permission card (used in 1.5)
// ─────────────────────────────────────────────────────────────
const AlPermissionCard = ({ icon, title, why, control, allowLabel = "Allow", onAllow, onSkip }) => (
  <div style={{ padding: '40px 28px', display: 'flex', flexDirection: 'column', height: '100%', boxSizing: 'border-box' }}>
    <div style={{
      width: 56, height: 56, borderRadius: 4,
      background: 'var(--color-ivy)', color: 'var(--color-bone)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      marginBottom: 28,
    }}>
      <AlIcon name={icon} size={26}/>
    </div>
    <h2 style={{
      fontFamily: 'var(--font-display)', fontSize: 28, lineHeight: '34px',
      fontWeight: 400, letterSpacing: '-0.012em', margin: '0 0 16px',
    }}>{title}</h2>
    <p style={{
      fontSize: 15.5, lineHeight: '23px', color: 'var(--fg-secondary)', margin: '0 0 12px',
    }}>{why}</p>
    <p style={{
      fontSize: 13.5, lineHeight: '20px', color: 'var(--fg-tertiary)',
      margin: '0 0 auto', fontStyle: 'italic',
      fontFamily: 'var(--font-display)',
    }}>{control}</p>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 32 }}>
      <AlButton variant="primary" full onClick={onAllow}>{allowLabel}</AlButton>
      <AlButton variant="quiet" full onClick={onSkip}>Skip — I'll lose this</AlButton>
    </div>
  </div>
);

// ─────────────────────────────────────────────────────────────
// Export to window for cross-script access
// ─────────────────────────────────────────────────────────────
window.AL = {
  MEMBER: AL_MEMBER,
  PARTNER: AL_PARTNER,
  SPONSOR: AL_SPONSOR,
  CLINICIAN: AL_CLINICIAN,
  Icon: AlIcon,
  Crest: AlCrest,
  Lockup: AlLockup,
  Avatar: AlAvatar,
  Button: AlButton,
  Eyebrow: AlEyebrow,
  Hair: AlHair,
  Pill: AlPill,
  Card: AlCard,
  TabBar: AlTabBar,
  Phone: AlPhone,
  Browser: AlBrowser,
  Sparkline: AlSparkline,
  Bars: AlBars,
  PermissionCard: AlPermissionCard,
};