/**
 * Strukturierte Zeilenfehler aus Universal-CSV-Import (error_details mit hint/code).
 */
export default function CsvImportErrorDetails({ errors, title, defaultOpen = true, maxVisible = 20 }) {
  if (!errors?.length) return null

  const shown = errors.slice(0, maxVisible)
  const rest = errors.length - shown.length

  return (
    <details
      className="card"
      style={{ marginBottom: 16, padding: 16, cursor: 'pointer' }}
      open={defaultOpen}
    >
      <summary style={{ fontWeight: 600, color: 'var(--text1)' }}>
        {title || `Zeilenfehler (${errors.length})`}
      </summary>
      <ul
        style={{
          margin: '12px 0 0 0',
          padding: 0,
          listStyle: 'none',
          fontSize: 13,
          lineHeight: 1.5,
        }}
      >
        {shown.map((err, i) => {
          const row = err.row ?? err.row_index
          const message = err.error ?? err.message ?? (typeof err === 'string' ? err : JSON.stringify(err))
          return (
            <li
              key={i}
              style={{
                padding: '10px 12px',
                marginBottom: 8,
                background: 'var(--surface2)',
                borderRadius: 8,
                borderLeft: '3px solid var(--danger)',
              }}
            >
              <div style={{ color: 'var(--text1)' }}>
                {row != null && (
                  <strong style={{ marginRight: 6 }}>Zeile {row}:</strong>
                )}
                {message}
                {err.code && (
                  <code
                    style={{
                      marginLeft: 8,
                      fontSize: 11,
                      color: 'var(--text3)',
                      background: 'var(--surface)',
                      padding: '1px 6px',
                      borderRadius: 4,
                    }}
                  >
                    {err.code}
                  </code>
                )}
              </div>
              {err.hint && (
                <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text2)' }}>{err.hint}</div>
              )}
            </li>
          )
        })}
      </ul>
      {rest > 0 && (
        <p style={{ fontSize: 12, color: 'var(--text3)', margin: '8px 0 0' }}>
          … und {rest} weitere Fehler (Details in der Import-Historie).
        </p>
      )}
    </details>
  )
}