import React, { useState, useEffect } from 'react';
import { Download, Upload, Gamepad2, Cpu, Search, Plus, Terminal, X, Monitor, HardDrive, Info, Share2, AlertCircle } from 'lucide-react';

// רכיב כרטיס תוכנה/משחק
const SoftwareCard = ({ item, onDownload }) => {
    const isGame = item.category === 'game';
    
    return (
        <div className="glass-panel rounded-xl p-5 hover:border-blue-500/50 transition-all duration-300 group flex flex-col h-full relative overflow-hidden">
            <div className={`absolute top-0 right-0 w-24 h-24 bg-gradient-to-bl ${isGame ? 'from-purple-500/20' : 'from-blue-500/20'} to-transparent rounded-bl-full -mr-4 -mt-4 transition-transform group-hover:scale-110`}></div>
            
            <div className="flex justify-between items-start mb-4 z-10">
                <div className={`p-3 rounded-lg ${isGame ? 'bg-purple-500/20 text-purple-400' : 'bg-blue-500/20 text-blue-400'}`}>
                    {isGame ? <Gamepad2 size={24} /> : <Terminal size={24} />}
                </div>
                <span className="text-xs font-mono bg-slate-800 px-2 py-1 rounded border border-slate-700 text-slate-400">
                    v{item.version}
                </span>
            </div>

            <h3 className="text-xl font-bold text-white mb-1 group-hover:text-blue-400 transition-colors">{item.title}</h3>
            <p className="text-slate-400 text-sm mb-4 line-clamp-2 flex-grow">{item.description}</p>

            <div className="mt-auto pt-4 border-t border-slate-700/50 flex gap-2">
                <button 
                    onClick={() => onDownload(item)}
                    className="flex-1 bg-blue-600 hover:bg-blue-500 text-white py-2 px-4 rounded-lg font-medium flex items-center justify-center gap-2 transition-colors shadow-lg shadow-blue-900/20"
                >
                    <Download size={18} />
                    הורדה
                </button>
            </div>
        </div>
    );
};

// רכיב טופס העלאה
const UploadForm = ({ onUpload, onCancel }) => {
    const [formData, setFormData] = useState({
        title: '',
        version: '1.0.0',
        description: '',
        category: 'app',
        downloadUrl: '',
        lang: 'he' // ברירת מחדל עברית לפי בקשת המשתמש
    });

    const handleSubmit = (e) => {
        e.preventDefault();
        onUpload({
            id: Date.now(),
            date: new Date().toLocaleDateString('he-IL'),
            ...formData
        });
    };

    return (
        <div className="glass-panel p-6 rounded-2xl max-w-2xl mx-auto border-t-4 border-blue-500 animate-fade-in">
            <div className="flex justify-between items-center mb-6 border-b border-slate-700 pb-4">
                <h2 className="text-2xl font-bold text-white flex items-center gap-2">
                    <Upload className="text-blue-400" />
                    העלאת פריט חדש
                </h2>
                <button onClick={onCancel} className="text-slate-400 hover:text-white"><X /></button>
            </div>

            <form onSubmit={handleSubmit} className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label className="block text-sm font-medium text-slate-300 mb-1">שם התוכנה/משחק</label>
                        <input 
                            required
                            type="text" 
                            className="w-full bg-slate-800 border border-slate-700 rounded-lg p-3 text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-all"
                            placeholder="למשל: AHK Script Manager"
                            value={formData.title}
                            onChange={e => setFormData({...formData, title: e.target.value})}
                        />
                    </div>
                    <div>
                        <label className="block text-sm font-medium text-slate-300 mb-1">גרסה (Version)</label>
                        <input 
                            required
                            type="text" 
                            className="w-full bg-slate-800 border border-slate-700 rounded-lg p-3 text-white focus:border-blue-500 outline-none font-mono text-left dir-ltr"
                            placeholder="v2.1.0"
                            value={formData.version}
                            onChange={e => setFormData({...formData, version: e.target.value})}
                        />
                    </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label className="block text-sm font-medium text-slate-300 mb-1">קטגוריה</label>
                        <select 
                            className="w-full bg-slate-800 border border-slate-700 rounded-lg p-3 text-white focus:border-blue-500 outline-none"
                            value={formData.category}
                            onChange={e => setFormData({...formData, category: e.target.value})}
                        >
                            <option value="app">תוכנה / כלי עזר</option>
                            <option value="game">משחק</option>
                            <option value="automation">אוטומציה (AHK)</option>
                        </select>
                    </div>
                    <div>
                        <label className="block text-sm font-medium text-slate-300 mb-1">שפות נתמכות</label>
                        <select 
                            className="w-full bg-slate-800 border border-slate-700 rounded-lg p-3 text-white focus:border-blue-500 outline-none"
                            value={formData.lang}
                            onChange={e => setFormData({...formData, lang: e.target.value})}
                        >
                            <option value="he">עברית בלבד</option>
                            <option value="en">אנגלית בלבד</option>
                            <option value="multi">עברית ואנגלית (Multi)</option>
                        </select>
                    </div>
                </div>

                <div>
                    <label className="block text-sm font-medium text-slate-300 mb-1">קישור להורדה (Drive/Github/וכו')</label>
                    <div className="relative">
                        <HardDrive className="absolute left-3 top-3 text-slate-500" size={18} />
                        <input 
                            required
                            type="url" 
                            className="w-full bg-slate-800 border border-slate-700 rounded-lg p-3 pl-10 text-white focus:border-blue-500 outline-none text-left"
                            placeholder="https://..."
                            value={formData.downloadUrl}
                            onChange={e => setFormData({...formData, downloadUrl: e.target.value})}
                        />
                    </div>
                    <p className="text-xs text-slate-500 mt-1">שים לב: המערכת שומרת את הקישור לקובץ, לא את הקובץ עצמו.</p>
                </div>

                <div>
                    <label className="block text-sm font-medium text-slate-300 mb-1">תיאור ושינויים (Changelog)</label>
                    <textarea 
                        required
                        className="w-full bg-slate-800 border border-slate-700 rounded-lg p-3 text-white focus:border-blue-500 outline-none h-32 resize-none"
                        placeholder="תיאור קצר של התוכנה, ומה חדש בגרסה זו..."
                        value={formData.description}
                        onChange={e => setFormData({...formData, description: e.target.value})}
                    ></textarea>
                </div>

                <div className="flex gap-3 pt-4">
                    <button type="button" onClick={onCancel} className="flex-1 bg-slate-700 hover:bg-slate-600 text-white py-3 rounded-lg font-medium transition-colors">ביטול</button>
                    <button type="submit" className="flex-1 bg-green-600 hover:bg-green-500 text-white py-3 rounded-lg font-medium transition-colors shadow-lg shadow-green-900/20">פרסם למערכת</button>
                </div>
            </form>
        </div>
    );
};

export default function App() {
    const [view, setView] = useState('home'); // home, upload
    const [searchTerm, setSearchTerm] = useState('');
    
    // הגדרת כיוון שפה וכותרת אוטומטית בעת טעינת האתר
    useEffect(() => {
        document.documentElement.dir = 'rtl';
        document.documentElement.lang = 'he';
        document.title = 'DevHub IL - app.vlad.co.il';
        
        // נסיון לאכוף קידוד אם חסר (למרות שרצוי שהשרת ישלח את זה)
        if (!document.querySelector('meta[charset]')) {
            const meta = document.createElement('meta');
            meta.setAttribute('charset', 'UTF-8');
            document.head.prepend(meta);
        }
    }, []);

    const [items, setItems] = useState([
        {
            id: 1,
            title: "AHK Window Manager",
            version: "2.1.4",
            description: "כלי לניהול חלונות אוטומטי, נכתב ב-AHK v2. תומך בעברית ואנגלית.",
            category: "automation",
            downloadUrl: "#",
            date: "09/02/2026"
        },
        {
            id: 2,
            title: "Space Defender",
            version: "1.0",
            description: "משחק יריות בחלל בסגנון רטרו. פותח ב-Unity.",
            category: "game",
            downloadUrl: "#",
            date: "01/02/2026"
        },
        {
            id: 3,
            title: "Text Expander Pro",
            version: "3.5b",
            description: "הרחבת טקסט מהירה לשיפור הפרודוקטיביות. כולל עדכוני GUI חדשים.",
            category: "app",
            downloadUrl: "#",
            date: "05/02/2026"
        }
    ]);

    const handleUpload = (newItem) => {
        setItems([newItem, ...items]);
        setView('home');
        alert('הפריט נוסף בהצלחה למאגר המקומי!');
    };

    const handleDownload = (item) => {
        if (item.downloadUrl === '#') {
            alert(`מתחיל הורדה של: ${item.title}\n(זוהי הדגמה, אין קובץ אמיתי בשרת כרגע)`);
        } else {
            window.open(item.downloadUrl, '_blank');
        }
    };

    const filteredItems = items.filter(item => 
        item.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
        item.description.toLowerCase().includes(searchTerm.toLowerCase())
    );

    return (
        <div className="min-h-screen pb-10 bg-slate-900 text-slate-200" dir="rtl">
            <style>{`
                @import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;700&display=swap');
                body { font-family: 'Heebo', sans-serif; background-color: #0f172a; margin: 0; }
                .glass-panel {
                    background: rgba(30, 41, 59, 0.7);
                    backdrop-filter: blur(10px);
                    border: 1px solid rgba(255, 255, 255, 0.1);
                }
                ::-webkit-scrollbar { width: 8px; }
                ::-webkit-scrollbar-track { background: #0f172a; }
                ::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 4px; }
                ::-webkit-scrollbar-thumb:hover { background: #2563eb; }
            `}</style>

            {/* Header */}
            <header className="bg-slate-900/80 backdrop-blur-md border-b border-slate-800 sticky top-0 z-50">
                <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
                    <div className="flex items-center gap-2 cursor-pointer" onClick={() => setView('home')}>
                        <div className="bg-gradient-to-tr from-blue-600 to-purple-600 p-2 rounded-lg">
                            <Cpu size={24} className="text-white" />
                        </div>
                        <h1 className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white to-slate-400 hidden md:block">
                            DevHub IL
                        </h1>
                    </div>

                    <div className="flex-1 max-w-md mx-4 relative">
                        <Search className="absolute right-3 top-2.5 text-slate-500" size={18} />
                        <input 
                            type="text" 
                            placeholder="חיפוש תוכנות, משחקים או סקריפטים..." 
                            className="w-full bg-slate-800/50 border border-slate-700 rounded-full py-2 pr-10 pl-4 text-sm text-white focus:border-blue-500 focus:bg-slate-800 outline-none transition-all"
                            value={searchTerm}
                            onChange={(e) => setSearchTerm(e.target.value)}
                        />
                    </div>

                    <button 
                        onClick={() => setView('upload')}
                        className="bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 transition-colors shadow-lg shadow-blue-500/20"
                    >
                        <Plus size={18} />
                        <span className="hidden md:inline">העלה פרויקט</span>
                    </button>
                </div>
            </header>

            {/* Main Content */}
            <main className="max-w-7xl mx-auto px-4 mt-8">
                
                {view === 'home' && (
                    <>
                        <div className="flex items-center justify-between mb-6">
                            <h2 className="text-2xl font-bold text-white">העדכונים האחרונים</h2>
                            <span className="text-slate-400 text-sm bg-slate-800 px-3 py-1 rounded-full border border-slate-700">
                                {filteredItems.length} פריטים
                            </span>
                        </div>

                        {filteredItems.length === 0 ? (
                            <div className="text-center py-20 bg-slate-800/30 rounded-2xl border border-dashed border-slate-700">
                                <AlertCircle className="mx-auto text-slate-500 mb-4" size={48} />
                                <h3 className="text-xl font-medium text-slate-300">לא נמצאו תוצאות</h3>
                                <p className="text-slate-500 mt-2">נסה לחפש מונח אחר או להעלות פריט חדש.</p>
                            </div>
                        ) : (
                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                                {filteredItems.map(item => (
                                    <SoftwareCard key={item.id} item={item} onDownload={handleDownload} />
                                ))}
                            </div>
                        )}
                    </>
                )}

                {view === 'upload' && (
                    <UploadForm onUpload={handleUpload} onCancel={() => setView('home')} />
                )}
            </main>

            {/* Footer */}
            <footer className="mt-20 border-t border-slate-800 py-8 text-center text-slate-500 text-sm">
                <p>© 2026 DevHub IL - app.vlad.co.il</p>
                <p className="mt-2 text-xs">פותח על ידי אנליסט AI עבור קהילת המפתחים.</p>
            </footer>
        </div>
    );
}