import "hono/jsx"
import { Avatar, AvatarProps } from "./avatar"
import { Image, ImageProps } from "./image"

export const Placeholder = {
  Avatar(props: PlaceholderAvatarProps) {
    const { size = 32, seed = "seed", type = "dylan", transparent, alt, class: className, rounded } = props

    // Generate DiceBear avatar URL
    const url = new URL(`https://api.dicebear.com/9.x/${type}/svg`)
    url.searchParams.set("seed", seed)
    url.searchParams.set("size", size.toString())

    if (transparent) {
      url.searchParams.set("backgroundColor", "transparent")
    }

    return <Avatar src={url.toString()} alt={alt} class={className} size={size} rounded={rounded} />
  },

  Image(props: PlaceholderImageProps) {
    const {
      width = 200,
      height = 200,
      seed = 1,
      alt = "Placeholder image",
      objectFit,
      class: className,
    } = props

    // Generate Picsum Photos URL with seed for consistent images
    const src = `https://picsum.photos/${width}/${height}?random=${seed}`

    return <Image src={src} alt={alt} width={width} height={height} objectFit={objectFit} class={className} />
  },
}

export const Test = () => {
  return (
    <div class="p-6 space-y-8">
      {/* === AVATAR TESTS === */}

      {/* Show all available avatar styles */}
      <div>
        <h2 class="text-xl font-bold mb-4">All Avatar Styles ({allStyles.length} total)</h2>
        <div class="grid grid-cols-10 gap-3">
          {allStyles.map((style) => (
            <div key={style} class="flex flex-col space-y-1">
              <Placeholder.Avatar type={style} size={48} />
              <p class="text-xs font-medium">{style}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Avatar size variations */}
      <div>
        <h2 class="text-xl font-bold mb-4">Avatar Size Variations</h2>
        <div class="flex gap-4">
          {[24, 32, 48, 64].map((size) => (
            <div key={size} class="flex flex-col space-y-2">
              <Placeholder.Avatar size={size} />
              <p class="text-sm">{size}px</p>
            </div>
          ))}
        </div>
      </div>

      {/* Avatar styling combinations */}
      <div>
        <h2 class="text-xl font-bold mb-4">Avatar Styling Options</h2>
        <div class="flex gap-6">
          <div class="flex flex-col space-y-2">
            <Placeholder.Avatar rounded size={64} />
            <p class="text-sm">Rounded + Background</p>
          </div>
          <div class="flex flex-col space-y-2">
            <div class="bg-gray-200 p-2">
              <Placeholder.Avatar rounded transparent size={64} />
            </div>
            <p class="text-sm">Rounded + Transparent</p>
          </div>
          <div class="flex flex-col space-y-2">
            <Placeholder.Avatar size={64} />
            <p class="text-sm">Square + Background</p>
          </div>
          <div class="flex flex-col space-y-2">
            <div class="bg-gray-200 p-2">
              <Placeholder.Avatar transparent size={64} />
            </div>
            <p class="text-sm">Square + Transparent</p>
          </div>
        </div>
      </div>

      {/* Avatar seed variations */}
      <div>
        <h2 class="text-xl font-bold mb-4">Avatar Seeds (Same Style, Different People)</h2>
        <div class="flex gap-4">
          {["alice", "bob", "charlie", "diana"].map((seed) => (
            <div key={seed} class="flex flex-col space-y-2">
              <Placeholder.Avatar seed={seed} size={64} />
              <p class="text-sm">"{seed}"</p>
            </div>
          ))}
        </div>
      </div>

      {/* === IMAGE TESTS === */}
      <div>
        <h2 class="text-xl font-bold mb-4">Placeholder Images</h2>

        {/* Size variations */}
        <div class="mb-6">
          <h3 class="text-lg font-semibold mb-3">Size Variations</h3>
          <div class="flex gap-4">
            {[
              { width: 100, height: 100 },
              { width: 150, height: 100 },
              { width: 200, height: 150 },
              { width: 250, height: 200 },
            ].map(({ width, height }) => (
              <div key={`${width}x${height}`} class="flex flex-col space-y-2">
                <Placeholder.Image width={width} height={height} seed={1} />
                <p class="text-sm">
                  {width}×{height}
                </p>
              </div>
            ))}
          </div>
        </div>

        {/* Different seeds - show variety */}
        <div class="mb-6">
          <h3 class="text-lg font-semibold mb-3">Different Images (Different Seeds)</h3>
          <div class="flex gap-4">
            {[1, 2, 3, 4, 5].map((seed) => (
              <div key={seed} class="flex flex-col space-y-2">
                <Placeholder.Image width={150} height={150} seed={seed} />
                <p class="text-sm">Seed {seed}</p>
              </div>
            ))}
          </div>
        </div>

        {/* With custom classes */}
        <div>
          <h3 class="text-lg font-semibold mb-3">With Custom Classes</h3>
          <div class="flex gap-6">
            <div class="flex flex-col space-y-2">
              <Placeholder.Image
                width={150}
                height={150}
                seed={1}
                objectFit="cover"
                class="rounded-lg border-4 border-blue-500"
              />
              <p class="text-sm">Rounded + Border</p>
            </div>
            <div class="flex flex-col space-y-2">
              <Placeholder.Image width={150} height={150} seed={2} objectFit="cover" class="shadow-lg" />
              <p class="text-sm">With Shadow</p>
            </div>
            <div class="flex flex-col space-y-2">
              <Placeholder.Image
                width={150}
                height={150}
                seed={3}
                objectFit="cover"
                class="rounded-full border-4 border-green-500 shadow-lg"
              />
              <p class="text-sm">Circular + Effects</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

// Type definitions
type PlaceholderAvatarProps = Omit<AvatarProps, "src"> & {
  seed?: string
  type?: DicebearStyleName
  transparent?: boolean
}

type PlaceholderImageProps = Omit<ImageProps, "src" | "alt"> & {
  width?: number
  height?: number
  seed?: number
  alt?: string
}

// All supported DiceBear HTTP styleNames. Source: https://www.dicebear.com/styles
const allStyles = [
  "adventurer",
  "adventurer-neutral",
  "avataaars",
  "avataaars-neutral",
  "big-ears",
  "big-ears-neutral",
  "big-smile",
  "bottts",
  "bottts-neutral",
  "croodles",
  "croodles-neutral",
  "dylan",
  "fun-emoji",
  "glass",
  "icons",
  "identicon",
  "initials",
  "lorelei",
  "lorelei-neutral",
  "micah",
  "miniavs",
  "notionists",
  "notionists-neutral",
  "open-peeps",
  "personas",
  "pixel-art",
  "pixel-art-neutral",
  "rings",
  "shapes",
  "thumbs",
] as const

type DicebearStyleName = (typeof allStyles)[number]

// Default export for convenience
export default Placeholder
