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

export interface AnchorPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
  /** URL of the anchor image — if empty, shows the "Generate Anchor First" CTA */
  anchorUrl?: string;
  /** Whether anchor generation is currently in progress */
  isGenerating?: boolean;
  /** Label shown above the anchor image */
  label?: string;
  /** Called when the user clicks the "Generate Anchor" button */
  onGenerate?: () => void;
  /** Called when the user clicks the "Regenerate" button on an existing anchor */
  onRegenerate?: () => void;
  /** Called when the user clicks the anchor image (e.g., to open a lightbox) */
  onImageClick?: () => void;
}

/**
 * AnchorPreview displays the album's reference/anchor image.
 *
 * The anchor is the first card in every album — it defines the visual identity
 * that all shots reference. When missing, it shows a prominent CTA because
 * no shots can be generated until the anchor exists.
 *
 * Three states:
 * - No anchor, not generating: Show "Generate Anchor" CTA
 * - Generating: Show shimmer animation
 * - Has anchor: Show image with Regenerate hover overlay
 *
 * @example
 * ```tsx
 * <AnchorPreview
 *   anchorUrl={album.anchorUrl}
 *   isGenerating={album.anchorJobId !== '' && !album.anchorUrl}
 *   onGenerate={generateAnchor}
 *   onRegenerate={generateAnchor}
 * />
 * ```
 */
const AnchorPreview = React.forwardRef<HTMLDivElement, AnchorPreviewProps>(
  (
    {
      anchorUrl,
      isGenerating = false,
      label = 'Reference',
      onGenerate,
      onRegenerate,
      onImageClick,
      className,
      ...props
    },
    ref
  ) => {
    return (
      <div
        ref={ref}
        className={cn(
          'relative aspect-square rounded-lg overflow-hidden group',
          'border-2 border-dashed border-[var(--accent)]/40',
          anchorUrl && 'border-solid border-[var(--accent)]/60',
          className
        )}
        {...props}
      >
        {/* GENERATING state — shimmer */}
        {isGenerating && !anchorUrl && (
          <>
            <div className="w-full h-full 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>
            <div className="absolute bottom-2 inset-x-2 text-center">
              <span className="text-xs font-medium text-[var(--text-secondary)]">
                Generating anchor...
              </span>
            </div>
          </>
        )}

        {/* NO ANCHOR state — CTA */}
        {!anchorUrl && !isGenerating && (
          <div className="flex flex-col items-center justify-center h-full gap-3 p-4 bg-[var(--surface-50)]">
            {/* Camera/anchor icon */}
            <div className="w-10 h-10 rounded-full bg-[var(--accent)]/10 flex items-center justify-center">
              <svg
                className="w-5 h-5 text-[var(--accent)]"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={1.5}
                  d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"
                />
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={1.5}
                  d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z"
                />
              </svg>
            </div>
            <div className="text-center">
              <p className="text-xs font-semibold text-[var(--text-primary)]">{label}</p>
              <p className="text-[10px] text-[var(--text-tertiary)] mt-0.5">
                Generate first
              </p>
            </div>
            {onGenerate && (
              <button
                onClick={onGenerate}
                className="px-3 py-1 text-xs rounded-md bg-[var(--accent)] text-white hover:opacity-80 transition-opacity font-medium"
              >
                Generate Anchor
              </button>
            )}
          </div>
        )}

        {/* HAS ANCHOR state */}
        {anchorUrl && (
          <>
            <img
              src={anchorUrl}
              alt={label}
              className={cn(
                'w-full h-full object-cover',
                onImageClick && 'cursor-pointer'
              )}
              onClick={onImageClick}
            />
            {/* Accent border indicator */}
            <div className="absolute inset-0 ring-2 ring-[var(--accent)]/30 rounded-lg pointer-events-none" />
            {/* Hover overlay */}
            <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-semibold text-white drop-shadow">
                {label}
              </span>
              <div className="flex 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>
                )}
              </div>
            </div>
          </>
        )}
      </div>
    );
  }
);
AnchorPreview.displayName = 'AnchorPreview';

export { AnchorPreview };
