"use client";

import * as React from 'react';
import { useEffect, useState, useRef } from 'react';
import { getSupabaseClient } from '../../utils/supabase';
import { AuthChangeEvent, Session } from '@supabase/supabase-js';
import { Loader2, X, Check } from 'lucide-react';
import { cn } from '@/lib/utils';

// Define our own Project type
interface Project {
  id: string;
  name: string;
  description?: string | null;
  attributes?: Record<string, unknown>;
  created_at?: string;
  updated_at?: string;
  deleted_at?: string | null;
  schema_version?: number | null;
  creator_id?: string | null;
  team_name?: string;
}

// 添加需要的类型定义
interface ProjectWithTeam {
  project_id: string;
  projects: Project;
  teams?: { name: string };
}

// ProjectSelector component with multi-select support
export function ProjectSelector({ 
  value, 
  onChange, 
  className,
  multiple = false,
  teamId,
  teamIds,
}: { 
  value?: string | string[];
  onChange?: (projectId: string | string[]) => void;
  className?: string;
  multiple?: boolean;
  teamId?: string; // Optional team ID to filter projects by team
  teamIds?: string[]; // Optional array of team IDs to filter projects by multiple teams
}) {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [projects, setProjects] = useState<Project[]>([]);
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const [isOpen, setIsOpen] = useState(false);
  const selectorRef = useRef<HTMLDivElement>(null);

  // Normalize team IDs to ensure we're always working with an array
  const effectiveTeamIds = React.useMemo(() => {
    if (teamIds && teamIds.length > 0) {
      return teamIds;
    } else if (teamId) {
      return [teamId];
    }
    return undefined;
  }, [teamId, teamIds]);

  // Initialize selected projects based on value prop
  useEffect(() => {
    if (value) {
      if (Array.isArray(value)) {
        setSelectedIds(value);
      } else {
        setSelectedIds(value ? [value] : []);
      }
    } else {
      setSelectedIds([]);
    }
  }, [value]);

  // Add click outside listener to close dropdown
  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (selectorRef.current && !selectorRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    }

    // Only add the event listener if the dropdown is open
    if (isOpen) {
      document.addEventListener('mousedown', handleClickOutside);
      return () => {
        document.removeEventListener('mousedown', handleClickOutside);
      };
    }
  }, [isOpen]);

  useEffect(() => {
    let isMounted = true;

    const fetchProjects = async (userId: string) => {
      if (!isMounted) return;
      setLoading(true);
      setError(null);
      
      console.log(`开始获取项目数据，用户ID: ${userId}, 团队ID过滤: ${effectiveTeamIds?.join(', ') || '无'}`);
      
      try {
        const supabase = getSupabaseClient();
        console.log('Supabase客户端已创建，准备获取项目数据');
        
        if (effectiveTeamIds && effectiveTeamIds.length > 0) {
          // If team IDs are provided, get projects for those teams
          console.log(`通过团队ID获取项目: ${effectiveTeamIds.join(', ')}`);
          
          const { data: projectsData, error: projectsError } = await supabase
            .from('team_projects')
            .select('project_id, projects:project_id(*), teams:team_id(name)')
            .in('team_id', effectiveTeamIds)
            .is('projects.deleted_at', null);

          console.log(`团队项目查询结果:`, projectsData ? `找到${projectsData.length}个` : '无数据', 
                      projectsError ? `错误: ${projectsError.message}` : '无错误');

          if (projectsError) throw projectsError;

          if (!projectsData || projectsData.length === 0) {
            console.log('未找到团队项目，返回空列表');
            if (isMounted) setProjects([]);
            return;
          }

          // Extract projects from response with team info
          if (isMounted) {
            console.log('处理团队项目数据');
            const projectList: Project[] = [];
            
            for (const item of projectsData as unknown as ProjectWithTeam[]) {
              if (item.projects && typeof item.projects === 'object' && 'id' in item.projects && 'name' in item.projects) {
                const project = item.projects as Project;
                if (item.teams && typeof item.teams === 'object' && 'name' in item.teams) {
                  project.team_name = item.teams.name;
                }
                // Avoid duplicate projects from different teams
                if (!projectList.some(p => p.id === project.id)) {
                  projectList.push(project);
                }
              }
            }
            
            console.log(`处理后的项目数据: ${projectList.length}个`);
            setProjects(projectList);
          }
        } else {
          // If no team IDs, get all user's projects
          console.log(`获取用户所有项目，用户ID: ${userId}`);
          
          const { data: projectsData, error: projectsError } = await supabase
            .from('user_projects')
            .select('project_id, projects:project_id(*)')
            .eq('user_id', userId)
            .is('projects.deleted_at', null);

          console.log(`用户项目查询结果:`, projectsData ? `找到${projectsData.length}个` : '无数据', 
                      projectsError ? `错误: ${projectsError.message}` : '无错误');

          if (projectsError) throw projectsError;

          if (!projectsData || projectsData.length === 0) {
            console.log('未找到用户项目，返回空列表');
            if (isMounted) setProjects([]);
            return;
          }

          // Fetch team info for these projects
          const projectIds = projectsData.map(item => item.project_id);
          console.log(`获取项目的团队信息，项目IDs: ${projectIds.join(', ')}`);
          
          // Get team info for each project
          const { data: teamProjectsData, error: teamProjectsError } = await supabase
            .from('team_projects')
            .select('project_id, teams:team_id(name)')
            .in('project_id', projectIds);
          
          console.log(`项目团队关系查询结果:`, teamProjectsData ? `找到${teamProjectsData.length}个` : '无数据');
              
          if (teamProjectsError) throw teamProjectsError;
          
          // Create project ID to team name mapping
          const projectTeamMap: Record<string, string> = {};
          if (teamProjectsData) {
            teamProjectsData.forEach(item => {
              if (item.teams && typeof item.teams === 'object' && 'name' in item.teams) {
                projectTeamMap[item.project_id] = (item.teams as { name: string }).name;
              }
            });
          }
          
          // Extract projects with team names
          if (isMounted && projectsData) {
            console.log('处理用户项目数据');
            const projectList: Project[] = [];
            
            for (const item of projectsData) {
              if (item.projects && typeof item.projects === 'object' && 'id' in item.projects && 'name' in item.projects) {
                const project = item.projects as Project;
                project.team_name = projectTeamMap[project.id];
                projectList.push(project);
              }
            }
            
            console.log(`处理后的项目数据: ${projectList.length}个`);
            setProjects(projectList);
          }
        }
      } catch (err) {
        console.error('获取项目数据出错:', err);
        if (isMounted) {
          setError(err instanceof Error ? err.message : '获取项目数据失败');
        }
      } finally {
        if (isMounted) {
          setLoading(false);
        }
      }
    };

    // 获取Supabase客户端实例并订阅认证状态变化
    try {
      const supabase = getSupabaseClient();
      console.log('注册项目选择器认证状态变化监听器');
      
      const { data: { subscription } } = supabase.auth.onAuthStateChange((event: AuthChangeEvent, session: Session | null) => {
        console.log(`项目选择器认证状态变化: ${event}`, session ? `用户ID: ${session.user.id}` : '无会话');
        if (event === 'SIGNED_IN' && session?.user?.id) {
          fetchProjects(session.user.id);
        } else if (event === 'SIGNED_OUT') {
          setProjects([]);
          setError(null);
        }
      });

      // 初始化时获取当前会话
      console.log('项目选择器获取当前会话状态');
      supabase.auth.getSession().then(({ data: { session } }) => {
        console.log('项目选择器当前会话状态:', session ? `用户已登录，ID: ${session.user.id}` : '用户未登录');
        if (session?.user?.id) {
          fetchProjects(session.user.id);
        } else {
          // 如果没有会话但组件需要初始化，可以设置加载完成
          setLoading(false);
        }
      }).catch(err => {
        console.error('项目选择器获取会话状态失败:', err);
        // 确保即使获取会话失败也停止加载状态
        setLoading(false);
      });

      return () => {
        console.log('ProjectSelector组件卸载，清理订阅');
        isMounted = false;
        subscription.unsubscribe();
      };
    } catch (initError) {
      console.error('初始化ProjectSelector出错:', initError);
      // 确保在初始化出错时也停止加载状态
      setLoading(false);
      setError('初始化失败，请刷新页面重试');
      return () => {
        isMounted = false;
      };
    }
  }, [effectiveTeamIds]);

  const handleToggle = () => {
    if (!loading && !error && projects.length > 0) {
      setIsOpen(!isOpen);
    }
  };

  const handleProjectSelect = (projectId: string) => {
    let newSelected: string[];
    
    if (multiple) {
      // For multi-select: toggle project in/out of selection
      if (selectedIds.includes(projectId)) {
        newSelected = selectedIds.filter(id => id !== projectId);
      } else {
        newSelected = [...selectedIds, projectId];
      }
    } else {
      // For single-select: replace selection with the new project
      newSelected = [projectId];
      setIsOpen(false);
    }
    
    setSelectedIds(newSelected);
    
    if (onChange) {
      onChange(multiple ? newSelected : newSelected[0] || '');
    }
  };

  const removeProject = (e: React.MouseEvent, projectId: string) => {
    e.stopPropagation();
    const newSelected = selectedIds.filter(id => id !== projectId);
    setSelectedIds(newSelected);
    if (onChange) {
      onChange(multiple ? newSelected : newSelected[0] || '');
    }
  };

  if (loading) {
    return (
      <div className={cn(
        "flex w-full items-center justify-between rounded-md border px-3 py-2",
        className
      )}>
        <Loader2 className="h-4 w-4 animate-spin" />
      </div>
    );
  }

  if (error) {
    return (
      <div className={cn(
        "flex w-full items-center rounded-md border border-destructive bg-destructive/10 px-3 py-2 text-destructive",
        className
      )}>
        {error}
      </div>
    );
  }

  if (projects.length === 0) {
    return (
      <div className={cn(
        "flex w-full items-center rounded-md border px-3 py-2 text-muted-foreground",
        className
      )}>
        No projects available
      </div>
    );
  }

  const selectedProjects = projects.filter(project => selectedIds.includes(project.id));

  return (
    <div className="relative" ref={selectorRef}>
      <div 
        className={cn(
          "flex w-full min-h-10 items-center flex-wrap rounded-md border p-1 cursor-pointer",
          isOpen && "ring-2 ring-offset-2 ring-blue-500",
          className
        )}
        onClick={handleToggle}
      >
        {selectedProjects.length > 0 ? (
          <div className="flex flex-wrap gap-1">
            {selectedProjects.map(project => (
              <div 
                key={project.id} 
                className="flex items-center gap-1 bg-green-100 text-green-800 rounded-md px-2 py-1 text-sm"
              >
                {project.name}
                {multiple && (
                  <X 
                    size={14} 
                    className="cursor-pointer hover:text-green-900" 
                    onClick={(e) => removeProject(e, project.id)} 
                  />
                )}
              </div>
            ))}
          </div>
        ) : (
          <div className="px-2 py-1 text-gray-500">Select a project</div>
        )}
      </div>
      
      {isOpen && (
        <div className="absolute w-full mt-1 max-h-60 overflow-auto rounded-md border bg-white shadow-lg z-10">
          {projects.map(project => (
            <div 
              key={project.id}
              className={cn(
                "px-3 py-2 cursor-pointer hover:bg-gray-100 flex items-center justify-between",
                selectedIds.includes(project.id) && "bg-green-50"
              )}
              onClick={() => handleProjectSelect(project.id)}
            >
              <span className="flex flex-col">
                <span className="font-medium">{project.name}</span>
                {project.team_name && (
                  <span className="text-xs text-gray-500">
                    {project.team_name}
                  </span>
                )}
                {project.description && (
                  <span className="text-xs text-gray-500 truncate max-w-[250px]">
                    {project.description}
                  </span>
                )}
              </span>
              {selectedIds.includes(project.id) && (
                <Check className="h-4 w-4 text-green-600" />
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}