'use client';

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

export type NotificationType = 'info' | 'warning' | 'success' | 'error' | 'default';

export interface NotificationItem {
  id: string;
  title: string;
  message: string;
  time: string;
  read?: boolean;
  type?: NotificationType;
  user?: { name: string; initials: string; avatar?: string };
}

export interface NotificationCardProps extends React.HTMLAttributes<HTMLDivElement> {
  title?: string;
  items: NotificationItem[];
  unreadCount?: number;
  onMarkAllRead?: () => void;
  onViewAll?: () => void;
  maxItems?: number;
}

const typeVariant: Record<NotificationType, React.ComponentProps<typeof Badge>['variant']> = {
  info: 'info',
  warning: 'warning',
  success: 'success',
  error: 'destructive',
  default: 'secondary',
};

export function NotificationCard({
  title,
  items,
  unreadCount,
  onMarkAllRead,
  onViewAll,
  maxItems = 4,
  className,
  ...props
}: NotificationCardProps) {
  const { t } = useTranslation();
  const visible = items.slice(0, maxItems);
  const count = unreadCount ?? items.filter(i => !i.read).length;
  const cardTitle = title ?? t('notificationCard.title');

  return (
    <Card className={cn('w-full', className)} {...props}>
      <CardHeader>
        <div className="flex items-center gap-2">
          <CardTitle>{cardTitle}</CardTitle>
          {count > 0 && (
            <Badge variant="destructive" className="h-5 text-[11px] px-1.5">
              {count}
            </Badge>
          )}
        </div>
        {onMarkAllRead && count > 0 && (
          <CardAction>
            <Button variant="ghost" size="sm" className="text-xs h-7" onClick={onMarkAllRead}>
              {t('notificationCard.markAllRead')}
            </Button>
          </CardAction>
        )}
      </CardHeader>

      <CardContent className="px-0 pb-0">
        <ul className="divide-y divide-border">
          {visible.map(item => (
            <li
              key={item.id}
              className={cn(
                'flex items-start gap-3 px-6 py-3 transition-colors',
                !item.read && 'bg-muted/40'
              )}
            >
              {item.user ? (
                <Avatar className="size-8 shrink-0 mt-0.5">
                  {item.user.avatar && <AvatarImage src={item.user.avatar} alt={item.user.name} />}
                  <AvatarFallback className="text-xs">{item.user.initials}</AvatarFallback>
                </Avatar>
              ) : (
                <div className="size-8 shrink-0 mt-0.5 rounded-full bg-muted flex items-center justify-center">
                  <div
                    className={cn(
                      'size-2 rounded-full',
                      item.type === 'error'
                        ? 'bg-destructive'
                        : item.type === 'warning'
                          ? 'bg-warning'
                          : item.type === 'success'
                            ? 'bg-success'
                            : item.type === 'info'
                              ? 'bg-info'
                              : 'bg-muted-foreground'
                    )}
                  />
                </div>
              )}

              <div className="flex-1 min-w-0">
                <div className="flex items-center justify-between gap-2">
                  <p className="text-sm font-medium truncate">{item.title}</p>
                  {item.type && item.type !== 'default' && (
                    <Badge
                      variant={typeVariant[item.type]}
                      className="text-[10px] px-1.5 h-4 shrink-0"
                    >
                      {item.type}
                    </Badge>
                  )}
                </div>
                <p className="text-xs text-muted-foreground line-clamp-2 mt-0.5">{item.message}</p>
                <p className="text-[11px] text-muted-foreground/70 mt-1">{item.time}</p>
              </div>

              {!item.read && <div className="size-2 rounded-full bg-primary shrink-0 mt-2" />}
            </li>
          ))}
        </ul>
      </CardContent>

      {onViewAll && (
        <CardFooter className="pt-2">
          <Button variant="ghost" size="sm" className="w-full text-xs" onClick={onViewAll}>
            {t('notificationCard.viewAll')}
          </Button>
        </CardFooter>
      )}
    </Card>
  );
}