import { useState, useEffect } from 'react';
import { Activity, Search } from 'lucide-react';
import { fetchLogs } from '../../api/mockApi';
import toast from 'react-hot-toast';

const AdminLogs = () => {
    const [logs, setLogs] = useState([]);
    const [loading, setLoading] = useState(true);
    const [search, setSearch] = useState('');

    useEffect(() => { fetchLogs().then(d => { setLogs(d); setLoading(false); }).catch(() => setLoading(false)); }, []);

    const filtered = logs.filter(l =>
        l.action?.toLowerCase().includes(search.toLowerCase()) ||
        l.username?.toLowerCase().includes(search.toLowerCase())
    );

    return (
        <div className="animate-fade-in pb-20">
            <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
                <div>
                    <h2 className="text-3xl font-poppins font-semibold text-white mb-2">Журнал действий</h2>
                    <p className="text-dimWhite font-poppins text-sm">История действий администраторов (последние 100)</p>
                </div>
                <div className="relative">
                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-dimWhite" size={16} />
                    <input type="text" value={search} onChange={(e) => setSearch(e.target.value)}
                        className="bg-black-gradient-2 border border-gray-700 rounded-xl pl-9 pr-4 py-2 text-white font-poppins text-sm focus:outline-none focus:border-secondary"
                        placeholder="Фильтр..." />
                </div>
            </div>

            {loading ? (
                <div className="flex justify-center py-20"><div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-secondary"></div></div>
            ) : filtered.length === 0 ? (
                <div className="bg-black-gradient-2 rounded-2xl p-10 text-center border border-gray-800">
                    <Activity className="mx-auto text-dimWhite mb-4" size={44} />
                    <p className="text-dimWhite font-poppins">Записей нет</p>
                </div>
            ) : (
                <div className="bg-black-gradient-2 rounded-2xl border border-gray-800 overflow-hidden">
                    <table className="w-full">
                        <thead>
                            <tr className="border-b border-gray-800">
                                {['#', 'Администратор', 'Действие', 'Дата'].map(h => (
                                    <th key={h} className="text-left text-dimWhite font-poppins text-xs font-medium px-5 py-4">{h}</th>
                                ))}
                            </tr>
                        </thead>
                        <tbody>
                            {filtered.map((log, i) => (
                                <tr key={log.id} className="border-b border-gray-800/50 hover:bg-white/5 transition-colors">
                                    <td className="px-5 py-3 text-dimWhite font-poppins text-sm">{i + 1}</td>
                                    <td className="px-5 py-3 text-secondary font-poppins text-sm">@{log.username}</td>
                                    <td className="px-5 py-3 text-white font-poppins text-sm">{log.action}</td>
                                    <td className="px-5 py-3 text-dimWhite font-poppins text-sm">{new Date(log.created_at).toLocaleString('ru-RU')}</td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            )}
        </div>
    );
};

export default AdminLogs;
