frontend/src/components/InputSection.jsx

import React, { useState, useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import { Upload, FileText, X } from 'lucide-react';
import { motion } from 'framer-motion';

const InputSection = ({ onAnalyze }) => {
    const [text, setText] = useState('');
    const [activeTab, setActiveTab] = useState('text');
    const [file, setFile] = useState(null);

    const onDrop = useCallback((acceptedFiles) => {
        if (acceptedFiles?.length > 0) {
            setFile(acceptedFiles[0]);
        }
    }, []);

    const { getRootProps, getInputProps, isDragActive } = useDropzone({
        onDrop,
        accept: { 'text/plain': ['.txt'], 'application/pdf': ['.pdf'] },
        maxFiles: 1
    });

    const handleAnalyze = () => {
        if (activeTab === 'text' && text.trim()) {
            onAnalyze({ type: 'text', content: text });
        } else if (activeTab === 'file' && file) {
            onAnalyze({ type: 'file', content: file });
        }
    };

    return (
        <div
            // Forced styling to ensure width works even if Tailwind has issues
            style={{ width: '90vw', maxWidth: '1200px', margin: '0 auto', display: 'flex', flexDirection: 'column' }}
            className="neu-panel p-8 md:p-12 mb-12"
        >
            <div className="flex justify-center gap-8 mb-8" style={{ display: 'flex', justifyContent: 'center', gap: '2rem', marginBottom: '3rem' }}>
                <button
                    onClick={() => setActiveTab('text')}
                    className={`px-16 py-6 rounded-2xl font-bold tracking-wider transition-all duration-200 text-2xl ${activeTab === 'text'
                        ? 'neu-tab-active'
                        : 'neu-btn text-gray-400 hover:text-white'
                        }`}
                    style={activeTab === 'text' ? { color: '#f0f0f0' } : {}}
                >
                    TEXT INPUT
                </button>
                <button
                    onClick={() => setActiveTab('file')}
                    className={`px-16 py-6 rounded-2xl font-bold tracking-wider transition-all duration-200 text-2xl ${activeTab === 'file'
                        ? 'neu-tab-active'
                        : 'neu-btn text-gray-400 hover:text-white'
                        }`}
                    style={activeTab === 'file' ? { color: '#f0f0f0' } : {}}
                >
                    FILE UPLOAD
                </button>
            </div>

            <div className="flex flex-col flex-grow relative" style={{ minHeight: '500px' }}>
                {activeTab === 'text' ? (
                    <div className="w-full h-full relative group">
                        <textarea
                            className="w-full neu-input p-8 text-xl font-normal leading-relaxed resize-none text-gray-200 placeholder-gray-600 font-mono"
                            style={{ width: '100%', height: '500px', resize: 'none' }}
                            placeholder="Paste your content here..."
                            value={text}
                            onChange={(e) => setText(e.target.value)}
                            spellCheck="false"
                        />
                        <div className="absolute bottom-6 right-8 text-sm text-gray-500 font-mono">
                            {text.length} chars
                        </div>
                    </div>
                ) : (
                    <div
                        {...getRootProps()}
                        className={`w-full neu-input flex flex-col items-center justify-center cursor-pointer transition-all duration-300
              ${isDragActive ? 'box-shadow-none border border-blue-500/50' : ''}
            `}
                        style={{ width: '100%', height: '500px' }}
                    >
                        <input {...getInputProps()} />
                        {file ? (
                            <div className="flex flex-col items-center animate-in fade-in zoom-in duration-300">
                                <div className="neu-panel p-6 rounded-full mb-6">
                                    <FileText size={64} className="text-blue-500" />
                                </div>
                                <p className="text-2xl font-bold text-gray-200 mb-2">{file.name}</p>
                                <p className="text-gray-500 mb-8 font-mono">{(file.size / 1024).toFixed(2)} KB</p>
                                <button
                                    onClick={(e) => { e.stopPropagation(); setFile(null); }}
                                    className="neu-btn px-8 py-3 text-red-400 hover:text-red-500 flex items-center gap-2"
                                >
                                    <X size={20} /> Remove
                                </button>
                            </div>
                        ) : (
                            <div className="text-center group">
                                <div className="mb-6 opacity-60 group-hover:opacity-100 transition-opacity duration-300">
                                    <Upload size={80} className="text-gray-600 mx-auto" />
                                </div>
                                <p className="text-3xl text-gray-300 font-thin mb-3">Drag & Drop file</p>
                                <p className="text-gray-500 text-lg uppercase tracking-widest">.txt .pdf</p>
                            </div>
                        )}
                    </div>
                )}

                <div className="flex justify-center mt-10" style={{ display: 'flex', justifyContent: 'center', marginTop: '2.5rem' }}>
                    <button
                        onClick={handleAnalyze}
                        disabled={(!text.trim() && !file)}
                        className="neu-btn-primary px-16 py-5 rounded-2xl text-xl font-bold tracking-widest shadow-blue-500/10 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        ANALYZE CONTENT
                    </button>
                </div>
            </div>
        </div>
    );
};

export default InputSection;