import React, { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
import { Button } from './ui/button';
import { AlertCircle, CheckCircle2, ExternalLink, Globe, Info, MonitorPlay, Server, ShieldAlert, Wifi } from 'lucide-react';

export default function SystemDiagnostics() {
  const [diagnostics, setDiagnostics] = useState({
    isIframe: false,
    hasWebUSB: false,
    hasWebBluetooth: false,
    userAgent: '',
    screenSize: '',
    network: {
      online: navigator.onLine,
      type: (navigator as any).connection?.effectiveType || 'unknown',
      downlink: (navigator as any).connection?.downlink || 0,
      rtt: (navigator as any).connection?.rtt || 0,
    }
  });

  const [networkChecks, setNetworkChecks] = useState({
    dns: { status: 'pending', detail: 'Checking DNS resolution...' },
    outbound: { status: 'pending', detail: 'Checking outbound connectivity...' },
    local: { status: 'pending', detail: 'Checking local dev server...' },
  });

  useEffect(() => {
    setDiagnostics(prev => ({
      ...prev,
      isIframe: window.self !== window.top,
      hasWebUSB: 'usb' in navigator,
      hasWebBluetooth: 'bluetooth' in navigator,
      userAgent: navigator.userAgent,
      screenSize: `${window.innerWidth}x${window.innerHeight}`,
    }));

    // Run Network Checks
    const runChecks = async () => {
      // 1. DNS Check (via Cloudflare DoH)
      try {
        const start = Date.now();
        const res = await fetch('https://cloudflare-dns.com/dns-query?name=google.com&type=A', {
          headers: { 'accept': 'application/dns-json' }
        });
        if (res.ok) {
          setNetworkChecks(prev => ({ ...prev, dns: { status: 'success', detail: `Resolved google.com in ${Date.now() - start}ms` } }));
        } else {
          throw new Error();
        }
      } catch {
        setNetworkChecks(prev => ({ ...prev, dns: { status: 'error', detail: 'DNS Resolution Failed (DoH Blocked)' } }));
      }

      // 2. Outbound Check
      try {
        const res = await fetch('https://www.google.com/favicon.ico', { mode: 'no-cors' });
        setNetworkChecks(prev => ({ ...prev, outbound: { status: 'success', detail: 'Outbound HTTPS (443) Reachable' } }));
      } catch {
        setNetworkChecks(prev => ({ ...prev, outbound: { status: 'error', detail: 'Outbound Traffic Restricted' } }));
      }

      // 3. Local Check
      try {
        const res = await fetch(window.location.origin + '/favicon.ico', { mode: 'no-cors' });
        setNetworkChecks(prev => ({ ...prev, local: { status: 'success', detail: `Local Server (${window.location.port}) Reachable` } }));
      } catch {
        setNetworkChecks(prev => ({ ...prev, local: { status: 'error', detail: 'Local Connectivity Blocked' } }));
      }
    };

    runChecks();
  }, []);

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h2 className="text-2xl font-bold tracking-tight">System Diagnostics & Debugger</h2>
      </div>

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Environment Context</CardTitle>
            <MonitorPlay className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="flex items-center space-x-2 mt-2">
              {diagnostics.isIframe ? (
                <ShieldAlert className="h-5 w-5 text-destructive" />
              ) : (
                <CheckCircle2 className="h-5 w-5 text-green-500" />
              )}
              <span className="text-sm font-medium">
                {diagnostics.isIframe ? 'Running in iFrame (Restricted)' : 'Top-level Window (Unrestricted)'}
              </span>
            </div>
            {diagnostics.isIframe && (
              <p className="text-xs text-muted-foreground mt-2">
                Hardware APIs like WebUSB and WebBluetooth are often blocked inside iframes. Open the app in a new tab to use RTL-SDR.
              </p>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">WebUSB (RTL-SDR)</CardTitle>
            <AlertCircle className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="flex items-center space-x-2 mt-2">
              {diagnostics.hasWebUSB ? (
                <CheckCircle2 className="h-5 w-5 text-green-500" />
              ) : (
                <ShieldAlert className="h-5 w-5 text-destructive" />
              )}
              <span className="text-sm font-medium">
                {diagnostics.hasWebUSB ? 'Supported' : 'Not Supported'}
              </span>
            </div>
            <p className="text-xs text-muted-foreground mt-2">
              Required for RTL-SDR hardware integration.
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Web Bluetooth</CardTitle>
            <AlertCircle className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="flex items-center space-x-2 mt-2">
              {diagnostics.hasWebBluetooth ? (
                <CheckCircle2 className="h-5 w-5 text-green-500" />
              ) : (
                <ShieldAlert className="h-5 w-5 text-destructive" />
              )}
              <span className="text-sm font-medium">
                {diagnostics.hasWebBluetooth ? 'Supported' : 'Not Supported'}
              </span>
            </div>
            <p className="text-xs text-muted-foreground mt-2">
              Required for BLE scanning fallback.
            </p>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Globe className="h-5 w-5 text-blue-500" />
            Network Security & Connectivity
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 md:grid-cols-3">
            <div className="p-3 border rounded-lg bg-zinc-900/50">
              <div className="flex items-center gap-2 mb-2">
                <Wifi className="h-4 w-4 text-muted-foreground" />
                <span className="text-xs font-bold uppercase text-muted-foreground">Interface</span>
              </div>
              <div className="space-y-1">
                <div className="flex justify-between text-sm">
                  <span>Status</span>
                  <span className={diagnostics.network.online ? "text-green-500" : "text-red-500"}>
                    {diagnostics.network.online ? 'Online' : 'Offline'}
                  </span>
                </div>
                <div className="flex justify-between text-sm">
                  <span>Type</span>
                  <span className="font-mono">{diagnostics.network.type}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span>Latency</span>
                  <span className="font-mono">{diagnostics.network.rtt}ms</span>
                </div>
              </div>
            </div>

            <div className="p-3 border rounded-lg bg-zinc-900/50">
              <div className="flex items-center gap-2 mb-2">
                <Server className="h-4 w-4 text-muted-foreground" />
                <span className="text-xs font-bold uppercase text-muted-foreground">DNS & Resolution</span>
              </div>
              <div className="flex items-center gap-2">
                {networkChecks.dns.status === 'success' ? (
                  <CheckCircle2 className="h-4 w-4 text-green-500" />
                ) : networkChecks.dns.status === 'error' ? (
                  <ShieldAlert className="h-4 w-4 text-destructive" />
                ) : (
                  <div className="h-4 w-4 rounded-full border-2 border-zinc-700 border-t-blue-500 animate-spin" />
                )}
                <span className="text-sm">{networkChecks.dns.detail}</span>
              </div>
              <p className="text-[10px] text-muted-foreground mt-2 italic">
                Verified via Cloudflare DNS-over-HTTPS (DoH)
              </p>
            </div>

            <div className="p-3 border rounded-lg bg-zinc-900/50">
              <div className="flex items-center gap-2 mb-2">
                <ShieldAlert className="h-4 w-4 text-muted-foreground" />
                <span className="text-xs font-bold uppercase text-muted-foreground">Connectivity Probes</span>
              </div>
              <div className="space-y-2">
                <div className="flex items-center gap-2">
                  {networkChecks.outbound.status === 'success' ? (
                    <CheckCircle2 className="h-3 w-3 text-green-500" />
                  ) : (
                    <div className="h-3 w-3 rounded-full border border-zinc-700 border-t-blue-500 animate-spin" />
                  )}
                  <span className="text-xs">{networkChecks.outbound.detail}</span>
                </div>
                <div className="flex items-center gap-2">
                  {networkChecks.local.status === 'success' ? (
                    <CheckCircle2 className="h-3 w-3 text-green-500" />
                  ) : (
                    <div className="h-3 w-3 rounded-full border border-zinc-700 border-t-blue-500 animate-spin" />
                  )}
                  <span className="text-xs">{networkChecks.local.detail}</span>
                </div>
              </div>
            </div>
          </div>
          
          <div className="mt-4 p-3 bg-blue-500/5 border border-blue-500/20 rounded-lg">
            <div className="flex gap-2">
              <Info className="h-4 w-4 text-blue-400 shrink-0" />
              <p className="text-xs text-blue-200/80 leading-relaxed">
                <strong>Security Note:</strong> Browsers restrict direct socket access. Port scanning and firewall status are inferred via connectivity success/failure to known endpoints. No native OS firewall API is available to web applications.
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>External Modules & Integrations</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between p-4 border rounded-lg">
            <div>
              <h4 className="font-semibold">ParseX Forensic EML/MHT Viewer</h4>
              <p className="text-sm text-muted-foreground">Standalone module for deep analysis of EML and MHT files.</p>
            </div>
            <Button variant="outline" onClick={() => window.open('/parsex-viewer.html', '_blank')}>
              Open Module <ExternalLink className="ml-2 h-4 w-4" />
            </Button>
          </div>
          
          <div className="flex items-center justify-between p-4 border rounded-lg">
            <div>
              <h4 className="font-semibold">Syntax Color Reference</h4>
              <p className="text-sm text-muted-foreground">Visual reference for syntax highlighting color schemes.</p>
            </div>
            <Button variant="outline" onClick={() => window.open('/syntax-reference.html', '_blank')}>
              Open Module <ExternalLink className="ml-2 h-4 w-4" />
            </Button>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>System Information</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-2 text-sm">
            <div className="flex justify-between border-b pb-2">
              <span className="text-muted-foreground">User Agent</span>
              <span className="font-mono text-xs text-right max-w-[60%]">{diagnostics.userAgent}</span>
            </div>
            <div className="flex justify-between border-b pb-2">
              <span className="text-muted-foreground">Screen Resolution</span>
              <span className="font-mono">{diagnostics.screenSize}</span>
            </div>
            <div className="flex justify-between border-b pb-2">
              <span className="text-muted-foreground">Protocol</span>
              <span className="font-mono">{window.location.protocol}</span>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}