Keep/keep-notes/components/connections-overlay.tsx

'use client'

import { useState, useEffect } from 'react'
import { Dialog, DialogContent } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Sparkles, X, Search, ArrowRight, Eye } from 'lucide-react'
import { cn } from '@/lib/utils'
import { useLanguage } from '@/lib/i18n/LanguageProvider'

interface ConnectionData {
  noteId: string
  title: string | null
  content: string
  createdAt: Date
  similarity: number
  daysApart: number
}

interface ConnectionsResponse {
  connections: ConnectionData[]
  pagination: {
    total: number
    page: number
    limit: number
    totalPages: number
    hasNext: boolean
    hasPrev: boolean
  }
}

interface ConnectionsOverlayProps {
  isOpen: boolean
  onClose: () => void
  noteId: string
  onOpenNote?: (noteId: string) => void
  onCompareNotes?: (noteIds: string[]) => void
}

export function ConnectionsOverlay({
  isOpen,
  onClose,
  noteId,
  onOpenNote,
  onCompareNotes
}: ConnectionsOverlayProps) {
  const { t } = useLanguage()
  const [connections, setConnections] = useState<ConnectionData[]>([])
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  // Filters and sorting
  const [searchQuery, setSearchQuery] = useState('')
  const [sortBy, setSortBy] = useState<'similarity' | 'recent' | 'oldest'>('similarity')
  const [currentPage, setCurrentPage] = useState(1)

  // Pagination
  const [pagination, setPagination] = useState({
    total: 0,
    page: 1,
    limit: 10,
    totalPages: 0,
    hasNext: false,
    hasPrev: false
  })

  // Fetch connections when overlay opens
  useEffect(() => {
    if (isOpen && noteId) {
      fetchConnections(1)
    }
  }, [isOpen, noteId])

  const fetchConnections = async (page: number = 1) => {
    setIsLoading(true)
    setError(null)

    try {
      const res = await fetch(`/api/ai/echo/connections?noteId=${noteId}&page=${page}&limit=10`)
      if (!res.ok) {
        throw new Error('Failed to fetch connections')
      }

      const data: ConnectionsResponse = await res.json()
      setConnections(data.connections)
      setPagination(data.pagination)
      setCurrentPage(data.pagination.page)
    } catch (err) {
      console.error('[ConnectionsOverlay] Failed to fetch:', err)
      setError(t('memoryEcho.overlay.error'))
    } finally {
      setIsLoading(false)
    }
  }

  // Filter and sort connections
  const filteredConnections = connections
    .filter(conn => {
      if (!searchQuery) return true
      const query = searchQuery.toLowerCase()
      const title = conn.title?.toLowerCase() || ''
      const content = conn.content.toLowerCase()
      return title.includes(query) || content.includes(query)
    })
    .sort((a, b) => {
      switch (sortBy) {
        case 'similarity':
          return b.similarity - a.similarity
        case 'recent':
          return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
        case 'oldest':
          return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
        default:
          return 0
      }
    })

  const handlePrevPage = () => {
    if (pagination.hasPrev) {
      fetchConnections(currentPage - 1)
    }
  }

  const handleNextPage = () => {
    if (pagination.hasNext) {
      fetchConnections(currentPage + 1)
    }
  }

  const handleOpenNote = (connNoteId: string) => {
    onOpenNote?.(connNoteId)
    onClose()
  }

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent
        className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col p-0"
        showCloseButton={false}
      >
        {/* Header */}
        <div className="flex items-center justify-between p-6 border-b dark:border-zinc-700">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-amber-100 dark:bg-amber-900/30 rounded-full">
              <Sparkles className="h-5 w-5 text-amber-600 dark:text-amber-400" />
            </div>
            <div>
              <h2 className="text-xl font-semibold">
                {t('memoryEcho.editorSection.title', { count: pagination.total })}
              </h2>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                {t('memoryEcho.description')}
              </p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
          >
            <X className="h-6 w-6" />
          </button>
        </div>

        {/* Filters and Search - Show if 7+ connections */}
        {pagination.total >= 7 && (
          <div className="px-6 py-3 border-b dark:border-zinc-700 bg-gray-50 dark:bg-zinc-800/50">
            <div className="flex items-center gap-3">
              {/* Search */}
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  placeholder={t('memoryEcho.overlay.searchPlaceholder')}
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-9"
                />
              </div>

              {/* Sort dropdown */}
              <select
                value={sortBy}
                onChange={(e) => setSortBy(e.target.value as any)}
                className="px-3 py-2 rounded-md border border-gray-300 dark:border-zinc-600 bg-white dark:bg-zinc-900 text-sm"
              >
                <option value="similarity">{t('memoryEcho.overlay.sortSimilarity')}</option>
                <option value="recent">{t('memoryEcho.overlay.sortRecent')}</option>
                <option value="oldest">{t('memoryEcho.overlay.sortOldest')}</option>
              </select>
            </div>
          </div>
        )}

        {/* Content */}
        <div className="flex-1 overflow-y-auto">
          {isLoading ? (
            <div className="flex items-center justify-center py-12">
              <div className="text-gray-500">{t('memoryEcho.overlay.loading')}</div>
            </div>
          ) : error ? (
            <div className="flex items-center justify-center py-12">
              <div className="text-red-500">{error}</div>
            </div>
          ) : filteredConnections.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-12 text-gray-500">
              <Search className="h-12 w-12 mb-4 opacity-50" />
              <p>{t('memoryEcho.overlay.noConnections')}</p>
            </div>
          ) : (
            <div className="p-4 space-y-2">
              {filteredConnections.map((conn) => {
                const similarityPercentage = Math.round(conn.similarity * 100)
                const title = conn.title || t('memoryEcho.comparison.untitled')

                return (
                  <div
                    key={conn.noteId}
                    className="border dark:border-zinc-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-zinc-800/50 transition-all hover:border-l-4 hover:border-l-amber-500 cursor-pointer"
                  >
                    <div className="flex items-start justify-between mb-2">
                      <h3 className="font-semibold text-base text-gray-900 dark:text-gray-100 flex-1">
                        {title}
                      </h3>
                      <div className="ml-2 flex items-center gap-2">
                        <span className="text-xs font-medium px-2 py-1 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400">
                          {similarityPercentage}%
                        </span>
                      </div>
                    </div>

                    <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-3">
                      {conn.content}
                    </p>

                    <div className="flex items-center gap-2">
                      <Button
                        size="sm"
                        variant="ghost"
                        onClick={() => handleOpenNote(conn.noteId)}
                        className="flex-1 justify-start"
                      >
                        <Eye className="h-4 w-4 mr-2" />
                        {t('memoryEcho.editorSection.view')}
                      </Button>

                      {onCompareNotes && (
                        <Button
                          size="sm"
                          variant="ghost"
                          onClick={() => {
                            onCompareNotes([noteId, conn.noteId])
                            onClose()
                          }}
                          className="flex-1"
                        >
                          <ArrowRight className="h-4 w-4 mr-2" />
                          {t('memoryEcho.editorSection.compare')}
                        </Button>
                      )}
                    </div>
                  </div>
                )
              })}
            </div>
          )}
        </div>

        {/* Footer - Pagination */}
        {pagination.totalPages > 1 && (
          <div className="px-6 py-4 border-t dark:border-zinc-700 bg-gray-50 dark:bg-zinc-800/50">
            <div className="flex items-center justify-center gap-2">
              <Button
                size="sm"
                variant="outline"
                onClick={handlePrevPage}
                disabled={!pagination.hasPrev}
              >
                ←
              </Button>

              <span className="text-sm text-gray-600 dark:text-gray-400">
                {t('pagination.pageInfo', { current: currentPage, total: pagination.totalPages })}
              </span>

              <Button
                size="sm"
                variant="outline"
                onClick={handleNextPage}
                disabled={!pagination.hasNext}
              >
                →
              </Button>
            </div>
          </div>
        )}

        {/* Footer - Action */}
        <div className="px-6 py-4 border-t dark:border-zinc-700">
          <Button
            className="w-full bg-amber-600 hover:bg-amber-700 text-white"
            onClick={() => {
              if (onCompareNotes && connections.length > 0) {
                const noteIds = connections.slice(0, Math.min(3, connections.length)).map(c => c.noteId)
                onCompareNotes([noteId, ...noteIds])
              }
              onClose()
            }}
            disabled={connections.length === 0}
          >
            {t('memoryEcho.overlay.viewAll')}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}