'use client';

import { DatasetEntryForAnnotation, DIALECT_LABELS } from '@/lib/dialects';
import { useEffect, useRef } from 'react';

interface AnnotationSidebarNavigationProps {
  entries: DatasetEntryForAnnotation[];
  currentIndex: number;
  onSelectEntry: (index: number) => void;
  annotatedCount: number;
}

export default function AnnotationSidebarNavigation({
  entries,
  currentIndex,
  onSelectEntry,
  annotatedCount
}: AnnotationSidebarNavigationProps) {
  const progressPct = Math.round((annotatedCount / entries.length) * 100);
  const activeButtonRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    activeButtonRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  }, [currentIndex]);

  return (
    <aside className="hidden md:flex md:flex-col w-64 h-full bg-gray-50 border-r border-gray-200 p-4 overflow-hidden">
      {/* Header - fixed at top */}
      <div className="mb-6 flex-shrink-0">
        <h2 className="font-semibold text-gray-900 mb-2">Fortschritt</h2>
        <div className="space-y-2">
          <div className="w-full bg-gray-200 rounded-full h-2.5">
            <div
              className="bg-blue-500 h-2.5 rounded-full transition-all duration-500"
              style={{ width: `${progressPct}%` }}
            />
          </div>
          <p className="text-xs text-gray-600">
            {annotatedCount}/{entries.length} bewertet ({progressPct}%)
          </p>
        </div>
      </div>

      {/* Divider */}
      <div className="border-b border-gray-200 mb-4 flex-shrink-0" />

      {/* Entries List - scrollable middle section with max height */}
      <div className="space-y-1 flex-1 min-h-0 overflow-hidden flex flex-col">
        <h3 className="text-xs font-semibold text-gray-700 uppercase tracking-wide mb-3 px-2 flex-shrink-0">
          Aufnahmen
        </h3>
        <div className="space-y-1 overflow-y-auto max-h-150">
          {entries.map((entry, index) => (
            <button
              ref={index === currentIndex ? activeButtonRef : null}
              key={entry.id}
              onClick={() => onSelectEntry(index)}
              className={`w-full text-left px-3 py-2 rounded-md text-sm transition-colors ${
                index === currentIndex
                  ? 'bg-blue-100 text-blue-900 border-l-4 border-blue-500 font-medium'
                  : entry.annotation !== null
                    ? 'bg-green-50 text-gray-700 hover:bg-green-100'
                    : 'bg-white text-gray-700 hover:bg-gray-100'
              }`}
              title={`Entry ${index + 1}`}
            >
              <div className="flex items-center gap-2">
                {/* Status indicator */}
                <span
                  className={`inline-block w-2 h-2 rounded-full flex-shrink-0 ${
                    index === currentIndex
                      ? 'bg-blue-600'
                      : entry.annotation !== null
                        ? 'bg-green-500'
                        : 'bg-gray-300'
                  }`}
                />
                {/* Entry number and filename */}
                <span className="truncate">
                  {`Aufnahme ${index + 1} - ${DIALECT_LABELS[entry.dialect]}`}
                </span>
              </div>
            </button>
          ))}
        </div>
      </div>
    </aside>
  );
}