// Chrome.jsx - V2 최종 디자인 (파란 헤더 & 회색 단색 탭바)

function SoritalkHeader({ title, subtitle, onLogout }) {
  const t = window.THEME || { brand: '#2563eb' };
  return (
    <header style={{ 
      padding: '16px 20px', 
      background: t.brand, // 신뢰감 있는 파란색 헤더
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      position: 'sticky', top: 0, zIndex: 10
    }}>
      <div>
        <div style={{ fontSize: 20, fontWeight: 900, color: '#fff', letterSpacing: '-0.02em' }}>{title}</div>
        <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.8)', fontWeight: 500 }}>
          {subtitle}
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ 
          width: 36, height: 36, borderRadius: 12, 
          background: 'rgba(255,255,255,0.2)', // 세련된 반투명 프로필
          display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18 
        }}>👤</div>
        {onLogout && (
          <button onClick={onLogout} style={{ 
            background: 'none', border: '1px solid rgba(255,255,255,0.3)', 
            padding: '4px 8px', borderRadius: 6, fontSize: 11, color: '#fff', cursor: 'pointer' 
          }}>로그아웃</button>
        )}
      </div>
    </header>
  );
}

function SoritalkTabBar({ active, onNav, isLocked }) {
  const t = window.THEME || { brand: '#2563eb' };
  
  // V2 가이드: 회색 한 톤의 전문적인 선형 아이콘들
  const tabs = [
    { id: 'home', label: '홈', path: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" },
    { id: 'inspect', label: '점검', path: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" },
    { id: 'record', label: '기록부', path: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" },
    { id: 'memo', label: '메모', path: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" },
    { id: 'me', label: '정보', path: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }
  ];

  return (
    <nav style={{ 
      display: 'flex', justifyContent: 'space-around', 
      padding: '10px 0 24px', background: '#fff', borderTop: '1px solid #e2e8f0' 
    }}>
      {tabs.map(item => {
        const isOn = active === item.id;
        const locked = isLocked && item.id === 'inspect';
        const iconColor = locked ? '#d1d5db' : isOn ? t.brand : '#94a3b8';

        return (
          <div
            key={item.id}
            onClick={() => !locked && onNav && onNav(item.id)}
            style={{ textAlign: 'center', cursor: locked ? 'not-allowed' : 'pointer', flex: 1, opacity: locked ? 0.45 : 1 }}
          >
            <div style={{ marginBottom: 4, position: 'relative', display: 'inline-block' }}>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={iconColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d={item.path} />
              </svg>
              {locked && (
                <span style={{ position: 'absolute', top: -4, right: -6, fontSize: 10 }}>🔒</span>
              )}
            </div>
            <div style={{ fontSize: 10, fontWeight: isOn ? 800 : 500, color: iconColor }}>
              {item.label}
            </div>
          </div>
        );
      })}
    </nav>
  );
}

window.SoritalkHeader = SoritalkHeader;
window.SoritalkTabBar = SoritalkTabBar;