// Klairely app — shared UI primitives, icons, chrome
// Exports to window: Icon, Avatar, TabBar, ScreenHead, PrimaryBtn, GhostBtn,
//                    ActionRow, Toast, Chip, SectionLabel

const K = {
  paper:'#F7F4EE', paper2:'#F1EBDF', surface:'#FFFFFF', surfaceSoft:'#FCFAF5', surfaceTint:'#FBF8F1',
  ink:'#2B2722', ink2:'#5B544A', ink3:'#8B8273',
  line:'#E7E0D2', line2:'#EFE9DC',
  sage:'#5E7C66', sageDeep:'#496150', sageTint:'#E6EDE4', sageTint2:'#D5E1D3', sageInk:'#34503D',
  coral:'#CE6F4F', coralDeep:'#B85B3E', coralTint:'#F8E6DC', coralInk:'#9A4A30',
  night:'#2A2722',
  sans:'"Hanken Grotesk", -apple-system, system-ui, sans-serif',
  serif:'"Newsreader", Georgia, serif',
};
window.K = K;

// ── Icons ─────────────────────────────────────────────
function Icon({ name, size = 22, stroke = 'currentColor', sw = 1.7, fill = 'none', style }) {
  const p = { fill:'none', stroke, strokeWidth:sw, strokeLinecap:'round', strokeLinejoin:'round' };
  const paths = {
    mail:        <g {...p}><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 7.5l8.5 5.5 8.5-5.5"/></g>,
    chat:        <g {...p}><path d="M21 11.5a8.5 8.5 0 01-12.2 7.7L3 21l1.8-5.8A8.5 8.5 0 1121 11.5z"/></g>,
    calendar:    <g {...p}><rect x="3.5" y="5" width="17" height="15" rx="2.5"/><path d="M3.5 9.5h17M8 3v4M16 3v4"/></g>,
    user:        <g {...p}><circle cx="12" cy="8" r="3.4"/><path d="M5 20c0-3.4 3.1-5.6 7-5.6s7 2.2 7 5.6"/></g>,
    clock:       <g {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.2 2"/></g>,
    check:       <g {...p}><path d="M4 12l5 5L20 6"/></g>,
    checkCircle: <g {...p}><circle cx="12" cy="12" r="9"/><path d="M8 12l2.5 2.5L16 9"/></g>,
    alert:       <g {...p}><path d="M12 3l9 16H3L12 3z"/><path d="M12 10v4M12 16.6v.2"/></g>,
    reply:       <g {...p}><path d="M9 7L4 12l5 5M4 12h11a5 5 0 015 5v1"/></g>,
    doc:         <g {...p}><rect x="5" y="3" width="14" height="18" rx="2.5"/><path d="M9 8h6M9 12h6M9 16h4"/></g>,
    camera:      <g {...p}><path d="M4 8h3l1.5-2h7L17 8h3a1 1 0 011 1v9a1 1 0 01-1 1H4a1 1 0 01-1-1V9a1 1 0 011-1z"/><circle cx="12" cy="13" r="3.4"/></g>,
    send:        <g {...p}><path d="M21 4L3 11l6 2.5L12 20l3-7 6-9z"/><path d="M9 13.5L21 4"/></g>,
    sparkle:     <g {...p}><path d="M12 3v3M12 18v3M4.5 12h-3M22.5 12h-3M6.3 6.3l2 2M17.7 17.7l-2-2M6.3 17.7l2-2M17.7 6.3l-2 2"/></g>,
    shield:      <g {...p}><path d="M12 2l8 3v5c0 5-3.4 8.8-8 10-4.6-1.2-8-5-8-10V5l8-3z"/><path d="M8.5 12l2.3 2.3L16 9" strokeWidth={sw+.1}/></g>,
    plus:        <g {...p}><path d="M12 5v14M5 12h14"/></g>,
    chevron:     <g {...p}><path d="M9 5l7 7-7 7"/></g>,
    chevDown:    <g {...p}><path d="M5 9l7 7 7-7"/></g>,
    back:        <g {...p}><path d="M15 5l-7 7 7 7"/></g>,
    x:           <g {...p}><path d="M6 6l12 12M18 6L6 18"/></g>,
    clip:        <g {...p}><path d="M21 11l-8.5 8.5a4.5 4.5 0 01-6.4-6.4L14 5a3 3 0 014.2 4.2L9.8 17.6a1.5 1.5 0 01-2.1-2.1L15 8"/></g>,
    bell:        <g {...p}><path d="M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 01-3.4 0"/></g>,
    lock:        <g {...p}><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 018 0v3"/></g>,
    eye:         <g {...p}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></g>,
    trash:       <g {...p}><path d="M5 7h14M9 7V5h6v2M7 7l1 13h8l1-13"/></g>,
    sync:        <g {...p}><path d="M3 12a9 9 0 0115-6.7L21 8M21 12a9 9 0 01-15 6.7L3 16"/><path d="M21 4v4h-4M3 20v-4h4"/></g>,
    pin:         <g {...p}><path d="M12 21s7-6.3 7-11a7 7 0 10-14 0c0 4.7 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></g>,
    flag:        <g {...p}><path d="M5 21V4M5 5h11l-2 4 2 4H5"/></g>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={style} aria-hidden="true">
      {paths[name] || null}
    </svg>
  );
}

// ── Avatar (monogram) ─────────────────────────────────
function Avatar({ initials, bg = K.sage, size = 38, fz }) {
  return (
    <div style={{
      width:size, height:size, borderRadius:'50%', background:bg, color:'#fff',
      display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
      fontFamily:K.sans, fontWeight:700, fontSize:fz || size*0.36, letterSpacing:'-.01em',
    }}>{initials}</div>
  );
}

// ── Buttons ───────────────────────────────────────────
function PrimaryBtn({ children, onClick, style, coral, disabled }) {
  return (
    <button onClick={onClick} disabled={disabled} style={{
      fontFamily:K.sans, fontWeight:600, fontSize:16, border:'none', borderRadius:999,
      padding:'15px 22px', cursor:disabled?'default':'pointer', color:'#fff',
      background: disabled ? K.line : (coral ? K.coral : K.sage),
      boxShadow: disabled ? 'none' : `0 3px 10px ${coral?'rgba(184,91,62,.28)':'rgba(73,97,80,.28)'}`,
      display:'flex', alignItems:'center', justifyContent:'center', gap:9,
      transition:'transform .12s ease, background .2s', width:'100%',
      ...style,
    }}
    onMouseDown={e=>e.currentTarget.style.transform='scale(.985)'}
    onMouseUp={e=>e.currentTarget.style.transform='none'}
    onMouseLeave={e=>e.currentTarget.style.transform='none'}>
      {children}
    </button>
  );
}
function GhostBtn({ children, onClick, style }) {
  return (
    <button onClick={onClick} style={{
      fontFamily:K.sans, fontWeight:600, fontSize:16, borderRadius:999,
      padding:'14px 22px', cursor:'pointer', color:K.ink, background:'transparent',
      border:`1.5px solid ${K.line}`, display:'flex', alignItems:'center', justifyContent:'center', gap:8,
      width:'100%', transition:'background .2s', ...style,
    }}
    onMouseEnter={e=>e.currentTarget.style.background=K.surfaceTint}
    onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
      {children}
    </button>
  );
}

// ── Chip ──────────────────────────────────────────────
function Chip({ children, tone = 'neutral', style }) {
  const map = {
    sage:   { background:K.sageTint, color:K.sageInk },
    coral:  { background:K.coralTint, color:K.coralInk },
    neutral:{ background:K.paper2, color:K.ink2 },
    outline:{ background:'transparent', color:K.ink3, border:`1px solid ${K.line}` },
  };
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap:6, fontFamily:K.sans, fontWeight:600,
      fontSize:12, letterSpacing:'.01em', padding:'5px 10px', borderRadius:999, ...map[tone], ...style,
    }}>{children}</span>
  );
}

function SectionLabel({ children, style }) {
  return <div style={{
    fontFamily:K.sans, fontWeight:700, fontSize:11.5, letterSpacing:'.12em', textTransform:'uppercase',
    color:K.ink3, margin:'0 0 12px', ...style,
  }}>{children}</div>;
}

// ── App header (greeting + large serif title) ─────────
function ScreenHead({ greet, title, onBack, right, dark }) {
  const ink = dark ? '#fff' : K.ink;
  return (
    <div style={{ padding:'8px 22px 14px' }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', minHeight:30 }}>
        {onBack ? (
          <button onClick={onBack} aria-label="Back" style={{
            width:38, height:38, borderRadius:'50%', border:`1px solid ${dark?'rgba(255,255,255,.18)':K.line}`,
            background:dark?'rgba(255,255,255,.06)':K.surface, display:'flex', alignItems:'center', justifyContent:'center',
            cursor:'pointer', marginLeft:-4,
          }}><Icon name="back" size={18} stroke={ink}/></button>
        ) : <span/>}
        {right || <span/>}
      </div>
      {greet && <div style={{ fontFamily:K.sans, fontWeight:600, fontSize:12.5, color: dark?'rgba(255,255,255,.6)':K.ink3, letterSpacing:'.02em', marginTop:10 }}>{greet}</div>}
      {title && <div style={{ fontFamily:K.serif, fontSize:30, fontWeight:500, color:ink, letterSpacing:'-.015em', lineHeight:1.08, marginTop:2 }}>{title}</div>}
    </div>
  );
}

// ── Bottom tab bar ────────────────────────────────────
function TabBar({ active, onNav }) {
  const tabs = [
    { id:'inbox', name:'Inbox', icon:'mail' },
    { id:'chat', name:'Chat', icon:'chat' },
    { id:'briefing', name:'Briefing', icon:'calendar' },
    { id:'settings', name:'Privacy', icon:'shield' },
  ];
  return (
    <div style={{
      display:'flex', justifyContent:'space-around', alignItems:'center',
      padding:'10px 14px 26px', borderTop:`1px solid ${K.line2}`,
      background:'rgba(252,250,245,.92)', backdropFilter:'blur(10px)', WebkitBackdropFilter:'blur(10px)',
    }}>
      {tabs.map(t => {
        const on = active === t.id;
        return (
          <button key={t.id} onClick={()=>onNav(t.id)} style={{
            border:'none', background:'none', cursor:'pointer', display:'flex', flexDirection:'column',
            alignItems:'center', gap:4, padding:'4px 10px', flex:1,
          }}>
            <Icon name={t.icon} size={23} stroke={on?K.sage:K.ink3} sw={on?1.9:1.7}/>
            <span style={{ fontFamily:K.sans, fontSize:10.5, fontWeight:on?700:500, color:on?K.sage:K.ink3 }}>{t.name}</span>
          </button>
        );
      })}
    </div>
  );
}

// ── Toast ─────────────────────────────────────────────
function Toast({ show, children }) {
  return (
    <div style={{
      position:'absolute', left:16, right:16, bottom: show ? 96 : 70, zIndex:80,
      opacity: show ? 1 : 0, transform: show ? 'translateY(0)' : 'translateY(10px)',
      transition:'opacity .35s ease, transform .35s ease, bottom .35s ease',
      pointerEvents:'none',
    }}>
      <div style={{
        background:K.night, color:'#fff', borderRadius:16, padding:'13px 16px',
        display:'flex', alignItems:'center', gap:11, boxShadow:'0 12px 30px rgba(0,0,0,.25)',
        fontFamily:K.sans, fontSize:14, fontWeight:500,
      }}>
        <div style={{ width:24, height:24, borderRadius:'50%', background:K.sage, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
          <Icon name="check" size={15} stroke="#fff" sw={2.4}/>
        </div>
        {children}
      </div>
    </div>
  );
}

Object.assign(window, { Icon, Avatar, PrimaryBtn, GhostBtn, Chip, SectionLabel, ScreenHead, TabBar, Toast });