import React from 'react'
import type { JavaScriptEvent } from './types/javascriptEvent'
import { 
  formatDuration, 
  formatEventType, 
  getEventIcon, 
  truncateUrl, 
  getScriptType, 
  formatLocation 
} from './lib/formatUtils'
import { 
  getDurationClass, 
  getEventTypeClass, 
  getScriptTypeClass,
  getStreamingIndicator 
} from './lib/colorUtils'
import styles from './JavaScriptEventsTable.module.css'

interface JavaScriptEventsTableProps {
  events: JavaScriptEvent[]
  visibleColumns: Record<string, boolean>
}

const JavaScriptEventsTable: React.FC<JavaScriptEventsTableProps> = ({
  events,
  visibleColumns
}) => {
  if (events.length === 0) {
    return (
      <div className={styles.noResults}>
        No JavaScript events found in the trace data
      </div>
    )
  }

  return (
    <div className={styles.tableContainer}>
      <table className={styles.table}>
        <thead className={styles.tableHeader}>
          <tr>
            {visibleColumns.icon && (
              <th className={`${styles.tableHeaderCell} ${styles.center}`}>
                Type
              </th>
            )}
            {visibleColumns.eventType && (
              <th className={`${styles.tableHeaderCell} ${styles.left}`}>
                Event
              </th>
            )}
            {visibleColumns.duration && (
              <th className={`${styles.tableHeaderCell} ${styles.right}`}>
                Duration
              </th>
            )}
            {visibleColumns.url && (
              <th className={`${styles.tableHeaderCell} ${styles.left}`}>
                Script / URL
              </th>
            )}
            {visibleColumns.location && (
              <th className={`${styles.tableHeaderCell} ${styles.center}`}>
                Location
              </th>
            )}
            {visibleColumns.scriptType && (
              <th className={`${styles.tableHeaderCell} ${styles.center}`}>
                Script Type
              </th>
            )}
            {visibleColumns.streaming && (
              <th className={`${styles.tableHeaderCell} ${styles.center}`}>
                Streaming
              </th>
            )}
            {visibleColumns.startTime && (
              <th className={`${styles.tableHeaderCell} ${styles.right}`}>
                Start Time
              </th>
            )}
          </tr>
        </thead>
        <tbody>
          {events.map((event) => (
            <tr key={event.eventId} className={styles.eventRow}>
              {visibleColumns.icon && (
                <td className={`${styles.eventIcon} ${getEventTypeClass(event.name)}`}>
                  {getEventIcon(event.name)}
                </td>
              )}
              {visibleColumns.eventType && (
                <td className={styles.eventType}>
                  {formatEventType(event.name)}
                </td>
              )}
              {visibleColumns.duration && (
                <td className={`${styles.duration} ${getDurationClass(event.timing.durationMs)}`}>
                  {formatDuration(event.timing.duration)}
                </td>
              )}
              {visibleColumns.url && (
                <td className={styles.url} title={event.url}>
                  {event.isInlineScript ? (
                    <span className={styles.inlineScript}>
                      📄 Inline script
                    </span>
                  ) : (
                    <a 
                      href={event.url} 
                      target="_blank" 
                      rel="noopener noreferrer"
                      className={styles.urlLink}
                    >
                      {truncateUrl(event.url || '')}
                    </a>
                  )}
                </td>
              )}
              {visibleColumns.location && (
                <td className={styles.location}>
                  {formatLocation(event.lineNumber, event.columnNumber)}
                </td>
              )}
              {visibleColumns.scriptType && (
                <td className={`${styles.scriptType} ${getScriptTypeClass(getScriptType(event))}`}>
                  {getScriptType(event)}
                </td>
              )}
              {visibleColumns.streaming && (
                <td className={styles.streaming} title={event.v8Data?.notStreamedReason}>
                  {getStreamingIndicator(event.v8Data?.streamed, event.v8Data?.notStreamedReason)}
                </td>
              )}
              {visibleColumns.startTime && (
                <td className={styles.startTime}>
                  {formatDuration(event.timing.startTime)}
                </td>
              )}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export default JavaScriptEventsTable