'use client'

import Link from 'next/link'
import { useState, useEffect } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { ArrowRight, Link2, RefreshCw, ExternalLink, Users, ChevronDown, ChevronRight, History, Clock } from 'lucide-react'
import { getNavigationHistory, NavigationEntry } from '@/lib/navigation-history'

interface BacklinkInfo {
  id: string
  sourceNoteId: string
  targetNoteId: string
  sourceNote: {
    id: string
    title: string
    type: string
  }
}

interface RelatedNote {
  id: string
  title: string
  type: string
  tags: string[]
  score: number
  reason: string
}

interface NoteConnectionsProps {
  noteId: string
  backlinks: BacklinkInfo[]
  outgoingLinks: BacklinkInfo[]
  relatedNotes: RelatedNote[]
  coUsedNotes: { noteId: string; title: string; type: string; weight: number }[]
}

function ConnectionGroup({
  title,
  icon: Icon,
  notes,
  emptyMessage,
  isCollapsed,
  onToggle,
}: {
  title: string
  icon: React.ComponentType<{ className?: string }>
  notes: { id: string; title: string; type: string }[]
  emptyMessage: string
  isCollapsed?: boolean
  onToggle?: () => void
}) {
  if (notes.length === 0 && isCollapsed) {
    return null
  }

  if (notes.length === 0) {
    return (
      <div className="space-y-2">
        <h4 className="text-sm font-medium flex items-center gap-2 text-muted-foreground">
          <Icon className="h-4 w-4" />
          {title}
        </h4>
        <p className="text-xs text-muted-foreground pl-6">{emptyMessage}</p>
      </div>
    )
  }

  return (
    <div className="space-y-2">
      <h4 className="text-sm font-medium flex items-center gap-2">
        <button
          onClick={onToggle}
          className="flex items-center gap-2 hover:text-primary transition-colors"
        >
          {isCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
          <Icon className="h-4 w-4" />
          {title}
        </button>
        <Badge variant="secondary" className="ml-auto text-xs">
          {notes.length}
        </Badge>
      </h4>
      {!isCollapsed && (
        <div className="pl-6 space-y-1">
          {notes.map((note) => (
            <Link
              key={note.id}
              href={`/notes/${note.id}`}
              className="block text-sm text-foreground hover:text-primary transition-colors"
            >
              {note.title}
            </Link>
          ))}
        </div>
      )}
    </div>
  )
}

export function NoteConnections({
  noteId,
  backlinks,
  outgoingLinks,
  relatedNotes,
  coUsedNotes,
}: NoteConnectionsProps) {
  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({})
  const [recentVersions, setRecentVersions] = useState<{ id: string; version: number; createdAt: string }[]>([])
  const [navigationHistory, setNavigationHistory] = useState<NavigationEntry[]>([])

  useEffect(() => {
    fetch(`/api/notes/${noteId}/versions`)
      .then((r) => r.json())
      .then((d) => setRecentVersions(d.data?.slice(0, 3) || []))
      .catch(() => setRecentVersions([]))
  }, [noteId])

  useEffect(() => {
    setNavigationHistory(getNavigationHistory())
  }, [noteId])

  const hasAnyConnections =
    backlinks.length > 0 || outgoingLinks.length > 0 || relatedNotes.length > 0 || coUsedNotes.length > 0

  const toggleCollapsed = (key: string) => {
    setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }))
  }

  if (!hasAnyConnections && recentVersions.length === 0) {
    return null
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-lg flex items-center gap-2">
          <Link2 className="h-5 w-5" />
          Conectado con
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* Backlinks - notes that link TO this note */}
        <ConnectionGroup
          title="Enlaces entrantes"
          icon={ExternalLink}
          notes={backlinks.map((bl) => ({
            id: bl.sourceNote.id,
            title: bl.sourceNote.title,
            type: bl.sourceNote.type,
          }))}
          emptyMessage="Ningún otro documento enlaza a esta nota"
          isCollapsed={collapsed['backlinks']}
          onToggle={() => toggleCollapsed('backlinks')}
        />

        {/* Outgoing links - notes this note links TO */}
        <ConnectionGroup
          title="Enlaces salientes"
          icon={ArrowRight}
          notes={outgoingLinks.map((ol) => ({
            id: ol.sourceNote.id,
            title: ol.sourceNote.title,
            type: ol.sourceNote.type,
          }))}
          emptyMessage="Esta nota no enlaza a ningún otro documento"
          isCollapsed={collapsed['outgoing']}
          onToggle={() => toggleCollapsed('outgoing')}
        />

        {/* Related notes - by content similarity and scoring */}
        <ConnectionGroup
          title="Relacionadas"
          icon={RefreshCw}
          notes={relatedNotes.map((rn) => ({
            id: rn.id,
            title: rn.title,
            type: rn.type,
          }))}
          emptyMessage="No hay notas relacionadas"
          isCollapsed={collapsed['related']}
          onToggle={() => toggleCollapsed('related')}
        />

        {/* Co-used notes - often viewed together */}
        <ConnectionGroup
          title="Co-usadas"
          icon={Users}
          notes={coUsedNotes.map((cu) => ({
            id: cu.noteId,
            title: cu.title,
            type: cu.type,
          }))}
          emptyMessage="No hay notas co-usadas"
          isCollapsed={collapsed['coused']}
          onToggle={() => toggleCollapsed('coused')}
        />

        {/* Recent versions */}
        {recentVersions.length > 0 && (
          <div className="space-y-2 pt-2 border-t">
            <h4 className="text-sm font-medium flex items-center gap-2">
              <History className="h-4 w-4" />
              Versiones recientes
            </h4>
            <div className="pl-6 space-y-1">
              {recentVersions.map((v) => (
                <p key={v.id} className="text-xs text-muted-foreground">
                  v{v.version} - {new Date(v.createdAt).toLocaleDateString()}
                </p>
              ))}
            </div>
          </div>
        )}

        {/* Navigation history */}
        {navigationHistory.length > 0 && (
          <ConnectionGroup
            title="Vista recientemente"
            icon={Clock}
            notes={navigationHistory.slice(0, 5).map((entry) => ({
              id: entry.noteId,
              title: entry.title,
              type: entry.type,
            }))}
            emptyMessage="No hay historial de navegación"
            isCollapsed={collapsed['history']}
            onToggle={() => toggleCollapsed('history')}
          />
        )}
      </CardContent>
    </Card>
  )
}