/**
 * KorrekturSidebar — collapsible left sidebar with klausur info and student list.
 *
 * Extracted from KorrekturPage.tsx.
 */

import { StudentKlausur } from '../services/api'

interface KorrekturSidebarProps {
  collapsed: boolean
  onToggle: () => void
  klausurTitle: string
  klausurModus: string
  students: StudentKlausur[]
  currentStudentId?: string
  onSelectStudent: (id: string) => void
  onDeleteStudent: (id: string, e: React.MouseEvent) => void
  onUploadClick: () => void
}

export default function KorrekturSidebar({
  collapsed,
  onToggle,
  klausurTitle,
  klausurModus,
  students,
  currentStudentId,
  onSelectStudent,
  onDeleteStudent,
  onUploadClick,
}: KorrekturSidebarProps) {
  return (
    <div className={`korrektur-sidebar ${collapsed ? 'collapsed' : ''}`}>
      <button
        className="sidebar-toggle"
        onClick={onToggle}
        title={collapsed ? 'Sidebar einblenden' : 'Sidebar ausblenden'}
      >
        {collapsed ? '\u2192' : '\u2190'}
      </button>

      {!collapsed && (
        <>
          <div className="sidebar-section">
            <div className="sidebar-section-title">Klausur</div>
            <div className="klausur-item active">
              <div className="klausur-icon">{'\uD83D\uDCCB'}</div>
              <div className="klausur-info">
                <div className="klausur-name">{klausurTitle}</div>
                <div className="klausur-meta">
                  {klausurModus === 'landes_abitur' ? 'Abitur' : 'Vorabitur'} {'\u2022'} {students.length} Schueler
                </div>
              </div>
            </div>
          </div>

          <div className="sidebar-section" style={{ flex: 1 }}>
            <div className="sidebar-section-title">Schuelerarbeiten</div>

            {students.length === 0 ? (
              <div style={{ color: 'var(--bp-text-muted)', fontSize: 13, padding: '8px 0' }}>
                Noch keine Arbeiten hochgeladen
              </div>
            ) : (
              students.map((student) => (
                <div
                  key={student.id}
                  className={`klausur-item ${currentStudentId === student.id ? 'active' : ''}`}
                  onClick={() => onSelectStudent(student.id)}
                >
                  <div className="klausur-icon">{'\uD83D\uDCC4'}</div>
                  <div className="klausur-info">
                    <div className="klausur-name">{student.student_name}</div>
                    <div className="klausur-meta">
                      {student.status === 'completed' ? `${student.grade_points} Punkte` : student.status}
                    </div>
                  </div>
                  <button
                    className="delete-btn"
                    onClick={(e) => onDeleteStudent(student.id, e)}
                    title="Loeschen"
                  >
                    {'\uD83D\uDDD1\uFE0F'}
                  </button>
                </div>
              ))
            )}

            <button
              className="btn btn-primary"
              style={{ width: '100%', marginTop: 16 }}
              onClick={onUploadClick}
            >
              + Arbeit hochladen
            </button>
          </div>
        </>
      )}
    </div>
  )
}
