'use client'

import { motion } from 'motion/react'
import { Activity } from 'lucide-react'
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { formatRelativeTime } from '@/lib/utils'
import { formatAction, getActionIcon } from '@/components/dashboard/utils'

type ActivityFeedProps = {
  activity: Array<{
    id: string
    action: string
    entityType: string | null
    timestamp: Date
    user: { name: string | null } | null
  }>
}

export function ActivityFeed({ activity }: ActivityFeedProps) {
  return (
    <Card className="flex flex-col overflow-hidden" style={{ maxHeight: 420 }}>
      <CardHeader className="pb-3 shrink-0">
        <div className="flex items-center gap-2.5">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-blue/10">
            <Activity className="h-4 w-4 text-brand-blue" />
          </div>
          <CardTitle className="text-base">Activity</CardTitle>
        </div>
      </CardHeader>
      <CardContent className="overflow-y-auto min-h-0">
        {activity.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-6 text-center">
            <Activity className="h-8 w-8 text-muted-foreground/30" />
            <p className="mt-2 text-xs text-muted-foreground">
              No recent activity
            </p>
          </div>
        ) : (
          <div className="relative">
            {/* Timeline line */}
            <div className="absolute left-[13px] top-2 bottom-2 w-px bg-border" />
            <div className="space-y-3">
              {activity.map((log, idx) => (
                <motion.div
                  key={log.id}
                  initial={{ opacity: 0, x: 6 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.2, delay: 0.2 + idx * 0.03 }}
                  className="relative flex items-start gap-3"
                >
                  <div className="relative z-10 flex h-[26px] w-[26px] shrink-0 items-center justify-center rounded-full border-2 border-background bg-muted">
                    {getActionIcon(log.action)}
                  </div>
                  <div className="flex-1 min-w-0 pt-0.5">
                    <p className="text-xs leading-relaxed">
                      <span className="font-semibold">{log.user?.name || 'System'}</span>
                      {' '}{formatAction(log.action, log.entityType)}
                    </p>
                    <p className="text-[11px] text-muted-foreground">
                      {formatRelativeTime(log.timestamp)}
                    </p>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  )
}
