'use client'

import type { ImageStyle } from '@/app/(admin)/ai/ocr-kombi/types'
import { IMAGE_STYLES as STYLES } from '@/app/(admin)/ai/ocr-kombi/types'
import type { ImageRegionWithState } from './ground-truth-types'

interface ImageRegionsPanelProps {
  imageRegions: ImageRegionWithState[]
  onUpdateRegion: (index: number, update: Partial<ImageRegionWithState>) => void
  onGenerateImage: (index: number) => void
  onRemoveRegion: (index: number) => void
}

export function ImageRegionsPanel({
  imageRegions, onUpdateRegion, onGenerateImage, onRemoveRegion,
}: ImageRegionsPanelProps) {
  if (imageRegions.length === 0) return null

  return (
    <div className="border rounded-lg dark:border-gray-700 p-4">
      <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
        Bildbereiche ({imageRegions.length} gefunden)
      </h4>
      <div className="space-y-3">
        {imageRegions.map((region, i) => (
          <div key={i} className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
            {/* Preview thumbnail */}
            <div className="w-16 h-16 flex-shrink-0 border rounded dark:border-gray-600 overflow-hidden bg-white">
              {region.image_b64 ? (
                <img src={region.image_b64} alt="" className="w-full h-full object-cover" />
              ) : (
                <div className="w-full h-full flex items-center justify-center text-gray-400 text-xs">
                  {Math.round(region.bbox_pct.w)}x{Math.round(region.bbox_pct.h)}%
                </div>
              )}
            </div>

            {/* Prompt + controls */}
            <div className="flex-1 min-w-0 space-y-2">
              <div className="flex items-center gap-2">
                <span className="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">
                  Bereich {i + 1}:
                </span>
                <input
                  type="text"
                  value={region.prompt}
                  onChange={e => onUpdateRegion(i, { prompt: e.target.value })}
                  placeholder="Beschreibung / Prompt..."
                  className="flex-1 text-sm px-2 py-1 border rounded dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                />
              </div>
              <div className="flex items-center gap-2">
                <select
                  value={region.style}
                  onChange={e => onUpdateRegion(i, { style: e.target.value as ImageStyle })}
                  className="text-sm px-2 py-1 border rounded dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                >
                  {STYLES.map(s => (
                    <option key={s.value} value={s.value}>{s.label}</option>
                  ))}
                </select>
                <button
                  onClick={() => onGenerateImage(i)}
                  disabled={!!region.generating || !region.prompt}
                  className="px-3 py-1 text-sm bg-teal-600 text-white rounded hover:bg-teal-700 disabled:opacity-50"
                >
                  {region.generating ? 'Generiere...' : 'Generieren'}
                </button>
                <button
                  onClick={() => onRemoveRegion(i)}
                  className="px-2 py-1 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded"
                >
                  Entfernen
                </button>
              </div>
              {region.description && region.description !== region.prompt && (
                <p className="text-xs text-gray-400">{region.description}</p>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}