import { useDatabaseTraceData } from '../hooks/useDatabaseTraceData'
import TraceStats from './TraceStats'

interface TraceViewerProps {
  traceId: string | null
}

export default function TraceViewer({ traceId }: TraceViewerProps) {
  const { traceData, loading, error, stats, reload } = useDatabaseTraceData(traceId)

  if (loading) {
    return (
      <div style={{ 
        display: 'flex', 
        flexDirection: 'column',
        justifyContent: 'center', 
        alignItems: 'center', 
        minHeight: '400px',
        fontSize: '18px',
        color: '#6c757d',
        padding: '40px'
      }}>
        <div style={{
          width: '50px',
          height: '50px',
          border: '4px solid #f3f3f3',
          borderTop: '4px solid #007bff',
          borderRadius: '50%',
          animation: 'spin 1s linear infinite',
          marginBottom: '20px'
        }} />
        <div>Loading trace data...</div>
        <div style={{ fontSize: '14px', marginTop: '10px', textAlign: 'center' }}>
          This may take a moment for large trace files (90.9MB)
        </div>
        <style>{`
          @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
          }
        `}</style>
      </div>
    )
  }

  if (error) {
    return (
      <div style={{ 
        padding: '20px',
        maxWidth: '600px',
        margin: '0 auto',
        textAlign: 'center'
      }}>
        <div style={{ 
          background: '#f8d7da', 
          color: '#721c24',
          padding: '15px', 
          borderRadius: '8px',
          border: '1px solid #f5c6cb',
          marginBottom: '15px'
        }}>
          <h3 style={{ margin: '0 0 10px 0' }}>Error Loading Trace Data</h3>
          <p style={{ margin: '0' }}>{error}</p>
        </div>
        <button 
          onClick={reload}
          style={{
            background: '#007bff',
            color: 'white',
            border: 'none',
            padding: '10px 20px',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '14px'
          }}
        >
          Retry
        </button>
      </div>
    )
  }

  if (!traceData || !stats) {
    return (
      <div style={{ 
        display: 'flex', 
        justifyContent: 'center', 
        alignItems: 'center', 
        minHeight: '200px',
        fontSize: '18px',
        color: '#6c757d'
      }}>
        No trace data available
      </div>
    )
  }

  return (
    <div>
      <div style={{ 
        padding: '10px 20px', 
        background: '#e9ecef', 
        borderBottom: '1px solid #dee2e6',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center'
      }}>
        <h1 style={{ margin: '0', color: '#495057' }}>Performance Trace Viewer</h1>
        <button 
          onClick={reload}
          style={{
            background: '#28a745',
            color: 'white',
            border: 'none',
            padding: '8px 16px',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '12px'
          }}
        >
          Reload Data
        </button>
      </div>
      
      <TraceStats stats={stats} />
    </div>
  )
}