'use client'

import { useTheme } from '@/lib/ThemeContext'
import { useLanguage } from '@/lib/LanguageContext'
import { useWorksheet } from '@/lib/worksheet-editor/WorksheetContext'

interface PageNavigatorProps {
  className?: string
}

export function PageNavigator({ className = '' }: PageNavigatorProps) {
  const { isDark } = useTheme()
  const { t } = useLanguage()
  const {
    document,
    currentPageIndex,
    setCurrentPageIndex,
    addPage,
    deletePage,
    canvas
  } = useWorksheet()

  const pages = document?.pages || []

  const handlePageChange = (index: number) => {
    if (!canvas || !document || index === currentPageIndex) return

    // Save current page state
    const currentPage = document.pages[currentPageIndex]
    if (currentPage) {
      currentPage.canvasJSON = JSON.stringify(canvas.toJSON())
    }

    // Load new page
    setCurrentPageIndex(index)
    const newPage = document.pages[index]
    if (newPage?.canvasJSON) {
      canvas.loadFromJSON(JSON.parse(newPage.canvasJSON), () => {
        canvas.renderAll()
      })
    } else {
      // Clear canvas for new page
      canvas.clear()
      canvas.backgroundColor = '#ffffff'
      canvas.renderAll()
    }
  }

  // Glassmorphism styles
  const containerStyle = isDark
    ? 'backdrop-blur-xl bg-white/10 border border-white/20'
    : 'backdrop-blur-xl bg-white/70 border border-black/10 shadow-xl'

  const pageButtonStyle = (isActive: boolean) => isDark
    ? isActive
      ? 'bg-purple-500/30 text-purple-300 border-purple-400/50'
      : 'bg-white/5 text-white/70 border-white/10 hover:bg-white/10'
    : isActive
      ? 'bg-purple-100 text-purple-700 border-purple-300'
      : 'bg-white/50 text-slate-600 border-slate-200 hover:bg-slate-100'

  const labelStyle = isDark ? 'text-white/70' : 'text-slate-600'

  return (
    <div className={`flex items-center gap-3 p-3 rounded-2xl ${containerStyle} ${className}`}>
      {/* Page Label */}
      <span className={`text-sm font-medium ${labelStyle}`}>
        Seiten:
      </span>

      {/* Page Buttons */}
      <div className="flex items-center gap-2">
        {pages.map((page, index) => (
          <div key={page.id} className="relative group">
            <button
              onClick={() => handlePageChange(index)}
              className={`w-10 h-10 flex items-center justify-center rounded-lg border text-sm font-medium transition-all ${pageButtonStyle(index === currentPageIndex)}`}
            >
              {index + 1}
            </button>

            {/* Delete button (visible on hover, not for single page) */}
            {pages.length > 1 && (
              <button
                onClick={(e) => {
                  e.stopPropagation()
                  deletePage(index)
                }}
                className={`absolute -top-2 -right-2 w-5 h-5 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity ${
                  isDark
                    ? 'bg-red-500/80 text-white hover:bg-red-500'
                    : 'bg-red-500 text-white hover:bg-red-600'
                }`}
                title="Seite löschen"
              >
                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            )}
          </div>
        ))}

        {/* Add Page Button */}
        <button
          onClick={addPage}
          className={`w-10 h-10 flex items-center justify-center rounded-lg border border-dashed transition-all ${
            isDark
              ? 'border-white/30 text-white/50 hover:border-white/50 hover:text-white/70 hover:bg-white/5'
              : 'border-slate-300 text-slate-400 hover:border-slate-400 hover:text-slate-500 hover:bg-slate-50'
          }`}
          title="Seite hinzufügen"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
          </svg>
        </button>
      </div>

      {/* Page Info */}
      <span className={`text-sm ${labelStyle}`}>
        {currentPageIndex + 1} / {pages.length}
      </span>
    </div>
  )
}