'use client';

import { useState, type CSSProperties } from 'react';
import { cn } from '@/lib/format';
import type { PlaceholderGlyph } from '@/lib/image-glyph';
export { glyphForFamily, type PlaceholderGlyph } from '@/lib/image-glyph';

/**
 * Plain, lazy `<img>` bound to the /img cache (src + srcSet computed on the server) with a
 * designed placeholder — never the browser's broken-image glyph. Falls back on load error.
 */
export interface SmartImageProps {
  src: string | null;
  srcSet?: string | null;
  sizes?: string;
  alt: string;
  fit?: 'contain' | 'cover';
  priority?: boolean;
  className?: string;
  imgClassName?: string;
  style?: CSSProperties;
  placeholder?: { label?: string | null; glyph?: PlaceholderGlyph };
  /** small thumbnail: glyph only */
  compact?: boolean;
}


function Glyph({ kind, className }: { kind: PlaceholderGlyph; className?: string }) {
  const p = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const };
  switch (kind) {
    case 'card':
      return (
        <svg viewBox="0 0 24 24" className={className} aria-hidden {...p}>
          <rect x="5" y="3" width="14" height="18" rx="1.5" />
          <rect x="7.5" y="5.5" width="9" height="7" rx="0.5" />
          <path d="M7.5 15.5h9M7.5 18h6" />
        </svg>
      );
    case 'comic':
      return (
        <svg viewBox="0 0 24 24" className={className} aria-hidden {...p}>
          <rect x="4.5" y="3" width="15" height="18" rx="1" />
          <path d="M4.5 8h15M9 3v18M4.5 15h15" />
        </svg>
      );
    case 'watch':
      return (
        <svg viewBox="0 0 24 24" className={className} aria-hidden {...p}>
          <circle cx="12" cy="12" r="6" />
          <path d="M12 9v3l2 1.5M9.5 6l.7-3h3.6l.7 3M9.5 18l.7 3h3.6l.7-3" />
        </svg>
      );
    case 'brick':
      return (
        <svg viewBox="0 0 24 24" className={className} aria-hidden {...p}>
          <path d="M3 9h18v10H3zM6 9V6.5h4V9M14 9V6.5h4V9" />
        </svg>
      );
    case 'game':
      return (
        <svg viewBox="0 0 24 24" className={className} aria-hidden {...p}>
          <rect x="6" y="3" width="12" height="18" rx="1.5" />
          <rect x="8.5" y="6" width="7" height="6" rx="0.5" />
          <path d="M9 16h6" />
        </svg>
      );
    case 'sneaker':
      return (
        <svg viewBox="0 0 24 24" className={className} aria-hidden {...p}>
          <path d="M3 15c3 0 5-1 7-4l2 1.5c2 1.5 5 1.5 9 3.5v2H3z" />
          <path d="M3 18h18" />
        </svg>
      );
    case 'coin':
      return (
        <svg viewBox="0 0 24 24" className={className} aria-hidden {...p}>
          <circle cx="12" cy="12" r="8" />
          <circle cx="12" cy="12" r="4.5" />
        </svg>
      );
    case 'bottle':
      return (
        <svg viewBox="0 0 24 24" className={className} aria-hidden {...p}>
          <path d="M10 3h4v4l2 3v10a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V10l2-3z" />
          <path d="M8 14h8" />
        </svg>
      );
    case 'car':
      return (
        <svg viewBox="0 0 24 24" className={className} aria-hidden {...p}>
          <path d="M4 14l2-5h12l2 5v4H4z" />
          <circle cx="7.5" cy="17.5" r="1.5" />
          <circle cx="16.5" cy="17.5" r="1.5" />
        </svg>
      );
    case 'toy':
      return (
        <svg viewBox="0 0 24 24" className={className} aria-hidden {...p}>
          <circle cx="12" cy="8" r="4" />
          <path d="M6 21v-4a6 6 0 0 1 12 0v4" />
        </svg>
      );
    case 'book':
      return (
        <svg viewBox="0 0 24 24" className={className} aria-hidden {...p}>
          <path d="M5 4h6a2 2 0 0 1 2 2v14a2 2 0 0 0-2-2H5zM19 4h-6a2 2 0 0 0-2 2v14a2 2 0 0 1 2-2h6z" />
        </svg>
      );
    case 'art':
      return (
        <svg viewBox="0 0 24 24" className={className} aria-hidden {...p}>
          <rect x="3.5" y="4.5" width="17" height="15" rx="1" />
          <path d="M6 17l4-5 3 3 2-2 3 4" />
          <circle cx="15.5" cy="9" r="1.2" />
        </svg>
      );
    default:
      return (
        <svg viewBox="0 0 24 24" className={className} aria-hidden {...p}>
          <path d="M4 8l8-4 8 4v8l-8 4-8-4zM4 8l8 4 8-4M12 12v8" />
        </svg>
      );
  }
}

export function ImagePlaceholder({ label, glyph = 'box', compact = false, className }: { label?: string | null; glyph?: PlaceholderGlyph; compact?: boolean; className?: string }) {
  return (
    <span className={cn('absolute inset-0 flex flex-col items-center justify-center gap-1 bg-inset text-subtle', className)} role="img" aria-label={label ? `${label} (no image)` : 'No image'}>
      <Glyph kind={glyph} className={compact ? 'h-1/2 w-1/2 max-h-5 max-w-5' : 'h-8 w-8 opacity-70'} />
      {!compact && label ? <span className="t-caption max-w-[80%] truncate text-center">{label}</span> : null}
    </span>
  );
}

export function SmartImage({ src, srcSet, sizes, alt, fit = 'contain', priority = false, className, imgClassName, style, placeholder, compact = false }: SmartImageProps) {
  const [failed, setFailed] = useState(false);
  if (!src || failed) return <ImagePlaceholder label={placeholder?.label ?? null} glyph={placeholder?.glyph ?? 'box'} compact={compact} className={className} />;
  return (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src={src}
      srcSet={srcSet ?? undefined}
      sizes={srcSet ? sizes ?? '100vw' : undefined}
      alt={alt}
      loading={priority ? 'eager' : 'lazy'}
      fetchPriority={priority ? 'high' : 'auto'}
      decoding="async"
      referrerPolicy="no-referrer"
      draggable={false}
      onError={() => setFailed(true)}
      style={style}
      className={cn('absolute inset-0 h-full w-full', fit === 'cover' ? 'object-cover' : 'object-contain', imgClassName)}
    />
  );
}