'use client'

import { forwardRef } from 'react'
import type { WordEntry, ColumnMeta } from '@/app/(admin)/ai/ocr-kombi/types'
import type { LlmChange, RowStatus } from './llm-review-types'
import { COL_TYPE_TO_FIELD, COL_TYPE_COLOR, FIELD_LABELS } from './llm-review-types'
import { CellContent, StatusIcon } from './LlmReviewStatusScreens'

interface LlmReviewVocabTableProps {
  vocabEntries: WordEntry[]
  columnsUsed: ColumnMeta[]
  getRowStatus: (rowIndex: number) => RowStatus
  correctedMap: Map<number, LlmChange[]>
  activeRowRef: React.RefObject<HTMLTableRowElement | null>
}

export const LlmReviewVocabTable = forwardRef<HTMLDivElement, LlmReviewVocabTableProps>(
  function LlmReviewVocabTable({ vocabEntries, columnsUsed, getRowStatus, correctedMap, activeRowRef }, ref) {
    return (
      <div ref={ref}>
        <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
          {columnsUsed.length === 1 && columnsUsed[0]?.type === 'column_text' ? 'Tabelle' : 'Vokabeltabelle'} ({vocabEntries.length} Eintraege)
        </div>
        <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
          <div className="max-h-[70vh] overflow-y-auto">
            <table className="w-full text-sm">
              <thead className="sticky top-0 z-10">
                <tr className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
                  <th className="px-2 py-2 text-left text-gray-500 dark:text-gray-400 font-medium w-10">#</th>
                  {columnsUsed.length > 0 ? (
                    columnsUsed.map((col, i) => {
                      const field = COL_TYPE_TO_FIELD[col.type]
                      if (!field) return null
                      return (
                        <th key={i} className={`px-2 py-2 text-left font-medium ${COL_TYPE_COLOR[col.type] || 'text-gray-500 dark:text-gray-400'}`}>
                          {FIELD_LABELS[field] || field}
                        </th>
                      )
                    })
                  ) : (
                    <>
                      <th className="px-2 py-2 text-left text-gray-500 dark:text-gray-400 font-medium">EN</th>
                      <th className="px-2 py-2 text-left text-gray-500 dark:text-gray-400 font-medium">DE</th>
                      <th className="px-2 py-2 text-left text-gray-500 dark:text-gray-400 font-medium">Beispiel</th>
                    </>
                  )}
                  <th className="px-2 py-2 text-center text-gray-500 dark:text-gray-400 font-medium w-16">Status</th>
                </tr>
              </thead>
              <tbody>
                {vocabEntries.map((entry, idx) => {
                  const rowStatus = getRowStatus(idx)
                  const rowChanges = correctedMap.get(idx)

                  const rowBg = {
                    pending: '',
                    active: 'bg-yellow-50 dark:bg-yellow-900/20',
                    reviewed: '',
                    corrected: 'bg-teal-50/50 dark:bg-teal-900/10',
                    skipped: 'bg-gray-50 dark:bg-gray-800/50',
                  }[rowStatus]

                  return (
                    <tr
                      key={idx}
                      ref={rowStatus === 'active' ? activeRowRef : undefined}
                      className={`border-b border-gray-100 dark:border-gray-700/50 ${rowBg} ${
                        rowStatus === 'active' ? 'ring-1 ring-yellow-400 ring-inset' : ''
                      }`}
                    >
                      <td className="px-2 py-1.5 text-gray-400 font-mono text-xs">{idx}</td>
                      {columnsUsed.length > 0 ? (
                        columnsUsed.map((col, i) => {
                          const field = COL_TYPE_TO_FIELD[col.type]
                          if (!field) return null
                          const text = (entry as Record<string, unknown>)[field] as string || ''
                          return (
                            <td key={i} className="px-2 py-1.5 text-xs">
                              <CellContent text={text} field={field} rowChanges={rowChanges} />
                            </td>
                          )
                        })
                      ) : (
                        <>
                          <td className="px-2 py-1.5">
                            <CellContent text={entry.english} field="english" rowChanges={rowChanges} />
                          </td>
                          <td className="px-2 py-1.5">
                            <CellContent text={entry.german} field="german" rowChanges={rowChanges} />
                          </td>
                          <td className="px-2 py-1.5 text-xs">
                            <CellContent text={entry.example} field="example" rowChanges={rowChanges} />
                          </td>
                        </>
                      )}
                      <td className="px-2 py-1.5 text-center">
                        <StatusIcon status={rowStatus} />
                      </td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    )
  }
)