import * as React from 'react';
import { cn } from '../utils/cn';

export type ShotStatus = 'pending' | 'generating' | 'complete' | 'failed';

export interface ShotCardProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Human-readable label for this shot (e.g., "Headshot", "Casual") */
  label: string;
  /** Current generation status */
  status: ShotStatus;
  /** Image URL — shown when status is 'complete' */
  imageUrl?: string;
  /** Error message — shown when status is 'failed' */
  error?: string;
  /** Whether the anchor exists (controls if generate button is enabled) */
  anchorReady?: boolean;
  /** Called when the user clicks Generate on a pending shot */
  onGenerate?: () => void;
  /** Called when the user clicks Regenerate on a complete/failed shot */
  onRegenerate?: () => void;
  /** Called when the user clicks Reset (removes the image, back to pending) */
  onReset?: () => void;
  /** Called when the user clicks the image (e.g., to open a lightbox) */
  onImageClick?: () => void;
}

/**
 * ShotCard displays a single shot in an album grid.
 *
 * Three visual states:
 * - pending: Gray placeholder with label and optional Generate button
 * - generating: Shimmer animation with label
 * - complete: The generated image with hover controls (Regenerate / Reset)
 * - failed: Red border with error message and Regenerate button
 *
 * @example
 * ```tsx
 * <ShotCard
 *   label="Headshot"
 *   status={shot.status}
 *   imageUrl={shot.imageUrl}
 *   anchorReady={!!album.anchorUrl}
 *   onGenerate={() => regenerateShot(shot.index)}
 * />
 * ```
 */
const ShotCard = React.forwardRef<HTMLDivElement, ShotCardProps>(
  (
    {
      label,
      status,
      imageUrl,
      error,
      anchorReady = false,
      onGenerate,
      onRegenerate,
      onReset,
      onImageClick,
      className,
      ...props
    },
    ref
  ) => {
    return (
      <div
        ref={ref}
        className={cn(
          'relative aspect-square rounded-lg overflow-hidden group',
          'border border-[var(--border)]',
          status === 'failed' && 'border-red-500/50',
          className
        )}
        {...props}
      >
        {/* PENDING state */}
        {status === 'pending' && (
          <div className="flex flex-col items-center justify-center h-full gap-2 bg-[var(--surface-100)] p-3">
            <span className="text-xs font-medium text-[var(--text-secondary)] text-center leading-tight">
              {label}
            </span>
            {anchorReady && onGenerate && (
              <button
                onClick={onGenerate}
                className="mt-1 px-2 py-0.5 text-xs rounded bg-[var(--accent)] text-white hover:opacity-80 transition-opacity"
              >
                Generate
              </button>
            )}
            {!anchorReady && (
              <span className="text-[10px] text-[var(--text-tertiary)] text-center">
                Generate anchor first
              </span>
            )}
          </div>
        )}

        {/* GENERATING state — shimmer */}
        {status === 'generating' && (
          <div className="flex flex-col items-center justify-center h-full gap-2 bg-[var(--surface-100)] p-3">
            <div className="w-full h-full absolute inset-0 bg-gradient-to-r from-[var(--surface-100)] via-[var(--surface-200)] to-[var(--surface-100)] animate-[shimmer_1.5s_ease-in-out_infinite] bg-[length:200%_100%]" />
            <style>{`
              @keyframes shimmer {
                0% { background-position: -200% 0; }
                100% { background-position: 200% 0; }
              }
            `}</style>
            <span className="relative z-10 text-xs font-medium text-[var(--text-secondary)] text-center">
              {label}
            </span>
          </div>
        )}

        {/* COMPLETE state */}
        {status === 'complete' && imageUrl && (
          <>
            <img
              src={imageUrl}
              alt={label}
              className={cn(
                'w-full h-full object-cover',
                onImageClick && 'cursor-pointer'
              )}
              onClick={onImageClick}
            />
            {/* Hover overlay with label + controls */}
            <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors flex flex-col justify-between p-2 opacity-0 group-hover:opacity-100 transition-opacity">
              <span className="text-xs font-medium text-white drop-shadow">{label}</span>
              <div className="flex gap-1 justify-end">
                {onRegenerate && (
                  <button
                    onClick={(e) => { e.stopPropagation(); onRegenerate(); }}
                    className="px-2 py-0.5 text-xs rounded bg-white/20 text-white hover:bg-white/30 backdrop-blur-sm transition-colors"
                  >
                    Regenerate
                  </button>
                )}
                {onReset && (
                  <button
                    onClick={(e) => { e.stopPropagation(); onReset(); }}
                    className="px-2 py-0.5 text-xs rounded bg-white/20 text-white hover:bg-white/30 backdrop-blur-sm transition-colors"
                  >
                    Reset
                  </button>
                )}
              </div>
            </div>
          </>
        )}

        {/* FAILED state */}
        {status === 'failed' && (
          <div className="flex flex-col items-center justify-center h-full gap-2 bg-red-50 dark:bg-red-950/20 p-3">
            <span className="text-xs font-medium text-[var(--text-secondary)] text-center">
              {label}
            </span>
            {error && (
              <span className="text-[10px] text-red-500 text-center line-clamp-2" title={error}>
                {error}
              </span>
            )}
            {onRegenerate && (
              <button
                onClick={onRegenerate}
                className="mt-1 px-2 py-0.5 text-xs rounded bg-red-500 text-white hover:opacity-80 transition-opacity"
              >
                Retry
              </button>
            )}
          </div>
        )}
      </div>
    );
  }
);
ShotCard.displayName = 'ShotCard';

export { ShotCard };
