/**
 * Индикатор персон на Timeline клипе
 * Показывает маленькие аватары персон, обнаруженных в клипе
 */

import { User, Users } from "lucide-react"
import { useState } from "react"

import { Badge } from "@/components/ui/badge"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"

import type { PersonProfile } from "../../../person-identification/types/person"
import type { TimelinePersonAppearance } from "../../hooks/use-timeline-persons"

interface PersonIndicatorProps {
  persons: PersonProfile[]
  appearances?: TimelinePersonAppearance[]
  clipId: string
  compact?: boolean
  maxVisible?: number
  onClick?: (personId: string) => void
}

export function PersonIndicator({
  persons,
  appearances = [],
  clipId,
  compact = false,
  maxVisible = 3,
  onClick,
}: PersonIndicatorProps) {
  const [showTooltip, setShowTooltip] = useState(false)

  // Фильтруем персон, которые появляются в этом клипе
  const clipAppearances = appearances.filter((app) => app.clipId === clipId)
  const personsInClip = persons.filter((person) => clipAppearances.some((app) => app.personId === person.id))

  if (personsInClip.length === 0) {
    return null
  }

  const visiblePersons = personsInClip.slice(0, maxVisible)
  const hiddenCount = Math.max(0, personsInClip.length - maxVisible)

  if (compact) {
    return (
      <Tooltip>
        <TooltipTrigger asChild>
          <Badge
            variant="secondary"
            className="h-5 px-1 text-xs cursor-pointer"
            onClick={(e) => {
              e.stopPropagation()
              if (personsInClip.length === 1) {
                onClick?.(personsInClip[0].id)
              }
            }}
          >
            {personsInClip.length === 1 ? (
              <User className="h-3 w-3" />
            ) : (
              <>
                <Users className="h-3 w-3" />
                <span className="ml-1">{personsInClip.length}</span>
              </>
            )}
          </Badge>
        </TooltipTrigger>
        <TooltipContent side="top" className="max-w-48">
          <div className="space-y-1">
            {personsInClip.map((person) => (
              <div key={person.id} className="text-xs">
                {person.name || "Безымянная персона"}
              </div>
            ))}
          </div>
        </TooltipContent>
      </Tooltip>
    )
  }

  return (
    <div className="flex items-center space-x-1">
      {visiblePersons.map((person, index) => {
        const appearance = clipAppearances.find((app) => app.personId === person.id)
        const confidence = appearance ? Math.round(appearance.confidence * 100) : 0

        return (
          <Tooltip key={person.id}>
            <TooltipTrigger asChild>
              <div
                className="relative cursor-pointer"
                onClick={(e) => {
                  e.stopPropagation()
                  onClick?.(person.id)
                }}
                style={{ zIndex: visiblePersons.length - index }}
              >
                <div className="h-6 w-6 rounded-full bg-muted border border-background flex items-center justify-center overflow-hidden">
                  {person.thumbnails && person.thumbnails.length > 0 ? (
                    <img
                      src={person.thumbnails[0].imageUrl}
                      alt={person.name || "Person"}
                      className="h-6 w-6 object-cover"
                    />
                  ) : (
                    <User className="h-3 w-3 text-muted-foreground" />
                  )}
                </div>

                {/* Индикатор уверенности */}
                {confidence > 0 && (
                  <div
                    className={`
                      absolute -bottom-1 -right-1 h-2 w-2 rounded-full border border-background
                      ${confidence >= 80 ? "bg-green-500" : confidence >= 60 ? "bg-yellow-500" : "bg-red-500"}
                    `}
                  />
                )}
              </div>
            </TooltipTrigger>
            <TooltipContent side="top">
              <div className="text-xs">
                <div className="font-medium">{person.name || "Безымянная персона"}</div>
                {confidence > 0 && <div className="text-muted-foreground">Уверенность: {confidence}%</div>}
                {appearance && (
                  <div className="text-muted-foreground">
                    {Math.round(appearance.startTime)}с - {Math.round(appearance.endTime)}с
                  </div>
                )}
              </div>
            </TooltipContent>
          </Tooltip>
        )
      })}

      {hiddenCount > 0 && (
        <Tooltip>
          <TooltipTrigger asChild>
            <Badge variant="outline" className="h-6 w-6 p-0 text-xs rounded-full">
              +{hiddenCount}
            </Badge>
          </TooltipTrigger>
          <TooltipContent side="top">
            <div className="space-y-1">
              {personsInClip.slice(maxVisible).map((person) => (
                <div key={person.id} className="text-xs">
                  {person.name || "Безымянная персона"}
                </div>
              ))}
            </div>
          </TooltipContent>
        </Tooltip>
      )}
    </div>
  )
}