'use client';

import React from 'react';
import { NC_SOURCE_CONFIG, avatarGradient, firstInitial } from '@/lib/api/mappers/previous-nc.mappers';
import type { AuditNcStatusRow } from '@/lib/api/types/previous-nc.types';

interface Props {
  row: AuditNcStatusRow;
}

export default function AuditStatusRow({ row }: Props) {
  const src = NC_SOURCE_CONFIG[row.source];
  const raised = row.nc_status === 'NC Raised';
  const auditorLabel = row.auditor_names.length ? row.auditor_names.join(', ') : null;

  return (
    <tr style={{ borderTop: '1px solid #f1f5f9' }}>
      {/* 1. Client */}
      <td style={{ padding: '12px 10px', width: 300, maxWidth: 300, verticalAlign: 'top' }}>
        <div
          style={{
            fontWeight: 600, fontSize: 13, color: '#111827', lineHeight: 1.35,
            display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
            overflow: 'hidden', wordBreak: 'break-word',
          }}
          title={row.company_name ?? ''}
        >
          {row.company_name ?? '—'}
        </div>
      </td>

      {/* 2. Source */}
      <td style={{ padding: '12px 10px', width: 90, verticalAlign: 'top' }}>
        <span style={{ padding: '2px 8px', borderRadius: 99, background: src.bg, color: src.color, fontSize: 10, fontWeight: 600, whiteSpace: 'nowrap' }}>
          📁 {src.label}
        </span>
      </td>

      {/* 3. Audit Type */}
      <td style={{ padding: '12px 10px', width: 140, verticalAlign: 'top' }}>
        {(() => {
          const kind =
            row.audit_kind === 'client'
              ? { label: 'Initial Audit', bg: '#eef2ff', color: '#4338ca', border: '#c7d2fe' }
              : row.audit_kind === 'recertification'
              ? { label: 'Re-Assessment', bg: '#f0fdf4', color: '#15803d', border: '#bbf7d0' }
              : { label: 'Surveillance', bg: '#fffbeb', color: '#b45309', border: '#fde68a' };
          return (
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 10px', borderRadius: 8,
              background: kind.bg, color: kind.color, border: `1px solid ${kind.border}`,
              fontSize: 11, fontWeight: 700, whiteSpace: 'nowrap',
            }}>
              {kind.label}
            </span>
          );
        })()}
      </td>

      {/* 4. Audit Date */}
      <td style={{ padding: '12px 10px', width: 130, verticalAlign: 'top' }}>
        <div style={{ fontSize: 13, color: '#111827' }}>
          {row.audit_date
            ? new Date(row.audit_date).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
            : '—'}
        </div>
      </td>

      {/* 5. Auditor */}
      <td style={{ padding: '12px 10px', width: 160, fontSize: 12, color: '#374151', verticalAlign: 'top' }}>
        {auditorLabel ? (
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ width: 22, height: 22, borderRadius: '50%', background: avatarGradient(auditorLabel), color: '#fff', fontSize: 10, fontWeight: 700, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              {firstInitial(auditorLabel)}
            </span>
            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={auditorLabel}>
              {auditorLabel}
            </span>
          </div>
        ) : (
          <span style={{ color: '#9ca3af', fontStyle: 'italic', fontSize: 11 }}>N/A</span>
        )}
      </td>

      {/* 6. NC Status */}
      <td style={{ padding: '12px 10px', width: 130, verticalAlign: 'top' }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 10px', borderRadius: 99,
          background: raised ? '#dcfce7' : '#fef3c7', color: raised ? '#166534' : '#b45309',
          fontSize: 11, fontWeight: 600, whiteSpace: 'nowrap',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: raised ? '#16a34a' : '#f59e0b' }} />
          {row.nc_status}
        </span>
      </td>
    </tr>
  );
}