"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Textarea } from "@/components/ui/textarea";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { FolderOpen, Plus, Github, Zap, FileText, Trash2, CheckCircle2, Upload } from "lucide-react";
import { CursorIcon } from "@/components/icons/custom-icons";
import { db } from "@/lib/firebase/config";
import { collection, doc, getDoc, addDoc, deleteDoc, query, where, getDocs, updateDoc } from "firebase/firestore";
import { toast } from "sonner";
import { auth } from "@/lib/firebase/config";
import { GitHubRepoPicker } from "@/components/ai/github-repo-picker";

interface ContextSource {
  id: string;
  type: "github" | "extension" | "chat" | "file" | "document";
  name: string;
  content?: string;
  url?: string;
  summary?: string;
  connectedAt: Date;
  metadata?: any;
  chunkCount?: number;
}

interface Project {
  githubRepo?: string;
  githubRepoUrl?: string;
}

export default function ContextPage() {
  const params = useParams();
  const projectId = params.projectId as string;
  const [sources, setSources] = useState<ContextSource[]>([]);
  const [project, setProject] = useState<Project | null>(null);
  const [loading, setLoading] = useState(true);
  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
  const [chatTitle, setChatTitle] = useState("");
  const [chatContent, setChatContent] = useState("");
  const [saving, setSaving] = useState(false);
  const [uploadMode, setUploadMode] = useState<"text" | "file">("text");
  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
  const [isProcessing, setIsProcessing] = useState(false);
  const [isGithubDialogOpen, setIsGithubDialogOpen] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      if (!projectId) return;
      
      try {
        // Fetch project details
        const projectRef = doc(db, "projects", projectId);
        const projectSnap = await getDoc(projectRef);
        
        if (projectSnap.exists()) {
          setProject(projectSnap.data() as Project);
        }

        // Fetch context sources
        const contextRef = collection(db, "projects", projectId, "contextSources");
        const contextSnap = await getDocs(contextRef);
        
        const fetchedSources: ContextSource[] = contextSnap.docs.map(doc => ({
          id: doc.id,
          ...doc.data(),
          connectedAt: doc.data().connectedAt?.toDate() || new Date()
        } as ContextSource));
        
        setSources(fetchedSources);
      } catch (error) {
        console.error("Error fetching context data:", error);
        toast.error("Failed to load context sources");
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [projectId]);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      setSelectedFiles(Array.from(e.target.files));
    }
  };

  const handleAddChatContent = async () => {
    if (!chatTitle.trim() || !chatContent.trim()) {
      toast.error("Please provide both a title and content");
      return;
    }

    setSaving(true);
    try {
      // Generate AI summary
      toast.info("Generating summary...");
      const summaryResponse = await fetch("/api/context/summarize", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ content: chatContent, title: chatTitle })
      });

      let summary = "";
      if (summaryResponse.ok) {
        const data = await summaryResponse.json();
        summary = data.summary;
      } else {
        console.error("Failed to generate summary");
        summary = `${chatContent.substring(0, 100)}...`;
      }

      // Also create a knowledge_item so it's included in extraction and checklist
      const user = auth.currentUser;
      if (!user) {
        toast.error("Please sign in");
        return;
      }
      
      const token = await user.getIdToken();
      const importResponse = await fetch(`/api/projects/${projectId}/knowledge/import-ai-chat`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Authorization": `Bearer ${token}`,
        },
        body: JSON.stringify({
          title: chatTitle,
          transcript: chatContent,  // API expects 'transcript' not 'content'
          provider: 'other',
        }),
      });

      if (!importResponse.ok) {
        throw new Error("Failed to save content as knowledge item");
      }

      const contextRef = collection(db, "projects", projectId, "contextSources");
      const newSource = {
        type: "chat",
        name: chatTitle,
        content: chatContent,
        summary: summary,
        connectedAt: new Date(),
        metadata: {
          length: chatContent.length,
          addedManually: true
        }
      };

      const docRef = await addDoc(contextRef, newSource);
      
      setSources([...sources, { 
        id: docRef.id, 
        ...newSource,
        connectedAt: new Date()
      } as ContextSource]);
      
      toast.success("Chat content added successfully");
      setIsAddModalOpen(false);
      setChatTitle("");
      setChatContent("");
    } catch (error) {
      console.error("Error adding chat content:", error);
      toast.error("Failed to add chat content");
    } finally {
      setSaving(false);
    }
  };

  const handleUploadDocuments = async () => {
    if (selectedFiles.length === 0) {
      toast.error("Please select at least one file");
      return;
    }

    setIsProcessing(true);
    try {
      const user = auth.currentUser;
      if (!user) {
        toast.error("Please sign in to upload documents");
        return;
      }

      const token = await user.getIdToken();
      
      for (const file of selectedFiles) {
        toast.info(`Uploading ${file.name}...`);
        
        // Create FormData to send file as multipart/form-data
        const formData = new FormData();
        formData.append('file', file);
        formData.append('projectId', projectId);
        
        // Upload to endpoint that handles file storage + chunking
        const response = await fetch(`/api/projects/${projectId}/knowledge/upload-document`, {
          method: "POST",
          headers: {
            Authorization: `Bearer ${token}`,
          },
          body: formData,
        });

        if (!response.ok) {
          throw new Error(`Failed to upload ${file.name}`);
        }

        const result = await response.json();
        toast.success(`${file.name} uploaded: ${result.chunkCount} chunks created`);
      }

      // Reload sources
      const contextRef = collection(db, "projects", projectId, "contextSources");
      const contextSnap = await getDocs(contextRef);
      
      const fetchedSources: ContextSource[] = contextSnap.docs.map(doc => ({
        id: doc.id,
        ...doc.data(),
        connectedAt: doc.data().connectedAt?.toDate() || new Date()
      } as ContextSource));
      
      setSources(fetchedSources);
      
      setIsAddModalOpen(false);
      setSelectedFiles([]);
      toast.success("All documents uploaded successfully");
    } catch (error) {
      console.error("Error uploading documents:", error);
      toast.error(error instanceof Error ? error.message : "Failed to upload documents");
    } finally {
      setIsProcessing(false);
    }
  };

  const handleDeleteSource = async (sourceId: string) => {
    try {
      const sourceRef = doc(db, "projects", projectId, "contextSources", sourceId);
      await deleteDoc(sourceRef);
      
      setSources(sources.filter(s => s.id !== sourceId));
      toast.success("Context source removed");
    } catch (error) {
      console.error("Error deleting source:", error);
      toast.error("Failed to remove source");
    }
  };

  const getSourceIcon = (type: string) => {
    switch (type) {
      case "github":
        return <Github className="h-5 w-5" />;
      case "extension":
        return <CursorIcon className="h-5 w-5" />;
      case "chat":
        return <FileText className="h-5 w-5" />;
      case "file":
        return <FileText className="h-5 w-5" />;
      case "document":
        return <FileText className="h-5 w-5" />;
      default:
        return <FolderOpen className="h-5 w-5" />;
    }
  };

  const getSourceLabel = (source: ContextSource) => {
    switch (source.type) {
      case "github":
        return `Connected GitHub: ${source.name}`;
      case "extension":
        return "Installed Vibn Extension";
      case "chat":
        return source.name;
      case "file":
        return source.name;
      default:
        return source.name;
    }
  };

  if (loading) {
    return (
      <div className="flex h-full items-center justify-center">
        <div className="text-sm text-muted-foreground">Loading context sources...</div>
      </div>
    );
  }

  // Build sources list with auto-detected connections
  // Note: GitHub is now shown in its own section via GitHubRepoPicker component
  const allSources: ContextSource[] = [...sources];

  // Check if extension is installed (placeholder for now)
  const extensionInstalled = true; // TODO: Detect extension
  if (extensionInstalled && !sources.find(s => s.type === "extension")) {
    allSources.unshift({
      id: "extension-auto",
      type: "extension",
      name: "Cursor Extension",
      connectedAt: new Date()
    });
  }

  return (
    <div className="flex h-full flex-col overflow-hidden">
      {/* Header */}
      <div className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="flex h-14 items-center gap-2 px-6">
          <FolderOpen className="h-5 w-5 text-muted-foreground" />
          <h1 className="text-lg font-semibold">Context Sources</h1>
          <div className="ml-auto">
            <Dialog open={isAddModalOpen} onOpenChange={setIsAddModalOpen}>
              <DialogTrigger asChild>
                <Button size="sm">
                  <Plus className="h-4 w-4 mr-2" />
                  Add Context
                </Button>
              </DialogTrigger>
              <DialogContent className="max-w-2xl">
                <DialogHeader>
                  <DialogTitle>Add Context</DialogTitle>
                  <DialogDescription>
                    Upload documents or paste text to give the AI more context about your project.
                  </DialogDescription>
                </DialogHeader>
                <div className="space-y-4 py-4">
                  {/* Mode Selector */}
                  <div className="flex gap-2 p-1 bg-muted rounded-lg">
                    <Button
                      variant={uploadMode === "file" ? "secondary" : "ghost"}
                      size="sm"
                      className="flex-1"
                      onClick={() => setUploadMode("file")}
                    >
                      <Upload className="h-4 w-4 mr-2" />
                      Upload Files
                    </Button>
                    <Button
                      variant={uploadMode === "text" ? "secondary" : "ghost"}
                      size="sm"
                      className="flex-1"
                      onClick={() => setUploadMode("text")}
                    >
                      <FileText className="h-4 w-4 mr-2" />
                      Paste Text
                    </Button>
                  </div>

                  {uploadMode === "file" ? (
                    /* File Upload Mode */
                    <div className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor="file-upload">Select Documents</Label>
                        <Input
                          id="file-upload"
                          type="file"
                          multiple
                          accept=".txt,.md,.pdf,.doc,.docx,.json,.csv,.xml"
                          onChange={handleFileChange}
                        />
                        {selectedFiles.length > 0 && (
                          <div className="text-sm text-muted-foreground mt-2">
                            Selected: {selectedFiles.map(f => f.name).join(", ")}
                          </div>
                        )}
                      </div>
                      <p className="text-sm text-muted-foreground">
                        Documents will be stored for the Extractor AI to review and process.
                        Supported formats: TXT, MD, PDF, DOC, JSON, CSV, XML
                      </p>
                    </div>
                  ) : (
                    /* Text Paste Mode */
                    <>
                      <div className="space-y-2">
                        <Label htmlFor="title">Title</Label>
                        <Input
                          id="title"
                          placeholder="e.g., Planning discussion with Sarah"
                          value={chatTitle}
                          onChange={(e) => setChatTitle(e.target.value)}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="content">Content</Label>
                        <Textarea
                          id="content"
                          placeholder="Paste your chat conversation or notes here..."
                          value={chatContent}
                          onChange={(e) => setChatContent(e.target.value)}
                          className="min-h-[300px] font-mono text-sm"
                        />
                      </div>
                    </>
                  )}
                </div>
                <div className="flex justify-end gap-2">
                  <Button variant="outline" onClick={() => setIsAddModalOpen(false)}>
                    Cancel
                  </Button>
                  {uploadMode === "file" ? (
                    <Button onClick={handleUploadDocuments} disabled={isProcessing || selectedFiles.length === 0}>
                      {isProcessing ? "Processing..." : `Upload ${selectedFiles.length} File${selectedFiles.length !== 1 ? 's' : ''}`}
                    </Button>
                  ) : (
                    <Button onClick={handleAddChatContent} disabled={saving}>
                      {saving ? "Saving..." : "Add Context"}
                    </Button>
                  )}
                </div>
              </DialogContent>
            </Dialog>
          </div>
        </div>
      </div>

      {/* Content */}
      <div className="flex-1 overflow-auto p-6">
        <div className="mx-auto max-w-4xl space-y-4">
          {/* GitHub Repository Connection */}
          <div className="mb-6">
            <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3">
              GitHub Repository
            </h2>
            {project?.githubRepo ? (
              // Show connected repo
              <Card className="p-4">
                <div className="flex items-start gap-4">
                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted shrink-0">
                    <Github className="h-5 w-5" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-1">
                      <h3 className="font-semibold text-sm">Connected: {project.githubRepo}</h3>
                      <CheckCircle2 className="h-4 w-4 text-green-600" />
                    </div>
                    <p className="text-xs text-muted-foreground mb-2">
                      Repository connected and ready for AI access
                    </p>
                    {project.githubRepoUrl && (
                      <a 
                        href={project.githubRepoUrl} 
                        target="_blank" 
                        rel="noopener noreferrer"
                        className="text-xs text-blue-600 hover:underline inline-block"
                      >
                        View on GitHub →
                      </a>
                    )}
                  </div>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setIsGithubDialogOpen(true)}
                  >
                    Change
                  </Button>
                </div>
              </Card>
            ) : (
              // Show connect button
              <Card className="p-4">
                <div className="flex items-start gap-4">
                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted shrink-0">
                    <Github className="h-5 w-5" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <h3 className="font-semibold text-sm mb-1">Connect GitHub Repository</h3>
                    <p className="text-xs text-muted-foreground">
                      Give the AI access to your codebase for better context
                    </p>
                  </div>
                  <Button
                    onClick={() => setIsGithubDialogOpen(true)}
                    size="sm"
                  >
                    <Github className="h-4 w-4 mr-2" />
                    Connect
                  </Button>
                </div>
              </Card>
            )}

            {/* GitHub Connection Dialog */}
            <Dialog open={isGithubDialogOpen} onOpenChange={setIsGithubDialogOpen}>
              <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
                <DialogHeader>
                  <DialogTitle>Connect GitHub Repository</DialogTitle>
                  <DialogDescription>
                    Connect a GitHub repository to give the AI access to your codebase
                  </DialogDescription>
                </DialogHeader>
                <div className="overflow-y-auto">
                  <GitHubRepoPicker 
                    projectId={projectId} 
                    onRepoSelected={(repo) => {
                      toast.success(`Repository ${repo.full_name} connected!`);
                      setIsGithubDialogOpen(false);
                      // Reload project data to show the connected repo
                      const fetchProject = async () => {
                        const projectRef = doc(db, "projects", projectId);
                        const projectSnap = await getDoc(projectRef);
                        if (projectSnap.exists()) {
                          setProject(projectSnap.data() as Project);
                        }
                      };
                      fetchProject();
                    }}
                  />
                </div>
              </DialogContent>
            </Dialog>
          </div>

          {/* Other Context Sources */}
          <div>
            <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3">
              Additional Context
            </h2>
          </div>

          {allSources.length === 0 ? (
            <Card className="p-8 text-center">
              <FolderOpen className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
              <h3 className="text-lg font-semibold mb-2">No Context Sources Yet</h3>
              <p className="text-sm text-muted-foreground mb-4">
                Add context sources to help the AI understand your project better
              </p>
              <Button onClick={() => setIsAddModalOpen(true)}>
                <Plus className="h-4 w-4 mr-2" />
                Add Your First Context
              </Button>
            </Card>
          ) : (
            <div className="space-y-3">
              {allSources.map((source) => (
                <Card key={source.id} className="p-4">
                  <div className="flex items-start gap-4">
                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
                      {getSourceIcon(source.type)}
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-1">
                        <h3 className="font-semibold text-sm">{getSourceLabel(source)}</h3>
                        <CheckCircle2 className="h-4 w-4 text-green-600" />
                      </div>
                      <p className="text-xs text-muted-foreground">
                        Connected {source.connectedAt.toLocaleDateString()}
                      </p>
                      {source.summary && (
                        <p className="text-sm text-foreground/80 mt-2 leading-relaxed">
                          {source.summary}
                        </p>
                      )}
                      {source.url && (
                        <a 
                          href={source.url} 
                          target="_blank" 
                          rel="noopener noreferrer"
                          className="text-xs text-blue-600 hover:underline mt-1 inline-block"
                        >
                          {source.type === 'github' ? 'View on GitHub →' : 
                           source.type === 'document' ? 'Download File →' : 
                           'View Source →'}
                        </a>
                      )}
                    </div>
                    {!source.id.includes("auto") && (
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => handleDeleteSource(source.id)}
                      >
                        <Trash2 className="h-4 w-4 text-muted-foreground" />
                      </Button>
                    )}
                  </div>
                </Card>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}