'use client'

import Link from 'next/link'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { ArrowRight, Link2, RefreshCw, ExternalLink, Users } from 'lucide-react'

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,
}: {
  title: string
  icon: React.ComponentType<{ className?: string }>
  notes: { id: string; title: string; type: string }[]
  emptyMessage: string
}) {
  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">
        <Icon className="h-4 w-4" />
        {title}
        <Badge variant="secondary" className="ml-auto text-xs">
          {notes.length}
        </Badge>
      </h4>
      <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 hasAnyConnections =
    backlinks.length > 0 || outgoingLinks.length > 0 || relatedNotes.length > 0 || coUsedNotes.length > 0

  if (!hasAnyConnections) {
    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"
        />

        {/* 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"
        />

        {/* 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"
        />

        {/* 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"
        />
      </CardContent>
    </Card>
  )
}