MainSystem.js

import React, { useState, useEffect } from 'react';

// Automatically detect the server IP
const API_BASE = `http://${window.location.hostname}:8000`;

const styles = {
    bgWrapper: {
        position: 'fixed', top: 0, left: 0, width: '100%', height: '100%',
        backgroundColor: '#0a0a0a', zIndex: -1, overflow: 'hidden'
    },
    container: { 
        minHeight: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center', 
        fontFamily: 'Segoe UI, sans-serif', position: 'relative' 
    },
    dash: { 
        minHeight: '100vh', padding: '40px', fontFamily: 'Segoe UI', 
        position: 'relative', color: '#fff' 
    },
    card: { 
        background: 'rgba(20, 20, 20, 0.85)', width: '420px', padding: '25px', 
        borderRadius: '16px', boxShadow: '0 8px 32px rgba(0,0,0,0.8)', 
        border: '1px solid rgba(212, 175, 55, 0.3)', backdropFilter: 'blur(10px)'
    },
    input: { 
        width: '100%', padding: '12px', marginTop: '8px', borderRadius: '8px', 
        border: '1px solid #444', background: 'rgba(40, 40, 40, 0.9)', color: '#fff', 
        boxSizing: 'border-box', outline: 'none'
    },
    btn: { 
        width: '100%', background: 'linear-gradient(45deg, #d4af37, #f9e29c)', 
        color: '#000', border: 'none', padding: '14px', marginTop: '20px', 
        borderRadius: '8px', cursor: 'pointer', fontWeight: 'bold', fontSize: '16px',
        boxShadow: '0 4px 15px rgba(212, 175, 55, 0.3)'
    },
    label: { display: 'block', marginTop: '12px', fontWeight: 'bold', color: '#d4af37', fontSize: '14px' },
    matchCard: { 
        background: 'rgba(255, 255, 255, 0.05)', padding: '20px', borderRadius: '12px', 
        marginBottom: '15px', border: '1px solid rgba(212, 175, 55, 0.2)', 
        textAlign: 'center', backdropFilter: 'blur(10px)' 
    },
    logoutBtn: { background: '#e53e3e', color: 'white', border: 'none', padding: '10px 20px', borderRadius: '5px', cursor: 'pointer', fontWeight: 'bold' },
    waveStyles: `
        .wave {
            position: absolute; bottom: 0; left: 0; width: 200%; height: 150px;
            background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"><path fill="%23d4af37" fill-opacity="0.2" d="M0,160L48,176C96,192,192,224,288,224C384,224,480,192,576,165.3C672,139,768,117,864,128C960,139,1056,181,1152,197.3C1248,213,1344,203,1392,197.3L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
            background-size: 50% 150px; animation: move_wave 15s linear infinite;
        }
        .wave2 { bottom: 10px; opacity: 0.5; animation: move_wave 10s linear infinite reverse; }
        .wave3 { bottom: 20px; opacity: 0.2; animation: move_wave 20s linear infinite; }
        @keyframes move_wave { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    `
};

const AnimatedBackground = () => (
    <div style={styles.bgWrapper}>
        <style>{styles.waveStyles}</style>
        <div className="wave"></div>
        <div className="wave wave2"></div>
        <div className="wave wave3"></div>
    </div>
);

// ================= LOGIN PORTAL =================
function Login({ onLogin }) {
    const [role, setRole] = useState('user');
    const [method, setMethod] = useState('email');
    const [email, setEmail] = useState('');
    const [pass, setPass] = useState('');
    const [otp, setOtp] = useState('');

    const handleLogin = () => {
        if (role === 'admin') {
            if ((method === 'email' && email === 'admin@test.com' && pass === 'admin123') || (method === 'otp' && otp === '1234')) {
                onLogin('admin');
            } else { alert("Admin Creds: admin@test.com / admin123"); }
        } else {
            if (method === 'email') {
                const lowerEmail = email.toLowerCase();
                if (lowerEmail.endsWith('@student.gitam.edu') || lowerEmail.endsWith('@gitam.edu')) {
                    if (pass === 'user123') onLogin('user');
                    else alert("Wrong password (user123)");
                } else { alert("Access Denied! Please use your GITAM email"); }
            } else if (otp === '1234') onLogin('user');
            else alert("Incorrect OTP (1234)");
        }
    };

    return (
        <div style={styles.container}>
            <AnimatedBackground />
            <div style={styles.card}>
                <h2 style={{textAlign:'center', color: '#d4af37'}}>Lost & Found Portal</h2>
                <select style={styles.input} onChange={(e) => setRole(e.target.value)}>
                    <option value="user">Student/Staff Login</option>
                    <option value="admin">Admin Login</option>
                </select>
                <div style={{display:'flex', justifyContent:'center', gap:'20px', margin:'15px 0'}}>
                    <label style={{cursor:'pointer', color: '#d4af37'}}><input type="radio" name="m" defaultChecked onChange={()=>setMethod('email')}/> Password</label>
                    <label style={{cursor:'pointer', color: '#d4af37'}}><input type="radio" name="m" onChange={()=>setMethod('otp')}/> OTP</label>
                </div>
                {method === 'email' ? (
                    <><input style={styles.input} placeholder="GITAM E-mail" onChange={e=>setEmail(e.target.value)}/><input style={styles.input} type="password" placeholder="Password" onChange={e=>setPass(e.target.value)}/></>
                ) : (
                    <><input style={styles.input} placeholder="Phone Number"/><input style={styles.input} placeholder="OTP (1234)" onChange={e=>setOtp(e.target.value)}/></>
                )}
                <button style={styles.btn} onClick={handleLogin}>Login</button>
            </div>
        </div>
    );
}

// ================= USER DASHBOARD =================
function UserDashboard({ onLogout }) {
    const [type, setType] = useState('lost');
    const initialState = { category: '', location: '', description: '', date: '', phone: '', name: '' };
    const [form, setForm] = useState(initialState);
    const [matches, setMatches] = useState([]);
    const [lastUpdated, setLastUpdated] = useState(null);

    // Polling logic: Update match status every 30 seconds
    useEffect(() => {
        let interval;
        if (matches.length > 0) {
            const pollBackend = async () => {
                try {
                    const res = await fetch(`${API_BASE}/all-items`);
                    const allItems = await res.json();
                    setMatches(prevMatches => 
                        prevMatches.map(match => ({ ...match, item: allItems.find(i => i.id === match.item.id) || match.item }))
                    );
                    setLastUpdated(new Date().toLocaleTimeString());
                } catch (err) {}
            };
            interval = setInterval(pollBackend, 30000); 
        }
        return () => clearInterval(interval);
    }, [matches.length]);

    const handleReport = async (e) => {
        e.preventDefault();
        const fd = new FormData();
        Object.keys(form).forEach(key => fd.append(key, form[key]));
        fd.append('item_type', type);
        try {
            const res = await fetch(`${API_BASE}/report`, { method: 'POST', body: fd });
            const data = await res.json();
            setMatches(data.matches || []);
            setLastUpdated(new Date().toLocaleTimeString());
            alert(data.message);
            setForm(initialState);
        } catch (err) { alert("⚠️ Server Unreachable!"); }
    };

    return (
        <div style={styles.dash}>
            <AnimatedBackground />
            <button onClick={onLogout} style={{...styles.logoutBtn, float: 'right'}}>Logout</button>
            <div style={{...styles.card, margin:'0 auto'}}>
                <div style={{display:'flex', gap:'10px', marginBottom:'20px'}}>
                    <button type="button" onClick={()=>setType('lost')} style={{flex:1, padding:'10px', background: type==='lost'?'#d4af37':'#333', color: type==='lost'?'#000':'#fff', border:'none', borderRadius:'5px', cursor:'pointer', fontWeight:'bold'}}>Lost</button>
                    <button type="button" onClick={()=>setType('found')} style={{flex:1, padding:'10px', background: type==='found'?'#d4af37':'#333', color: type==='found'?'#000':'#fff', border:'none', borderRadius:'5px', cursor:'pointer', fontWeight:'bold'}}>Found</button>
                </div>
                <h3 style={{textAlign:'center', color: '#d4af37'}}>Report {type.toUpperCase()} Item</h3>
                <form onSubmit={handleReport}>
                    <label style={styles.label}>Item Name</label>
                    <input style={styles.input} placeholder="e.g. Phone, Keys" value={form.category} onChange={e=>setForm({...form, category:e.target.value})} required />
                    <label style={styles.label}>Your Name</label>
                    <input style={styles.input} placeholder="Name" value={form.name} onChange={e=>setForm({...form, name:e.target.value})} required />
                    <label style={styles.label}>Phone Number</label>
                    <input style={styles.input} type="tel" placeholder="Mobile" value={form.phone} onChange={e=>setForm({...form, phone:e.target.value})} required />
                    <label style={styles.label}>{type === 'lost' ? 'Place of Lost' : 'Place of Found'}</label>
                    <input style={styles.input} placeholder="Location" value={form.location} onChange={e=>setForm({...form, location:e.target.value})} required />
                    <label style={styles.label}>{type === 'lost' ? 'Date of Lost' : 'Date of Found'}</label>
                    <input style={styles.input} type="date" value={form.date} onChange={e=>setForm({...form, date:e.target.value})} required />
                    <label style={styles.label}>Description</label>
                    <textarea style={{...styles.input, height:'60px', resize:'none'}} placeholder="Details..." value={form.description} onChange={e=>setForm({...form, description:e.target.value})} required />
                    <button type="submit" style={styles.btn}>Submit & Scan</button>
                </form>
            </div>

            <div style={{maxWidth:'420px', margin:'20px auto'}}>
                {matches.length > 0 && <div style={{textAlign:'center', color:'#d4af37'}}><h3>Verification Progress</h3><small>(Last Check: {lastUpdated})</small></div>}
                {matches.map((m, i) => (
                    <div key={i} style={styles.matchCard}>
                        <div style={{fontSize: '18px', fontWeight: 'bold', marginBottom: '10px', color: '#d4af37'}}>✨ Match Found</div>
                        <p style={{fontSize: '13px', color: '#ccc', marginBottom: '15px'}}>An item matching your description is in the system.</p>
                        <div style={{padding:'12px', borderRadius:'8px', fontWeight:'bold', background: m.item.status === 'Approved' ? '#27ae60' : '#f6ad55', color:'#fff'}}>
                            Admin Status: {m.item.status}
                        </div>
                        <p style={{fontSize:'12px', marginTop:'10px', color:'#aaa'}}>{m.item.status === 'Approved' ? "✅ Claim Approved! Visit the central office." : "⏳ Verification in progress (Updates every 30s)."}</p>
                    </div>
                ))}
            </div>
        </div>
    );
}

// ================= ADMIN DASHBOARD =================
function AdminDashboard({ onLogout }) {
    const [items, setItems] = useState([]);
    const fetchItems = async () => {
        try {
            const res = await fetch(`${API_BASE}/all-items`);
            const data = await res.json();
            setItems(data);
        } catch (err) {}
    };
    useEffect(() => { fetchItems(); }, []);

    const del = async (id) => {
        if (!id || !window.confirm("Permanent delete?")) return;
        const res = await fetch(`${API_BASE}/delete/${id}`, { method: 'DELETE' });
        if (res.ok) setItems(prev => prev.filter(i => i.id !== id));
    };

    const approve = async (id) => {
        const res = await fetch(`${API_BASE}/approve/${id}`, { method: 'POST' });
        const result = await res.json();
        if (result.status === "success") { alert("Approved!"); fetchItems(); }
    };

    return (
        <div style={styles.dash}>
            <AnimatedBackground />
            <button onClick={onLogout} style={{...styles.logoutBtn, float: 'right'}}>Logout</button>
            <h2 style={{borderBottom: '2px solid #d4af37', paddingBottom: '10px', color:'#d4af37'}}>Admin Management Panel</h2>
            <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(300px, 1fr))', gap:'20px', marginTop:'30px'}}>
                {items.map((item, i) => (
                    <div key={item.id || i} style={{...styles.card, width: 'auto', borderLeft: item.item_type==='lost'?'5px solid #e53e3e':'5px solid #27ae60'}}>
                        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
                            <b style={{color: '#d4af37'}}>{item.item_type.toUpperCase()}: {item.category}</b>
                            <span style={{fontSize:'10px', background: item.status==='Approved'?'#27ae60':'#f6ad55', padding:'2px 8px', borderRadius:'10px', fontWeight:'bold'}}>{item.status}</span>
                        </div>
                        <p style={{fontSize:'13px', color:'#ccc'}}>{item.description}</p>
                        <p style={{fontSize:'12px', color: '#888'}}>📍 {item.location} | 👤 {item.name} | 📞 {item.phone}</p>
                        <div style={{marginTop:'15px', display: 'flex', gap: '10px'}}>
                            <button style={{background:'#27ae60', color:'#fff', border:'none', padding:'8px', borderRadius:'5px', cursor:'pointer', flex: 1}} onClick={()=>approve(item.id)}>Approve</button>
                            <button style={{background:'#c0392b', color:'#fff', border:'none', padding:'8px', borderRadius:'5px', cursor:'pointer', flex: 1}} onClick={()=>del(item.id)}>Delete</button>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}

// ================= MAIN CONTROLLER =================
export default function App() {
    const [role, setRole] = useState(null);
    if (role === null) return <Login onLogin={setRole} />;
    return role === 'admin' ? <AdminDashboard onLogout={() => setRole(null)} /> : <UserDashboard onLogout={() => setRole(null)} />;
}