import React, { useState } from 'react';
import { Play, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';

interface ScriptPanelProps {
  onInjectScript: (script: string) => void;
  onClose?: () => void;
}

const ScriptPanel = ({ onInjectScript, onClose }: ScriptPanelProps) => {
  const [script, setScript] = useState('');

  const handleInject = () => {
    if (!script.trim()) {
      alert('Script is empty.');
      return;
    }
    onInjectScript(script);
  };

  return (
    <div className="fixed bottom-4 left-4 z-[9999] bg-white rounded-lg shadow-lg border border-gray-200 p-4 w-80">
      <div className="font-semibold text-sm text-gray-700 mb-3 flex items-center justify-between">
        <span className="flex items-center">
          💡 User Script
        </span>
        {onClose && (
          <Button variant="ghost" size="sm" onClick={onClose} className="p-1 h-auto">
            <X className="w-4 h-4" />
          </Button>
        )}
      </div>
      <Textarea
        value={script}
        onChange={(e) => setScript(e.target.value)}
        placeholder="Write JavaScript to run inside the iframe..."
        className="font-mono text-xs resize-none h-24 mb-3"
      />
      <Button onClick={handleInject} size="sm" className="w-full">
        <Play className="w-4 h-4 mr-1" />
        Inject Script
      </Button>
    </div>
  );
};

export default ScriptPanel;