import { Fragment, useRef, type KeyboardEvent, type ReactNode } from 'react'
import { useTranslation } from 'react-i18next'

export type EditFormShape = { name: string; shortName: string; color: string; maxSizeM: number }

interface ClassEditRowProps {
  /** Cell content for the leftmost `#` column (e.g. `+` for new, row id for edit). */
  idCell: ReactNode
  /** Stable identifier for the row's data-editing-row attribute. */
  rowId: number | 'new'
  form: EditFormShape
  onChange: (form: EditFormShape) => void
  onSave: () => void
  onCancel: () => void
  onKeyDown: (e: KeyboardEvent<HTMLElement>) => void
  saving: boolean
  /** Optional inline error key (already translated by the caller's t() if provided as message). */
  errorMessage: string | null
  placeholderName?: string
}

function CheckIcon() {
  return (
    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
      <polyline points="20 6 9 17 4 12" />
    </svg>
  )
}
function CloseIcon() {
  return (
    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
      <line x1="18" y1="6" x2="6" y2="18" />
      <line x1="6" y1="6" x2="18" y2="18" />
    </svg>
  )
}

export function ClassEditRow({
  idCell, rowId, form, onChange, onSave, onCancel, onKeyDown,
  saving, errorMessage, placeholderName,
}: ClassEditRowProps) {
  const { t } = useTranslation()
  const colorInputRef = useRef<HTMLInputElement>(null)

  return (
    <Fragment>
      <tr
        className="row-hover"
        data-editing-row={rowId}
        style={{ borderBottom: '1px solid var(--accent-amber)', height: 32, background: 'rgba(255,157,61,0.06)' }}
        onKeyDown={onKeyDown}
      >
        <td className="px-3 mono tnum" style={{ color: 'var(--accent-amber)', fontSize: 12 }}>{idCell}</td>
        <td className="px-2">
          <input
            autoFocus
            data-field="name"
            value={form.name}
            onChange={e => onChange({ ...form, name: e.target.value })}
            placeholder={placeholderName}
            className="inp inp-mono"
            style={{ height: 22, padding: '0 6px', fontSize: 11 }}
            aria-label={t('admin.classes.colName')}
          />
        </td>
        <td className="px-2 text-center">
          <button
            type="button"
            onClick={() => colorInputRef.current?.click()}
            className="inline-flex items-center justify-center cursor-pointer"
            aria-label={t('admin.classes.colHex')}
            style={{ background: 'transparent', border: 0, padding: 0 }}
          >
            <span
              className="swatch"
              style={{ background: form.color, boxShadow: '0 0 0 1px var(--accent-amber)' }}
            />
          </button>
          <input
            ref={colorInputRef}
            type="color"
            data-field="color"
            value={form.color}
            onChange={e => onChange({ ...form, color: e.target.value })}
            style={{ position: 'absolute', width: 0, height: 0, opacity: 0, pointerEvents: 'none' }}
            tabIndex={-1}
          />
        </td>
        <td className="px-3 text-right">
          <span className="inline-flex gap-1">
            <button
              type="button"
              onClick={onSave}
              disabled={saving}
              className="ibtn cyan"
              aria-label={t('admin.classes.save')}
              title={t('admin.classes.save')}
            >
              <CheckIcon />
            </button>
            <button
              type="button"
              onClick={onCancel}
              disabled={saving}
              className="ibtn"
              aria-label={t('admin.classes.cancel')}
              title={t('admin.classes.cancel')}
            >
              <CloseIcon />
            </button>
          </span>
        </td>
      </tr>
      {errorMessage && (
        <tr style={{ background: 'rgba(255,157,61,0.06)' }}>
          <td />
          <td colSpan={3} className="px-2 pb-2">
            <div role="alert" style={{ color: 'var(--accent-red)', fontSize: 11 }}>
              {errorMessage}
            </div>
          </td>
        </tr>
      )}
    </Fragment>
  )
}
