/* Club FRESH — shared UI (exported to window) */

/* ---------------- Icons (stroke, lucide-style) ---------------- */
const ICONS = {
  home: 'M3 10.5 12 3l9 7.5M5 9.5V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5',
  users: 'M16 20v-1.5a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4V20M9 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7M22 20v-1.5a4 4 0 0 0-3-3.8M16 4.2a3.5 3.5 0 0 1 0 6.6',
  activity: 'M3 12h3.5l2.5 7 4-16 2.5 9H21',
  calendar: 'M7 3v3M17 3v3M3.5 9h17M5 5h14a1.5 1.5 0 0 1 1.5 1.5V19A1.5 1.5 0 0 1 19 20.5H5A1.5 1.5 0 0 1 3.5 19V6.5A1.5 1.5 0 0 1 5 5Z',
  user: 'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8',
  settings: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 0 1-4 0v-.1A1.6 1.6 0 0 0 7 19.4a1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0-1.1-2.7H1a2 2 0 0 1 0-4h.1A1.6 1.6 0 0 0 2.6 7a1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3H7a1.6 1.6 0 0 0 1-1.5V1a2 2 0 0 1 4 0v.1a1.6 1.6 0 0 0 2.7 1.1l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8V7a1.6 1.6 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1Z',
  bell: 'M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0',
  search: 'M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM21 21l-4.3-4.3',
  sliders: 'M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6',
  plus: 'M12 5v14M5 12h14',
  arrowUR: 'M7 17 17 7M8 7h9v9',
  arrowL: 'M19 12H5M12 19l-7-7 7-7',
  chevR: 'M9 6l6 6-6 6',
  chevD: 'M6 9l6 6 6-6',
  play: 'M7 4.5v15l12-7.5z',
  pause: 'M8 5v14M16 5v14',
  dumbbell: 'M6.5 6.5 17.5 17.5M3 9l2-2M21 15l-2 2M7 3l4 4M17 21l-4-4M5 11 11 5M13 19l6-6',
  heart: 'M12 20s-7-4.3-9.3-8.5C1 8 2.5 4.5 6 4.5c2 0 3.2 1.2 4 2.3.8-1.1 2-2.3 4-2.3 3.5 0 5 3.5 3.3 7C19 15.7 12 20 12 20Z',
  leaf: 'M11 20A7 7 0 0 1 9.8 6.1C15 3 20 3 20 3s0 5-3.1 10.2A7 7 0 0 1 4 17M4 21c1-4 3-7.5 7-10',
  compass: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20ZM16.2 7.8l-2.1 6.3-6.3 2.1 2.1-6.3 6.3-2.1Z',
  briefcase: 'M3.5 9h17v9.5A1.5 1.5 0 0 1 19 20H5a1.5 1.5 0 0 1-1.5-1.5V9ZM8 9V6a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v3M3.5 13.5h17',
  pin: 'M12 21s-7-5.7-7-11a7 7 0 1 1 14 0c0 5.3-7 11-7 11ZM12 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z',
  clock: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20ZM12 7v5l3 2',
  check: 'M5 12.5 10 17l9-10',
  more: 'M12 6.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2M12 19.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2',
  bars: 'M4 20V10M10 20V4M16 20v-7M22 20v-12',
  x: 'M6 6l12 12M18 6 6 18',
  share: 'M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M16 6l-4-4-4 4M12 2v13',
  spark: 'M12 3l2.2 5.8L20 11l-5.8 2.2L12 19l-2.2-5.8L4 11l5.8-2.2L12 3Z',
  flag: 'M5 21V4M5 4s1.5-1 4-1 4 2 6.5 2S20 4 20 4v9s-2 1-4.5 1S11 12 8.5 12 5 13 5 13',
  sun: 'M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10M12 1v3M12 20v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M1 12h3M20 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1',
  chat: 'M21 11.5a8 8 0 0 1-11.5 7.2L3 21l2.3-6.5A8 8 0 1 1 21 11.5Z',
  bag: 'M6 8h12l-1 12H7L6 8ZM9 8V6a3 3 0 0 1 6 0v2',
};
const PILLAR_ICON = { fitness:'dumbbell', relationships:'heart', environment:'leaf', self:'compass', hustle:'briefcase' };

function Icon({ name, size = 22, sw = 2, style, fill }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill || 'none'}
      stroke={fill ? 'none' : 'currentColor'} strokeWidth={sw}
      strokeLinecap="round" strokeLinejoin="round" style={style} aria-hidden="true">
      <path d={ICONS[name] || ''} />
    </svg>
  );
}

/* ---------------- Glass button ---------------- */
function GlassBtn({ icon, children, dot, onClick, iconOnly, style }) {
  return (
    <button className={'cf-glass' + (iconOnly ? ' cf-icon-only' : '')} onClick={onClick}
      style={{ position: 'relative', ...style }}>
      {icon && <Icon name={icon} size={19} sw={1.9} />}
      {children}
      {dot && <span className="cf-dot" />}
    </button>
  );
}

/* ---------------- Monogram avatar ---------------- */
const PILLAR_HEX = { fitness:'#c07152', relationships:'#d7ad82', environment:'#c69b8b', self:'#748d78', hustle:'#101010' };
function initials(name) {
  const p = name.trim().split(/\s+/);
  return ((p[0]?.[0] || '') + (p[1]?.[0] || '')).toUpperCase();
}
function Monogram({ name, pillar = 'self', size = 48, ring }) {
  const base = PILLAR_HEX[pillar] || '#6e8e77';
  return (
    <span className="cf-mono" style={{
      width: size, height: size,
      fontSize: size * 0.36,
      background: `linear-gradient(145deg, ${base} 0%, ${shade(base, -18)} 100%)`,
      boxShadow: ring ? `0 0 0 3px ${ring}` : 'none',
    }}>
      <span>{initials(name)}</span>
    </span>
  );
}
function shade(hex, p) {
  const n = parseInt(hex.slice(1), 16);
  let r = (n >> 16) + Math.round(2.55 * p);
  let g = ((n >> 8) & 255) + Math.round(2.55 * p);
  let b = (n & 255) + Math.round(2.55 * p);
  r = Math.max(0, Math.min(255, r)); g = Math.max(0, Math.min(255, g)); b = Math.max(0, Math.min(255, b));
  return '#' + (0x1000000 + r * 0x10000 + g * 0x100 + b).toString(16).slice(1);
}

/* ---------------- Semicircle gauge (security-status style) ---------------- */
function Gauge({ value = 78, size = 230, accent = 'var(--cf-accent)', track = 'var(--cf-dark)', label, sub, caption }) {
  const r = size * 0.40, cx = size / 2, cy = size * 0.56, w = size * 0.12;
  const start = -210, end = 30, sweep = end - start;     /* 240° arc */
  const split = start + sweep * (value / 100);
  const gap = 8;
  return (
    <div style={{ position: 'relative', width: size, height: size * 0.66 }}>
      <svg width={size} height={size * 0.66} viewBox={`0 0 ${size} ${size * 0.66}`}>
        <path d={arc(cx, cy, r, start, split - gap)} fill="none" stroke={accent} strokeWidth={w} strokeLinecap="round" />
        <path d={arc(cx, cy, r, split + gap, end)} fill="none" stroke={track} strokeWidth={w} strokeLinecap="round" />
      </svg>
      <div style={{ position: 'absolute', left: 0, right: 0, top: '38%', textAlign: 'center' }}>
        <div className="cf-num" style={{ fontSize: size * 0.21, lineHeight: 1 }}>{label ?? value + '%'}</div>
        {sub && <div style={{ fontSize: 13, color: 'var(--ink-m)', marginTop: 2, fontWeight: 500 }}>{sub}</div>}
      </div>
    </div>
  );
}
function polar(cx, cy, r, deg) {
  const a = (deg) * Math.PI / 180;
  return [cx + r * Math.cos(a), cy + r * Math.sin(a)];
}
function arc(cx, cy, r, a0, a1) {
  const [x0, y0] = polar(cx, cy, r, a0);
  const [x1, y1] = polar(cx, cy, r, a1);
  const large = Math.abs(a1 - a0) > 180 ? 1 : 0;
  return `M ${x0} ${y0} A ${r} ${r} 0 ${large} 1 ${x1} ${y1}`;
}

/* ---------------- Donut ring ---------------- */
function Ring({ value = 70, size = 64, sw = 8, color = 'var(--cf-accent)', track = 'rgba(32,49,76,0.1)', children }) {
  const r = (size - sw) / 2, c = 2 * Math.PI * r;
  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={track} strokeWidth={sw} />
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth={sw}
          strokeLinecap="round" strokeDasharray={c} strokeDashoffset={c * (1 - value / 100)}
          style={{ transition: 'stroke-dashoffset .9s cubic-bezier(.22,1,.36,1)' }} />
      </svg>
      {children && <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{children}</div>}
    </div>
  );
}

/* ---------------- Weekly bar chart (work-time style) ---------------- */
function WeekBars({ data, accent = 'var(--cf-accent)', dark = 'var(--cf-dark)' }) {
  const max = Math.max(...data.map(d => d.v));
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', height: 168, position: 'relative' }}>
      {/* dotted midline */}
      <div style={{ position: 'absolute', left: 0, right: 0, top: '52%', borderTop: '1.5px dotted rgba(202,107,77,0.4)' }} />
      {data.map((d, i) => {
        const h = 22 + (d.v / max) * 110;
        return (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, flex: 1, position: 'relative', zIndex: 1 }}>
            {d.peak && d.label && (
              <div className="cf-card-accent" style={{ position: 'absolute', top: -2, padding: '6px 12px', borderRadius: 999, fontSize: 12, fontWeight: 600, whiteSpace: 'nowrap' }}>{d.label}</div>
            )}
            <div style={{
              width: 10, height: h, borderRadius: 999, marginTop: d.peak ? 34 : 0,
              background: d.peak ? accent : (d.ghost ? 'transparent' : dark),
              border: d.ghost ? '1.5px dashed rgba(32,49,76,0.28)' : 'none',
            }} />
            <div style={{ width: 7, height: 7, borderRadius: '50%', background: d.peak ? accent : (d.ghost ? 'rgba(32,49,76,0.18)' : dark) }} />
            <div style={{ fontSize: 12, color: d.ghost ? 'var(--ink-m)' : 'var(--ink-h)', fontWeight: 500 }}>{d.d}</div>
          </div>
        );
      })}
    </div>
  );
}

/* ---------------- Segmented progress bar (salary-style) ---------------- */
function SegBar({ a, b, total, accent = 'var(--cf-accent)', dark = 'var(--cf-dark)' }) {
  const pa = (a / total) * 100, pb = (b / total) * 100;
  return (
    <div style={{ display: 'flex', height: 10, borderRadius: 999, overflow: 'hidden', background: 'repeating-linear-gradient(115deg, rgba(32,49,76,0.08) 0 5px, rgba(32,49,76,0.03) 5px 9px)' }}>
      <div style={{ width: pa + '%', background: accent }} />
      <div style={{ width: pb + '%', background: dark }} />
    </div>
  );
}

/* ---------------- Momentum line spark (test-statistics style) ---------------- */
function LineChart({ series, other, w = 320, h = 120, accent = 'var(--cf-accent)', point }) {
  const max = Math.max(...series, ...(other || [series])) + 6;
  const min = Math.min(...series, ...(other || [series])) - 6;
  const norm = (arr) => arr.map((v, i) => [ (i / (arr.length - 1)) * w, h - ((v - min) / (max - min)) * h ]);
  const path = (pts) => 'M ' + pts.map(p => p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' L ');
  const sp = norm(series);
  const pi = point ?? Math.floor(series.length / 2);
  const pp = sp[pi];
  return (
    <svg width="100%" viewBox={`0 0 ${w} ${h + 8}`} style={{ overflow: 'visible' }}>
      {other && <path d={path(norm(other))} fill="none" stroke="rgba(255,255,255,0.35)" strokeWidth="2.5" strokeDasharray="2 7" strokeLinecap="round" />}
      <path d={path(sp)} fill="none" stroke={accent} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
      {pp && <>
        <line x1={pp[0]} y1={pp[1]} x2={pp[0]} y2={h} stroke="rgba(255,255,255,0.25)" strokeWidth="1.5" />
        <circle cx={pp[0]} cy={pp[1]} r="5.5" fill="#fff" stroke={accent} strokeWidth="3" />
      </>}
    </svg>
  );
}

Object.assign(window, {
  CF_Icon: Icon, CF_ICONS: ICONS, CF_PILLAR_ICON: PILLAR_ICON, CF_PILLAR_HEX: PILLAR_HEX,
  CF_GlassBtn: GlassBtn, CF_Monogram: Monogram, CF_initials: initials, CF_shade: shade,
  CF_Gauge: Gauge, CF_Ring: Ring, CF_WeekBars: WeekBars, CF_SegBar: SegBar, CF_LineChart: LineChart,
});