'use client'

import * as React from 'react'
import { ImageOff, Loader2, RefreshCw } from 'lucide-react'
import { cn } from '../../lib/utils'
import type { SlideData } from './types'

export interface SlideCanvasProps {
  slide: SlideData
  /** Retry/regenerate handler shown in the error state. */
  onRetry?: () => void
  /** Render structured slides (future); falls back to content text for now. */
  renderStructured?: (slide: SlideData) => React.ReactNode
  className?: string
}

/**
 * Renders a single slide at a fixed 16:9 aspect ratio. Image render mode shows
 * the generated full-bleed image with loading / error states; structured mode
 * delegates to `renderStructured`. App-agnostic.
 */
export function SlideCanvas({ slide, onRetry, renderStructured, className }: SlideCanvasProps) {
  const status = slide.status ?? (slide.imageUrl ? 'ready' : 'pending')
  const mode = slide.renderMode ?? 'image'

  return (
    <div
      className={cn(
        // Fit the largest 16:9 box inside the stage on BOTH axes: drive size
        // from the stage HEIGHT (h-full) so a wide pane can't make the card
        // taller than the stage and bleed over the toolbar; max-w-full clamps
        // width on tall/narrow panes. object-contain on the img handles any
        // residual letterboxing.
        'relative mx-auto aspect-video h-full max-h-full w-auto max-w-full overflow-hidden rounded-lg border border-border bg-white shadow-sm',
        className
      )}
      data-status={status}
      aria-busy={status === 'generating' || undefined}
    >
      {mode === 'structured' && renderStructured ? (
        renderStructured(slide)
      ) : status === 'ready' && slide.imageUrl ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={slide.imageUrl}
          alt={slide.alt ?? slide.title ?? `Slide ${slide.slideNumber}`}
          className="h-full w-full object-contain"
        />
      ) : status === 'error' ? (
        <div className="flex h-full w-full flex-col items-center justify-center gap-3 text-muted-foreground">
          <ImageOff className="h-8 w-8" aria-hidden="true" />
          <p className="text-sm">This slide failed to generate.</p>
          {onRetry && (
            <button
              type="button"
              onClick={onRetry}
              className="inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm hover:bg-accent"
            >
              <RefreshCw className="h-3.5 w-3.5" aria-hidden="true" /> Retry
            </button>
          )}
        </div>
      ) : (
        <div className="flex h-full w-full flex-col items-center justify-center gap-3 text-muted-foreground">
          <Loader2 className={cn('h-8 w-8', status === 'generating' && 'animate-spin')} aria-hidden="true" />
          <p className="text-sm">
            {status === 'generating' ? `Generating slide ${slide.slideNumber}…` : 'Waiting to generate…'}
          </p>
        </div>
      )}
    </div>
  )
}