// src/pages/agent-office/components/SidePanel.jsx
import { useState } from 'react';
import { AGENT_META } from '../constants.js';
import CommandTab from './CommandTab.jsx';
import TaskTab from './TaskTab.jsx';
import TokenTab from './TokenTab.jsx';
import LogTab from './LogTab.jsx';

const TABS = ['Commands', 'Tasks', 'Tokens', 'Logs'];

export default function SidePanel({ agentId, agentState, pendingTask, onClose, refreshTrigger }) {
  const [activeTab, setActiveTab] = useState('Commands');
  const [expanded, setExpanded] = useState(false);
  const meta = AGENT_META[agentId];
  if (!meta) return null;

  const stateText = agentState?.detail
    ? `${agentState.state} - ${agentState.detail}`
    : agentState?.state || 'unknown';

  return (
    <div className={`ao-sidepanel${expanded ? ' expanded' : ''}`}>
      <div className="ao-sidepanel-header">
        <div className="ao-sidepanel-agent">
          <div className="ao-sidepanel-icon" style={{ borderColor: meta.color }}>
            <img src={meta.image} alt={meta.displayName} />
          </div>
          <div className="ao-sidepanel-info">
            <div className="ao-sidepanel-name">{meta.displayName}</div>
            <div className="ao-sidepanel-state">● {stateText}</div>
          </div>
        </div>
        <div className="ao-sidepanel-actions">
          <button
            className="ao-sidepanel-expand"
            onClick={() => setExpanded(e => !e)}
            aria-label={expanded ? '축소' : '전체 화면'}
            title={expanded ? '축소' : '전체 화면'}
          >
            {expanded ? '⤡' : '⤢'}
          </button>
          <button className="ao-sidepanel-close" onClick={onClose}>×</button>
        </div>
      </div>

      <div className="ao-sidepanel-tabs">
        {TABS.map(tab => (
          <button
            key={tab}
            className={`ao-sidepanel-tab ${activeTab === tab ? 'active' : ''}`}
            onClick={() => setActiveTab(tab)}
          >
            {tab}
          </button>
        ))}
      </div>

      <div className="ao-sidepanel-content">
        {activeTab === 'Commands' && (
          <CommandTab agentId={agentId} agentState={agentState?.state} pendingTask={pendingTask} />
        )}
        {activeTab === 'Tasks' && (
          <TaskTab agentId={agentId} refreshTrigger={refreshTrigger} />
        )}
        {activeTab === 'Tokens' && (
          <TokenTab agentId={agentId} />
        )}
        {activeTab === 'Logs' && (
          <LogTab agentId={agentId} refreshTrigger={refreshTrigger} />
        )}
      </div>
    </div>
  );
}
