import React from 'react'
import styles from './HTTPRequestViewer.module.css'
import type { ScreenshotEvent } from './types/httpRequest'
import { formatDuration } from './lib/formatUtils'

interface ScreenshotRowProps {
  screenshot: ScreenshotEvent
  firstRequestTime: number
}

const ScreenshotRow: React.FC<ScreenshotRowProps> = ({
  screenshot,
  firstRequestTime
}) => {
  const timeOffset = screenshot.timestamp - firstRequestTime

  const handleScreenshotClick = () => {
    // Open screenshot in new window for full size viewing
    const newWindow = window.open('', '_blank')
    if (newWindow) {
      newWindow.document.write(`
        <html>
          <head><title>Screenshot at ${formatDuration(timeOffset)}</title></head>
          <body style="margin:0;padding:20px;background:#000;display:flex;justify-content:center;align-items:center;min-height:100vh;">
            <img src="${screenshot.screenshot}" style="max-width:100%;max-height:100vh;border-radius:4px;box-shadow:0 4px 20px rgba(0,0,0,0.5);" alt="Full size screenshot" />
          </body>
        </html>
      `)
    }
  }

  return (
    <tr key={`screenshot-${screenshot.index}`} className={styles.screenshotRow}>
      <td colSpan={18} className={styles.screenshotContainer}>
        <div className={styles.screenshotLabel}>
          📸 Screenshot
        </div>
        <div className={styles.screenshotTime}>
          <strong>Time:</strong> {formatDuration(timeOffset)}
        </div>
        <img
          src={screenshot.screenshot}
          alt={`Screenshot at ${formatDuration(timeOffset)}`}
          className={styles.screenshotImage}
          onClick={handleScreenshotClick}
        />
        <div className={styles.screenshotHint}>
          Click to view full size
        </div>
      </td>
    </tr>
  )
}

export default ScreenshotRow