import React, { useState } from "react";
import { WorkflowLog } from "./dashboardChatAreaTypes";
import messageStyles from './DashboardChatAreaStyles/DashboardChatMessages.module.css';

interface LogItemProps {
    log: WorkflowLog;
    index: number;
}

const LogItem: React.FC<LogItemProps> = ({ log }) => {
    const [showDetails, setShowDetails] = useState(false);

    // Format timestamp with robust parsing (same logic as MessageList)
    const formatTimestamp = (timestamp: any) => {

        
        if (!timestamp) {

            return 'No timestamp';
        }
        
        // Handle different timestamp formats (same as safeParseDate)
        let dateToTry = timestamp;
        
        // If it's a number, check if it's in seconds or milliseconds
        if (typeof timestamp === 'number') {
            // If it's a 10-digit number, it's likely seconds since epoch
            if (timestamp < 10000000000) {
                dateToTry = timestamp * 1000; // Convert seconds to milliseconds
            } else {
                dateToTry = timestamp; // Already in milliseconds
            }
        }
        // If it's a string that looks like a number, parse it and handle seconds/milliseconds
        else if (typeof timestamp === 'string' && /^\d+$/.test(timestamp)) {
            const numericTimestamp = parseInt(timestamp);
            // If it's a 10-digit number, it's likely seconds since epoch
            if (numericTimestamp < 10000000000) {
                dateToTry = numericTimestamp * 1000; // Convert seconds to milliseconds
            } else {
                dateToTry = numericTimestamp; // Already in milliseconds
            }
        }
        // If it's already a Date object
        else if (timestamp instanceof Date) {
            dateToTry = timestamp;
        }
        
        const date = new Date(dateToTry);
        
        // Check if the date is valid
        if (isNaN(date.getTime())) {
            console.warn(`⚠️ LogItem: Invalid timestamp detected:`, { 
                originalTimestamp: timestamp, 
                type: typeof timestamp, 
                processedTimestamp: dateToTry 
            });
            return `Invalid: ${timestamp}`;
        }
        

        
        const now = new Date();
        const isToday = date.toDateString() === now.toDateString();
        
        let formatted = '';
        if (isToday) {
            formatted = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        } else {
            formatted = date.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' ' + 
                       date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        }
        
        return formatted;
    };

    // Determine log level for styling
    const logLevel = log.level || (log.type?.toLowerCase() as 'info' | 'warning' | 'error' | 'debug') || 'info';

    // Debug: Log what the LogItem is receiving


    return (
        <div className={`${messageStyles.log_container} ${messageStyles[logLevel]}`}>
            <div className={messageStyles.log_header}>
                <span className={`${messageStyles.log_level} ${messageStyles[logLevel]}`}>
                    {logLevel.toUpperCase()}
                </span>
                <span className={messageStyles.log_timestamp}>
                    {formatTimestamp(log.timestamp)}
                </span>
            </div>
            
            <div className={messageStyles.log_message}>
                {log.message}
            </div>
            
            {log.source && (
                <div className={messageStyles.log_source}>
                    Source: {log.source}
                </div>
            )}
        </div>
    );
};

export default LogItem;