// Named components for DE Support Workspace
// All components export to window for cross-script use.

const ClaudeGlyph = ({ size = 10 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" aria-hidden="true">
    <path d="M12 2 L14.2 9.8 L22 12 L14.2 14.2 L12 22 L9.8 14.2 L2 12 L9.8 9.8 Z" />
  </svg>
);

// 1. Surface
const Surface = ({ children, style, className = '', ...rest }) => (
  <div className={`surface ${className}`} style={style} {...rest}>{children}</div>
);

// 2. ChatBubble
const ChatBubble = ({ from = 'user', children, style }) => {
  if (from === 'user') {
    return (
      <div style={{ display: 'flex', justifyContent: 'flex-end', ...style }}>
        <div style={{
          background: 'var(--cream-deeper)',
          borderRadius: '16px',
          padding: '12px 16px',
          maxWidth: '80%',
          fontSize: '15px',
          lineHeight: 1.55,
          color: 'var(--ink)'
        }}>{children}</div>
      </div>
    );
  }
  return (
    <div style={{ display: 'flex', gap: '12px', alignItems: 'flex-start', ...style }}>
      <Avatar kind="claude" />
      <div style={{ flex: 1, fontSize: '16px', lineHeight: 1.55, color: 'var(--ink)', paddingTop: '1px' }}>
        {children}
      </div>
    </div>
  );
};

// 3. StatusDot
const StatusDot = ({ kind = 'routine', size = 6, style }) => {
  const colors = {
    'high': 'var(--accent)',
    'routine': 'var(--ink-faint)',
    'good': 'var(--good)',
    'waiting': 'var(--line-ink)',
  };
  return (
    <span style={{
      display: 'inline-block',
      width: size, height: size,
      borderRadius: '50%',
      background: colors[kind],
      flex: '0 0 auto',
      ...style
    }} />
  );
};

// 4. Avatar
const Avatar = ({ kind = 'claude', initial = 'A', color = '#7a8b6f', size = 20, style }) => {
  if (kind === 'claude') {
    return (
      <div style={{
        width: size, height: size,
        borderRadius: '50%',
        background: 'var(--accent)',
        color: 'white',
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        flex: '0 0 auto',
        ...style
      }}>
        <ClaudeGlyph size={size * 0.6} />
      </div>
    );
  }
  return (
    <div style={{
      width: size, height: size,
      borderRadius: '50%',
      background: color,
      color: 'white',
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: size * 0.5,
      fontWeight: 600,
      letterSpacing: 0,
      flex: '0 0 auto',
      ...style
    }}>{initial}</div>
  );
};

// 5. OptionCard
// emphasis: "high" → ~10% more interior padding (used for recommended item)
//           "low"  → title and body in --ink-secondary; lower visual weight
const OptionCard = ({ recommended = false, emphasis = 'normal', title, meta, children, footer }) => {
  const padY = emphasis === 'high' ? 22 : 18;
  const padX = emphasis === 'high' ? 22 : 20;
  const dim = emphasis === 'low';
  return (
    <div style={{
      background: recommended ? 'var(--white)' : 'transparent',
      border: '1px solid var(--line)',
      borderLeft: recommended ? '3px solid var(--accent)' : '1px solid var(--line)',
      borderRadius: '12px',
      padding: `${padY}px ${padX}px`,
      position: 'relative',
    }}>
      {recommended && (
        <div style={{
          fontSize: '11px',
          fontWeight: 500,
          color: 'var(--accent)',
          marginBottom: '6px',
          letterSpacing: 0,
        }}>Recommended</div>
      )}
      <div style={{ fontSize: '16px', fontWeight: 500, color: dim ? 'var(--ink-secondary)' : 'var(--ink)', marginBottom: '4px' }}>{title}</div>
      {meta && <div style={{ fontSize: '13px', color: 'var(--ink-faint)', marginBottom: '8px' }}>{meta}</div>}
      {children && <div style={{ fontSize: '14px', color: dim ? 'var(--ink-faint)' : 'var(--ink-secondary)', lineHeight: 1.55 }}>{children}</div>}
      {footer && <div style={{ marginTop: '12px', paddingTop: '12px', borderTop: '1px solid var(--line-soft)', fontSize: '13px', color: 'var(--ink-faint)' }}>{footer}</div>}
    </div>
  );
};

// 6. BrowserChrome — slim. Desktop-only product, no mobile toggle.
const BrowserChrome = ({ url = 'practice.example.com' }) => (
  <div style={{
    background: 'var(--paper)',
    borderBottom: '1px solid var(--line)',
    padding: '8px 14px',
    display: 'flex',
    alignItems: 'center',
    gap: '12px',
    flex: '0 0 auto',
    minHeight: 38,
  }}>
    <div style={{ display: 'flex', gap: '5px' }}>
      <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#e8675a' }} />
      <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#e3b341' }} />
      <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#7bbd6c' }} />
    </div>
    <div style={{
      flex: 1,
      background: 'var(--white)',
      border: '1px solid var(--line)',
      borderRadius: '9999px',
      padding: '3px 10px',
      fontSize: '11px',
      color: 'var(--ink-faint)',
      display: 'flex',
      alignItems: 'center',
      gap: '6px',
      maxWidth: '420px',
      margin: '0 auto',
      lineHeight: 1.4,
    }}>
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ flex: '0 0 auto' }}>
        <rect x="5" y="11" width="14" height="9" rx="1.5" />
        <path d="M8 11 V8 a4 4 0 0 1 8 0 v3" />
      </svg>
      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{url}</span>
    </div>
    <div style={{ width: 30 }} aria-hidden="true" />
  </div>
);

// 7. Pill
const Pill = ({ variant = 'mode', children, style }) => {
  const styles = {
    mode: { background: 'var(--cream-deeper)', color: 'var(--ink-secondary)', border: '1px solid var(--line-soft)' },
    accent: { background: 'var(--accent-soft)', color: 'var(--accent)', border: 'none' },
    quiet: { background: 'transparent', color: 'var(--ink-faint)', border: '1px solid var(--line)' },
    solid: { background: 'var(--ink)', color: 'var(--cream)', border: 'none' },
  };
  return (
    <span style={{
      display: 'inline-flex',
      alignItems: 'center',
      gap: '6px',
      padding: '3px 10px',
      borderRadius: '9999px',
      fontSize: '12px',
      fontWeight: 500,
      lineHeight: 1.3,
      ...styles[variant],
      ...style,
    }}>{children}</span>
  );
};

// 8. ChecklistItem
const ChecklistItem = ({ state = 'pending', children, sub }) => {
  const box = {
    done: { bg: 'var(--accent)', border: 'var(--accent)', icon: 'check' },
    'in-progress': { bg: 'var(--cream)', border: 'var(--accent)', icon: 'dot' },
    question: { bg: 'var(--cream)', border: 'var(--accent)', icon: 'q' },
    pending: { bg: 'var(--cream)', border: 'var(--line-ink)', icon: null },
  }[state];
  return (
    <div style={{ display: 'flex', gap: '12px', alignItems: 'flex-start', padding: '6px 0' }}>
      <div style={{
        width: 18, height: 18, borderRadius: '50%',
        background: box.bg,
        border: state === 'done' ? `1.5px solid ${box.border}` : `1.5px solid ${box.border}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flex: '0 0 auto', marginTop: '1px',
      }}>
        {box.icon === 'check' && (
          <svg width="10" height="10" viewBox="0 0 16 16" fill="none" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 8 L7 12 L13 4" /></svg>
        )}
        {box.icon === 'dot' && <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)' }} />}
        {box.icon === 'q' && <span style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 600, lineHeight: 1 }}>?</span>}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontSize: '14px',
          color: state === 'done' ? 'var(--ink-faint)' : 'var(--ink)',
          textDecoration: state === 'done' ? 'line-through' : 'none',
          textDecorationColor: state === 'done' ? 'var(--ink-faint)' : 'inherit',
        }}>{children}</div>
        {sub && <div style={{ fontSize: '12px', color: 'var(--ink-faint)', marginTop: '2px' }}>{sub}</div>}
      </div>
    </div>
  );
};

// 9. EmptySlot
const EmptySlot = ({ children, style, height = 120 }) => (
  <div style={{
    border: '1.5px dashed var(--line-ink)',
    borderRadius: '8px',
    background: 'var(--cream)',
    color: 'var(--ink-faint)',
    fontSize: '13px',
    padding: '14px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center',
    minHeight: height,
    ...style,
  }}>{children}</div>
);

// 10. MetaLine
const MetaLine = ({ items = [], style }) => (
  <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '0', fontSize: '12px', color: 'var(--ink-faint)', fontWeight: 500, ...style }}>
    {items.map((it, i) => (
      <React.Fragment key={i}>
        {i > 0 && <span style={{ margin: '0 8px', color: 'var(--ink-faint)' }}>·</span>}
        <span>{it}</span>
      </React.Fragment>
    ))}
  </div>
);

// 11. AccountBriefSection
const AccountBriefSection = ({ title, children, style }) => (
  <section style={{ marginBottom: '48px', ...style }}>
    <h2 className="head-22" style={{ marginBottom: '20px', color: 'var(--ink)' }}>{title}</h2>
    <div style={{ fontSize: '16px', lineHeight: 1.65, color: 'var(--ink-secondary)' }}>{children}</div>
  </section>
);

// 12. ChangeHighlight
const ChangeHighlight = ({ children }) => (
  <span className="change-highlight">{children}</span>
);

// 13. LivePulse
const LivePulse = ({ label = 'Auto-refreshing', sub }) => (
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', fontSize: '12px', color: 'var(--ink-faint)', fontWeight: 500 }}>
    <span className="pulse-wrap"><span className="pulse-ring" /><span className="pulse-dot" /></span>
    <span>{label}{sub && <span style={{ color: 'var(--ink-faint)' }}> · {sub}</span>}</span>
  </div>
);

// 14. Button
const Button = ({ variant = 'primary', children, style, ...rest }) => {
  const base = {
    fontSize: '13px',
    fontWeight: 500,
    padding: '8px 14px',
    borderRadius: '8px',
    display: 'inline-flex',
    alignItems: 'center',
    gap: '6px',
    transition: 'background 120ms ease, color 120ms ease',
    lineHeight: 1.2,
  };
  const variants = {
    primary: { ...base, background: 'var(--ink)', color: 'var(--cream)' },
    accent: { ...base, background: 'var(--accent)', color: 'white' },
    secondary: { ...base, background: 'var(--white)', color: 'var(--ink)', border: '1px solid var(--line)' },
    ghost: { ...base, background: 'transparent', color: 'var(--ink-secondary)', border: '1px solid transparent' },
    pill: { ...base, background: 'var(--ink)', color: 'var(--cream)', borderRadius: '9999px', padding: '8px 18px' },
  };
  return <button style={{ ...variants[variant], ...style }} {...rest}>{children}</button>;
};

// 15. Input
const Input = ({ placeholder, style, ...rest }) => (
  <input placeholder={placeholder} style={{
    width: '100%',
    background: 'var(--white)',
    border: '1px solid var(--line)',
    borderRadius: '12px',
    padding: '10px 14px',
    fontSize: '14px',
    color: 'var(--ink)',
    outline: 'none',
    ...style,
  }} {...rest} />
);

// Composite: chat input footer
const ChatComposer = ({ placeholder = 'Reply to Claude…', footer }) => (
  <div style={{
    background: 'var(--white)',
    border: '1px solid var(--line)',
    borderRadius: '16px',
    padding: '12px 14px',
  }}>
    <textarea
      placeholder={placeholder}
      rows={1}
      style={{
        width: '100%',
        border: 0,
        outline: 'none',
        resize: 'none',
        background: 'transparent',
        fontSize: '14px',
        color: 'var(--ink)',
        lineHeight: 1.5,
        fontFamily: 'inherit',
        padding: 0,
      }}
    />
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: '8px' }}>
      <div style={{ fontSize: '12px', color: 'var(--ink-faint)' }}>{footer}</div>
      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
        <span style={{ fontSize: '11px', color: 'var(--ink-faint)', fontWeight: 500 }}>⌘↵</span>
        <button style={{
          width: 26, height: 26, borderRadius: '8px',
          background: 'var(--ink)', color: 'var(--cream)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M8 13 V3 M4 7 L8 3 L12 7" />
          </svg>
        </button>
      </div>
    </div>
  </div>
);

// Practice-name header shell
const PracticeHeader = ({ name, meta, clickable = true }) => (
  <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--line)', flex: '0 0 auto' }}>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '12px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', minWidth: 0 }}>
        <Pill variant="mode">Practice mode</Pill>
        <span style={{ color: 'var(--ink-faint)', fontSize: '13px' }}>·</span>
        <span className="head-22" style={{ fontSize: '18px', color: 'var(--ink)', cursor: clickable ? 'pointer' : 'default', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
          {name}
          {clickable && (
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" style={{ opacity: 0.4 }}>
              <path d="M6 4 L10 8 L6 12" />
            </svg>
          )}
        </span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flex: '0 0 auto' }}>
        <span style={{ fontSize: '12px', color: 'var(--ink-faint)' }}>Jeni K.</span>
        <Avatar kind="user" initial="J" color="#9a7a5e" size={22} />
      </div>
    </div>
    {meta && <div style={{ marginTop: '6px' }}>{meta}</div>}
  </div>
);

// Two-column shell used by case views
const TwoCol = ({ chat, preview, chatWidth = 480 }) => (
  <div style={{ display: 'flex', height: '100%', minHeight: 0 }}>
    <div style={{ width: chatWidth, flex: '0 0 auto', borderRight: '1px solid var(--line)', background: 'var(--cream)', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
      {chat}
    </div>
    <div style={{ flex: 1, background: 'var(--paper)', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
      {preview}
    </div>
  </div>
);

// Top global nav (slim)
const TopNav = ({ active = 'queue' }) => (
  <div style={{
    height: '44px',
    background: 'var(--cream)',
    borderBottom: '1px solid var(--line)',
    display: 'flex',
    alignItems: 'center',
    padding: '0 16px',
    gap: '20px',
    flex: '0 0 auto',
    fontSize: '13px',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontWeight: 600 }}>
      <div style={{ width: 18, height: 18, borderRadius: '4px', background: 'var(--ink)', color: 'var(--cream)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: '11px', fontFamily: 'var(--serif)', fontWeight: 500 }}>D</div>
      <span style={{ fontSize: '13px', fontWeight: 500 }}>Support</span>
    </div>
    <div style={{ display: 'flex', gap: '2px' }}>
      {[
        ['queue', 'Queue'],
        ['accounts', 'Accounts'],
        ['library', 'Library'],
        ['inbox', 'Inbox'],
      ].map(([k, label]) => (
        <span key={k} style={{
          padding: '5px 10px',
          borderRadius: '6px',
          background: active === k ? 'var(--cream-deeper)' : 'transparent',
          color: active === k ? 'var(--ink)' : 'var(--ink-faint)',
          fontWeight: active === k ? 500 : 400,
          cursor: 'pointer',
        }}>{label}</span>
      ))}
    </div>
    <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: '12px' }}>
      <span style={{ fontSize: '12px', color: 'var(--ink-faint)' }}>⌘K</span>
    </div>
  </div>
);

Object.assign(window, {
  ClaudeGlyph,
  Surface, ChatBubble, StatusDot, Avatar, OptionCard, BrowserChrome,
  Pill, ChecklistItem, EmptySlot, MetaLine, AccountBriefSection,
  ChangeHighlight, LivePulse, Button, Input, ChatComposer,
  PracticeHeader, TwoCol, TopNav,
});