import { Show, splitProps, type JSX } from 'solid-js'
import { MediaDetailDialog } from '@/components/media/media-detail-dialog'
import { Badge } from '@/components/ui/badge'
import type { MediaItem } from '@/types/domain'
import { cn } from '@/utils/cn'
import { formatRating, formatRuntime } from '@/utils/format'
import { mediaBadgeVariant, mediaMeta, mediaMonogram, mediaTypeLabel, mediaYear } from '@/utils/media'

interface MediaCardProps extends JSX.HTMLAttributes<HTMLElement> {
  item: MediaItem
  progressPercent?: number
  subtitle?: string
  onClick?: () => void
  showDialog?: boolean
}

export const MediaCard = (props: MediaCardProps) => {
  const [local, rest] = splitProps(props, ['class', 'item', 'progressPercent', 'subtitle', 'onClick', 'showDialog'])
  const tone = () => mediaBadgeVariant(local.item.type)

  const cardContent = (
    <article
      class={cn(
        'group bg-surface-container overflow-hidden transition-all duration-100 hover:translate-x-[-4px] hover:translate-y-[-4px] cursor-pointer border-4 border-outline shadow-brutal-outline hover:shadow-brutal',
        local.class,
      )}
      onClick={local.onClick}
      {...rest}
    >
      <div class="relative h-56 overflow-hidden bg-brutal-stripes">
        {/* Monogram */}
        <div class="absolute inset-0 flex items-center justify-center bg-surface-low">
          <p class="font-display text-8xl font-bold text-fg/5 tracking-tighter uppercase">
            {mediaMonogram(local.item.title)}
          </p>
        </div>
        
        {/* Accent Line */}
        <div class="absolute left-0 top-0 bottom-0 w-2 bg-primary" />
        
        {/* Badges */}
        <div class="absolute right-4 top-4 flex items-center gap-2">
          <Badge variant={tone()}>{mediaTypeLabel(local.item.type)}</Badge>
          <span class="text-[9px] font-bold uppercase tracking-[0.15em] text-fg bg-surface px-3 py-1.5 border-2 border-outline font-mono">
            {mediaYear(local.item.releaseDate)}
          </span>
        </div>
        
        {/* Progress Bar */}
        <Show when={typeof local.progressPercent === 'number'}>
          <div class="absolute bottom-0 left-0 right-0 h-2 bg-surface-highest border-t-2 border-outline">
            <div
              class="h-full bg-primary transition-all duration-100"
              style={{ width: `${Math.min(100, Math.max(0, local.progressPercent ?? 0))}%` }}
            />
          </div>
        </Show>
      </div>

      <div class="p-5 space-y-3 border-t-4 border-outline">
        <h4 class="line-clamp-1 text-base font-bold text-fg tracking-tight uppercase group-hover:text-primary transition-colors">{local.item.title}</h4>
        <p class="line-clamp-2 min-h-[2.5rem] text-xs text-muted-fg leading-relaxed">
          {local.subtitle ?? local.item.overview}
        </p>

        <div class="flex items-center justify-between text-xs text-muted-fg pt-2 border-t-2 border-outline">
          <span class="font-bold uppercase tracking-wide font-mono">{mediaMeta(local.item) || formatRuntime(local.item.runtimeMinutes, local.item.type)}</span>
          <span class="font-bold text-tertiary flex items-center gap-1 font-mono">
            {formatRating(local.item.rating)} <span class="text-tertiary">★</span>
          </span>
        </div>
      </div>
    </article>
  )

  return (
    <Show when={local.showDialog !== false} fallback={cardContent}>
      <MediaDetailDialog item={local.item} progressPercent={local.progressPercent}>
        {cardContent}
      </MediaDetailDialog>
    </Show>
  )
}
