'use client';

import { useState, useEffect } from 'react';
import { useNotification } from '../../context/NotificationContext';

export default function TFTPLogsPage() {
    const [logs, setLogs] = useState([]);
    const [error, setError] = useState('');
    const { showNotification } = useNotification();

    const fetchLogs = async () => {
        try {
            const response = await fetch('/api/tftp/logs');
            const data = await response.json();
            if (response.ok) {
                setLogs(data.logs);
                setError('');
                showNotification('Logs refreshed successfully.', 'success');
            } else {
                setError(data.error);
                showNotification('Failed to refresh logs.', 'error');
            }
        } catch (err) {
            setError('Failed to fetch logs');
            showNotification('Failed to fetch logs.', 'error');
        }
    };

    useEffect(() => {
        fetchLogs();
    }, []);

    return (
        <div className="container mt-5">
            <h1 className="mb-4">TFTP Server Logs</h1>
            <button className="btn btn-secondary mb-3" onClick={fetchLogs}>
                Refresh Logs
            </button>
            {error && <div className="alert alert-danger">{error}</div>}
            <div className="log-container" style={{ maxHeight: '500px', overflowY: 'auto' }}>
                {logs.length > 0 ? (
                    <pre>{logs.join('\n')}</pre>
                ) : (
                    <div className="alert alert-info">No logs available or logs are not accessible.</div>
                )}
            </div>
        </div>
    );
}