import React from 'react'
import styles from './RequestFilters.module.css'
import type { HTTPRequest, ScreenshotEvent } from './types/httpRequest'

export interface RequestFiltersProps {
  // Data
  httpRequests: HTTPRequest[]
  screenshots: ScreenshotEvent[]
  screenshotsLoading: boolean
  resourceTypes: string[]
  protocols: string[]
  hostnames: string[]
  priorities: string[]
  filteredRequests: HTTPRequest[]
  timelineEntries: Array<{
    type: 'request' | 'screenshot'
    timestamp: number
    data: HTTPRequest | ScreenshotEvent
  }>
  
  // Filter States
  resourceTypeFilter: string
  protocolFilter: string
  hostnameFilter: string
  priorityFilter: string
  searchTerm: string
  
  // Display Options
  showQueueAnalysis: boolean
  showScreenshots: boolean
  show3DViewer: boolean
  showTimelineViewer: boolean
  
  // SSIM Controls
  pendingSSIMThreshold: number
  ssimThreshold: number
  
  // Handlers
  setResourceTypeFilter: (value: string) => void
  setProtocolFilter: (value: string) => void
  setHostnameFilter: (value: string) => void
  setPriorityFilter: (value: string) => void
  setSearchTerm: (value: string) => void
  setCurrentPage: (page: number) => void
  setShowQueueAnalysis: (show: boolean) => void
  setShowScreenshots: (show: boolean) => void
  setShow3DViewer: (show: boolean) => void
  setShowTimelineViewer: (show: boolean) => void
  setPendingSSIMThreshold: (value: number) => void
  handleSSIMRecalculate: () => void
}

const RequestFilters: React.FC<RequestFiltersProps> = ({
  httpRequests,
  screenshots,
  screenshotsLoading,
  resourceTypes,
  protocols,
  hostnames,
  priorities,
  filteredRequests,
  timelineEntries,
  resourceTypeFilter,
  protocolFilter,
  hostnameFilter,
  priorityFilter,
  searchTerm,
  showQueueAnalysis,
  showScreenshots,
  show3DViewer,
  showTimelineViewer,
  pendingSSIMThreshold,
  ssimThreshold,
  setResourceTypeFilter,
  setProtocolFilter,
  setHostnameFilter,
  setPriorityFilter,
  setSearchTerm,
  setCurrentPage,
  setShowQueueAnalysis,
  setShowScreenshots,
  setShow3DViewer,
  setShowTimelineViewer,
  setPendingSSIMThreshold,
  handleSSIMRecalculate
}) => {
  return (
    <div className={styles.filtersContainer}>
      {/* Resource Type Filter */}
      <div className={styles.filterGroup}>
        <label className={styles.filterLabel}>Resource Type:</label>
        <select
          value={resourceTypeFilter}
          onChange={(e) => {
            setResourceTypeFilter(e.target.value)
            setCurrentPage(1)
          }}
          className={styles.resourceTypeSelect}
        >
          <option value="all">All Types ({httpRequests.length})</option>
          {resourceTypes.map(type => (
            <option key={type} value={type}>
              {type} ({httpRequests.filter(r => r.resourceType === type).length})
            </option>
          ))}
        </select>
      </div>

      {/* Protocol Filter */}
      <div className={styles.filterGroup}>
        <label className={styles.filterLabel}>Protocol:</label>
        <select
          value={protocolFilter}
          onChange={(e) => {
            setProtocolFilter(e.target.value)
            setCurrentPage(1)
          }}
          className={styles.protocolSelect}
        >
          <option value="all">All Protocols</option>
          {protocols.map(protocol => (
            <option key={protocol} value={protocol}>
              {protocol} ({httpRequests.filter(r => r.protocol === protocol).length})
            </option>
          ))}
        </select>
      </div>

      {/* Hostname Filter */}
      <div className={styles.filterGroup}>
        <label className={styles.filterLabel}>Hostname:</label>
        <select
          value={hostnameFilter}
          onChange={(e) => {
            setHostnameFilter(e.target.value)
            setCurrentPage(1)
          }}
          className={styles.hostnameSelect}
        >
          <option value="all">All Hostnames</option>
          {hostnames.map(hostname => (
            <option key={hostname} value={hostname}>
              {hostname} ({httpRequests.filter(r => r.hostname === hostname).length})
            </option>
          ))}
        </select>
      </div>

      {/* Priority Filter */}
      <div className={styles.filterGroup}>
        <label className={styles.filterLabel}>Priority:</label>
        <select
          value={priorityFilter}
          onChange={(e) => {
            setPriorityFilter(e.target.value)
            setCurrentPage(1)
          }}
          className={styles.prioritySelect}
        >
          <option value="all">All Priorities</option>
          {priorities.map(priority => (
            <option key={priority} value={priority}>
              {priority} ({httpRequests.filter(r => r.priority === priority).length})
            </option>
          ))}
        </select>
      </div>

      {/* Search */}
      <div className={styles.filterGroup}>
        <label className={styles.filterLabel}>Search:</label>
        <input
          type="text"
          placeholder="Search URL, method, type, or status..."
          value={searchTerm}
          onChange={(e) => {
            setSearchTerm(e.target.value)
            setCurrentPage(1)
          }}
          className={styles.searchInput}
        />
      </div>

      {/* Queue Analysis Toggle */}
      <div className={styles.filterGroup}>
        <label className={styles.filterLabel}>Queue Analysis:</label>
        <label className={styles.checkboxLabel}>
          <input
            type="checkbox"
            checked={showQueueAnalysis}
            onChange={(e) => setShowQueueAnalysis(e.target.checked)}
            className={styles.checkbox}
          />
          Show queue analysis
        </label>
      </div>

      {/* 3D Viewer Toggle */}
      {httpRequests.length > 0 && (
        <div className={styles.filterGroup}>
          <label className={styles.filterLabel}>3D Visualization:</label>
          <label className={styles.checkboxLabel}>
            <input
              type="checkbox"
              checked={show3DViewer}
              onChange={(e) => setShow3DViewer(e.target.checked)}
              className={styles.checkbox}
            />
            Show 3D Network View
          </label>
          <label className={styles.checkboxLabel}>
            <input
              type="checkbox"
              checked={showTimelineViewer}
              onChange={(e) => setShowTimelineViewer(e.target.checked)}
              className={styles.checkbox}
            />
            Show 3D Timeline View
          </label>
        </div>
      )}

      {/* Screenshots Toggle */}
      {(screenshots.length > 0 || screenshotsLoading) && (
        <div className={styles.filterGroup}>
          <label className={styles.filterLabel}>Filmstrip:</label>
          <label className={styles.checkboxLabel}>
            <input
              type="checkbox"
              checked={showScreenshots}
              onChange={(e) => setShowScreenshots(e.target.checked)}
              className={styles.checkbox}
              disabled={screenshotsLoading}
            />
            {screenshotsLoading ? (
              <span className={styles.screenshotLoadingText}>
                🔍 Analyzing screenshots with SSIM...
              </span>
            ) : (
              `Show screenshots (${screenshots.length} unique frames)`
            )}
          </label>
          {screenshots.length > 0 && !screenshotsLoading && (
            <div className={styles.ssimControls}>
              <div className={styles.ssimControlsRow}>
                <label className={styles.ssimLabel}>
                  <span>SSIM Similarity Threshold:</span>
                  <input
                    type="range"
                    min="0.8"
                    max="0.99"
                    step="0.01"
                    value={pendingSSIMThreshold}
                    onChange={(e) => setPendingSSIMThreshold(parseFloat(e.target.value))}
                    className={styles.ssimSlider}
                  />
                  <span>{pendingSSIMThreshold.toFixed(2)}</span>
                </label>
                <button
                  onClick={handleSSIMRecalculate}
                  className={styles.recalculateButton}
                  title="Recalculate SSIM similarity with new threshold"
                >
                  Recalculate
                </button>
                {ssimThreshold !== pendingSSIMThreshold && (
                  <span className={styles.ssimPendingText}>
                    (Click Recalculate to apply)
                  </span>
                )}
              </div>
              <div className={styles.ssimHelpText}>
                Lower values = more screenshots kept (more sensitive to changes)
              </div>
            </div>
          )}
        </div>
      )}

      {/* Results count */}
      <div className={styles.resultsCounter}>
        {showScreenshots ? 
          `${timelineEntries.length.toLocaleString()} timeline entries` :
          `${filteredRequests.length.toLocaleString()} requests found`}
      </div>
    </div>
  )
}

export default RequestFilters