import React, { useState } from 'react';
import { Upload } from 'lucide-react';
import type { LucideIcon } from "lucide-react";

interface PgpKeyInputProps {
    value: string;
    onChange: (value: string) => void;
    placeholder: string;
    label: string;
    icon?: LucideIcon;
    readOnly?: boolean;
}

export const PgpKeyInput: React.FC<PgpKeyInputProps> = ({
    value,
    onChange,
    placeholder,
    label,
    icon: Icon,
    readOnly = false,
}) => {
    const [isDragging, setIsDragging] = useState(false);

    const handleDragOver = (e: React.DragEvent) => {
        if (readOnly) return;
        e.preventDefault();
        setIsDragging(true);
    };

    const handleDragLeave = (e: React.DragEvent) => {
        if (readOnly) return;
        e.preventDefault();
        setIsDragging(false);
    };

    const handleDrop = (e: React.DragEvent) => {
        if (readOnly) return;
        e.preventDefault();
        setIsDragging(false);

        const file = e.dataTransfer.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = (event) => {
                if (event.target?.result) {
                    onChange(event.target.result as string);
                }
            };
            reader.readAsText(file);
        }
    };

    return (
        <div className="space-y-2">
            <label className="text-[12px] font-bold text-[#00f0ff] uppercase tracking-widest flex items-center justify-between" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>
                <span className="flex items-center gap-2">
                    {Icon && <Icon size={14} />} {label}
                </span>
                {!readOnly && (
                    <span className="text-[10px] text-[#6ef3f7] font-normal bg-[#16213e] px-2 py-0.5 rounded-full border border-[#00f0ff]/30">
                        Drag & Drop .asc file
                    </span>
                )}
            </label>
            <div
                className={`relative transition-all duration-200 ${isDragging && !readOnly ? 'scale-[1.01]' : ''}`}
                onDragOver={handleDragOver}
                onDragLeave={handleDragLeave}
                onDrop={handleDrop}
            >
                <textarea
                    className={`w-full h-40 p-3 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-xl text-xs font-mono text-[#00f0ff] placeholder-[#9d84b7] transition-colors resize-none focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] ${isDragging && !readOnly ? 'border-[#ff006e] bg-[#16213e]' : 'border-[#00f0ff]/50'} ${readOnly ? 'blur-sm select-none' : ''
                        }`}
                    placeholder={placeholder}
                    value={value}
                    onChange={(e) => onChange(e.target.value)}
                    readOnly={readOnly}
                />
                {isDragging && !readOnly && (
                    <div className="absolute inset-0 flex items-center justify-center bg-[#16213e]/90 rounded-xl border-2 border-dashed border-[#ff006e] pointer-events-none z-10">
                        <div className="text-[#ff006e] font-bold flex flex-col items-center animate-bounce" style={{ textShadow: '0 0 10px rgba(255,0,110,0.5)' }}>
                            <Upload size={24} />
                            <span className="text-sm mt-2">Drop Key File Here</span>
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
};
