"use client";

import type { MouseEvent } from 'react';
import { Box, Button, Chip, TableCell, TableRow } from '@mui/material';
import type { Translation } from '../types/translation-types';
import { getTranslationModuleLabel } from '../constants/translation-modules';
import { formatTranslationDateTime } from './translation-management-utils';

type Props = {
  item: Translation;
  rowNumber: number;
  locale: 'en' | 'km';
  activeLabel: string;
  inactiveLabel: string;
  actionsLabel: string;
  onViewPage?: () => void;
  onOpenMenu: (event: MouseEvent<HTMLElement>, item: Translation) => void;
};

export function TranslationManagementProfileLabelRow({ item, rowNumber, locale, activeLabel, inactiveLabel, actionsLabel, onViewPage, onOpenMenu }: Props) {
  return (
    <TableRow hover sx={{ cursor: onViewPage ? 'pointer' : 'default' }} onClick={onViewPage ? (event) => {
      if (event.target instanceof Element && event.target.closest('a, button, input, select, textarea, [role="button"]')) return;
      onViewPage();
    } : undefined}>
      <TableCell>{rowNumber}</TableCell>
      <TableCell><Chip size="small" label={getTranslationModuleLabel(item.module)} color="primary" variant="outlined" /></TableCell>
      <TableCell>
        <Chip size="small" label={item.translationKey} variant="outlined" sx={{ color: 'secondary.main' }} onClick={onViewPage ? (event) => {
          event.stopPropagation();
          onViewPage();
        } : undefined} />
      </TableCell>
      <TableCell><Box title={item.englishText} sx={{ maxWidth: 320, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.englishText}</Box></TableCell>
      <TableCell><Box title={item.khmerText} sx={{ maxWidth: 340, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.khmerText}</Box></TableCell>
      <TableCell><Chip size="small" label={item.isActive ? activeLabel : inactiveLabel} color={item.isActive ? 'success' : 'default'} variant="outlined" /></TableCell>
      <TableCell sx={{ whiteSpace: 'nowrap', color: 'text.secondary' }}>{formatTranslationDateTime(item.createdAt, locale)}</TableCell>
      <TableCell sx={{ whiteSpace: 'nowrap', color: 'text.secondary' }}>{formatTranslationDateTime(item.updatedAt, locale)}</TableCell>
      <TableCell align="right">
        <Button aria-label={actionsLabel} aria-haspopup="menu" onClick={(event) => { event.stopPropagation(); onOpenMenu(event, item); }} sx={{ minWidth: 36, width: 36, height: 36, p: 0, borderRadius: '50%', color: 'text.secondary', fontSize: 24 }}>⋮</Button>
      </TableCell>
    </TableRow>
  );
}