import React, { useState } from 'react';
import { CheckCircle, XCircle, AlertCircle } from 'lucide-react';
import { useToast } from '../contexts/ToastContext';

const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';

const cardStyle = {
  background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 50%, rgba(30, 41, 59, 0.95) 100%)',
  border: '2px solid rgba(14, 165, 233, 0.4)',
  borderRadius: '0.5rem',
  boxShadow: '0 8px 24px rgba(0, 0, 0, 0.6), 0 0 28px rgba(14, 165, 233, 0.15), inset 0 1px 0 rgba(14, 165, 233, 0.12)',
  position: 'relative',
  overflow: 'hidden',
  padding: '1.5rem',
};

export default function QuickCVELookup() {
  const [query, setQuery] = useState('');
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);
  const toast = useToast();

  const handleLookup = async () => {
    const trimmed = query.trim();
    if (!trimmed) return;

    setLoading(true);
    try {
      const response = await fetch(`${API_BASE}/cves/check/${encodeURIComponent(trimmed)}`, {
        credentials: 'include'
      });
      if (!response.ok) throw new Error('Failed to check CVE');
      const data = await response.json();
      setResult(data);
    } catch (err) {
      toast.error(err.message);
      setResult({ error: err.message });
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={cardStyle}>
      <div className="scan-line"></div>
      <h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#0EA5E9', marginBottom: '0.75rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 16px rgba(14, 165, 233, 0.4)' }}>
        Quick CVE Lookup
      </h2>
      <div className="flex gap-3">
        <input
          type="text"
          placeholder="Enter CVE ID (e.g., CVE-2024-1234)"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && handleLookup()}
          className="flex-1 intel-input"
          aria-label="CVE ID to look up"
        />
        <button
          onClick={handleLookup}
          disabled={loading}
          className="intel-button intel-button-primary"
        >
          {loading ? 'Scanning...' : 'Scan'}
        </button>
      </div>

      {result && (
        <div className={`mt-4 p-4 rounded border ${result.exists ? 'bg-intel-success/10 border-intel-success/30' : 'bg-intel-warning/10 border-intel-warning/30'}`}>
          {result.error ? (
            <div className="flex items-start gap-3">
              <XCircle className="w-5 h-5 text-intel-danger mt-0.5" />
              <div>
                <p className="font-medium text-intel-danger font-mono">Error</p>
                <p className="text-sm text-gray-300">{result.error}</p>
              </div>
            </div>
          ) : result.exists ? (
            <div className="flex items-start gap-3">
              <CheckCircle className="w-5 h-5 text-intel-success mt-0.5" />
              <div className="flex-1">
                <p className="font-medium text-intel-success font-mono">
                  ✓ CVE Addressed ({result.vendors.length} vendor{result.vendors.length > 1 ? 's' : ''})
                </p>
                <div className="mt-3 space-y-3">
                  {result.vendors.map((vendorInfo, idx) => (
                    <div key={idx} className="p-3 bg-intel-dark/70 rounded border border-intel-accent/30 shadow-lg">
                      <p className="font-semibold text-white mb-2 font-sans">{vendorInfo.vendor}</p>
                      <div className="grid grid-cols-2 gap-2 text-sm text-gray-300 mb-2 font-mono">
                        <p><strong className="text-white">Severity:</strong> {vendorInfo.severity}</p>
                        <p><strong className="text-white">Status:</strong> {vendorInfo.status}</p>
                        <p><strong className="text-white">Documents:</strong> {vendorInfo.total_documents} attached</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ) : (
            <div className="flex items-start gap-3">
              <AlertCircle className="w-5 h-5 text-intel-warning mt-0.5" />
              <div>
                <p className="font-medium text-intel-warning font-mono">Not Found</p>
                <p className="text-sm text-gray-300">This CVE has not been addressed yet. No entry exists in the database.</p>
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}