import React, { useState, useEffect } from 'react';
import { Button, Card, CardBody, CardHeader, Spinner, TextControl, Notice, TabPanel } from '@wordpress/components';
import { Icon } from '@wordpress/icons';
import { search, globe } from '@wordpress/icons';
import Layout from '../layout/Layout';

const MalwareScanner = () => {
    const [url, setUrl] = useState('');
    const [domain, setDomain] = useState('');
    const [isScanning, setIsScanning] = useState(false);
    const [scanResults, setScanResults] = useState(null);
    const [domainResults, setDomainResults] = useState(null);
    const [error, setError] = useState(null);
    const [activeTab, setActiveTab] = useState('url');
    const [recentScans, setRecentScans] = useState([]);
    const [currentSiteUrl, setCurrentSiteUrl] = useState('');

    // Defensive check for wpApiSettings
    if (!window.wpApiSettings || !window.wpApiSettings.root) {
        console.error('wpApiSettings or root is not defined!');
        // Optionally, you could render a user-friendly error message here
    }

    // Get current site URL on component mount
    useEffect(() => {
        // Get the current site URL from WordPress
        const siteUrl = window.location.origin;
        setCurrentSiteUrl(siteUrl);
        setUrl(siteUrl);
    }, []);

    // Function to scan current site URL
    const scanCurrentSite = () => {
        if (currentSiteUrl) {
            setUrl(currentSiteUrl);
            scanUrl();
        }
    };

    const getRiskLevel = (positives, total) => {
        if (!positives || !total) return { level: 'unknown', color: '#666', icon: '⚪' };
        const percentage = (positives / total) * 100;
        if (percentage <= 5) return { level: 'safe', color: '#27ae60', icon: '🟢' };
        if (percentage <= 20) return { level: 'suspicious', color: '#f39c12', icon: '🟡' };
        return { level: 'dangerous', color: '#c0392b', icon: '🔴' };
    };

    const formatDate = (timestamp) => {
        if (!timestamp) return 'N/A';
        try {
            const date = new Date(typeof timestamp === 'number' ? timestamp * 1000 : timestamp);
            if (isNaN(date.getTime())) return 'N/A';
            return date.toLocaleString();
        } catch (e) {
            return 'N/A';
        }
    };

    const extractDomain = (url) => {
        try {
            const urlObj = new URL(url.startsWith('http') ? url : `http://${url}`);
            return urlObj.hostname;
        } catch (e) {
            return url;
        }
    };

    const scanUrl = async () => {
        setIsScanning(true);
        setError(null);
        setScanResults(null);

        if (!url) {
            setError('Please enter a URL to scan');
            setIsScanning(false);
            return;
        }

        const urlToScan = url.startsWith('http') ? url : `http://${url}`;

        try {
            const response = await fetch(`${window.wpApiSettings.root}safe-sites/v1/security/scan-url`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-WP-Nonce': window.wpApiSettings.nonce,
                },
                body: JSON.stringify({ url: urlToScan })
            });

            const data = await response.json();
            if (!response.ok) {
                throw new Error(data.message || 'Failed to scan URL');
            }
            setScanResults(data.data);
            
            // If domain info is available, update domain results
            if (data.data.domain_info) {
                setDomainResults(data.data.domain_info);
                setDomain(extractDomain(urlToScan));
                setActiveTab('domain');
            }
        } catch (err) {
            console.error('Scan error:', err);
            setError(err.message || 'Failed to scan URL');
        } finally {
            setIsScanning(false);
        }
    };

    const analyzeDomain = async () => {
        setIsScanning(true);
        setError(null);
        setDomainResults(null);

        if (!domain) {
            setError('Please enter a domain to analyze');
            setIsScanning(false);
            return;
        }

        try {
            const response = await fetch(`${window.wpApiSettings.root}safe-sites/v1/security/analyze-domain`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-WP-Nonce': window.wpApiSettings.nonce,
                },
                body: JSON.stringify({ domain })
            });

            const data = await response.json();
            if (!response.ok) {
                throw new Error(data.message || 'Failed to analyze domain');
            }
            setDomainResults(data.data);
        } catch (err) {
            console.error('Domain analysis error:', err);
            setError(err.message || 'Failed to analyze domain');
        } finally {
            setIsScanning(false);
        }
    };

    const renderUrlResults = () => {
        if (!scanResults) return null;

        return (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {/* Scan Summary */}
                <Card>
                    <CardHeader>
                        <h3 className="text-lg font-medium" style={{ color: '#2c3e50' }}>Scan Summary</h3>
                    </CardHeader>
                    <CardBody>
                        <div className="space-y-4">
                            <div>
                                <div className="text-sm font-medium mb-1" style={{ color: '#2c3e50' }}>Scanned URL</div>
                                <div className="text-sm break-all" style={{ color: '#666' }}>{scanResults.url}</div>
                            </div>
                            <div>
                                <div className="text-sm font-medium mb-1" style={{ color: '#2c3e50' }}>Scan Date</div>
                                <div className="text-sm" style={{ color: '#666' }}>
                                    {new Date(scanResults.scan_date * 1000).toLocaleString()}
                                </div>
                            </div>
                            <div>
                                <div className="text-sm font-medium mb-1" style={{ color: '#2c3e50' }}>Analysis Status</div>
                                <div className="text-sm" style={{ color: '#666' }}>
                                    {scanResults.response_code === 1 ? 'Complete' : 'Pending'}
                                </div>
                            </div>
                        </div>
                    </CardBody>
                </Card>

                {/* Detection Details */}
                <Card>
                    <CardHeader>
                        <h3 className="text-lg font-medium" style={{ color: '#2c3e50' }}>Detection Details</h3>
                    </CardHeader>
                    <CardBody>
                        <div className="space-y-4">
                            <div>
                                <div className="text-sm font-medium mb-1" style={{ color: '#2c3e50' }}>Total Scans</div>
                                <div className="text-sm" style={{ color: '#666' }}>{scanResults.total}</div>
                            </div>
                            <div>
                                <div className="text-sm font-medium mb-1" style={{ color: '#2c3e50' }}>Detections</div>
                                <div className="text-sm" style={{ color: '#666' }}>{scanResults.positives}</div>
                            </div>
                            <div>
                                <div className="text-sm font-medium mb-1" style={{ color: '#2c3e50' }}>Community Score</div>
                                <div className="text-sm" style={{ color: '#666' }}>
                                    {scanResults.community_score ? `${scanResults.community_score}/100` : 'Not available'}
                                </div>
                            </div>
                        </div>
                    </CardBody>
                </Card>

                {/* Scan Details */}
                {scanResults.scans && (
                    <Card className="col-span-full">
                        <CardHeader>
                            <h3 className="text-lg font-medium" style={{ color: '#2c3e50' }}>Detailed Analysis</h3>
                        </CardHeader>
                        <CardBody>
                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                {Object.entries(scanResults.scans).map(([scanner, result]) => (
                                    <div key={scanner} className="border border-solid border-[#e8e8e8] p-3 rounded">
                                        <div className="font-medium text-sm mb-1" style={{ color: '#2c3e50' }}>{scanner}</div>
                                        <div className="flex items-center space-x-2">
                                            <span className={`inline-block w-2 h-2 rounded-full ${
                                                result.detected ? 'bg-[#c0392b]' : 'bg-[#27ae60]'
                                            }`} />
                                            <span className="text-sm" style={{ color: '#666' }}>
                                                {result.detected ? result.result || 'Detected' : 'Clean'}
                                            </span>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </CardBody>
                    </Card>
                )}
            </div>
        );
    };

    const renderDomainResults = () => {
        if (!domainResults) return null;

        const {
            Webutation = {},
            WOT = {},
            detected_urls = [],
            detected_downloaded_samples = [],
            whois = '',
            resolutions = [],
            subdomains = [],
            categories = [],
        } = domainResults;

        // Calculate overall risk score
        const totalDetections = (detected_urls || []).length + (detected_downloaded_samples || []).length;
        const riskScore = Math.min(100, Math.round((totalDetections / 2) * 10));
        const riskLevel = getRiskLevel(riskScore, 100);

        return (
            <div className="mt-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                    {/* Risk Score */}
                    {/* <Card>
                        <CardHeader>
                            <h3 className="text-lg font-medium" style={{ color: '#2c3e50' }}>Risk Assessment</h3>
                        </CardHeader>
                        <CardBody>
                            <div className="flex items-center mb-3">
                                <span style={{ color: riskLevel.color, fontSize: '24px' }}>{riskLevel.icon}</span>
                                <span className="ml-2 text-xl font-medium" style={{ color: riskLevel.color }}>
                                    {riskScore}/100
                                </span>
                            </div>
                            <div className="space-y-2">
                                <div className="text-sm">
                                    <span className="font-medium">Malicious URLs: </span>
                                    {detected_urls?.length || 0}
                                </div>
                                <div className="text-sm">
                                    <span className="font-medium">Malicious Downloads: </span>
                                    {detected_downloaded_samples?.length || 0}
                                </div>
                            </div>
                        </CardBody>
                    </Card> */}

                    {/* Domain Reputation */}
                    {/* <Card>
                        <CardHeader>
                            <h3 className="text-lg font-medium" style={{ color: '#2c3e50' }}>Domain Reputation</h3>
                        </CardHeader>
                        <CardBody>
                            <div className="space-y-4">
                                {Webutation?.score !== undefined && (
                                    <div>
                                        <div className="flex items-center justify-between mb-1">
                                            <span className="font-medium text-[#2c3e50]">Webutation Score</span>
                                            <span className="text-lg" style={{ color: getRiskLevel(Webutation.score, 100).color }}>
                                                {Webutation.score}/100
                                            </span>
                                        </div>
                                        <div className="w-full bg-gray-200 rounded-full h-2">
                                            <div
                                                className="h-2 rounded-full"
                                                style={{
                                                    width: `${Webutation.score}%`,
                                                    backgroundColor: getRiskLevel(Webutation.score, 100).color,
                                                }}
                                            />
                                        </div>
                                    </div>
                                )}
                                {WOT?.score !== undefined && (
                                    <div>
                                        <div className="flex items-center justify-between mb-1">
                                            <span className="font-medium text-[#2c3e50]">WOT Score</span>
                                            <span className="text-lg" style={{ color: getRiskLevel(WOT.score, 100).color }}>
                                                {WOT.score}/100
                                            </span>
                                        </div>
                                        <div className="w-full bg-gray-200 rounded-full h-2">
                                            <div
                                                className="h-2 rounded-full"
                                                style={{
                                                    width: `${WOT.score}%`,
                                                    backgroundColor: getRiskLevel(WOT.score, 100).color,
                                                }}
                                            />
                                        </div>
                                    </div>
                                )}
                            </div>
                        </CardBody>
                    </Card> */}

                    {/* Categories */}
                    {categories.length > 0 && (
                        <Card>
                            <CardHeader>
                                <h3 className="text-lg font-medium" style={{ color: '#2c3e50' }}>Categories</h3>
                            </CardHeader>
                            <CardBody>
                                <div className="flex flex-wrap gap-2">
                                    {categories.map((category, index) => (
                                        <span
                                            key={index}
                                            className="px-2 py-1 bg-gray-100 rounded text-sm border border-solid border-[#e8e8e8]"
                                        >
                                            {category}
                                        </span>
                                    ))}
                                </div>
                            </CardBody>
                        </Card>
                    )}

                    {/* WHOIS Information */}
                    {whois && (
                        <Card className="col-span-full">
                            <CardHeader>
                                <h3 className="text-lg font-medium" style={{ color: '#2c3e50' }}>WHOIS Information</h3>
                            </CardHeader>
                            <CardBody>
                                <pre className="whitespace-pre-wrap text-sm" style={{ color: '#666' }}>
                                    {whois}
                                </pre>
                            </CardBody>
                        </Card>
                    )}

                    {/* DNS Resolutions */}
                    {resolutions?.length > 0 && (
                        <Card>
                            <CardHeader>
                                <h3 className="text-lg font-medium" style={{ color: '#2c3e50' }}>DNS History</h3>
                            </CardHeader>
                            <CardBody>
                                <div className="space-y-2">
                                    {resolutions.slice(0, 10).map((resolution, index) => (
                                        <div
                                            key={index}
                                            className="text-sm border border-solid border-[#e8e8e8] p-2 rounded"
                                        >
                                            <div>IP: {resolution.ip_address}</div>
                                            <div>Last Resolved: {formatDate(resolution.last_resolved)}</div>
                                        </div>
                                    ))}
                                </div>
                            </CardBody>
                        </Card>
                    )}

                    {/* Subdomains */}
                    {subdomains?.length > 0 && (
                        <Card>
                            <CardHeader>
                                <h3 className="text-lg font-medium" style={{ color: '#2c3e50' }}>Subdomains</h3>
                            </CardHeader>
                            <CardBody>
                                <div className="space-y-1">
                                    {subdomains.map((subdomain, index) => (
                                        <div
                                            key={index}
                                            className="text-sm p-1 border border-solid border-[#e8e8e8] rounded"
                                        >
                                            {subdomain}
                                        </div>
                                    ))}
                                </div>
                            </CardBody>
                        </Card>
                    )}

                    {/* HTML Info and Headers */}
                    {domainResults.html_info && (
                        <>
                            {/* Security Headers */}
                            <Card className="col-span-full">
                                <CardHeader>
                                    <h3 className="text-lg font-medium" style={{ color: '#2c3e50' }}>Security Headers</h3>
                                </CardHeader>
                                <CardBody>
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        {Object.entries(domainResults.html_info.headers.security).map(([header, info]) => (
                                            <div key={header} className="border border-solid border-[#e8e8e8] p-4 rounded">
                                                <div className="flex items-center justify-between mb-2">
                                                    <span className="font-medium text-[#2c3e50]">{header}</span>
                                                    <span className={`text-sm px-2 py-0.5 rounded ${
                                                        info.status === 'valid' ? 'bg-[#27ae60] text-white' :
                                                        info.status === 'present' ? 'bg-[#f39c12] text-white' :
                                                        'bg-[#c0392b] text-white'
                                                    }`}>
                                                        {info.status}
                                                    </span>
                                                </div>
                                                <div className="text-sm text-[#666] mb-2">{info.description}</div>
                                                {info.value && (
                                                    <div className="text-sm bg-gray-50 p-2 rounded mb-2 break-all">
                                                        {info.value}
                                                    </div>
                                                )}
                                                {info.recommendation && (
                                                    <div className="text-sm text-[#c0392b]">
                                                        {info.recommendation}
                                                    </div>
                                                )}
                                            </div>
                                        ))}
                                    </div>

                                    {/* Server Information */}
                                    <div className="mt-6">
                                        <h4 className="text-base font-medium mb-3" style={{ color: '#2c3e50' }}>Server Information</h4>
                                        <div className="space-y-3">
                                            {domainResults.html_info.headers.server.server && (
                                                <div className="text-sm">
                                                    <span className="font-medium">Server: </span>
                                                    {domainResults.html_info.headers.server.server}
                                                </div>
                                            )}
                                            {domainResults.html_info.headers.server.powered_by && (
                                                <div className="text-sm">
                                                    <span className="font-medium">Powered By: </span>
                                                    {domainResults.html_info.headers.server.powered_by}
                                                </div>
                                            )}
                                            {domainResults.html_info.headers.server.technologies?.length > 0 && (
                                                <div>
                                                    <span className="text-sm font-medium">Technologies: </span>
                                                    <div className="flex flex-wrap gap-2 mt-1">
                                                        {domainResults.html_info.headers.server.technologies.map((tech, index) => (
                                                            <span
                                                                key={index}
                                                                className="px-2 py-1 bg-gray-100 text-sm rounded border border-solid border-[#e8e8e8]"
                                                            >
                                                                {tech}
                                                            </span>
                                                        ))}
                                                    </div>
                                                </div>
                                            )}
                                        </div>
                                    </div>
                                </CardBody>
                            </Card>

                            {/* HTML Information */}
                            <Card className="col-span-full">
                                <CardHeader>
                                    <h3 className="text-lg font-medium" style={{ color: '#2c3e50' }}>HTML Information</h3>
                                </CardHeader>
                                <CardBody>
                                    <div className="space-y-6">
                                        {/* Title */}
                                        {domainResults.html_info.html.title && (
                                            <div>
                                                <h4 className="text-base font-medium mb-2" style={{ color: '#2c3e50' }}>Page Title</h4>
                                                <div className="text-sm p-3 bg-gray-50 rounded border border-solid border-[#e8e8e8]">
                                                    {domainResults.html_info.html.title}
                                                </div>
                                            </div>
                                        )}

                                        {/* Meta Tags */}
                                        {Object.entries(domainResults.html_info.html.meta_tags).map(([category, tags]) => (
                                            Object.keys(tags).length > 0 && (
                                                <div key={category}>
                                                    <h4 className="text-base font-medium mb-2 capitalize" style={{ color: '#2c3e50' }}>
                                                        {category} Meta Tags
                                                    </h4>
                                                    <div className="grid grid-cols-1 gap-2">
                                                        {Object.entries(tags).map(([name, content]) => (
                                                            <div key={name} className="border border-solid border-[#e8e8e8] p-3 rounded">
                                                                <div className="font-medium text-sm text-[#2c3e50] mb-1">{name}</div>
                                                                <div className="text-sm break-words text-[#666]">{content}</div>
                                                            </div>
                                                        ))}
                                                    </div>
                                                </div>
                                            )
                                        ))}

                                        {/* Trackers */}
                                        {Object.entries(domainResults.html_info.html.trackers).map(([category, trackers]) => (
                                            trackers.length > 0 && (
                                                <div key={category}>
                                                    <h4 className="text-base font-medium mb-2 capitalize" style={{ color: '#2c3e50' }}>
                                                        {category} Trackers
                                                    </h4>
                                                    <div className="flex flex-wrap gap-2">
                                                        {trackers.map((tracker, index) => (
                                                            <span
                                                                key={index}
                                                                className="px-3 py-1 bg-gray-100 text-sm rounded border border-solid border-[#e8e8e8]"
                                                            >
                                                                {tracker}
                                                            </span>
                                                        ))}
                                                    </div>
                                                </div>
                                            )
                                        ))}
                                    </div>
                                </CardBody>
                            </Card>
                        </>
                    )}
                </div>
            </div>
        );
    };

    const tabs = [
        {
            name: 'url',
            title: (
                <div className="flex items-center space-x-2 px-4 py-2">
                    <Icon icon={search} size={20} />
                    <span>URL Scanner</span>
                </div>
            ),
            content: (
                <div className="p-4">
                    {/* Quick Scan Box */}
                    <Card className="mb-6">
                        <CardBody>
                            <div className="mb-4">
                                <h3 className="text-lg font-medium mb-2" style={{ color: '#2c3e50' }}>Quick URL Scan</h3>
                                <p className="text-sm" style={{ color: '#666' }}>
                                    Auto-detect current site URL or enter a custom URL to scan for security threats, malware, and reputation analysis.
                                </p>
                            </div>
                            <div className="flex flex-col md:flex-row gap-4">
                                <div className="flex-grow">
                                    <TextControl
                                        value={url}
                                        onChange={setUrl}
                                        placeholder="Enter URL (e.g., example.com)"
                                        className="mb-0"
                                    />
                                </div>
                                <div className="flex gap-2">
                                    <Button
                                        isSecondary
                                        onClick={() => {
                                            setUrl(currentSiteUrl);
                                        }}
                                        disabled={isScanning || !currentSiteUrl}
                                        className="h-8 justify-center"
                                    >
                                        Use Current Site
                                    </Button>
                                    <Button
                                        isPrimary
                                        onClick={scanUrl}
                                        isBusy={isScanning}
                                        disabled={isScanning || !url}
                                        className="h-8 justify-center"
                                        style={{ minWidth: '120px' }}
                                    >
                                        {isScanning ? 'Scanning...' : 'Scan URL'}
                                    </Button>
                                </div>
                            </div>
                        </CardBody>
                    </Card>

                    {/* Recent Scans */}
                    {recentScans.length > 0 && (
                        <Card className="mb-6">
                            <CardHeader>
                                <h3 className="text-lg font-medium" style={{ color: '#2c3e50' }}>Recent Scans</h3>
                            </CardHeader>
                            <CardBody>
                                <div className="space-y-2">
                                    {recentScans.map((scan, index) => (
                                        <div
                                            key={index}
                                            className="flex items-center justify-between p-3 border border-solid border-[#e8e8e8] rounded hover:bg-gray-50 cursor-pointer"
                                            onClick={() => {
                                                setUrl(scan.url);
                                                scanUrl();
                                            }}
                                        >
                                            <div className="flex items-center space-x-3">
                                                <span style={{ color: scan.riskLevel.color }}>{scan.riskLevel.icon}</span>
                                                <span className="text-sm">{scan.url}</span>
                                            </div>
                                            <span className="text-sm text-gray-500">{scan.date}</span>
                                        </div>
                                    ))}
                                </div>
                            </CardBody>
                        </Card>
                    )}

                    {error && (
                        <Notice status="error" isDismissible={false} className="mb-6">
                            {error}
                        </Notice>
                    )}

                    {scanResults && renderUrlResults()}
                </div>
            ),
        },
        {
            name: 'domain',
            title: (
                <div className="flex items-center space-x-2 px-4 py-2">
                    <Icon icon={globe} size={20} />
                    <span>Domain Analysis</span>
                </div>
            ),
            content: (
                <div className="p-4">
                    {/* Domain Analysis Box */}
                    <Card className="mb-6">
                        <CardBody>
                            <div className="mb-4">
                                <h3 className="text-lg font-medium mb-2" style={{ color: '#2c3e50' }}>Domain Analysis</h3>
                                <p className="text-sm" style={{ color: '#666' }}>
                                    Analyze domain reputation, security headers, and technical details.
                                </p>
                            </div>
                            <div className="flex flex-col md:flex-row gap-4">
                                <div className="flex-grow">
                                    <TextControl
                                        value={domain}
                                        onChange={setDomain}
                                        placeholder="Enter domain (e.g., example.com)"
                                        className="mb-0"
                                    />
                                </div>
                                <Button
                                    isPrimary
                                    onClick={analyzeDomain}
                                    isBusy={isScanning}
                                    disabled={isScanning || !domain}
                                    className="h-8 justify-center"
                                    style={{ minWidth: '120px' }}
                                >
                                    {isScanning ? 'Analyzing...' : 'Analyze'}
                                </Button>
                            </div>
                        </CardBody>
                    </Card>

                    {error && (
                        <Notice status="error" isDismissible={false} className="mb-6">
                            {error}
                        </Notice>
                    )}

                    {domainResults && renderDomainResults()}
                </div>
            ),
        },
    ];

    return (
        <Layout>
            <div className="max-w-7xl mx-auto">
                <Card>
                    <CardHeader className="border-b border-solid border-[#e8e8e8]">
                        <div className="flex flex-col md:flex-row md:items-center md:justify-between">
                            <div>
                                <h2 className="text-xl font-medium" style={{ color: '#2c3e50' }}>Security Scanner</h2>
                                <p className="text-sm mt-1" style={{ color: '#666' }}>
                                    Comprehensive security analysis for URLs and domains
                                </p>
                            </div>
                            {isScanning && (
                                <div className="flex items-center space-x-2 mt-4 md:mt-0">
                                    <Spinner />
                                    <span className="text-sm" style={{ color: '#666' }}>
                                        {activeTab === 'url' ? 'Scanning URL...' : 'Analyzing domain...'}
                                    </span>
                                </div>
                            )}
                        </div>
                    </CardHeader>
                    <CardBody className="p-0">
                        <TabPanel
                            className="border-b border-solid border-[#e8e8e8]"
                            activeClass="text-[#2c3e50] border-b-2 border-[#2c3e50]"
                            onSelect={setActiveTab}
                            selected={activeTab}
                            tabs={tabs}
                        >
                            {(tab) => tab.content}
                        </TabPanel>
                    </CardBody>
                </Card>
            </div>
        </Layout>
    );
};

export default MalwareScanner;