'use client'

import type { GridRow } from './types'

interface GridTableRowHeaderProps {
  row: GridRow
  zoneIndex: number
  rowCount: number
  rowH: number
  onToggleRowHeader: (zoneIndex: number, rowIndex: number) => void
  onDeleteRow?: (zoneIndex: number, rowIndex: number) => void
  onAddRow?: (zoneIndex: number, afterRowIndex: number) => void
  onRowResizeStart: (rowIndex: number, startY: number, currentHeight: number) => void
}

export function GridTableRowHeader({
  row,
  zoneIndex,
  rowCount,
  rowH,
  onToggleRowHeader,
  onDeleteRow,
  onAddRow,
  onRowResizeStart,
}: GridTableRowHeaderProps) {
  return (
    <div
      className={`group/rowhdr relative sticky left-0 z-10 flex items-center justify-center text-[10px] border-b border-r border-gray-200 dark:border-gray-700 cursor-pointer select-none transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 ${
        row.is_header
          ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-medium'
          : row.is_footer
          ? 'bg-amber-50 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400 font-medium'
          : 'bg-gray-50 dark:bg-gray-800/50 text-gray-400 dark:text-gray-500'
      }`}
      style={{ height: `${rowH}px` }}
      onClick={() => onToggleRowHeader(zoneIndex, row.index)}
      title={`Zeile ${row.index + 1} — Klick: ${row.is_header ? 'Footer' : row.is_footer ? 'Normal' : 'Header'}`}
    >
      {row.index + 1}
      {row.is_header && <span className="block text-[8px]">H</span>}
      {row.is_footer && <span className="block text-[8px]">F</span>}
      {/* Delete row button (visible on hover) */}
      {onDeleteRow && rowCount > 1 && (
        <button
          className="absolute top-0 left-0 w-4 h-4 flex items-center justify-center bg-red-500 text-white rounded-br text-[9px] leading-none opacity-0 group-hover/rowhdr:opacity-100 transition-opacity z-30"
          onClick={(e) => {
            e.stopPropagation()
            if (confirm(`Zeile ${row.index + 1} loeschen?`)) {
              onDeleteRow(zoneIndex, row.index)
            }
          }}
          title={`Zeile ${row.index + 1} loeschen`}
        >
          x
        </button>
      )}
      {/* Add row button (visible on hover, below this row) */}
      {onAddRow && (
        <button
          className="absolute -bottom-[7px] left-0 w-full h-[14px] flex items-center justify-center text-teal-500 opacity-0 group-hover/rowhdr:opacity-100 transition-opacity z-30 hover:bg-teal-100 dark:hover:bg-teal-900/40 rounded"
          onClick={(e) => {
            e.stopPropagation()
            onAddRow(zoneIndex, row.index)
          }}
          title={`Zeile nach ${row.index + 1} einfuegen`}
        >
          <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
          </svg>
        </button>
      )}
      {/* Bottom-edge resize handle */}
      <div
        className="absolute bottom-0 left-0 w-full h-[4px] cursor-row-resize hover:bg-teal-400/40 z-20"
        onMouseDown={(e) => {
          e.stopPropagation()
          onRowResizeStart(row.index, e.clientY, rowH)
        }}
      />
    </div>
  )
}