popup.tsx

import { Github, Shield } from "lucide-react"
import { useEffect, useState } from "react"

import { LoadingSpinner } from "~components/LoadingSpinner"
import { ScanForm } from "~components/ScanForm"
import { ScanResult } from "~components/ScanResult"
import { ThemeProvider } from "~components/ThemeProvider"
import { ThemeToggle } from "~components/ThemeToggle"
import { Separator } from "~components/ui/separator"
import type {
  ScanError,
  ScanRequest,
  ScanResult as ScanResultType
} from "~lib/types"

import "~styles/globals.css"

function IndexPopup() {
  const [currentUrl, setCurrentUrl] = useState("")
  const [isScanning, setIsScanning] = useState(false)
  const [result, setResult] = useState<ScanResultType | ScanError | null>(null)

  // Get current tab URL when popup opens
  useEffect(() => {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      if (tabs[0]?.url) {
        setCurrentUrl(tabs[0].url)
      }
    })
  }, [])

  // Handle scan button click
  const handleScan = (url: string) => {
    setIsScanning(true)
    setResult(null)

    // Send scan request to background worker
    const message: ScanRequest = {
      type: "SCAN_START",
      url
    }

    chrome.runtime.sendMessage(
      message,
      (response: ScanResultType | ScanError) => {
        setIsScanning(false)
        setResult(response)
      }
    )
  }

  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange>
      <div className="w-[480px] min-h-[400px] max-h-[600px] overflow-y-auto">
        {/* Header */}
        <div className="sticky top-0 z-10 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 border-b shadow-sm p-4 space-y-2">
          <div className="flex items-start justify-between gap-3">
            <div className="flex-1 space-y-2">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Shield className="h-5 w-5 text-primary" />
                  <h1 className="text-lg font-semibold">
                    React2Shell Detector
                  </h1>
                </div>
                <div className="flex items-center gap-2">
                  <a
                    href="https://github.com/xiaopeng-ye/react2shell-detector"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center justify-center h-8 w-8 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors"
                    title="View on GitHub">
                    <Github className="h-4 w-4" />
                  </a>
                  <ThemeToggle />
                </div>
              </div>
              <p className="text-xs text-muted-foreground">
                Detect React2Shell vulnerabilities (CVE-2025-55182 &
                CVE-2025-66478)
              </p>
            </div>
          </div>
        </div>

        {/* Main Content */}
        <div className="p-4 space-y-4">
          {/* Scan Form */}
          <ScanForm
            onScan={handleScan}
            initialUrl={currentUrl}
            isScanning={isScanning}
          />

          <Separator />

          {/* Loading State */}
          {isScanning && (
            <LoadingSpinner message="Scanning for vulnerabilities..." />
          )}

          {/* Results */}
          {!isScanning && result && <ScanResult result={result} />}

          {/* Empty State */}
          {!isScanning && !result && (
            <div className="text-center py-8 text-muted-foreground">
              <p className="text-sm">
                Enter a URL and click the scan button to detect vulnerabilities
              </p>
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="border-t p-3 text-xs text-center text-muted-foreground">
          <p>
            For security research and authorized testing only.{" "}
            <a
              href="https://github.com/assetnote/react2shell-scanner"
              target="_blank"
              rel="noopener noreferrer"
              className="text-primary hover:underline">
              Learn more
            </a>
          </p>
        </div>
      </div>
    </ThemeProvider>
  )
}

export default IndexPopup