import React, { useState, useEffect, useRef } from 'react';
import { Terminal, Wifi, ShieldCheck, AlertCircle, HelpCircle, X } from 'lucide-react';

const RecordTypes = {
  1: 'A',
  2: 'NS',
  5: 'CNAME',
  6: 'SOA',
  12: 'PTR',
  15: 'MX',
  16: 'TXT',
  28: 'AAAA',
};

// Simple mapping for reverse lookups in arguments
const RecordTypeStr = {
  'a': 'A',
  'aaaa': 'AAAA',
  'mx': 'MX',
  'txt': 'TXT',
  'ns': 'NS',
  'cname': 'CNAME',
  'ptr': 'PTR',
  'soa': 'SOA'
};

export default function App() {
  const [history, setHistory] = useState([
    { type: 'system', content: 'Initializing Virtual DNS Terminal v1.0.4...' },
    { type: 'system', content: 'Connecting to DNS-over-HTTPS Gateway...' },
    { type: 'success', content: 'Connection Established (via dns.google).' },
    { type: 'info', content: 'Type "help" for available commands.' },
    { type: 'break', content: '' },
  ]);
  const [input, setInput] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [showHints, setShowHints] = useState(false);
  const endRef = useRef(null);
  const inputRef = useRef(null);

  // Auto-scroll to bottom
  useEffect(() => {
    endRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [history]);

  // Focus input on click
  const handleContainerClick = () => {
    // Only focus if text is not being selected
    if (!window.getSelection().toString()) {
      inputRef.current?.focus();
    }
  };

  const addToHistory = (type, content) => {
    setHistory(prev => [...prev, { type, content }]);
  };

  const performNslookup = async (args) => {
    if (args.length === 0) {
      addToHistory('error', 'usage: nslookup <domain> [type]');
      return;
    }

    const domain = args[0];
    let type = 'A'; // Default
    
    // Check for optional type argument (e.g., nslookup google.com mx)
    if (args.length > 1) {
      const requestedType = args[1].toLowerCase();
      if (RecordTypeStr[requestedType]) {
        type = RecordTypeStr[requestedType];
      }
    }

    setIsLoading(true);
    
    // Mimic network latency slightly for realism
    await new Promise(r => setTimeout(r, 400));

    try {
      const response = await fetch(`https://dns.google/resolve?name=${domain}&type=${type}`);
      const data = await response.json();

      // Mimic standard nslookup output header
      addToHistory('output', `Server:\t\tdns.google`);
      addToHistory('output', `Address:\t8.8.8.8#53`);
      addToHistory('break', '');

      if (data.Status !== 0) {
        addToHistory('error', `** server can't find ${domain}: NXDOMAIN (Non-Existent Domain)`);
      } else {
        addToHistory('output', `Non-authoritative answer:`);
        
        if (data.Answer) {
          data.Answer.forEach(record => {
            const rType = RecordTypes[record.type] || record.type;
            
            // Format output based on record type to match nslookup style
            if (rType === 'MX') {
               addToHistory('output', `Name:\t${record.name}`);
               addToHistory('output', `MX preference = ${record.data.split(' ')[0]}, mail exchanger = ${record.data.split(' ')[1]}`);
            } else if (rType === 'A' || rType === 'AAAA') {
               addToHistory('output', `Name:\t${record.name}`);
               addToHistory('output', `Address:\t${record.data}`);
            } else if (rType === 'CNAME') {
               addToHistory('output', `${record.name}\tcanonical name = ${record.data}.`);
            } else if (rType === 'TXT') {
               addToHistory('output', `${record.name}\ttext = "${record.data.replace(/"/g, '')}"`); // Clean quotes
            } else {
               addToHistory('output', `Name:\t${record.name}`);
               addToHistory('output', `${rType}:\t${record.data}`);
            }
            addToHistory('break', '');
          });
        } else {
          // Sometimes Authority section has info even if no Answer
          addToHistory('info', `No ${type} records found for ${domain}.`);
        }
      }

    } catch (err) {
      addToHistory('error', `DNS request failed: ${err.message}`);
    } finally {
      setIsLoading(false);
    }
  };

  const handleCommand = async (e) => {
    if (e.key === 'Enter') {
      const cmdLine = input.trim();
      if (!cmdLine) return;

      // Add the command itself to history
      setHistory(prev => [...prev, { type: 'command', content: cmdLine }]);
      setInput('');

      const parts = cmdLine.split(/\s+/);
      const command = parts[0].toLowerCase();
      const args = parts.slice(1);

      switch (command) {
        case 'clear':
        case 'cls':
          setHistory([]);
          break;
        case 'help':
          addToHistory('info', 'Available commands:');
          addToHistory('info', '  nslookup <domain> [type]  - Query DNS records (A, MX, TXT, etc)');
          addToHistory('info', '  clear                     - Clear terminal');
          addToHistory('info', '  whoami                    - Display current user');
          addToHistory('info', '  ip                        - Show your public IP (simulated)');
          break;
        case 'nslookup':
          await performNslookup(args);
          break;
        case 'whoami':
          addToHistory('output', 'visitor@virtual-terminal');
          break;
        case 'ip':
           addToHistory('output', 'Requesting public IP...');
           try {
             const ipRes = await fetch('https://api.ipify.org?format=json');
             const ipData = await ipRes.json();
             addToHistory('success', `Your IP: ${ipData.ip}`);
           } catch (e) {
             addToHistory('error', 'Could not resolve public IP.');
           }
           break;
        default:
          addToHistory('error', `Command not found: ${command}. Type 'help' for options.`);
      }
    }
  };

  const renderContent = (item, index) => {
    switch (item.type) {
      case 'command':
        return (
          <div key={index} className="flex items-center text-gray-300 mt-2">
            <span className="text-green-500 font-bold mr-2">visitor@term:~$</span>
            <span>{item.content}</span>
          </div>
        );
      case 'system':
        return <div key={index} className="text-blue-400 italic">{item.content}</div>;
      case 'success':
        return <div key={index} className="text-green-400 font-medium">{item.content}</div>;
      case 'error':
        return <div key={index} className="text-red-400 font-medium">{item.content}</div>;
      case 'info':
        return <div key={index} className="text-yellow-200">{item.content}</div>;
      case 'break':
        return <div key={index} className="h-2"></div>;
      case 'output':
      default:
        // Pre-wrap preserves whitespace/tabs for columns
        return <div key={index} className="text-gray-300 whitespace-pre-wrap font-mono leading-tight">{item.content}</div>;
    }
  };

  return (
    <div 
      className="min-h-screen bg-gray-900 text-gray-100 font-mono p-4 md:p-8 flex flex-col"
      onClick={handleContainerClick}
    >
      <div className="max-w-4xl mx-auto w-full flex-grow flex flex-col bg-black border border-gray-700 rounded-lg shadow-2xl overflow-hidden relative">
        
        {/* Title Bar */}
        <div className="bg-gray-800 px-4 py-2 flex items-center justify-between border-b border-gray-700 select-none z-20 relative">
          <div className="flex items-center space-x-2">
            <div className="flex space-x-1.5 group">
              <div className="w-3 h-3 rounded-full bg-red-500 hover:bg-red-600 transition-colors cursor-pointer"></div>
              <div className="w-3 h-3 rounded-full bg-yellow-500 hover:bg-yellow-600 transition-colors cursor-pointer"></div>
              <div className="w-3 h-3 rounded-full bg-green-500 hover:bg-green-600 transition-colors cursor-pointer"></div>
            </div>
            <span className="ml-4 text-xs text-gray-400 font-semibold flex items-center">
              <Terminal size={14} className="mr-2" />
              bash — 80x24
            </span>
          </div>
          <div className="flex items-center text-xs text-gray-500 space-x-4">
            <button 
              onClick={(e) => { e.stopPropagation(); setShowHints(!showHints); }}
              className={`flex items-center transition-colors focus:outline-none ${showHints ? 'text-green-400' : 'text-gray-400 hover:text-white'}`}
            >
              <HelpCircle size={14} className="mr-1" />
              <span>Tips</span>
            </button>
             <span className="flex items-center"><Wifi size={12} className="mr-1"/> Connected</span>
          </div>
        </div>

        {/* Terminal Body */}
        <div className="flex-grow p-4 overflow-y-auto custom-scrollbar relative" style={{minHeight: '400px'}}>
          
          {/* Hints Overlay */}
          {showHints && (
            <div className="absolute top-0 right-0 m-4 w-72 bg-gray-900/95 border border-gray-600 p-4 rounded shadow-2xl backdrop-blur-sm z-30 animate-in fade-in slide-in-from-top-4 duration-200">
              <div className="flex justify-between items-start mb-3 border-b border-gray-700 pb-2">
                <div>
                  <h3 className="font-bold text-green-400 text-sm">Quick Reference</h3>
                  <p className="text-[10px] text-gray-400">DNS & System Commands</p>
                </div>
                <button 
                  onClick={(e) => { e.stopPropagation(); setShowHints(false); }}
                  className="text-gray-500 hover:text-white transition-colors"
                >
                  <X size={14}/>
                </button>
              </div>
              
              <div className="space-y-3 text-xs text-gray-300">
                <div>
                  <p className="font-semibold text-white mb-1">Look up an IP:</p>
                  <code className="block bg-black p-1.5 rounded text-green-500 font-mono">nslookup google.com</code>
                </div>

                <div>
                  <p className="font-semibold text-white mb-1">Check Mail Servers (MX):</p>
                  <code className="block bg-black p-1.5 rounded text-yellow-500 font-mono">nslookup github.com mx</code>
                </div>

                <div>
                  <p className="font-semibold text-white mb-1">Check Text Records (TXT):</p>
                  <code className="block bg-black p-1.5 rounded text-blue-400 font-mono">nslookup openai.com txt</code>
                </div>
                
                <div>
                  <p className="font-semibold text-white mb-1">Other Utilities:</p>
                  <ul className="list-disc list-inside space-y-1 text-gray-400 ml-1">
                    <li><code className="text-gray-200">whoami</code> - Current user</li>
                    <li><code className="text-gray-200">ip</code> - Your public IP</li>
                    <li><code className="text-gray-200">clear</code> - Reset screen</li>
                  </ul>
                </div>
              </div>
            </div>
          )}

          {history.map((item, idx) => renderContent(item, idx))}
          
          {/* Active Input Line */}
          <div className="flex items-center mt-2">
            <span className="text-green-500 font-bold mr-2 flex-shrink-0">visitor@term:~$</span>
            <div className="relative flex-grow">
              <input
                ref={inputRef}
                type="text"
                value={input}
                onChange={(e) => setInput(e.target.value)}
                onKeyDown={handleCommand}
                disabled={isLoading}
                autoFocus
                className="w-full bg-transparent border-none outline-none text-gray-100 font-mono p-0 m-0 z-10 relative"
                autoComplete="off"
                spellCheck="false"
              />
            </div>
          </div>
          
          {isLoading && (
            <div className="mt-2 text-blue-400 animate-pulse">
              Requesting records...
            </div>
          )}

          <div ref={endRef} />
        </div>
      </div>

      <div className="max-w-4xl mx-auto w-full mt-4 text-center text-gray-600 text-xs">
        <p>This is a virtual terminal. DNS queries are performed via the Google DNS-over-HTTPS API.</p>
      </div>

      <style>{`
        /* Custom scrollbar to match terminal aesthetic */
        .custom-scrollbar::-webkit-scrollbar {
          width: 10px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
          background: #111;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
          background: #333;
          border-radius: 2px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
          background: #555;
        }
      `}</style>
    </div>
  );
}