// src/pages/agent-office/components/LogTab.jsx
import { useState, useEffect, useRef } from 'react';
import { getAgentLogs } from '../../../api';

const LEVEL_STYLE = {
  info:    { color: '#60a5fa' },
  warning: { color: '#fbbf24' },
  error:   { color: '#ef4444' },
};

const SOURCE_STYLE = {
  agent:  { color: '#9ca3af', label: 'AGENT' },
  access: { color: '#5eead4', label: 'ACCESS' },
  log:    { color: '#a78bfa', label: 'LOG' },
};

function formatTime(iso) {
  if (!iso) return '';
  return new Date(iso).toLocaleTimeString('ko-KR', {
    hour: '2-digit', minute: '2-digit', second: '2-digit',
  });
}

export default function LogTab({ agentId, refreshTrigger }) {
  const [logs, setLogs] = useState([]);
  const scrollRef = useRef(null);

  useEffect(() => {
    let cancelled = false;
    const fetchLogs = () => {
      getAgentLogs(agentId, 100).then(data => {
        if (cancelled) return;
        setLogs(Array.isArray(data) ? data : (data?.logs || []));
      }).catch(() => {});
    };
    fetchLogs();
    const interval = setInterval(fetchLogs, 5000);  // 5초 폴링
    return () => { cancelled = true; clearInterval(interval); };
  }, [agentId, refreshTrigger]);

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = 0;
    }
  }, [logs]);

  return (
    <div className="ao-log-tab" ref={scrollRef}>
      {logs.length === 0 && <div className="ao-empty">No logs yet</div>}
      {logs.map((log, i) => {
        const source = log.source || 'agent';
        const sourceMeta = SOURCE_STYLE[source] || SOURCE_STYLE.agent;
        const levelStyle = LEVEL_STYLE[log.level] || LEVEL_STYLE.info;
        const time = formatTime(log.ts || log.created_at);
        return (
          <div key={log.id || `${source}-${i}-${time}`} className="ao-log-item">
            <span className="ao-log-time">{time}</span>
            <span className="ao-log-source" style={{ color: sourceMeta.color }}>
              [{sourceMeta.label}]
            </span>
            <span className="ao-log-level" style={levelStyle}>[{log.level}]</span>
            <span className="ao-log-msg">{log.message}</span>
            {source === 'access' && (
              <span className="ao-log-meta">
                {' '}({log.status} · {log.ms}ms)
              </span>
            )}
          </div>
        );
      })}
    </div>
  );
}