// Core TRAiDMIN UI primitives — Mina orb, top nav, dock, sheet, list item.

const TM_YELLOW = '#FEC230';
const TM_BG = '#171717';
const TM_SURFACE = '#262626';
const TM_BORDER = '#404040';
const TM_FG_MUTED = '#D4D4D4';
const TM_FG_SECONDARY = '#B8B8B8';
const TM_FG_TERTIARY = '#808080';

// ── Mina assistant orb ────────────────────────────────────
function MinaOrb({ size = 128, state = 'idle' }) {
  const dim = state === 'idle' ? 0.65 : 1;
  const animate = state === 'listening';
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: 'radial-gradient(circle at 35% 30%, #FECC51 0%, #FEC230 50%, #DC6C3D 100%)',
      boxShadow: `0 0 19px 1.2px rgba(254,194,48,${0.32 * dim}), 0 0 38px 4px rgba(220,108,61,${0.18 * dim})`,
      filter: state === 'idle' ? 'saturate(.7) brightness(.7)' : 'none',
      animation: animate ? 'tmPulse 1.6s ease-in-out infinite' : 'none',
      position: 'relative',
    }}>
      <div style={{
        position:'absolute', inset:'8%', borderRadius:'50%',
        background:'radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 60%)',
      }}/>
      <style>{`@keyframes tmPulse {0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}`}</style>
    </div>
  );
}

// ── Top navigation bar ────────────────────────────────────
function TopNav({ title, left, right, glass = true }) {
  return (
    <div style={{
      position: 'absolute', top: 0, left: 0, right: 0, height: 88,
      background: glass ? 'rgba(23,23,23,0.88)' : 'transparent',
      backdropFilter: glass ? 'blur(20px)' : 'none',
      WebkitBackdropFilter: glass ? 'blur(20px)' : 'none',
      borderBottom: glass ? `1px solid ${TM_BORDER}` : 'none',
      display: 'flex', alignItems: 'flex-end', padding: '0 8px 12px',
      zIndex: 10,
    }}>
      <div style={{ flex: '0 0 64px', display: 'flex', gap: 4 }}>{left}</div>
      <div style={{ flex: 1, textAlign: 'center', color: '#fff', fontSize: 16, fontWeight: 600 }}>{title}</div>
      <div style={{ flex: '0 0 64px', display: 'flex', gap: 4, justifyContent: 'flex-end' }}>{right}</div>
    </div>
  );
}

function NavIconButton({ icon: Icon, onClick, active = false }) {
  return (
    <button onClick={onClick} style={{
      width: 40, height: 40, borderRadius: 6, border: 0, background: 'transparent',
      color: '#fff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
      opacity: active ? 1 : 0.85,
    }}>
      <Icon size={22}/>
    </button>
  );
}

// ── Floating voice/keyboard/menu dock ─────────────────────
function VoiceDock({ mode = 'voice', onModeChange }) {
  const order = ['keyboard', 'voice', 'menu'];
  const idx = order.indexOf(mode);
  return (
    <div style={{
      position: 'absolute', bottom: 80, left: '50%', transform: 'translateX(-50%)',
      width: 168, height: 56, borderRadius: 56,
      background: 'rgba(23,23,23,0.88)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
      border: `1px solid ${TM_BORDER}`, padding: 4, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', alignItems: 'center', zIndex: 9, boxSizing: 'border-box',
    }}>
      <div style={{
        position: 'absolute', top: 4, left: 4 + idx * 52, width: 48, height: 48,
        borderRadius: 48, background: TM_YELLOW, transition: 'left .18s cubic-bezier(.2,.8,.2,1)',
      }}/>
      {order.map((m) => {
        const Icon = m === 'keyboard' ? I.Keyboard : m === 'voice' ? I.Mic : I.Menu;
        const active = mode === m;
        return (
          <button key={m} onClick={() => onModeChange?.(m)} style={{
            height: 48, border: 0, background: 'transparent',
            color: active ? '#000' : '#fff', position: 'relative', zIndex: 1, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0, lineHeight: 0,
          }}>
            <Icon size={22}/>
          </button>
        );
      })}
    </div>
  );
}

// ── Suggestion pill (tap-to-speak) ────────────────────────
function SuggestionPill({ children, onClick }) {
  return (
    <button onClick={onClick} style={{
      height: 36, padding: '0 14px', borderRadius: 56,
      background: 'rgba(23,23,23,0.88)', backdropFilter: 'blur(20px)',
      border: `1px solid ${TM_BORDER}`, color: '#fff', fontSize: 13, fontFamily: 'inherit',
      whiteSpace: 'nowrap', cursor: 'pointer',
    }}>{children}</button>
  );
}

// ── Buttons ───────────────────────────────────────────────
function Button({ variant = 'primary', children, onClick, disabled, full, icon: Icon }) {
  const styles = {
    primary: { background: TM_YELLOW, color: '#000', border: 0 },
    secondary: { background: TM_SURFACE, color: '#fff', border: `1px solid ${TM_BORDER}` },
    ghost: { background: 'transparent', color: '#fff', border: 0 },
  }[variant];
  return (
    <button onClick={onClick} disabled={disabled} style={{
      ...styles, height: 48, padding: '0 20px', borderRadius: 6, fontFamily: 'inherit',
      fontWeight: 500, fontSize: 14, cursor: disabled ? 'not-allowed' : 'pointer',
      opacity: disabled ? .5 : 1, width: full ? '100%' : 'auto',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    }}>
      {Icon && <Icon size={18}/>}
      {children}
    </button>
  );
}

// ── Badge ─────────────────────────────────────────────────
function Badge({ tone = 'neutral', children }) {
  const tones = {
    neutral: { bg: TM_SURFACE, fg: '#D4D4D4' },
    success: { bg: 'rgba(34,197,94,.16)', fg: '#22C55E' },
    info:    { bg: 'rgba(59,130,246,.16)', fg: '#3B82F6' },
    warning: { bg: 'rgba(249,115,22,.16)', fg: '#F97322' },
    alert:   { bg: 'rgba(239,68,68,.16)', fg: '#EF4444' },
  }[tone];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      background: tones.bg, color: tones.fg, padding: '2px 8px',
      borderRadius: 6, fontSize: 11, fontWeight: 500,
    }}>{children}</span>
  );
}

// ── List item (workspace task) ────────────────────────────
function ListItem({ badge, title, description, time, onClick }) {
  return (
    <button onClick={onClick} style={{
      width: '100%', textAlign: 'left', background: TM_SURFACE,
      border: `1px solid ${TM_BORDER}`, borderRadius: 6, padding: '12px 14px',
      display: 'flex', flexDirection: 'column', gap: 6, fontFamily: 'inherit', cursor: 'pointer',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        {badge}
        {time && <span style={{ color: TM_FG_SECONDARY, fontSize: 12 }}>{time}</span>}
      </div>
      {title && <div style={{ color: '#fff', fontSize: 14, fontWeight: 500, lineHeight: '20px' }}>{title}</div>}
      {description && <div style={{ color: TM_FG_MUTED, fontSize: 13, lineHeight: '20px' }}>{description}</div>}
    </button>
  );
}

// ── Bottom sheet ──────────────────────────────────────────
function BottomSheet({ open, onClose, title, children }) {
  if (!open) return null;
  return (
    <>
      <div onClick={onClose} style={{
        position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.5)', zIndex: 20,
      }}/>
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        background: TM_BG, border: `1px solid ${TM_BORDER}`, borderBottom: 0,
        borderRadius: '16px 16px 0 0', padding: '8px 16px 24px', zIndex: 21,
        animation: 'tmSlideUp .25s cubic-bezier(.2,.8,.2,1)',
      }}>
        <div style={{ width: 40, height: 4, background: '#525252', borderRadius: 9999, margin: '6px auto 14px' }}/>
        {title && <h2 style={{ margin: '0 0 8px', color: '#fff', fontSize: 18, fontWeight: 600 }}>{title}</h2>}
        {children}
        <style>{`@keyframes tmSlideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}`}</style>
      </div>
    </>
  );
}

// ── Voice transcription strip ─────────────────────────────
function VoiceTranscript({ text }) {
  if (!text) return null;
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 152,
      padding: '14px 24px',
      background: 'linear-gradient(to top, rgba(23,23,23,0.88), rgba(23,23,23,0))',
      backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
      color: TM_YELLOW, fontWeight: 500, fontSize: 16, lineHeight: '24px', textAlign: 'right',
      zIndex: 8,
    }}>{text}</div>
  );
}

// ── Quote line item (equipment / labour / material) ────────
function QuoteLineItem({ qty, label, sub, price, onEdit }) {
  return (
    <div style={{
      background: TM_SURFACE, border: `1px solid ${TM_BORDER}`, borderRadius: 6,
      padding: 12, display: 'flex', flexDirection: 'column', gap: 6,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
        <div style={{ flex: 1 }}>
          <div style={{ color: '#fff', fontSize: 14, fontWeight: 600, lineHeight: '20px' }}>
            {qty && <span style={{ color: TM_FG_SECONDARY, fontWeight: 400, marginRight: 8 }}>{qty}×</span>}
            {label}
          </div>
          {sub && <div style={{ color: TM_FG_SECONDARY, fontSize: 12, lineHeight: '18px', marginTop: 2 }}>{sub}</div>}
        </div>
        <div style={{ color: '#fff', fontWeight: 700, fontSize: 14, fontVariantNumeric: 'tabular-nums' }}>{price}</div>
      </div>
      {onEdit && (
        <button onClick={onEdit} style={{
          background: 'transparent', border: 0, color: TM_YELLOW, fontSize: 12,
          fontFamily: 'inherit', padding: 0, alignSelf: 'flex-start', cursor: 'pointer',
        }}>Edit details</button>
      )}
    </div>
  );
}

// ── Section header ────────────────────────────────────────
function SectionHeader({ children, action }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
      <span style={{ color: TM_FG_MUTED, fontSize: 12, fontWeight: 700, letterSpacing: 0 }}>{children}</span>
      {action}
    </div>
  );
}

// expose
Object.assign(window, {
  MinaOrb, TopNav, NavIconButton, VoiceDock, SuggestionPill, Button, Badge,
  ListItem, BottomSheet, VoiceTranscript, QuoteLineItem, SectionHeader,
  TM_YELLOW, TM_BG, TM_SURFACE, TM_BORDER, TM_FG_MUTED, TM_FG_SECONDARY, TM_FG_TERTIARY,
});