'use client';
import { FunctionComponent } from 'react';
import { useLocale, useTranslations } from 'next-intl';
import { Box, Chip, Paper, Stack, Typography } from '@mui/material';
import { formatShamsiDateTime } from '@/utils';
import type { PlatformConfig } from '@/services/admin/types';
import AppButton from '../common/AppButton';

export interface ConfigRowProps {
  config: PlatformConfig;
  /** Whether the current admin may edit config (finance/admin). Server enforces; this hides the control. */
  canEdit?: boolean;
  onEdit?: (config: PlatformConfig) => void;
  onHistory?: (config: PlatformConfig) => void;
}

/**
 * One platform-config row: the key + description, the current value rendered by `dataType` (bool → chip,
 * json → monospace, else text), the last-updated meta, and Edit / History affordances. Presentational —
 * the typed-input edit dialog + the change-history drawer live in the config screen; this row only emits
 * the intents. The client never re-parses config beyond rendering by `dataType` (phase §5).
 * @component ConfigRow
 */
const ConfigRow: FunctionComponent<ConfigRowProps> = ({ config, canEdit = false, onEdit, onHistory }) => {
  const t = useTranslations('admin');
  const locale = useLocale();

  return (
    <Paper
      elevation={0}
      data-config-key={config.key}
      sx={{ p: 2, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}
    >
      <Stack direction="row" sx={{ gap: 2, alignItems: 'flex-start', justifyContent: 'space-between', flexWrap: 'wrap' }}>
        <Box sx={{ minWidth: 0 }}>
          <Stack direction="row" sx={{ gap: 1, alignItems: 'center', flexWrap: 'wrap' }}>
            <Typography variant="subtitle2" sx={{ fontWeight: 800, fontFamily: 'monospace' }}>
              {config.key}
            </Typography>
            <Chip size="small" variant="outlined" label={t(`dtype_${config.dataType}`)} />
          </Stack>
          {config.description ? (
            <Typography variant="body2" sx={{ color: 'text.secondary', mt: 0.5 }}>
              {config.description}
            </Typography>
          ) : null}
        </Box>

        <Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap' }}>
          <AppButton variant="text" color="primary" startIcon="history" onClick={() => onHistory?.(config)}>
            {t('cfg_history')}
          </AppButton>
          {canEdit ? (
            <AppButton variant="outlined" color="primary" startIcon="edit" onClick={() => onEdit?.(config)}>
              {t('cfg_edit')}
            </AppButton>
          ) : null}
        </Stack>
      </Stack>

      <Stack direction="row" sx={{ gap: 1, alignItems: 'center', mt: 1.5, flexWrap: 'wrap' }}>
        {config.dataType === 'bool' ? (
          <Chip
            size="small"
            label={config.value}
            sx={{ bgcolor: config.value === 'true' ? 'var(--bal-success)' : 'var(--bal-divider)', color: config.value === 'true' ? 'var(--bal-success-contrast)' : 'var(--bal-text-secondary)', fontWeight: 700 }}
          />
        ) : (
          <Typography
            variant="body2"
            data-config-value
            sx={{ fontFamily: 'monospace', fontWeight: 700, wordBreak: 'break-all', bgcolor: 'action.hover', px: 1, py: 0.5, borderRadius: 1 }}
          >
            {config.value}
          </Typography>
        )}
        {config.updatedAt ? (
          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
            {formatShamsiDateTime(config.updatedAt, locale)}
            {config.updatedBy ? ` · ${t('cfg_updated_by', { actor: config.updatedBy })}` : ''}
          </Typography>
        ) : null}
      </Stack>
    </Paper>
  );
};

export default ConfigRow;
