import React from 'react'
import type { JavaScriptSummary as JSummary } from './types/javascriptEvent'
import { formatDuration } from './lib/formatUtils'
import styles from './JavaScriptSummary.module.css'

interface JavaScriptSummaryProps {
  summary: JSummary
}

const JavaScriptSummary: React.FC<JavaScriptSummaryProps> = ({ summary }) => {
  const { 
    totalEvents, 
    totalExecutionTime, 
    totalCompilationTime, 
    totalEvaluationTime, 
    eventsByType,
    scriptsByUrl 
  } = summary

  const topScripts = Array.from(scriptsByUrl.values())
    .sort((a, b) => b.totalTime - a.totalTime)
    .slice(0, 5)

  return (
    <div className={styles.summaryContainer}>
      {/* Overview Stats */}
      <div className={styles.statsGrid}>
        <div className={styles.statCard}>
          <div className={styles.statValue}>{totalEvents}</div>
          <div className={styles.statLabel}>Total Events</div>
        </div>
        
        <div className={styles.statCard}>
          <div className={styles.statValue}>{formatDuration(totalExecutionTime)}</div>
          <div className={styles.statLabel}>Total Time</div>
        </div>
        
        <div className={styles.statCard}>
          <div className={styles.statValue}>{formatDuration(totalCompilationTime)}</div>
          <div className={styles.statLabel}>Compilation</div>
        </div>
        
        <div className={styles.statCard}>
          <div className={styles.statValue}>{formatDuration(totalEvaluationTime)}</div>
          <div className={styles.statLabel}>Evaluation</div>
        </div>
      </div>

      {/* Event Type Breakdown */}
      <div className={styles.breakdownSection}>
        <h3 className={styles.sectionTitle}>Event Type Breakdown</h3>
        <div className={styles.eventTypeGrid}>
          <div className={styles.eventTypeCard}>
            <div className={styles.eventTypeIcon}>⚙️</div>
            <div className={styles.eventTypeInfo}>
              <div className={styles.eventTypeCount}>{eventsByType.compilation}</div>
              <div className={styles.eventTypeLabel}>Compilation</div>
            </div>
          </div>
          
          <div className={styles.eventTypeCard}>
            <div className={styles.eventTypeIcon}>▶️</div>
            <div className={styles.eventTypeInfo}>
              <div className={styles.eventTypeCount}>{eventsByType.evaluation}</div>
              <div className={styles.eventTypeLabel}>Evaluation</div>
            </div>
          </div>
          
          <div className={styles.eventTypeCard}>
            <div className={styles.eventTypeIcon}>📞</div>
            <div className={styles.eventTypeInfo}>
              <div className={styles.eventTypeCount}>{eventsByType.execution}</div>
              <div className={styles.eventTypeLabel}>Execution</div>
            </div>
          </div>
          
          <div className={styles.eventTypeCard}>
            <div className={styles.eventTypeIcon}>🔧</div>
            <div className={styles.eventTypeInfo}>
              <div className={styles.eventTypeCount}>{eventsByType.other}</div>
              <div className={styles.eventTypeLabel}>Other</div>
            </div>
          </div>
        </div>
      </div>

      {/* Top Scripts by Time */}
      <div className={styles.topScriptsSection}>
        <h3 className={styles.sectionTitle}>Top Scripts by Execution Time</h3>
        <div className={styles.scriptsList}>
          {topScripts.map((script, index) => (
            <div key={script.url} className={styles.scriptCard}>
              <div className={styles.scriptRank}>#{index + 1}</div>
              <div className={styles.scriptInfo}>
                <div className={styles.scriptUrl} title={script.url}>
                  {script.isThirdParty ? '🌐' : '🏠'} {script.url}
                </div>
                <div className={styles.scriptStats}>
                  <span className={styles.scriptTime}>{formatDuration(script.totalTime)}</span>
                  <span className={styles.scriptEvents}>{script.events.length} events</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default JavaScriptSummary