'use client';

import * as React from 'react';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Card, CardHeader, CardTitle, CardContent, CardAction } from '../../ui/card';
import { Avatar, AvatarFallback, AvatarImage } from '../../ui/avatar';
import { Badge } from '../../ui/badge';
import { cn } from '../../shared/utils';

export interface ActivityItem {
  id: string;
  user: { name: string; avatar?: string; initials: string };
  action: string;
  target: string;
  time: string;
  type?: 'create' | 'update' | 'delete' | 'comment' | 'deploy';
}

export interface ActivityCardProps extends React.HTMLAttributes<HTMLDivElement> {
  title?: string;
  items: ActivityItem[];
  action?: React.ReactNode;
  maxItems?: number;
}

const activityTypeVariant: Record<
  NonNullable<ActivityItem['type']>,
  React.ComponentProps<typeof Badge>['variant']
> = {
  create: 'success',
  update: 'info',
  delete: 'destructive',
  comment: 'secondary',
  deploy: 'default',
};

export function ActivityCard({
  title,
  items,
  action,
  maxItems = 5,
  className,
  ...props
}: ActivityCardProps) {
  const { t } = useTranslation();
  const cardTitle = title ?? t('activityCard.title');
  const activityTypeBadge = useMemo<
    Record<
      NonNullable<ActivityItem['type']>,
      { label: string; variant: React.ComponentProps<typeof Badge>['variant'] }
    >
  >(
    () => ({
      create: { label: t('activityCard.type.create'), variant: activityTypeVariant.create },
      update: { label: t('activityCard.type.update'), variant: activityTypeVariant.update },
      delete: { label: t('activityCard.type.remove'), variant: activityTypeVariant.delete },
      comment: { label: t('activityCard.type.comment'), variant: activityTypeVariant.comment },
      deploy: { label: t('activityCard.type.deploy'), variant: activityTypeVariant.deploy },
    }),
    [t]
  );
  const visible = items.slice(0, maxItems);

  return (
    <Card className={cn('w-full', className)} {...props}>
      <CardHeader>
        <CardTitle>{cardTitle}</CardTitle>
        {action && <CardAction>{action}</CardAction>}
      </CardHeader>
      <CardContent className="px-6 pb-6">
        <ul className="space-y-4">
          {visible.map(item => {
            const badge = item.type ? activityTypeBadge[item.type] : null;
            return (
              <li key={item.id} className="flex items-start gap-3">
                <Avatar className="size-8 shrink-0">
                  {item.user.avatar && <AvatarImage src={item.user.avatar} alt={item.user.name} />}
                  <AvatarFallback className="text-xs">{item.user.initials}</AvatarFallback>
                </Avatar>
                <div className="flex-1 min-w-0">
                  <p className="text-sm leading-snug">
                    <span className="font-medium">{item.user.name}</span> {item.action}{' '}
                    <span className="font-medium">{item.target}</span>
                  </p>
                  <p className="text-xs text-muted-foreground mt-0.5">{item.time}</p>
                </div>
                {badge && (
                  <Badge variant={badge.variant} className="shrink-0 text-xs">
                    {badge.label}
                  </Badge>
                )}
              </li>
            );
          })}
        </ul>
      </CardContent>
    </Card>
  );
}