/**
 * SSASidebar - V11 左侧抽屉栏
 * 
 * 100% 还原 V11 原型图
 * - 汉堡菜单切换展开/收起
 * - Logo + 新建按钮
 * - 历史记录列表（展开时显示）
 */
import React, { useState, useEffect } from 'react';
import { 
  Menu, 
  BarChart3, 
  Plus, 
  MessageSquare
} from 'lucide-react';
import { useSSAStore } from '../stores/ssaStore';
import apiClient from '@/common/api/axios';
import type { SSASession } from '../types';

interface HistoryItem {
  id: string;
  title: string;
  status: 'active' | 'completed' | 'archived';
}

export const SSASidebar: React.FC = () => {
  const { 
    sidebarExpanded, 
    setSidebarExpanded, 
    currentSession,
    hydrateFromHistory,
    reset 
  } = useSSAStore();
  
  const [historyItems, setHistoryItems] = useState<HistoryItem[]>([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    if (sidebarExpanded) {
      fetchHistory();
    }
  }, [sidebarExpanded]);

  const fetchHistory = async () => {
    setIsLoading(true);
    try {
      const response = await apiClient.get('/api/v1/ssa/sessions');
      setHistoryItems(response.data.sessions || []);
    } catch (error) {
      console.error('Failed to fetch history:', error);
      setHistoryItems([]);
    } finally {
      setIsLoading(false);
    }
  };

  const handleToggleSidebar = () => {
    setSidebarExpanded(!sidebarExpanded);
  };

  const handleNewAnalysis = () => {
    reset();
  };

  const handleSelectSession = async (sessionId: string) => {
    if (sessionId === currentSession?.id) return;
    
    try {
      const response = await apiClient.get(`/api/v1/ssa/sessions/${sessionId}`);
      const session: SSASession = response.data;
      hydrateFromHistory(session);
    } catch (error) {
      console.error('Failed to load session:', error);
    }
  };

  return (
    <aside className={`ssa-sidebar ${sidebarExpanded ? 'expanded' : ''}`}>
      {/* 顶部：汉堡菜单与 Logo */}
      <div className="sidebar-header">
        <button 
          className="sidebar-toggle-btn"
          onClick={handleToggleSidebar}
        >
          <Menu size={18} />
        </button>
        {sidebarExpanded && (
          <div className="sidebar-logo fade-in">
            <div className="logo-icon">
              <BarChart3 size={14} />
            </div>
            <span className="logo-text">SSA-Pro</span>
          </div>
        )}
      </div>

      {/* 核心操作区 */}
      <div className="sidebar-actions">
        {/* 新建按钮 */}
        <button 
          className={`sidebar-new-btn ${sidebarExpanded ? 'expanded' : ''}`}
          onClick={handleNewAnalysis}
        >
          <Plus size={16} className="new-btn-icon" />
          {sidebarExpanded && <span className="new-btn-text">新建分析</span>}
        </button>
      </div>

      {/* 历史记录列表 (展开时显示) */}
      {sidebarExpanded && (
        <div className="sidebar-history fade-in">
          <div className="history-label">近期分析</div>
          <div className="history-list">
            {isLoading ? (
              <div className="history-loading">加载中...</div>
            ) : historyItems.length === 0 ? (
              <div className="history-empty">暂无历史记录</div>
            ) : (
              historyItems.map((item) => (
                <button
                  key={item.id}
                  className={`history-item ${item.id === currentSession?.id ? 'active' : ''}`}
                  onClick={() => handleSelectSession(item.id)}
                >
                  <MessageSquare size={14} className="history-item-icon" />
                  <span className="history-item-title">{item.title}</span>
                </button>
              ))
            )}
          </div>
        </div>
      )}
    </aside>
  );
};

export default SSASidebar;