import { motion } from "framer-motion"
import {
  BookOpen,
  Presentation,
  GraduationCap,
  FileBadge,
  ArrowUpRight,
  type LucideIcon,
} from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Card } from "@/components/ui/card"
import type { Indicator, IndicatorType } from "@/data/project"

const typeMeta: Record<
  IndicatorType,
  { label: string; icon: LucideIcon }
> = {
  journal: { label: "Journal", icon: BookOpen },
  conference: { label: "Conference", icon: Presentation },
  msc: { label: "MSc Dissertation", icon: GraduationCap },
  phd: { label: "PhD Thesis", icon: FileBadge },
}

interface IndicatorCardProps {
  indicator: Indicator
  index: number
  onOpen: () => void
}

export function IndicatorCard({ indicator, index, onOpen }: IndicatorCardProps) {
  const meta = typeMeta[indicator.type]
  const Icon = meta.icon

  return (
    <motion.div
      initial={{ opacity: 0, y: 16 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-60px" }}
      transition={{ duration: 0.4, delay: index * 0.05, ease: "easeOut" }}
    >
      <button
        type="button"
        onClick={onOpen}
        className="group block h-full w-full text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl"
        aria-label={`Open details: ${indicator.title}`}
      >
        <Card className="flex h-full flex-col p-5 transition-all hover:-translate-y-1 hover:border-brand/40 hover:shadow-md">
          <div className="flex items-center justify-between">
            <Badge variant="brand" className="gap-1.5">
              <Icon className="h-3.5 w-3.5" />
              {meta.label}
            </Badge>
            {indicator.year && (
              <span className="text-xs font-medium text-muted-foreground">
                {indicator.year}
              </span>
            )}
          </div>
          <h4 className="mt-4 line-clamp-4 font-semibold leading-snug text-foreground">
            {indicator.title}
          </h4>
          {(indicator.authors || indicator.venue) && (
            <p className="mt-2 line-clamp-2 text-sm text-muted-foreground">
              {[indicator.authors, indicator.venue].filter(Boolean).join(" · ")}
            </p>
          )}
          <span className="mt-auto pt-4 inline-flex items-center gap-1 text-sm font-medium text-brand">
            View details
            <ArrowUpRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
          </span>
        </Card>
      </button>
    </motion.div>
  )
}

export { typeMeta }
