'use client';

import * as React from 'react';
import { Card, CardHeader, CardContent, CardFooter } from '../../ui/card';
import { Skeleton } from '../../ui/skeleton';
import { cn } from '../../shared/utils';

export interface NotificationCardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Number of notification rows to display (mirrors `maxItems` on NotificationCard) */
  rows?: number;
  /** Whether to show the "View all" footer button placeholder */
  showViewAll?: boolean;
}

/**
 * Loading placeholder for `NotificationCard`.
 *
 * @description
 * Mirrors the visual layout of `NotificationCard`: header with title + badge,
 * a list of notification rows (icon + title + message + timestamp), and an
 * optional "View all" footer.
 *
 * @example
 * ```tsx
 * {isLoading ? <NotificationCardSkeleton rows={4} showViewAll /> : <NotificationCard items={items} />}
 * ```
 */
export function NotificationCardSkeleton({
  rows = 4,
  showViewAll = false,
  className,
  ...props
}: NotificationCardSkeletonProps) {
  return (
    <Card className={cn('w-full', className)} {...props}>
      <CardHeader>
        <div className="flex items-center gap-2">
          {/* Title */}
          <Skeleton className="h-5 w-32" />
          {/* Unread count badge */}
          <Skeleton className="h-5 w-6 rounded-full" />
        </div>
        {/* "Mark all as read" action */}
        <Skeleton className="h-7 w-32 rounded-md" />
      </CardHeader>

      <CardContent className="px-0 pb-0">
        <ul className="divide-y divide-border">
          {Array.from({ length: rows }).map((_, i) => (
            <li key={i} className="flex items-start gap-3 px-6 py-3">
              {/* Icon / avatar circle */}
              <Skeleton className="size-8 rounded-full shrink-0 mt-0.5" />

              <div className="flex-1 min-w-0 space-y-1.5">
                {/* Title row */}
                <div className="flex items-center justify-between gap-2">
                  <Skeleton className="h-3.5 w-40" />
                  <Skeleton className="h-4 w-12 rounded-full shrink-0" />
                </div>
                {/* Message */}
                <Skeleton className="h-3 w-full" />
                <Skeleton className="h-3 w-3/4" />
                {/* Timestamp */}
                <Skeleton className="h-2.5 w-16 mt-0.5" />
              </div>

              {/* Unread dot */}
              <Skeleton className="size-2 rounded-full shrink-0 mt-2" />
            </li>
          ))}
        </ul>
      </CardContent>

      {showViewAll && (
        <CardFooter className="pt-2">
          <Skeleton className="h-8 w-full rounded-md" />
        </CardFooter>
      )}
    </Card>
  );
}