// 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' }
};

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

  useEffect(() => {
    let cancelled = false;
    getAgentLogs(agentId, 50).then(data => {
      if (!cancelled) setLogs(Array.isArray(data) ? data : (data?.logs || []));
    });
    return () => { cancelled = true; };
  }, [agentId, refreshTrigger]);

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [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 style = LEVEL_STYLE[log.level] || LEVEL_STYLE.info;
        const time = new Date(log.created_at).toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
        return (
          <div key={log.id || i} className="ao-log-item">
            <span className="ao-log-time">{time}</span>
            <span className="ao-log-level" style={style}>[{log.level}]</span>
            <span className="ao-log-msg">{log.message}</span>
          </div>
        );
      })}
    </div>
  );
}