// AiSetter design tokens — editorial calm on cool clinical foundation
// Cool slates + ice blue, one vivid cobalt accent. Instrument Serif display,
// Inter UI, JetBrains Mono numerals. These are applied as CSS vars via
// <TokensStyle/> so Tweaks can override them live.

const AS_TOKENS = {
  // neutrals — cool slate
  ink:       '#14181d',   // near-black, slight cool
  ink2:      '#2a2f36',
  body:      '#404851',
  muted:     '#6b7481',
  faint:     '#9aa3af',
  hair:      '#d8dde4',
  rule:      '#e6eaf0',
  tint:      '#eef1f5',
  paper:     '#f5f6f8',   // canvas bg
  card:      '#ffffff',
  // accents
  ice:       '#d8e4ef',   // soft ice-blue — secondary surface
  iceDeep:   '#4a6e8a',   // deeper ice
  cobalt:    '#1e4fd8',   // vivid accent (CTAs, selections, key ink)
  cobaltSoft:'#eef3ff',
  // semantic signals (used sparingly as chips/dots, never as fills)
  hot:       '#c2410c',   // amber-red for hot / red triage
  hotSoft:   '#fbece1',
  warn:      '#a87a14',   // yellow complex
  warnSoft:  '#f6ecd6',
  good:      '#2f6b4f',   // booked / won
  goodSoft:  '#e3efe8',
  cool:      '#405a78',
  // typography
  serif:     '"Instrument Serif", "Iowan Old Style", "Palatino", Georgia, serif',
  sans:      'Inter, "Helvetica Neue", Helvetica, Arial, sans-serif',
  mono:      '"JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace',
};

// CSS var injection — also includes global rules so every AiSetter artboard
// inherits Inter + tight-ish rhythm.
function AsTokensStyle() {
  return (
    <style>{`
      @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
      .as {
        --ink: ${AS_TOKENS.ink}; --ink2: ${AS_TOKENS.ink2}; --body: ${AS_TOKENS.body};
        --muted: ${AS_TOKENS.muted}; --faint: ${AS_TOKENS.faint};
        --hair: ${AS_TOKENS.hair}; --rule: ${AS_TOKENS.rule}; --tint: ${AS_TOKENS.tint};
        --paper: ${AS_TOKENS.paper}; --card: ${AS_TOKENS.card};
        --ice: ${AS_TOKENS.ice}; --ice-deep: ${AS_TOKENS.iceDeep};
        --accent: ${AS_TOKENS.cobalt}; --accent-soft: ${AS_TOKENS.cobaltSoft};
        --hot: ${AS_TOKENS.hot}; --hot-soft: ${AS_TOKENS.hotSoft};
        --warn: ${AS_TOKENS.warn}; --warn-soft: ${AS_TOKENS.warnSoft};
        --good: ${AS_TOKENS.good}; --good-soft: ${AS_TOKENS.goodSoft};
        --cool: ${AS_TOKENS.cool};
        --serif: ${AS_TOKENS.serif};
        --sans: ${AS_TOKENS.sans};
        --mono: ${AS_TOKENS.mono};
        font-family: var(--sans);
        font-feature-settings: 'ss01', 'cv11';
        color: var(--ink);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
      }
      .as, .as * { box-sizing: border-box; }
      .as .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
      .as .mono  { font-family: var(--mono); font-variant-numeric: tabular-nums; }
      .as .micro { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
      .as .rule  { border: 0; border-top: 1px solid var(--rule); margin: 0; }
      .as ::-webkit-scrollbar { width: 10px; height: 10px; }
      .as ::-webkit-scrollbar-thumb { background: #d4d9e0; border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
      .as ::-webkit-scrollbar-track { background: transparent; }
      .as button { font-family: inherit; }
      .as input, .as textarea { font-family: inherit; color: inherit; }
    `}</style>
  );
}

// Tiny reusable glyphs — monochrome, 1.5px, inherit color
const AsIcon = {
  Search: (p) => <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" {...p}><circle cx="6" cy="6" r="4.5"/><path d="M9.5 9.5L13 13"/></svg>,
  Send:   (p) => <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M1 7l12-5-5 12-2-5-5-2z"/></svg>,
  Spark:  (p) => <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" {...p}><path d="M6 .5v4M6 7.5v4M.5 6h4M7.5 6h4M2.5 2.5l2 2M7.5 7.5l2 2M9.5 2.5l-2 2M4.5 7.5l-2 2"/></svg>,
  Check:  (p) => <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M2 6.5l2.5 2.5L10 3"/></svg>,
  Plus:   (p) => <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" {...p}><path d="M6 1v10M1 6h10"/></svg>,
  Chev:   (p) => <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M3 1l4 4-4 4"/></svg>,
  Dot:    (p) => <svg width="8" height="8" viewBox="0 0 8 8" {...p}><circle cx="4" cy="4" r="3" fill="currentColor"/></svg>,
  Refresh:(p) => <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M10.5 2v3h-3M1.5 10V7h3"/><path d="M2.2 5a4 4 0 017.1-1M9.8 7a4 4 0 01-7.1 1"/></svg>,
  Phone:  (p) => <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M3 1.5h1.5L5.5 4 4 5a7 7 0 003 3l1-1.5 2.5 1V9c0 .8-.7 1.5-1.5 1.5A9 9 0 011.5 3C1.5 2.2 2.2 1.5 3 1.5z"/></svg>,
  Cal:    (p) => <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" {...p}><rect x="1.5" y="2.5" width="9" height="8" rx="1"/><path d="M1.5 5h9M4 1v3M8 1v3"/></svg>,
  Flag:   (p) => <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M2.5 11V1.5h6l-1.2 2L8.5 5.5h-6"/></svg>,
  Tag:    (p) => <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M1.5 6.5V1.5h5L10.5 5.5 6.5 9.5 1.5 6.5z"/><circle cx="4" cy="4" r=".6" fill="currentColor"/></svg>,
  Clock:  (p) => <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" {...p}><circle cx="6" cy="6" r="4.5"/><path d="M6 3.5V6l1.8 1.2"/></svg>,
  Bolt:   (p) => <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" {...p}><path d="M6.5 1L2 7h3l-.5 4L9 5H6l.5-4z"/></svg>,
  Link:   (p) => <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" {...p}><path d="M5 3H3.5a2.5 2.5 0 100 5H5M7 3h1.5a2.5 2.5 0 010 5H7M4 5.5h4"/></svg>,
  User:   (p) => <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" {...p}><circle cx="6" cy="4" r="2"/><path d="M2 10.5a4 4 0 018 0"/></svg>,
};

// Avatar — initials on a cool tint, stable color hash
function AsAvatar({ name = '', size = 28, dark = false }) {
  const initials = name.split(' ').map(s => s[0]).filter(Boolean).slice(0,2).join('').toUpperCase() || '·';
  let h = 0; for (const c of name) h = (h * 31 + c.charCodeAt(0)) % 360;
  const bg = `oklch(0.92 0.02 ${h})`;
  const fg = `oklch(0.35 0.04 ${h})`;
  return (
    <div style={{
      width: size, height: size, borderRadius: size, flexShrink: 0,
      background: dark ? `oklch(0.28 0.02 ${h})` : bg,
      color: dark ? `oklch(0.78 0.04 ${h})` : fg,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: Math.round(size * 0.38), fontWeight: 600, letterSpacing: 0.2,
      fontFamily: 'var(--sans)',
    }}>{initials}</div>
  );
}

// Reused dataset — placeholder chiropractic/wellness leads for consistency
const AS_LEADS = [
  { id:'1', name:'Maren Alsop',   handle:'@maren.a',       score:94, queue:'hot',    stage:'Hot',       pain:'Lower back', dur:'8 mo', loc:'Austin, TX',    time:'2m',   preview:'can you text the booking link? ready to go', unread:2, color:'hot'   },
  { id:'2', name:'Jules Chen',    handle:'@jchen.moves',   score:88, queue:'needs',  stage:'Engaged',   pain:'Sciatica',   dur:'3 mo', loc:'Brooklyn, NY',  time:'11m',  preview:'I felt weird tingling down my leg yest…',    unread:1, color:'needs' },
  { id:'3', name:'Priya Raman',   handle:'@priya_r',       score:72, queue:'auto',   stage:'Qualifying',pain:'Neck',       dur:'2 yr', loc:'San Jose, CA',  time:'18m',  preview:'hmm i tried yoga it didn\u2019t really help…',  unread:0, color:'auto'  },
  { id:'4', name:'Conor Boyle',   handle:'@c.boyle',       score:61, queue:'complex',stage:'Objection', pain:'Shoulder',   dur:'6 mo', loc:'Dublin, IE',    time:'42m',  preview:'is the $400 price the only option or…',       unread:1, color:'warn'  },
  { id:'5', name:'Sasha Romero',  handle:'@sasharomero',   score:55, queue:'needs',  stage:'Engaged',   pain:'Mid back',   dur:'1 yr', loc:'Miami, FL',     time:'1h',   preview:'mornings are rough, then it eases up',        unread:1, color:'needs' },
  { id:'6', name:'Ben Okafor',    handle:'@ben.okafor',    score:47, queue:'ghost',  stage:'Ghosted',   pain:'Lower back', dur:'4 mo', loc:'Chicago, IL',   time:'3h',   preview:'(no reply in 4 days)',                        unread:0, color:'ghost' },
  { id:'7', name:'Lila Hartmann', handle:'@lilah',         score:81, queue:'hot',    stage:'Hot',       pain:'Headache',   dur:'3 yr', loc:'Denver, CO',    time:'4h',   preview:'mon morning works, like 9ish?',               unread:0, color:'hot'   },
  { id:'8', name:'Tomás Silva',   handle:'@tomas.s',       score:33, queue:'blocked',stage:'Blocked',   pain:'\u2014',     dur:'\u2014',loc:'Lisbon, PT',    time:'5h',   preview:'spam / offers other services',                unread:0, color:'blocked'},
  { id:'9', name:'Rae Whitaker',  handle:'@rae.w',         score:77, queue:'red',    stage:'Triage',    pain:'Chest',      dur:'—',    loc:'Portland, OR',  time:'6h',   preview:'mentioned dizziness + numbness in arm',       unread:1, color:'hot'   },
  { id:'10',name:'Nathan Imari',  handle:'@nate.imari',    score:66, queue:'followup',stage:'Follow-up',pain:'Lower back', dur:'1 yr', loc:'Phoenix, AZ',   time:'1d',   preview:'(last contact 4 days ago — due)',             unread:0, color:'needs' },
  { id:'11',name:'Ellery Dawes',  handle:'@ellery',        score:92, queue:'booked', stage:'Booked',    pain:'Hip',        dur:'6 mo', loc:'Seattle, WA',   time:'1d',   preview:'see you wed at 10. thanks!',                  unread:0, color:'good'  },
  { id:'12',name:'Ines Gallardo', handle:'@ines.g',        score:89, queue:'hot',    stage:'Hot',       pain:'Neck',       dur:'5 mo', loc:'Madrid, ES',    time:'2d',   preview:'ok sending photo of MRI report now',          unread:0, color:'hot'   },
];

const AS_QUEUES = [
  { k:'red',     label:'Red / Safety',   ct:2,   dot:'hot'   },
  { k:'complex', label:'Complex',        ct:14,  dot:'warn'  },
  { k:'needs',   label:'Needs reply',    ct:28,  dot:'accent'},
  { k:'auto',    label:'Auto timer',     ct:7,   dot:'muted' },
  { k:'autosent',label:'Auto sent',      ct:142, dot:'muted' },
  { k:'hot',     label:'Hot',            ct:19,  dot:'hot'   },
  { k:'followup',label:'Follow-up due',  ct:23,  dot:'accent'},
  { k:'read',    label:'Left on read',   ct:41,  dot:'muted' },
  { k:'ghost',   label:'Ghosted',        ct:86,  dot:'muted' },
  { k:'booked',  label:'Booked',         ct:11,  dot:'good'  },
  { k:'won',     label:'Closed won',     ct:58,  dot:'good'  },
  { k:'lost',    label:'Closed lost',    ct:23,  dot:'muted' },
  { k:'all',     label:'All',            ct:2266,dot:'muted' },
];

// sample chat thread for detail panel
const AS_THREAD = [
  { from:'them', t:'Hey! saw your post about the sciatica stuff',        at:'yesterday 6:42p' },
  { from:'them', t:'I\u2019ve had nagging lower back for like 8 months now, physio kinda helped but it keeps coming back',  at:'yesterday 6:42p' },
  { from:'us',   t:'Totally hear you — that \u201cpatch then return\u201d cycle is the most frustrating part. Can I ask two quick things so I point you to the right thing?',  at:'yesterday 7:04p', by:'AI' },
  { from:'them', t:'yeah ofc',                                            at:'yesterday 7:15p' },
  { from:'us',   t:'1) Is it more morning-stiffness or end-of-day ache? 2) Does it refer down either leg?',  at:'yesterday 7:15p', by:'AI' },
  { from:'them', t:'mornings are way worse, and yeah some tingling down my right leg when i sit too long',  at:'today 9:12a' },
  { from:'them', t:'can you text the booking link? ready to go',          at:'today 9:14a' },
];

Object.assign(window, { AS_TOKENS, AsTokensStyle, AsIcon, AsAvatar, AS_LEADS, AS_QUEUES, AS_THREAD });