// koryo-messaging.jsx — light-themed messaging chrome (Slack-like layout, original styling)

function MessagingChrome({ unread = false, threadFocus = false, children }) {
  // Light theme: white thread area, cream sidebar, dark text.
  const railBg     = '#4a154b';                  // dark purple workspace rail (workspace tile bg)
  const sidebarBg  = '#f8f8f8';                  // soft warm white sidebar
  const sidebarBorder = 'rgba(15, 18, 40, 0.06)';
  const threadBg   = '#ffffff';
  const ink        = '#1d1c1d';
  const inkSoft    = '#616061';
  const inkMute    = '#868686';
  const accent     = '#1264a3';                  // muted blue links/active

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: sidebarBg,
      display: 'flex',
      fontFamily: KORYO.font,
      color: ink,
    }}>
      {/* Top window bar (traffic lights) */}
      <div style={{
        position: 'absolute', left: 0, right: 0, top: 0, height: 28,
        background: railBg, display: 'flex', alignItems: 'center',
        padding: '0 14px', zIndex: 10, gap: 10,
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <div style={{ width: 11, height: 11, borderRadius: 6, background: '#ff5f57' }}/>
          <div style={{ width: 11, height: 11, borderRadius: 6, background: '#febc2e' }}/>
          <div style={{ width: 11, height: 11, borderRadius: 6, background: '#28c840' }}/>
        </div>
        <div style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 8 }}>
          <div style={{ color: 'rgba(255,255,255,0.55)', fontSize: 11, display: 'flex', gap: 14 }}>
            <span>‹</span><span>›</span>
          </div>
          <div style={{
            background: 'rgba(255,255,255,0.12)', borderRadius: 6, padding: '2px 18px',
            color: 'rgba(255,255,255,0.85)', fontSize: 11.5, minWidth: 480, textAlign: 'center',
          }}>Search Northwind</div>
        </div>
      </div>

      {/* Workspace rail (top icons stay on the colored bar) */}
      <div style={{
        width: 70, marginTop: 28,
        background: railBg,
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        padding: '14px 0 12px', gap: 14,
      }}>
        <div style={{
          width: 38, height: 38, borderRadius: 9,
          background: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontWeight: 800, fontSize: 17, color: '#4a154b',
          boxShadow: '0 0 0 2px rgba(255,255,255,0.8)',
        }}>N</div>
        <div style={{ width: 28, height: 1, background: 'rgba(255,255,255,0.15)' }}/>
        <RailIcon label="Home" active/>
        <RailIcon label="DMs"/>
        <RailIcon label="Activity"/>
        <RailIcon label="Later"/>
        <RailIcon label="More"/>
        <div style={{ flex: 1 }}/>
        <RailIcon label="Add" muted/>
      </div>

      {/* Channel sidebar */}
      <div style={{
        width: 260, marginTop: 28, background: sidebarBg,
        display: 'flex', flexDirection: 'column',
        borderRight: `1px solid ${sidebarBorder}`,
      }}>
        <div style={{
          padding: '12px 18px 10px',
          borderBottom: `1px solid ${sidebarBorder}`,
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          <div style={{ fontWeight: 800, fontSize: 17, letterSpacing: '-0.01em', color: ink }}>Northwind</div>
          <span style={{ fontSize: 10, color: inkMute }}>▾</span>
        </div>
        <div style={{ padding: '8px 6px', overflow: 'hidden' }}>
          <SidebarSection title="Channels" items={[
            { name: 'general' },
            { name: 'product' },
            { name: 'design' },
            { name: 'random' },
          ]} prefix="#"/>
          <SidebarSection title="Direct messages" items={[
            { name: 'Sam Park' },
            { name: 'Riley Chen' },
            { name: 'Morgan Hayes' },
          ]} prefix="●"/>
          <SidebarSection title="Apps" items={[
            { name: 'Calendar', emoji: '📅' },
            { name: 'Gmail Notifier', emoji: '✉' },
            { name: 'Koryo', active: threadFocus, unread: unread, koryo: true },
          ]} prefix=""/>
        </div>
      </div>

      {/* Main thread area */}
      <div style={{
        flex: 1, marginTop: 28, background: threadBg,
        display: 'flex', flexDirection: 'column', minWidth: 0,
        position: 'relative',
      }}>
        {children}
      </div>
    </div>
  );
}

function RailIcon({ label, active = false, muted = false }) {
  return (
    <div style={{
      width: 44, padding: '6px 0',
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
      color: muted ? 'rgba(255,255,255,0.4)' : active ? '#fff' : 'rgba(255,255,255,0.85)',
      background: active ? 'rgba(255,255,255,0.12)' : 'transparent',
      borderRadius: 8,
    }}>
      <div style={{
        width: 22, height: 22, borderRadius: 5,
        border: '1.5px solid currentColor',
        opacity: muted ? 0.4 : 1,
      }}/>
      <div style={{ fontSize: 9.5, fontWeight: 700 }}>{label}</div>
    </div>
  );
}

function SidebarSection({ title, items, prefix }) {
  return (
    <div style={{ marginBottom: 12 }}>
      <div style={{
        padding: '6px 14px',
        fontSize: 12, color: '#616061', fontWeight: 600,
        display: 'flex', alignItems: 'center', gap: 6,
        whiteSpace: 'nowrap',
      }}>
        <span style={{ color: '#868686', fontSize: 10 }}>▾</span>
        <span>{title}</span>
      </div>
      {items.map((it, i) => (
        <div key={i} style={{
          padding: '5px 14px',
          display: 'flex', alignItems: 'center', gap: 8,
          fontSize: 14,
          color: it.active ? '#fff' : it.unread ? '#1d1c1d' : '#1d1c1dcc',
          fontWeight: it.unread ? 700 : 400,
          background: it.active ? '#1264a3' : 'transparent',
          borderRadius: 6,
          margin: '0 6px',
          position: 'relative',
        }}>
          {it.koryo ? (
            <div style={{ width: 16, height: 16, background: '#0e0e1a', borderRadius: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <KoryoMark size={12} color="oklch(78% 0.16 280)"/>
            </div>
          ) : it.emoji ? (
            <span style={{ width: 16, textAlign: 'center', fontSize: 12 }}>{it.emoji}</span>
          ) : (
            <span style={{ width: 14, textAlign: 'center', color: it.active ? 'rgba(255,255,255,0.7)' : '#868686', fontSize: 13 }}>{prefix}</span>
          )}
          <span>{it.name}</span>
          {it.unread && (
            <div style={{
              marginLeft: 'auto',
              minWidth: 18, height: 18,
              padding: '0 6px',
              borderRadius: 9,
              background: '#e01e5a',
              color: '#fff', fontSize: 11, fontWeight: 700,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>1</div>
          )}
        </div>
      ))}
    </div>
  );
}

function MessageThread({ children }) {
  return (
    <div style={{
      flex: 1, padding: '12px 0 0',
      display: 'flex', flexDirection: 'column',
      overflow: 'hidden',
    }}>
      {/* Thread header */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '6px 28px 14px',
        borderBottom: '1px solid rgba(15, 18, 40, 0.08)',
      }}>
        <div style={{ width: 24, height: 24, background: '#0e0e1a', borderRadius: 5, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <KoryoMark size={14} color="oklch(78% 0.16 280)"/>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <div style={{ fontWeight: 800, fontSize: 17, color: '#1d1c1d' }}>Koryo</div>
        </div>
        <div style={{ flex: 1 }}/>
        <div style={{
          padding: '4px 10px', borderRadius: 5,
          fontSize: 12.5, color: '#1264a3', fontWeight: 700,
          border: '1px solid rgba(18,100,163,0.16)',
        }}>Messages</div>
        <div style={{ fontSize: 12.5, color: '#616061' }}>About</div>
      </div>
      <div style={{ flex: 1, padding: '14px 28px 16px', display: 'flex', flexDirection: 'column', gap: 14, overflow: 'hidden' }}>
        {children}
      </div>
    </div>
  );
}

function KoryoDM({ title, body, showButton = true, time = '9:14 AM' }) {
  return (
    <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
      <div style={{ width: 36, height: 36, background: '#0e0e1a', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <KoryoMark size={22} color="oklch(78% 0.16 280)"/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 4 }}>
          <span style={{ fontWeight: 800, fontSize: 15, color: '#1d1c1d' }}>Koryo</span>
          <span style={{ fontSize: 10, color: '#616061', fontWeight: 700, padding: '1px 5px', background: 'rgba(0,0,0,0.06)', borderRadius: 3 }}>APP</span>
          <span style={{ fontSize: 12, color: '#868686' }}>{time}</span>
        </div>
        <div style={{ fontSize: 14.5, fontWeight: 700, color: '#1d1c1d', marginBottom: 4 }}>{title}</div>
        <div style={{ fontSize: 14, color: '#1d1c1d', lineHeight: 1.5, marginBottom: 12, maxWidth: 580 }}>{body}</div>
        {showButton && (
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            background: '#007a5a',
            color: '#fff',
            padding: '9px 16px',
            borderRadius: 4,
            fontSize: 14, fontWeight: 700,
            whiteSpace: 'nowrap',
          }}>
            📋 Answer survey
          </div>
        )}
      </div>
    </div>
  );
}

function ThreadDivider({ label = 'New' }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '4px 0' }}>
      <div style={{ flex: 1, height: 1, background: '#e01e5a55' }}/>
      <div style={{ fontSize: 11, color: '#e01e5a', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{label}</div>
    </div>
  );
}

// ── Survey-answer modal (overlay on messaging app) — LIGHT theme, Slack-modal-ish ─
function SurveyModal({ title, questionLabel, questionNum = 1, options, selected = null, optionsType = 'scale', textValue = '', showSubmit = false, totalQuestions = 9, step = 1, totalSteps = 2 }) {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: 'rgba(20,18,30,0.45)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      zIndex: 30,
    }}>
      <div style={{
        width: 600,
        background: '#fff',
        borderRadius: 10,
        boxShadow: '0 24px 60px rgba(0,0,0,0.25), 0 0 0 1px rgba(15,18,40,0.06)',
        overflow: 'hidden',
      }}>
        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '20px 22px 14px' }}>
          <div style={{ width: 32, height: 32, background: '#0e0e1a', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <KoryoMark size={19} color="oklch(78% 0.16 280)"/>
          </div>
          <div style={{ fontWeight: 800, fontSize: 18, color: '#1d1c1d', flex: 1 }}>{title}</div>
          <div style={{ width: 26, height: 26, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#616061', fontSize: 20 }}>×</div>
        </div>

        {/* Step progress */}
        <div style={{ padding: '0 22px 14px', display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ display: 'flex', gap: 4 }}>
            {Array.from({ length: totalQuestions }).map((_, i) => (
              <div key={i} style={{
                width: 18, height: 18, borderRadius: 3,
                border: '1.5px solid rgba(15,18,40,0.18)',
                background: i < questionNum ? '#007a5a' : 'transparent',
                borderColor: i < questionNum ? '#007a5a' : 'rgba(15,18,40,0.18)',
              }}/>
            ))}
          </div>
          <div style={{ fontSize: 13, color: '#616061', whiteSpace: 'nowrap' }}>
            Step {step} of {totalSteps} · Questions {questionNum}–{Math.min(questionNum + 4, totalQuestions)} of {totalQuestions}
          </div>
        </div>

        <div style={{ height: 1, background: 'rgba(15,18,40,0.08)' }}/>

        <div style={{ padding: '20px 22px 4px' }}>
          {/* Question */}
          <div style={{ fontSize: 15, color: '#1d1c1d', marginBottom: 14, lineHeight: 1.4 }}>
            <span style={{ fontWeight: 800 }}>{questionNum}.</span> {questionLabel}
          </div>

          {/* Scale options */}
          {optionsType === 'scale' && (
            <div style={{
              display: 'flex', gap: 6,
              marginBottom: 12,
            }}>
              {options.map((opt, i) => (
                <div key={i} style={{
                  flex: 1, padding: '11px 0',
                  textAlign: 'center',
                  fontSize: 13, fontWeight: 700,
                  color: selected === i ? '#fff' : '#1d1c1d',
                  background: selected === i ? '#007a5a' : '#fff',
                  border: selected === i ? '1px solid #007a5a' : '1px solid rgba(15,18,40,0.16)',
                  borderRadius: 6,
                  transition: 'background 0.15s, color 0.15s',
                }}>
                  {opt}
                </div>
              ))}
            </div>
          )}

          {optionsType === 'text' && (
            <div style={{
              border: `1.5px solid ${textValue ? '#1264a3' : 'rgba(15,18,40,0.18)'}`,
              background: '#fff',
              borderRadius: 6,
              padding: '12px 14px',
              fontSize: 14,
              color: textValue ? '#1d1c1d' : '#868686',
              marginBottom: 12,
              minHeight: 76,
              lineHeight: 1.5,
              boxShadow: textValue ? '0 0 0 3px rgba(18,100,163,0.15)' : 'none',
            }}>
              {textValue || 'Your answer…'}
            </div>
          )}

          {/* Add comment chip for scale questions */}
          {optionsType === 'scale' && (
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '6px 12px',
              border: '1px solid rgba(15,18,40,0.16)',
              borderRadius: 6,
              fontSize: 12.5, color: '#616061',
              marginBottom: 12,
              whiteSpace: 'nowrap',
            }}>💬 Add comment</div>
          )}
        </div>

        {/* Actions footer */}
        <div style={{ height: 1, background: 'rgba(15,18,40,0.08)' }}/>
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, padding: '14px 22px 18px' }}>
          <div style={{
            padding: '9px 18px',
            border: '1px solid rgba(15,18,40,0.16)',
            borderRadius: 6,
            fontSize: 14, fontWeight: 700,
            color: '#1d1c1d',
            background: '#fff',
            whiteSpace: 'nowrap',
          }}>Cancel</div>
          <div style={{
            padding: '9px 22px',
            background: showSubmit ? '#007a5a' : 'rgba(0,122,90,0.55)',
            color: '#fff',
            borderRadius: 6,
            fontSize: 14, fontWeight: 700,
            whiteSpace: 'nowrap',
          }}>{showSubmit ? 'Submit →' : 'Next →'}</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  MessagingChrome, MessageThread, KoryoDM, ThreadDivider, SurveyModal,
});