TemplateCard

'use client';

import { Image01 } from '@untitledui-pro/icons/solid';
import type { VariantProps } from 'cva';
import React, { use, useCallback } from 'react';

import { Badge } from '@/components/badge';
import { Surface } from '@/components/surface';
import { cn, cva } from '@/lib/utils/classnames';

const templateCardStyle = cva({
  base: [
    'group relative flex flex-col gap-0 overflow-hidden',
    'transition-[transform,background-color,box-shadow] duration-(--duration-hover) ease-(--ease)',
  ],
  variants: {
    size: {
      sm: '',
      md: '',
    },
  },
  defaultVariants: {
    size: 'md',
  },
});

interface TemplateCardContextValue {
  size: 'sm' | 'md';
}

const TemplateCardContext = React.createContext<TemplateCardContextValue>({
  size: 'md',
});

function useTemplateCardContext() {
  return use(TemplateCardContext);
}

interface TemplateCardProps
  extends React.ComponentPropsWithRef<'article'>,
    VariantProps<typeof templateCardStyle> {
  selected?: boolean;
}

const TemplateCard = ({
  ref,
  className,
  children,
  size = 'md',
  selected,
  onClick,
  onKeyDown,
  ...rest
}: TemplateCardProps) => {
  const isInteractive = !!onClick;

  const handleKeyDown = useCallback(
    (e: React.KeyboardEvent<HTMLElement>) => {
      if (onClick && (e.key === 'Enter' || e.key === ' ')) {
        e.preventDefault();
        onClick(e as unknown as React.MouseEvent<HTMLElement>);
      }
      onKeyDown?.(e);
    },
    [onClick, onKeyDown]
  );

  return (
    <TemplateCardContext value={{ size: size ?? 'md' }}>
      <Surface
        asChild
        elevation="raised"
        radius="md"
        padding="none"
        interactive={isInteractive}
      >
        <article
          ref={ref}
          role={isInteractive ? 'button' : undefined}
          tabIndex={isInteractive ? 0 : undefined}
          data-selected={selected || undefined}
          onClick={onClick}
          onKeyDown={isInteractive ? handleKeyDown : onKeyDown}
          className={cn(
            templateCardStyle({ size }),
            isInteractive && [
              'cursor-pointer',
              'active:scale-(--press-scale)',
              'focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2',
            ],
            'data-selected:ring-2 data-selected:ring-accent',
            className
          )}
          {...rest}
        >
          {children}
        </article>
      </Surface>
    </TemplateCardContext>
  );
};

const thumbnailStyle = cva({
  base: 'w-full rounded-md bg-surface-sunken object-cover',
  variants: {
    size: {
      sm: 'aspect-[3/2]',
      md: 'aspect-[4/3]',
    },
  },
  defaultVariants: {
    size: 'md',
  },
});

interface TemplateCardThumbnailProps
  extends React.ComponentPropsWithRef<'img'> {}

const TemplateCardThumbnail = ({
  ref,
  className,
  src,
  alt = '',
  ...rest
}: TemplateCardThumbnailProps) => {
  const { size } = useTemplateCardContext();

  if (!src) {
    return (
      <div
        className={cn(
          thumbnailStyle({ size }),
          'flex items-center justify-center',
          className
        )}
      >
        <Image01 className="size-10 text-foreground/30" aria-hidden />
      </div>
    );
  }

  return (
    <img
      ref={ref}
      src={src}
      alt={alt}
      className={cn(thumbnailStyle({ size }), className)}
      {...rest}
    />
  );
};

interface TemplateCardBodyProps extends React.ComponentPropsWithRef<'div'> {}

const TemplateCardBody = ({
  ref,
  className,
  children,
  ...rest
}: TemplateCardBodyProps) => {
  const { size } = useTemplateCardContext();
  return (
    <div
      ref={ref}
      className={cn(
        'flex min-w-0 flex-1 flex-col gap-0.5',
        size === 'sm' ? 'p-3' : 'p-4',
        className
      )}
      {...rest}
    >
      {children}
    </div>
  );
};

interface TemplateCardTitleProps extends React.ComponentPropsWithRef<'h3'> {}

const TemplateCardTitle = ({
  ref,
  className,
  children,
  ...rest
}: TemplateCardTitleProps) => (
  <h3
    ref={ref}
    className={cn('truncate font-medium text-foreground', className)}
    {...rest}
  >
    {children}
  </h3>
);

interface TemplateCardMetaProps extends React.ComponentPropsWithRef<'p'> {}

const TemplateCardMeta = ({
  ref,
  className,
  children,
  ...rest
}: TemplateCardMetaProps) => (
  <p
    ref={ref}
    className={cn('truncate text-foreground/60 text-sm', className)}
    {...rest}
  >
    {children}
  </p>
);

type TemplateStatus = 'draft' | 'published' | 'scheduled' | 'archived';

const statusVariantMap: Record<
  TemplateStatus,
  'neutral' | 'success' | 'info' | 'warning'
> = {
  draft: 'neutral',
  published: 'success',
  scheduled: 'info',
  archived: 'warning',
};

const statusLabelMap: Record<TemplateStatus, string> = {
  draft: 'Draft',
  published: 'Published',
  scheduled: 'Scheduled',
  archived: 'Archived',
};

interface TemplateCardStatusProps
  extends Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
  status: TemplateStatus;
  children?: React.ReactNode;
}

const TemplateCardStatus = ({
  status,
  children,
  className,
  ...rest
}: TemplateCardStatusProps) => {
  const variant = statusVariantMap[status];
  const label = children ?? statusLabelMap[status];

  return (
    <Badge
      variant={variant}
      size="sm"
      className={cn(
        'absolute top-4 right-4 z-10 w-max bg-surface-overlay',
        className
      )}
      {...rest}
    >
      {label}
    </Badge>
  );
};

interface TemplateCardActionsProps extends React.ComponentPropsWithRef<'div'> {}

const TemplateCardActions = ({
  ref,
  className,
  children,
  ...rest
}: TemplateCardActionsProps) => (
  <div
    ref={ref}
    className={cn('pointer-events-auto absolute top-2 right-2 z-10', className)}
    {...rest}
  >
    {children}
  </div>
);

const CompoundTemplateCard = Object.assign(TemplateCard, {
  Thumbnail: TemplateCardThumbnail,
  Body: TemplateCardBody,
  Title: TemplateCardTitle,
  Meta: TemplateCardMeta,
  Status: TemplateCardStatus,
  Actions: TemplateCardActions,
});

export { CompoundTemplateCard as TemplateCard };