"use client";

import { useState, useEffect } from "react";
import { 
  FolderOpen,
  ChevronRight,
  ChevronDown,
  Loader2,
  Search
} from "lucide-react";
import { cn } from "@/lib/utils";
import { Input } from "@/components/ui/input";
import { auth } from "@/lib/firebase/config";

interface ContextItem {
  id: string;
  title: string;
  type: 'insight' | 'file' | 'chat' | 'image';
  timestamp?: Date;
  content?: string;
}

interface InsightTheme {
  theme: string;
  description: string;
  insights: ContextItem[];
}

interface CategorySection {
  id: 'insights' | 'files' | 'chats' | 'images';
  label: string;
  items: ContextItem[];
  themes?: InsightTheme[];
}

interface MissionContextTreeProps {
  projectId: string;
}

export function MissionContextTree({ projectId }: MissionContextTreeProps) {
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState("");
  const [expandedSections, setExpandedSections] = useState<Set<string>>(
    new Set()
  );
  const [sections, setSections] = useState<CategorySection[]>([
    { id: 'insights', label: 'Insights', items: [] },
    { id: 'files', label: 'Files', items: [] },
    { id: 'chats', label: 'Chats', items: [] },
    { id: 'images', label: 'Images', items: [] },
  ]);

  useEffect(() => {
    if (projectId) {
      fetchContextData();
    }
  }, [projectId]);

  const fetchContextData = async () => {
    setLoading(true);
    try {
      const user = auth.currentUser;
      const headers: HeadersInit = {};
      
      if (user) {
        const token = await user.getIdToken();
        headers.Authorization = `Bearer ${token}`;
      } else {
        console.log('[MissionContextTree] No user logged in, attempting unauthenticated fetch (development mode)');
      }

      // Fetch insights from AlloyDB knowledge chunks
      console.log('[MissionContextTree] Fetching insights from:', `/api/projects/${projectId}/knowledge/chunks`);
      const insightsResponse = await fetch(
        `/api/projects/${projectId}/knowledge/chunks`,
        { headers }
      );
      
      if (!insightsResponse.ok) {
        console.error('[MissionContextTree] Insights fetch failed:', insightsResponse.status, await insightsResponse.text());
      }
      
      const insightsData = insightsResponse.ok ? await insightsResponse.json() : { chunks: [] };
      console.log('[MissionContextTree] Insights data:', insightsData);
      
      const insights: ContextItem[] = insightsData.chunks?.map((chunk: any) => ({
        id: chunk.id,
        title: chunk.content?.substring(0, 50) || 'Untitled',
        content: chunk.content,
        type: 'insight' as const,
        timestamp: chunk.created_at ? new Date(chunk.created_at) : undefined,
      })) || [];

      // Group insights into themes using AI
      let insightThemes: InsightTheme[] = [];
      if (insights.length > 0) {
        console.log('[MissionContextTree] Grouping insights into themes...');
        try {
          const themesResponse = await fetch(
            `/api/projects/${projectId}/knowledge/themes`,
            {
              method: 'POST',
              headers: {
                ...headers,
                'Content-Type': 'application/json',
              },
              body: JSON.stringify({ insights }),
            }
          );

          if (themesResponse.ok) {
            const themesData = await themesResponse.json();
            console.log('[MissionContextTree] Got', themesData.themes?.length || 0, 'themes');
            
            // Map themes to insights
            insightThemes = (themesData.themes || []).map((theme: any) => ({
              theme: theme.theme,
              description: theme.description,
              insights: insights.filter(i => theme.insightIds.includes(i.id)),
            }));
          } else {
            console.error('[MissionContextTree] Themes fetch failed:', themesResponse.status);
          }
        } catch (themeError) {
          console.error('[MissionContextTree] Error grouping themes:', themeError);
        }
      }

      // Fetch files from Firebase Storage
      console.log('[MissionContextTree] Fetching files from:', `/api/projects/${projectId}/storage/files`);
      const filesResponse = await fetch(
        `/api/projects/${projectId}/storage/files`,
        { headers }
      );
      
      if (!filesResponse.ok) {
        console.error('[MissionContextTree] Files fetch failed:', filesResponse.status, await filesResponse.text());
      }
      
      const filesData = filesResponse.ok ? await filesResponse.json() : { files: [] };
      console.log('[MissionContextTree] Files data:', filesData);
      
      const files: ContextItem[] = filesData.files?.map((file: any) => ({
        id: file.name,
        title: file.name,
        type: 'file' as const,
        timestamp: file.timeCreated ? new Date(file.timeCreated) : undefined,
      })) || [];

      // Fetch chats and images from Firestore knowledge collection via API
      console.log('[MissionContextTree] Fetching knowledge items from:', `/api/projects/${projectId}/knowledge/items`);
      const knowledgeResponse = await fetch(
        `/api/projects/${projectId}/knowledge/items`,
        { headers }
      );
      
      if (!knowledgeResponse.ok) {
        console.error('[MissionContextTree] Knowledge items fetch failed:', knowledgeResponse.status, await knowledgeResponse.text());
      }
      
      const knowledgeData = knowledgeResponse.ok ? await knowledgeResponse.json() : { items: [] };
      console.log('[MissionContextTree] Knowledge items count:', knowledgeData.items?.length || 0);
      
      const chats: ContextItem[] = [];
      const images: ContextItem[] = [];

      (knowledgeData.items || []).forEach((item: any) => {
        const contextItem: ContextItem = {
          id: item.id,
          title: item.title,
          type: 'chat',
          timestamp: item.createdAt ? new Date(item.createdAt) : undefined,
        };

        // Categorize based on sourceType
        if (item.sourceType === 'imported_ai_chat' || item.sourceType === 'imported_chat' || item.sourceType === 'user_chat') {
          chats.push({ ...contextItem, type: 'chat' });
        } else if (item.sourceMeta?.filename?.match(/\.(jpg|jpeg|png|gif|webp|svg)$/i)) {
          images.push({ ...contextItem, type: 'image' });
        }
      });

      console.log('[MissionContextTree] Final counts - Insights:', insights.length, 'Files:', files.length, 'Chats:', chats.length, 'Images:', images.length, 'Themes:', insightThemes.length);

      setSections([
        { id: 'insights', label: 'Insights', items: insights, themes: insightThemes },
        { id: 'files', label: 'Files', items: files },
        { id: 'chats', label: 'Chats', items: chats },
        { id: 'images', label: 'Images', items: images },
      ]);
    } catch (error) {
      console.error('Error fetching context data:', error);
    } finally {
      setLoading(false);
    }
  };

  const toggleSection = (sectionId: string) => {
    const newExpanded = new Set(expandedSections);
    if (newExpanded.has(sectionId)) {
      newExpanded.delete(sectionId);
    } else {
      newExpanded.add(sectionId);
    }
    setExpandedSections(newExpanded);
  };

  const filteredSections = sections.map(section => ({
    ...section,
    items: section.items.filter(item => 
      !searchQuery || item.title.toLowerCase().includes(searchQuery.toLowerCase())
    )
  }));

  if (loading) {
    return (
      <div className="flex items-center justify-center py-8">
        <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
      </div>
    );
  }

  return (
    <div className="flex flex-col h-full">
      {/* Search */}
      <div className="mb-3">
        <div className="relative">
          <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
          <Input
            placeholder="Search files..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-7 h-8 text-sm"
          />
        </div>
      </div>

      {/* File Tree */}
      <div className="flex-1 overflow-auto space-y-0.5">
        {filteredSections.map((section) => {
          const isExpanded = expandedSections.has(section.id);
          
          return (
            <div key={section.id}>
              {/* Section Header */}
              <button
                onClick={() => toggleSection(section.id)}
                className="w-full flex items-center gap-2 px-2 py-1.5 text-sm hover:bg-muted rounded transition-colors"
              >
                {isExpanded ? (
                  <ChevronDown className="h-4 w-4 shrink-0" />
                ) : (
                  <ChevronRight className="h-4 w-4 shrink-0" />
                )}
                <FolderOpen className="h-4 w-4 shrink-0 text-blue-500" />
                <span className="truncate">{section.label}</span>
              </button>

              {/* Section Items */}
              {isExpanded && (
                <div className="ml-6 space-y-0.5">
                  {section.items.length === 0 ? (
                    <div className="px-2 py-1.5 text-xs text-muted-foreground italic">
                      No {section.label.toLowerCase()} yet
                    </div>
                  ) : section.id === 'insights' && section.themes && section.themes.length > 0 ? (
                    // Render insights grouped by themes
                    section.themes.map((theme) => {
                      const themeKey = `theme-${section.id}-${theme.theme}`;
                      const isThemeExpanded = expandedSections.has(themeKey);
                      
                      return (
                        <div key={themeKey} className="space-y-0.5">
                          {/* Theme Header */}
                          <button
                            onClick={() => toggleSection(themeKey)}
                            className="w-full flex items-center gap-2 px-2 py-1.5 text-sm hover:bg-muted rounded transition-colors"
                          >
                            {isThemeExpanded ? (
                              <ChevronDown className="h-3 w-3 shrink-0" />
                            ) : (
                              <ChevronRight className="h-3 w-3 shrink-0" />
                            )}
                            <FolderOpen className="h-3 w-3 shrink-0 text-amber-500" />
                            <span className="truncate font-medium text-xs">{theme.theme}</span>
                            <span className="text-[10px] text-muted-foreground">({theme.insights.length})</span>
                          </button>
                          
                          {/* Theme Insights */}
                          {isThemeExpanded && (
                            <div className="ml-5 space-y-0.5">
                              {theme.insights.map((item) => (
                                <button
                                  key={item.id}
                                  className={cn(
                                    "w-full flex items-center gap-2 px-2 py-1.5 text-xs hover:bg-muted rounded transition-colors text-left",
                                    "text-muted-foreground"
                                  )}
                                  title={item.content || item.title}
                                >
                                  <span className="truncate">{item.title}</span>
                                </button>
                              ))}
                            </div>
                          )}
                        </div>
                      );
                    })
                  ) : (
                    // Render items normally for non-insights sections
                    section.items.map((item) => (
                      <button
                        key={item.id}
                        className={cn(
                          "w-full flex items-center gap-2 px-2 py-1.5 text-sm hover:bg-muted rounded transition-colors text-left",
                          "text-muted-foreground"
                        )}
                        title={item.title}
                      >
                        <span className="truncate">{item.title}</span>
                      </button>
                    ))
                  )}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}