"use client"

import { useState, useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent } from "@/components/ui/card"

import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { ChevronDown, Filter, Search, X, Loader2, Plus, Save } from "lucide-react"
import { cn } from "@/lib/utils"

interface KnowledgeFilter {
  id: string
  name: string
  description: string
  query_data: string
  owner: string
  created_at: string
  updated_at: string
}

interface ParsedQueryData {
  query: string
  filters: {
    data_sources: string[]
    document_types: string[]
    owners: string[]
  }
  limit: number
  scoreThreshold: number
}

interface KnowledgeFilterDropdownProps {
  selectedFilter: KnowledgeFilter | null
  onFilterSelect: (filter: KnowledgeFilter | null) => void
}

export function KnowledgeFilterDropdown({ selectedFilter, onFilterSelect }: KnowledgeFilterDropdownProps) {
  const [isOpen, setIsOpen] = useState(false)
  const [filters, setFilters] = useState<KnowledgeFilter[]>([])
  const [loading, setLoading] = useState(false)
  const [searchQuery, setSearchQuery] = useState("")
  const [showCreateModal, setShowCreateModal] = useState(false)
  const [createName, setCreateName] = useState("")
  const [createDescription, setCreateDescription] = useState("")
  const [creating, setCreating] = useState(false)
  const dropdownRef = useRef<HTMLDivElement>(null)

  const loadFilters = async (query = "") => {
    setLoading(true)
    try {
      const response = await fetch("/api/knowledge-filter/search", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          query,
          limit: 20 // Limit for dropdown
        }),
      })

      const result = await response.json()
      if (response.ok && result.success) {
        setFilters(result.filters)
      } else {
        console.error("Failed to load knowledge filters:", result.error)
        setFilters([])
      }
    } catch (error) {
      console.error("Error loading knowledge filters:", error)
      setFilters([])
    } finally {
      setLoading(false)
    }
  }

  const deleteFilter = async (filterId: string, e: React.MouseEvent) => {
    e.stopPropagation()
    
    try {
      const response = await fetch(`/api/knowledge-filter/${filterId}`, {
        method: "DELETE",
      })

      if (response.ok) {
        // Remove from local state
        setFilters(prev => prev.filter(f => f.id !== filterId))
        
        // If this was the selected filter, clear selection
        if (selectedFilter?.id === filterId) {
          onFilterSelect(null)
        }
      } else {
        console.error("Failed to delete knowledge filter")
      }
    } catch (error) {
      console.error("Error deleting knowledge filter:", error)
    }
  }

  const handleFilterSelect = (filter: KnowledgeFilter) => {
    onFilterSelect(filter)
    setIsOpen(false)
  }

  const handleClearFilter = () => {
    onFilterSelect(null)
    setIsOpen(false)
  }

  const handleCreateNew = () => {
    setIsOpen(false)
    setShowCreateModal(true)
  }

  const handleCreateFilter = async () => {
    if (!createName.trim()) return

    setCreating(true)
    try {
      // Create a basic filter with wildcards (match everything by default)
      const defaultFilterData = {
        query: "",
        filters: {
          data_sources: ["*"],
          document_types: ["*"],
          owners: ["*"]
        },
        limit: 10,
        scoreThreshold: 0
      }

      const response = await fetch("/api/knowledge-filter", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name: createName.trim(),
          description: createDescription.trim(),
          queryData: JSON.stringify(defaultFilterData)
        }),
      })

      const result = await response.json()
      if (response.ok && result.success) {
        // Create the new filter object
        const newFilter: KnowledgeFilter = {
          id: result.filter.id,
          name: createName.trim(),
          description: createDescription.trim(),
          query_data: JSON.stringify(defaultFilterData),
          owner: result.filter.owner,
          created_at: result.filter.created_at,
          updated_at: result.filter.updated_at
        }

        // Add to local filters list
        setFilters(prev => [newFilter, ...prev])
        
        // Select the new filter
        onFilterSelect(newFilter)
        
        // Close modal and reset form
        setShowCreateModal(false)
        setCreateName("")
        setCreateDescription("")
      } else {
        console.error("Failed to create knowledge filter:", result.error)
      }
    } catch (error) {
      console.error("Error creating knowledge filter:", error)
    } finally {
      setCreating(false)
    }
  }

  const handleCancelCreate = () => {
    setShowCreateModal(false)
    setCreateName("")
    setCreateDescription("")
  }

  const getFilterSummary = (filter: KnowledgeFilter): string => {
    try {
      const parsed = JSON.parse(filter.query_data) as ParsedQueryData
      const parts = []
      
      if (parsed.query) parts.push(`"${parsed.query}"`)
      if (parsed.filters.data_sources.length > 0) parts.push(`${parsed.filters.data_sources.length} sources`)
      if (parsed.filters.document_types.length > 0) parts.push(`${parsed.filters.document_types.length} types`)
      if (parsed.filters.owners.length > 0) parts.push(`${parsed.filters.owners.length} owners`)
      
      return parts.join(" • ") || "No filters"
    } catch {
      return "Invalid filter"
    }
  }

  useEffect(() => {
    if (isOpen) {
      loadFilters()
    }
  }, [isOpen])

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      if (isOpen) {
        loadFilters(searchQuery)
      }
    }, 300)

    return () => clearTimeout(timeoutId)
  }, [searchQuery, isOpen])

  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsOpen(false)
      }
    }

    document.addEventListener("mousedown", handleClickOutside)
    return () => document.removeEventListener("mousedown", handleClickOutside)
  }, [])

  return (
    <div className="relative" ref={dropdownRef}>
      <Button
        variant={selectedFilter ? "default" : "outline"}
        size="sm"
        onClick={() => setIsOpen(!isOpen)}
        className={cn(
          "flex items-center gap-2 h-8 px-3",
          selectedFilter 
            ? "hover:bg-primary hover:text-primary-foreground" 
            : "hover:bg-transparent hover:text-foreground hover:border-border"
        )}
      >
        <Filter className="h-3 w-3" />
        {selectedFilter ? (
          <span className="max-w-32 truncate">{selectedFilter.name}</span>
        ) : (
          <span>All Knowledge</span>
        )}
        <ChevronDown className={cn("h-3 w-3 transition-transform", isOpen && "rotate-180")} />
      </Button>

      {isOpen && (
        <Card className="absolute right-0 top-full mt-1 w-80 max-h-96 overflow-hidden z-50 shadow-lg border-border/50 bg-card/95 backdrop-blur-sm">
          <CardContent className="p-0">
            {/* Search Header */}
            <div className="p-3 border-b border-border/50">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-3 w-3 text-muted-foreground" />
                <Input
                  placeholder="Search filters..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-9 h-8 text-sm"
                />
              </div>
            </div>

            {/* Filter List */}
            <div className="max-h-64 overflow-y-auto">
              {/* Clear filter option */}
              <div
                onClick={handleClearFilter}
                className={cn(
                  "flex items-center gap-3 p-3 hover:bg-accent hover:text-accent-foreground cursor-pointer border-b border-border/30 transition-colors",
                  !selectedFilter && "bg-accent text-accent-foreground"
                )}
              >
                <div className="flex items-center gap-2 flex-1">
                  <Filter className="h-4 w-4 text-muted-foreground" />
                  <div>
                    <div className="text-sm font-medium">All Knowledge</div>
                    <div className="text-xs text-muted-foreground">No filters applied</div>
                  </div>
                </div>
              </div>

              {loading ? (
                <div className="flex items-center justify-center p-4">
                  <Loader2 className="h-4 w-4 animate-spin" />
                  <span className="ml-2 text-sm text-muted-foreground">Loading...</span>
                </div>
              ) : filters.length === 0 ? (
                <div className="p-4 text-center text-sm text-muted-foreground">
                  {searchQuery ? "No filters found" : "No saved filters"}
                </div>
              ) : (
                filters.map((filter) => (
                  <div
                    key={filter.id}
                    onClick={() => handleFilterSelect(filter)}
                    className={cn(
                      "flex items-center gap-3 p-3 hover:bg-accent hover:text-accent-foreground cursor-pointer group transition-colors",
                      selectedFilter?.id === filter.id && "bg-accent text-accent-foreground"
                    )}
                  >
                    <div className="flex items-center gap-2 flex-1 min-w-0">
                      <Filter className="h-4 w-4 text-muted-foreground group-hover:text-accent-foreground flex-shrink-0" />
                      <div className="min-w-0 flex-1">
                        <div className="text-sm font-medium truncate group-hover:text-accent-foreground">{filter.name}</div>
                        <div className="text-xs text-muted-foreground group-hover:text-accent-foreground/70 truncate">
                          {getFilterSummary(filter)}
                        </div>
                      </div>
                    </div>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={(e) => deleteFilter(filter.id, e)}
                      className="opacity-0 group-hover:opacity-100 h-6 w-6 p-0 bg-transparent hover:bg-gray-700 hover:text-white transition-all duration-200 border border-transparent hover:border-gray-600"
                    >
                      <X className="h-3 w-3 text-gray-400 hover:text-white" />
                    </Button>
                  </div>
                ))
              )}
            </div>

            {/* Create New Filter Option */}
            <div className="border-t border-border/50">
              <div
                onClick={handleCreateNew}
                className="flex items-center gap-3 p-3 hover:bg-accent hover:text-accent-foreground cursor-pointer transition-colors"
              >
                <Plus className="h-4 w-4 text-green-500" />
                <div>
                  <div className="text-sm font-medium text-green-600">Create New Filter</div>
                  <div className="text-xs text-muted-foreground">Save current search as filter</div>
                </div>
              </div>
            </div>

            {/* Selected Filter Details */}
            {selectedFilter && (
              <div className="border-t border-border/50 p-3 bg-muted/20">
                <div className="text-xs text-muted-foreground">
                  <strong>Selected:</strong> {selectedFilter.name}
                </div>
                {selectedFilter.description && (
                  <div className="text-xs text-muted-foreground mt-1 line-clamp-2">
                    {selectedFilter.description}
                  </div>
                )}
              </div>
            )}
          </CardContent>
        </Card>
      )}

      {/* Create Filter Modal */}
      {showCreateModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-card border border-border rounded-lg p-6 w-full max-w-md mx-4">
            <h3 className="text-lg font-semibold mb-4">Create New Knowledge Filter</h3>
            
            <div className="space-y-4">
              <div>
                <Label htmlFor="filter-name" className="font-medium">
                  Name <span className="text-red-400">*</span>
                </Label>
                <Input
                  id="filter-name"
                  type="text"
                  placeholder="Enter filter name"
                  value={createName}
                  onChange={(e) => setCreateName(e.target.value)}
                  className="mt-1"
                />
              </div>
              
              <div>
                <Label htmlFor="filter-description" className="font-medium">
                  Description (optional)
                </Label>
                <Textarea
                  id="filter-description"
                  placeholder="Brief description of this filter"
                  value={createDescription}
                  onChange={(e) => setCreateDescription(e.target.value)}
                  className="mt-1"
                  rows={3}
                />
              </div>
            </div>
            
            <div className="flex justify-end gap-2 mt-6">
              <Button
                variant="outline"
                onClick={handleCancelCreate}
                disabled={creating}
              >
                Cancel
              </Button>
              <Button
                onClick={handleCreateFilter}
                disabled={!createName.trim() || creating}
                className="flex items-center gap-2"
              >
                {creating ? (
                  <>
                    <Loader2 className="h-4 w-4 animate-spin" />
                    Creating...
                  </>
                ) : (
                  <>
                    <Save className="h-4 w-4" />
                    Create Filter
                  </>
                )}
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}