import React, { useState } from 'react';

const BrowserView = () => {
  const [url, setUrl] = useState('');
  const [iframeUrl, setIframeUrl] = useState('');

  const handleUrlChange = (e) => {
    setUrl(e.target.value);
  };

  const handleLoadUrl = () => {
    const trimmed = url.trim();
    if (!trimmed) return;
    if (trimmed.startsWith('http://') || trimmed.startsWith('https://')) {
      setIframeUrl(trimmed);
    } else {
      setIframeUrl('https://' + trimmed);
    }
  };

  const handleKeyDown = (e) => {
    if (e.key === 'Enter') handleLoadUrl();
  };

  return (
    <div className="p-4 bg-black rounded-lg text-white">
      <h2 className="text-2xl font-bold mb-4">Browser</h2>
      <div className="flex space-x-2 mb-4">
        <input
          type="text"
          value={url}
          onChange={handleUrlChange}
          onKeyDown={handleKeyDown}
          placeholder="Enter a URL"
          className="w-full p-2 bg-black border border-white rounded-md text-white focus:ring-invader-pink focus:border-invader-pink"
          aria-label="URL to load in embedded browser"
        />
        <button
          type="button"
          onClick={handleLoadUrl}
          className="px-4 py-2 bg-invader-pink text-black rounded-md hover:bg-invader-green focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-invader-pink"
        >
          Load
        </button>
      </div>
      {iframeUrl && (
        <>
          <p className="text-xs text-white/60 mb-2">
            Some sites block embedding (X-Frame-Options). If the page is blank, try another URL.
          </p>
          <iframe
            src={iframeUrl}
            className="w-full h-96 rounded-md border border-white"
            title="Embedded browser"
            sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
          />
        </>
      )}
    </div>
  );
};

export default BrowserView;