/**
 * TeamList - Sidebar Team List Component
 *
 * Displays a compact list of teams for the sidebar navigation.
 *
 * @module components/TeamList
 */

import { useEffect, useState } from 'react';
import { useTeamStore } from '../store/teamStore';
import { useAgentStore } from '../store/agentStore';
import { useChatStore } from '../store/chatStore';
import { Users, Plus, Activity, CheckCircle, AlertTriangle, X, Bot } from 'lucide-react';
import type { TeamMemberRole } from '../types/team';

interface TeamListProps {
  onSelectTeam?: (teamId: string) => void;
  selectedTeamId?: string;
}

export function TeamList({ onSelectTeam, selectedTeamId }: TeamListProps) {
  const { teams, loadTeams, setActiveTeam, createTeam, isLoading } = useTeamStore();
  const clones = useAgentStore((s) => s.clones);
  const { agents } = useChatStore();
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [teamName, setTeamName] = useState('');
  const [teamDescription, setTeamDescription] = useState('');
  const [teamPattern, setTeamPattern] = useState<'sequential' | 'parallel' | 'pipeline'>('sequential');
  const [selectedAgents, setSelectedAgents] = useState<string[]>([]);
  const [isCreating, setIsCreating] = useState(false);

  useEffect(() => {
    try {
      loadTeams();
    } catch (err) {
      console.error('[TeamList] Failed to load teams:', err);
    }
  }, [loadTeams]);

  const handleSelectTeam = (teamId: string) => {
    const team = teams.find(t => t.id === teamId);
    if (team) {
      setActiveTeam(team);
      onSelectTeam?.(teamId);
    }
  };

  const handleCreateTeam = async () => {
    if (!teamName.trim() || selectedAgents.length === 0) return;

    setIsCreating(true);
    try {
      const roleAssignments: { agentId: string; role: TeamMemberRole }[] = selectedAgents.map((agentId, index) => ({
        agentId,
        role: (index === 0 ? 'orchestrator' : index === 1 ? 'reviewer' : 'worker') as TeamMemberRole,
      }));

      const team = await createTeam({
        name: teamName.trim(),
        description: teamDescription.trim() || undefined,
        pattern: teamPattern,
        memberAgents: roleAssignments,
      });

      if (team) {
        setShowCreateModal(false);
        setTeamName('');
        setTeamDescription('');
        setSelectedAgents([]);
        setTeamPattern('sequential');
        setActiveTeam(team);
        onSelectTeam?.(team.id);
      }
    } finally {
      setIsCreating(false);
    }
  };

  const toggleAgentSelection = (agentId: string) => {
    setSelectedAgents(prev =>
      prev.includes(agentId)
        ? prev.filter(id => id !== agentId)
        : [...prev, agentId]
    );
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'active':
        return <Activity className="w-3 h-3 text-green-500" />;
      case 'paused':
        return <AlertTriangle className="w-3 h-3 text-yellow-500" />;
      case 'completed':
        return <CheckCircle className="w-3 h-3 text-blue-500" />;
      default:
        return <Activity className="w-3 h-3 text-gray-400" />;
    }
  };

  // Merge clones and agents for display - normalize to common type with defensive checks
  const availableAgents: Array<{ id: string; name: string; role?: string }> =
    (clones && clones.length > 0)
      ? clones.map(c => ({ id: c.id, name: c.name, role: c.role }))
      : (agents && agents.length > 0)
        ? agents.map(a => ({
            id: a.id,
            name: a.name,
            role: '默认助手',
          }))
        : [];

  return (
    <div className="h-full flex flex-col">
      {/* Header */}
      <div className="p-3 border-b border-gray-200 dark:border-gray-700">
        <div className="flex items-center justify-between">
          <h3 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
            团队
          </h3>
          <button
            onClick={() => setShowCreateModal(true)}
            className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
            title="创建团队"
          >
            <Plus className="w-4 h-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200" />
          </button>
        </div>
      </div>

      {/* Create Team Modal */}
      {showCreateModal && (
        <div className="absolute inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-80 max-h-[90vh] overflow-y-auto">
            <div className="p-4 border-b border-gray-200 dark:border-gray-700">
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-semibold text-gray-900 dark:text-white">创建团队</h3>
                <button
                  onClick={() => setShowCreateModal(false)}
                  className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
                >
                  <X className="w-4 h-4 text-gray-400" />
                </button>
              </div>
            </div>

            <div className="p-4 space-y-4">
              {/* Team Name */}
              <div>
                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                  团队名称 *
                </label>
                <input
                  type="text"
                  value={teamName}
                  onChange={(e) => setTeamName(e.target.value)}
                  placeholder="例如：开发团队 Alpha"
                  className="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-400"
                />
              </div>

              {/* Team Description */}
              <div>
                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                  描述
                </label>
                <textarea
                  value={teamDescription}
                  onChange={(e) => setTeamDescription(e.target.value)}
                  placeholder="这个团队将负责什么工作？"
                  rows={2}
                  className="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-400 resize-none"
                />
              </div>

              {/* Collaboration Pattern */}
              <div>
                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                  协作模式
                </label>
                <select
                  value={teamPattern}
                  onChange={(e) => setTeamPattern(e.target.value as typeof teamPattern)}
                  className="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-400"
                >
                  <option value="sequential">顺序执行（逐个任务）</option>
                  <option value="parallel">并行执行（同时工作）</option>
                  <option value="pipeline">流水线（输出传递给下一步）</option>
                </select>
              </div>

              {/* Agent Selection */}
              <div>
                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
                  选择智能体 (已选择 {selectedAgents.length} 个) *
                </label>
                <div className="space-y-2 max-h-40 overflow-y-auto">
                  {availableAgents.map((agent) => (
                    <button
                      key={agent.id}
                      onClick={() => toggleAgentSelection(agent.id)}
                      className={`w-full p-2 rounded-lg text-left text-sm transition-colors flex items-center gap-2 ${
                        selectedAgents.includes(agent.id)
                          ? 'bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800'
                          : 'bg-gray-50 dark:bg-gray-700 border border-transparent hover:bg-gray-100 dark:hover:bg-gray-600'
                      }`}
                    >
                      <div className="w-6 h-6 rounded-full bg-gray-600 flex items-center justify-center text-white text-xs">
                        <Bot className="w-3 h-3" />
                      </div>
                      <span className="text-gray-900 dark:text-white truncate">{agent.name}</span>
                      {selectedAgents.includes(agent.id) && (
                        <CheckCircle className="w-4 h-4 text-blue-500 ml-auto" />
                      )}
                    </button>
                  ))}
                  {availableAgents.length === 0 && (
                    <p className="text-xs text-gray-500 dark:text-gray-400 text-center py-2">
                      暂无可用智能体，请先创建一个智能体。
                    </p>
                  )}
                </div>
              </div>
            </div>

            {/* Footer */}
            <div className="p-4 border-t border-gray-200 dark:border-gray-700 flex gap-2">
              <button
                onClick={() => setShowCreateModal(false)}
                className="flex-1 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
              >
                取消
              </button>
              <button
                onClick={handleCreateTeam}
                disabled={!teamName.trim() || selectedAgents.length === 0 || isCreating}
                className="flex-1 px-4 py-2 text-sm text-white bg-gray-700 dark:bg-gray-600 rounded-lg hover:bg-gray-800 dark:hover:bg-gray-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                {isCreating ? '创建中...' : '创建'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Team List */}
      <div className="flex-1 overflow-y-auto">
        {isLoading ? (
          <div className="p-4 text-center text-gray-400 text-sm">加载中...</div>
        ) : !Array.isArray(teams) || teams.length === 0 ? (
          <div className="p-4 text-center">
            <Users className="w-8 h-8 mx-auto mb-2 text-gray-300 dark:text-gray-600" />
            <p className="text-xs text-gray-400 dark:text-gray-500">
              暂无团队
            </p>
            <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
              点击 + 创建一个团队
            </p>
          </div>
        ) : (
          <div className="space-y-1 p-2">
            {teams.map((team) => (
              <button
                key={team.id}
                onClick={() => handleSelectTeam(team.id)}
                className={`w-full p-2 rounded-lg text-left transition-colors ${
                  selectedTeamId === team.id
                    ? 'bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800'
                    : 'hover:bg-gray-100 dark:hover:bg-gray-800'
                }`}
              >
                <div className="flex items-center gap-2">
                  {getStatusIcon(team.status)}
                  <span className="text-sm font-medium text-gray-900 dark:text-white truncate">
                    {team.name}
                  </span>
                </div>
                <div className="mt-1 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
                  <span className="flex items-center gap-1">
                    <Users className="w-3 h-3" />
                    {team.members.length}
                  </span>
                  <span>·</span>
                  <span>{team.tasks.length} 个任务</span>
                </div>
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

export default TeamList;