import { useState,useEffect } from '@wordpress/element';
import {Button} from '@wordpress/components';
import apiFetch from '@wordpress/api-fetch';
import { __ } from '@wordpress/i18n';

const LogViewer = () => {
    const getLogLevelClass = (level) => {
        switch (String(level)) {
            case '0': return 'log-error';
            case '1': return 'log-critical';
            default: return 'log-info';
        }
    };
  	const [logs, setLogs] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
	const [isClearing, setIsClearing] = useState(false);

	const fetchLogs = () => {
        setIsLoading(true);
        apiFetch({ path: '/postflow/v1/log' })
            .then((data) => {
                setLogs(data);
            })
            .catch((error) => {
                console.error('Error fetching logs:', error);
                setLogs([{id: 0, date: new Date().toISOString().replace('T', ' ').substring(0, 19), msg: 'Error fetching logs. See browser console for details.', level: 0}]);
            })
            .finally(() => {
                setIsLoading(false);
            });
    };

	const clearLogs = () => {
        if (!window.confirm(__('Are you sure you want to clear all logs? This action cannot be undone.', 'post-flow'))) {
            return;
        }
        setIsClearing(true);
        apiFetch({ path: '/postflow/v1/log', method: 'DELETE' })
            .then(() => {
                setLogs([]); // Clear logs from view
            })
            .catch((error) => {
                console.error('Error clearing logs:', error);
                setLogs([{id: 0, date: new Date().toISOString().replace('T', ' ').substring(0, 19), msg: 'Error clearing logs. See browser console for details.', level: 0}]);
            })
            .finally(() => {
                setIsClearing(false);
            });
    };

    useEffect( () => {
        fetchLogs();
		const interval = setInterval(fetchLogs, 30000);
    	return () => clearInterval(interval);
    }, [] );

    return (
        <div className="postflow-log-viewer-container">
            <div className="log-viewer-header">
                <h3>{__('Activity Log', 'post-flow')}</h3>
				<div className='form-row'>
					<Button icon="update" onClick={fetchLogs} isBusy={isLoading} disabled={isLoading || isClearing}>
                    {__('Refresh', 'post-flow')}
					</Button>
					<Button
							icon="trash"
							isDestructive
							onClick={clearLogs}
							isBusy={isClearing}
							disabled={isLoading || isClearing}
					>
						{__('Clear Logs', 'post-flow')}
					</Button>
				</div>

            </div>
            <pre className="postflow-log-viewer">
                {isLoading && <div>{__('Loading logs...', 'post-flow')}</div>}
                {!isLoading && logs.length === 0 && <div>{__('No logs found.', 'post-flow')}</div>}
                {!isLoading && logs.map(log => (
                    <div key={log.id} className={`log-entry ${getLogLevelClass(log.level)}`}>
                        <span className="log-date">[{log.log_time}]</span>
                        <span className="log-message">{log.msg}</span>
                    </div>
                ))}
            </pre>
        </div>
    );
};

export default LogViewer;