import React, { useState } from 'react';
import SessionModal from './SessionModal';
import { useContextMenu } from '../hooks/useContextMenu';
import { renameSession, deleteSession, updateSession } from '../api/orchestration';
const { logger } = require('@nexusai/shared');


export default function Sidebar({
  sessions,
  activeSession,
  onSelectSession,
  onNewChat,
  onNewProject,
  isOpen,
  onToggle,
  onSessionsChange,
  onNavigate,
  projects,
  onProjectsChange,
  onSelectProject
}) {
  const [chatsOpen, setChatsOpen] = useState(true);
  const [projectsOpen, setProjectsOpen] = useState(true);
  const [modalSession, setModalSession] = useState(null);
  const [modalMode, setModalMode] = useState('settings');
  const [hoveredId, setHoveredId] = useState(null);
  const { menu, open: openMenu, close: closeMenu } = useContextMenu();

  // ── Handlers ────────────────────────────────────────────

  async function handleRename(session, name, projectId) {
    try {
      await updateSession(session.external_id, { name, projectId });
      onSessionsChange();
    } catch (err) {
      logger.error('[Sidebar] Rename failed:', err.message);
    }
  }

  async function handleDelete(session) {
    try {
      await deleteSession(session.external_id);
      onSessionsChange(session);
    } catch (err) {
      logger.error('[Sidebar] Delete failed:', err.message);
    }
  }

  // ── Collapsed rail ───────────────────────────────────────

  if (!isOpen) {
    return (
      <div className="flex-col" style={{
        width: '48px',
        flexShrink: 0,
        background: 'var(--bg-surface)',
        borderRight: '1px solid var(--border)',
        alignItems: 'center',
        paddingTop: '8px',
        paddingBottom: '8px',
        gap: '4px',
      }}>
        {/* Expand toggle */}
        <button className="btn-icon" onClick={onToggle} title="Expand sidebar"
          style={{ marginBottom: '4px' }}>▶</button>

        <div style={{ width: '32px', height: '1px', background: 'var(--border)', margin: '4px 0' }} />

        {/* New Chat */}
        <button className="btn-icon" onClick={onNewChat} title="New Chat"
          style={{ fontSize: '18px', color: 'var(--text-secondary)' }}>+</button>

        {/* New Project */}
        <button className="btn-icon" onClick={onNewProject} title="View Projects"
          style={{ fontSize: '14px', color: 'var(--text-secondary)' }}>⊞</button>

        {/* All Chats */}
        <button className="btn-icon" onClick={() => onNavigate('all-chats')} title="All Chats"
          style={{ fontSize: '14px', color: 'var(--text-secondary)' }}>☰</button>

        {/* Spacer */}
        <div style={{ flex: 1 }} />

        {/* Settings */}
        <button className="btn-icon" onClick={() => onNavigate('settings')} title="Settings"
          style={{ fontSize: '14px', color: 'var(--text-secondary)' }}>⚙</button>
      </div>
    );
  }

  // ── Expanded sidebar ─────────────────────────────────────

  const recentSessions = sessions.slice(0, 10);

  // Group recent sessions by project
  const grouped = {};
  const unassigned = [];
  for (const session of recentSessions) {
    if (session.project_id) {
      if (!grouped[session.project_id]) grouped[session.project_id] = [];
      grouped[session.project_id].push(session);
    } else {
      unassigned.push(session);
    }
  }

  const sessionRowProps = (session) => ({
    session,
    isActive: activeSession?.external_id === session.external_id,
    isHovered: hoveredId === session.external_id,
    onHover: setHoveredId,
    onSelect: () => { onSelectSession(session); onNavigate('chat'); },
    onRename: () => { setModalMode('settings'); setModalSession(session); },
    onDelete: () => { setModalMode('confirm-delete'); setModalSession(session); },
    onContextMenu: e => !session.isNew && openMenu(e, session),
  });

  return (
    <>
      <div className="flex-col" style={{
        width: 'var(--sidebar-width)',
        flexShrink: 0,
        background: 'var(--bg-surface)',
        borderRight: '1px solid var(--border)',
        overflow: 'hidden',
      }}>

        {/* Header */}
        <div className="panel-header" style={{ justifyContent: 'space-between', padding: '0 12px 0 16px' }}>
          <span className="text-base" style={{ fontWeight: 1000, color: 'var(--text-secondary)' }}>NexusAI</span>
          <button className="btn-icon" onClick={onToggle}>◀</button>
        </div>

        {/* Action buttons */}
        <div style={{ padding: '10px 10px 6px', display: 'flex', flexDirection: 'column', gap: '6px', flexShrink: 0 }}>
          <button className="btn-primary" onClick={onNewChat} style={{
            width: '100%', padding: '7px 12px',
            display: 'flex', alignItems: 'center', gap: '8px',
          }}>
            <span style={{ fontSize: '16px', lineHeight: 1 }}>+</span>
            <span>New Chat</span>
          </button>
          <button className="btn-primary" onClick={onNewProject} style={{
            width: '100%', padding: '7px 12px',
            display: 'flex', alignItems: 'center', gap: '8px',
          }}>
            <span style={{ fontSize: '14px', lineHeight: 1 }}>⊞</span>
            <span>View Projects</span>
          </button>
        </div>

        <div style={{ height: '1px', background: 'var(--border)', flexShrink: 0, margin: '2px 0' }} />

        {/* Scrollable content */}
        <div className="flex-1 scroll-y">

          {/* ── Projects section ── */}
          <SectionHeader
            label="Projects"
            isOpen={projectsOpen}
            onToggle={() => setProjectsOpen(o => !o)}
          />
          {projectsOpen && (
            <div style={{ padding: '4px 10px 8px' }}>
              {!projects?.length ? (
                <div style={{
                  padding: '10px',
                  borderRadius: 'var(--radius-md)',
                  border: '1px dashed var(--border)',
                  color: 'var(--text-sb-hdr)',
                  fontSize: '13px',
                  textAlign: 'center',
                }}>
                  No projects yet
                </div>
              ) : (
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
                  {projects.slice(0, 6).map(project => (
                    <button
                      key={project.id}
                      onClick={() => { onSelectProject(project); onNavigate('project'); }}
                      className="btn-reset text-xs"
                      style={{
                        padding: '4px 8px',
                        borderRadius: 'var(--radius-sm)',
                        background: 'var(--bg-elevated)',
                        border: `1px solid ${project.colour ?? 'var(--border)'}`,
                        color: 'var(--text-secondary)',
                        maxWidth: '100%',
                      }}
                      title={project.description ?? project.name}
                    >
                      <span className="truncate" style={{ display: 'block', maxWidth: '140px' }}>
                        {project.name}
                      </span>
                    </button>
                  ))}
                </div>
              )}
            </div>
          )}

          <div style={{ height: '1px', background: 'var(--border)', margin: '2px 0' }} />

          {/* ── Recent Chats section ── */}
          <SectionHeader
            label="Recent Chats"
            isOpen={chatsOpen}
            onToggle={() => setChatsOpen(o => !o)}
          />

          {chatsOpen && (
            <>
              {recentSessions.length === 0 && (
                <div className="text-xs text-muted" style={{ padding: '12px 16px', textAlign: 'center' }}>
                  No conversations yet
                </div>
              )}

              {/* Project groups */}
              {Object.entries(grouped).map(([projectId, projectSessions]) => {
                const project = projects?.find(p => p.id === Number(projectId));
                return (
                  <div key={projectId}>
                    {/* Project group label */}
                    <div style={{
                      display: 'flex', alignItems: 'center', gap: '6px',
                      padding: '6px 16px 2px',
                    }}>
                      <span className=" text-muted truncate" 
                            style={{
                              fontSize: '12px', 
                              textTransform: 'uppercase', 
                              fontWeight: '500', 
                              textAlign: 'center',
                              borderRadius: 'var(--radius-md)',
                              border: `1px solid ${project.colour ?? 'var(--border)'}`,
                              padding: '2px 2px',
                              width: '100%'
                            }}>
                        {project?.name ?? 'Project'}
                      </span>
                    </div>
                    {projectSessions.map(session => (
                      <SessionRow key={session.external_id} {...sessionRowProps(session)} />
                    ))}
                  </div>
                );
              })}

              {/* Unassigned sessions */}
              {unassigned.length > 0 && (
                <>
                  {Object.keys(grouped).length > 0 && (
                    <div style={{ padding: '6px 16px 2px' }}>
                      <span className=" text-muted " style={{fontSize: '12px', textTransform: 'uppercase', fontWeight: '500', textAlign: 'center',}}>Other</span>
                    </div>
                  )}
                  {unassigned.map(session => (
                    <SessionRow key={session.external_id} {...sessionRowProps(session)} />
                  ))}
                </>
              )}

              {sessions.length > 0 && (
                <button
                  onClick={() => onNavigate('all-chats')}
                  className="btn-reset text-xs text-muted"
                  style={{ width: '100%', padding: '6px', borderRadius: 'var(--radius-sm)' }}
                  onMouseEnter={e => e.currentTarget.style.color = 'var(--text-secondary)'}
                  onMouseLeave={e => e.currentTarget.style.color = 'var(--text-muted)'}
                >
                  All Chats →
                </button>
              )}
            </>
          )}
        </div>

        {/* Settings — pinned to bottom */}
        <div style={{ borderTop: '1px solid var(--border)', padding: '8px 10px', flexShrink: 0 }}>
          <button
            onClick={() => onNavigate('settings')}
            className="btn-reset text-base"
            style={{
              width: '100%', padding: '8px 12px',
              borderRadius: 'var(--radius-md)',
              display: 'flex', alignItems: 'center', gap: '8px',
              color: 'var(--text-secondary)',
            }}
            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-elevated)'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
          >
            <span style={{ fontSize: '14px' }}>⚙</span>
            <span>Settings</span>
          </button>
        </div>
      </div>

      {/* Context menu */}
      {menu && (
        <div
          onClick={e => e.stopPropagation()}
          style={{
            position: 'fixed', top: menu.y, left: menu.x,
            background: 'var(--bg-elevated)', border: '1px solid var(--border)',
            borderRadius: 'var(--radius-md)', padding: '4px', zIndex: 50, minWidth: '140px',
          }}
        >
          <ContextMenuItem
            onClick={() => { setModalMode('settings'); setModalSession(menu.session); closeMenu(); }}
          >✎ Rename</ContextMenuItem>
          <ContextMenuItem
            onClick={() => { setModalMode('confirm-delete'); setModalSession(menu.session); closeMenu(); }}
            danger
          >✕ Delete</ContextMenuItem>
        </div>
      )}

      {/* Session modal */}
      {modalSession && (
        <SessionModal
          session={modalSession}
          mode={modalMode}
          onRename={handleRename}
          onDelete={handleDelete}
          onClose={() => setModalSession(null)}
          projects={projects}
        />
      )}
    </>
  );
}

// ── Sub-components ───────────────────────────────────────────

function SectionHeader({ label, isOpen, onToggle }) {
  return (
    <button
      onClick={onToggle}
      className="btn-reset label-upper"
      style={{
        width: '100%', padding: '8px 16px',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: 'var(--text-sb-hdr)',
        
      }}

    >
      <span>{label}</span>
      <span style={{ fontSize: '13px' }}>{isOpen ? '▾' : '▸'}</span>
    </button>
  );
}

function SessionRow({ session, isActive, isHovered, onHover, onSelect, onRename, onDelete, onContextMenu }) {
  return (
    <div
      onMouseEnter={() => onHover(session.external_id)}
      onMouseLeave={() => onHover(null)}
      onContextMenu={onContextMenu}
      style={{
        position: 'relative', display: 'flex', alignItems: 'stretch',
        background: isActive || isHovered ? 'var(--bg-elevated)' : 'transparent',
        borderLeft: isActive ? '2px solid var(--accent)' : '2px solid transparent',
        transition: 'background 0.1s',
        overflow: 'hidden',
        width: '100%',
        boxSizing: 'border-box',
      }}
    >
      <button
        onClick={onSelect}
        className="btn-reset"
        style={{
          flex: 1, padding: '8px 16px',
          paddingRight: isHovered && !session.isNew ? '4px' : '16px',
          textAlign: 'left',
          minWidth: 0,
          overflow: 'hidden',
        }}
      >
        <span className="text-base truncate" style={{
          display: 'block',
          color: isActive ? 'var(--text-primary)' : 'var(--text-secondary)',
          fontWeight: isActive ? 500 : 400,
        }}>
          {session.isNew ? 'New conversation' : (session.name || session.external_id)}
        </span>
        {session.isNew && (
          <span className="text-xs text-accent" style={{ fontStyle: 'italic' }}>Unsaved</span>
        )}
      </button>

      <div
        style={{
          display: 'flex', alignItems: 'center',
          gap: '2px',
          paddingRight: isHovered && !session.isNew ? '8px' : '0px',
          flexShrink: 0,
          width: isHovered && !session.isNew ? '44px' : '0px',
          overflow: 'hidden',
          transition: 'width 0.1s ease',
        }}
      >
        <button className="btn-icon" title="Rename" onClick={onRename}
          style={{ padding: '2px 4px', fontSize: '12px' }}>✎</button>
        <button className="btn-icon" title="Delete" onClick={onDelete}
          style={{ padding: '2px 4px', fontSize: '12px', color: '#ff6b6b' }}>✕</button>
      </div>
    </div>
  );
}

function ContextMenuItem({ children, onClick, danger }) {
  return (
    <button
      className="btn-reset text-base"
      onClick={onClick}
      style={{ width: '100%', padding: '8px 12px', borderRadius: 'var(--radius-sm)', justifyContent: 'flex-start', color: danger ? '#ff6b6b' : 'var(--text-primary)' }}
      onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-surface)'}
      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
    >{children}</button>
  );
}