// Sidebar component

const Sidebar = ({
  activeView,
  onNavigate,
  conversations = [],
  unreadCount = 0,
  taskCount = 0,
  onOpenSettings,
}) => {
  const [chatOpen, setChatOpen] = React.useState(true);
  const [feedbackOpen, setFeedbackOpen] = React.useState(false);
  const items = [
    { id: 'home',     label: 'Ana Sayfa',          icon: 'home' },
    { id: 'chats',    label: 'Sohbet',             icon: 'chat',     hasAccordion: true, badge: unreadCount > 0 ? unreadCount : null },
    { id: 'solution-sessions', label: 'Çözüm Sohbetleri', icon: 'sparkle', kwAccent: true },
    { id: 'team',     label: 'Ekip',               icon: 'team' },
    { id: 'news',     label: 'Haberler',           icon: 'news' },
    { id: 'meetings', label: 'Toplantılar & Notlar', icon: 'meetings' },
    { id: 'tasks',    label: 'Görevler',           icon: 'tasks',    badge: taskCount > 0 ? taskCount : null },
    { id: 'files',    label: 'Dosyalar',           icon: 'files' },
    { id: 'analytics',label: 'Analiz',             icon: 'analytics' },
  ];

  return (
    <aside className="sidebar">
      <div className="sidebar-top">
        <div className="kw-mono">KW</div>
        <div>
          <div className="kw-name">Neşet Birlik</div>
          <div className="kw-role">Founder & Chairman</div>
        </div>
      </div>

      <div className="sidebar-search">
        <Icon name="search" size={14} />
        <input placeholder="Ara veya soru sor" />
        <kbd>⌘K</kbd>
      </div>

      <nav className="nav">
        <div className="nav-section-label">Ana</div>
        {items.map(item => {
          // Tutorial spotlight target — data-nav-id ile match eder
          const isActive = activeView === item.id ||
            (item.id === 'chats' && (activeView === 'chat' || activeView === 'chats')) ||
            (item.id === 'solution-sessions' && activeView === 'solution-chat');
          return (
            <React.Fragment key={item.id}>
              <div
                data-nav-id={item.id}
                className={`nav-item ${isActive ? 'active' : ''} ${item.kwAccent ? 'kw-accent' : ''}`}
                onClick={() => {
                  if (item.hasAccordion) setChatOpen(o => !o);
                  onNavigate(item.id);
                }}
              >
                <Icon name={item.icon} className="nav-icon" />
                <span>{item.label}</span>
                {item.badge && <span className="nav-badge">{item.badge}</span>}
                {item.hasAccordion && (
                  <span className="nav-accordion-caret" style={{ marginLeft: item.badge ? 6 : 'auto', transform: chatOpen ? 'rotate(0)' : 'rotate(-90deg)' }}>
                    <Icon name="chevron-d" size={14} />
                  </span>
                )}
              </div>
              {item.hasAccordion && (
                <div className={`chat-list ${chatOpen ? 'open' : 'closed'}`}>
                  {conversations.slice(0, 5).map(c => (
                    <div key={c.id} className={`chat-list-item ${c.unread_count > 0 || c.unread ? 'unread' : ''}`} onClick={() => onNavigate('chats')}>
                      <span className="dot"></span>
                      <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.title}</span>
                      <span style={{ fontSize: 10.5, color: 'var(--text-tertiary)' }}>{c.when || (c.updated_minutes_ago != null ? (c.updated_minutes_ago < 60 ? c.updated_minutes_ago + 'd' : c.updated_minutes_ago < 1440 ? Math.floor(c.updated_minutes_ago/60) + 's' : Math.floor(c.updated_minutes_ago/1440) + 'g') : '')}</span>
                    </div>
                  ))}
                </div>
              )}
            </React.Fragment>
          );
        })}
      </nav>

      <div className="sidebar-bottom">
        <div className="avatar-circle">NB</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="avatar-name">Neşet Birlik</div>
          <div className="avatar-role-line">Founder & Chairman</div>
        </div>
        <button
          className="icon-btn sidebar-feedback-btn"
          title="Sorun bildir veya öneri yaz"
          onClick={() => setFeedbackOpen(true)}
        ><Icon name="lightbulb" size={16} /></button>
        <button
          className="icon-btn"
          title="Ayarlar"
          onClick={() => onOpenSettings && onOpenSettings()}
        ><Icon name="settings" size={16} /></button>
      </div>

      {feedbackOpen && window.FeedbackModal && (
        <window.FeedbackModal onClose={() => setFeedbackOpen(false)} />
      )}
    </aside>
  );
};

window.Sidebar = Sidebar;