'use client'

import type { GridColumn } from './types'

interface GridTableColumnHeaderProps {
  col: GridColumn
  colIndex: number
  numCols: number
  zoneIndex: number
  onToggleColumnBold: (zoneIndex: number, colIndex: number) => void
  onDeleteColumn?: (zoneIndex: number, colIndex: number) => void
  onAddColumn?: (zoneIndex: number, afterColIndex: number) => void
  onColResizeStart: (colIndex: number, startX: number) => void
}

export function GridTableColumnHeader({
  col,
  colIndex,
  numCols,
  zoneIndex,
  onToggleColumnBold,
  onDeleteColumn,
  onAddColumn,
  onColResizeStart,
}: GridTableColumnHeaderProps) {
  return (
    <div
      className={`group/colhdr relative px-2 py-1.5 text-xs font-medium border-b border-r border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 cursor-pointer select-none transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 ${
        col.bold ? 'text-teal-700 dark:text-teal-300' : 'text-gray-600 dark:text-gray-400'
      }`}
      onClick={() => onToggleColumnBold(zoneIndex, col.index)}
      title={`Spalte ${col.index + 1} — Klick fuer Fett-Toggle`}
    >
      <div className="flex items-center gap-1 justify-center truncate">
        <span>{col.label}</span>
        {col.bold && (
          <span className="text-[9px] px-1 py-0 rounded bg-teal-100 dark:bg-teal-900/40 text-teal-600 dark:text-teal-400">
            B
          </span>
        )}
      </div>
      {/* Delete column button (visible on hover) */}
      {onDeleteColumn && numCols > 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/colhdr:opacity-100 transition-opacity z-30"
          onClick={(e) => {
            e.stopPropagation()
            if (confirm(`Spalte "${col.label}" loeschen?`)) {
              onDeleteColumn(zoneIndex, col.index)
            }
          }}
          title={`Spalte "${col.label}" loeschen`}
        >
          x
        </button>
      )}
      {/* Add column button — small icon at bottom-right, below resize handle */}
      {onAddColumn && (
        <button
          className="absolute -right-[7px] -bottom-[7px] w-[14px] h-[14px] flex items-center justify-center text-teal-500 opacity-0 group-hover/colhdr:opacity-100 transition-opacity z-30 hover:bg-teal-100 dark:hover:bg-teal-900/40 rounded-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700"
          onClick={(e) => {
            e.stopPropagation()
            onAddColumn(zoneIndex, col.index)
          }}
          title={`Spalte nach "${col.label}" einfuegen`}
        >
          <svg className="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
          </svg>
        </button>
      )}
      {/* Right-edge resize handle — wide grab area, highest z-index */}
      {colIndex < numCols - 1 && (
        <div
          className="absolute top-0 -right-[4px] w-[9px] h-full cursor-col-resize hover:bg-teal-400/40 z-40"
          onMouseDown={(e) => {
            e.stopPropagation()
            onColResizeStart(colIndex, e.clientX)
          }}
        />
      )}
    </div>
  )
}