"use client"

import { useState, type FormEvent, type SVGProps } from "react"
import { AlertTriangleIcon } from "lucide-react"

import { Image as GeneratedImage } from "@/components/ai-elements/image"
import {
  PromptInput,
  PromptInputSubmit,
  PromptInputTextarea,
  type PromptInputMessage,
} from "@/components/ai-elements/prompt-input"
import { Suggestion, Suggestions } from "@/components/ai-elements/suggestion"

import { generateImage } from "../app/actions"
import { Countdown } from "./countdown"

const imageSuggestions = [
  {
    title: "Cyberpunk Street",
    prompt:
      "A cyberpunk street scene with neon lights, holograms, rain-slicked pavement, dramatic shadows, Blade Runner aesthetic, cinematic composition, moody atmosphere, steam rising from manholes, flying cars overhead, neon signs in Japanese and English, high contrast lighting, sci-fi movie still quality",
  },
  {
    title: "Serene Mountain Lake",
    prompt:
      "A serene mountain lake at golden hour with mist rising, cinematic lighting, wide angle view, 8K resolution, photorealistic, atmospheric perspective, soft focus background, crystal clear water reflections, golden hour warm tones, volumetric lighting, professional photography, National Geographic style",
  },
  {
    title: "Magical Forest",
    prompt:
      "A magical forest with glowing mushrooms, fairy lights, ethereal atmosphere, fantasy art style, Studio Ghibli inspired, soft dreamy lighting, bioluminescent elements, floating particles, mystical fog, vibrant colors, detailed textures, whimsical mood, digital art masterpiece",
  },
  {
    title: "Futuristic City",
    prompt:
      "A futuristic city skyline with flying cars, towering skyscrapers, sunset colors, sci-fi aesthetic, 4K cinematic quality, dramatic cloud formations, lens flare effects, golden hour lighting, architectural photography, clean modern design, high-tech atmosphere, movie poster style",
  },
  {
    title: "Artistic Portrait",
    prompt:
      "A professional portrait of a creative artist in their studio, dramatic lighting, oil painting style, Rembrandt lighting technique, chiaroscuro shadows, studio photography, professional camera, shallow depth of field, artistic composition, gallery quality, masterful technique",
  },
]

export function ImageDemo() {
  const [prompt, setPrompt] = useState(
    "A cyberpunk street scene with neon lights, holograms, rain-slicked pavement, dramatic shadows, Blade Runner aesthetic, cinematic composition, moody atmosphere, steam rising from manholes, flying cars overhead, neon signs in Japanese and English, high contrast lighting, sci-fi movie still quality"
  )
  const [imageData, setImageData] = useState<{
    base64?: string
    uint8Array?: Uint8Array
    mediaType?: string
  } | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const clearError = () => setError(null)
  const clearPrompt = () => setPrompt("")

  const handleImageGeneration = async (promptText: string) => {
    const result = await generateImage({ prompt: promptText })

    if (result.success) {
      setImageData(result.data)
      clearPrompt()
    } else {
      setError(result.error)
    }
  }

  const handleSubmit = async (
    message: PromptInputMessage,
    event: FormEvent<HTMLFormElement>
  ) => {
    event.preventDefault()
    if (!message.text?.trim()) return

    setIsLoading(true)
    clearError()

    try {
      await handleImageGeneration(message.text.trim())
    } catch (error) {
      console.error("Error generating image:", error)
      setError("Failed to generate image. Please try again.")
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div className="relative mx-auto mt-6 max-w-2xl p-2 sm:size-full sm:h-[700px] md:p-6 lg:mt-12">
      <div className="flex h-full flex-col">
        <div className="flex flex-col items-center gap-2 sm:flex-row">
          <GeminiIcon className="h-5 w-5 lg:h-6 lg:w-6" />
          <h2 className="text-muted-foreground text-center text-sm leading-tight font-bold lg:text-2xl">
            <span className="text-primary">AI-SDK</span>{" "}
            gemini-2.5-flash-image-preview
          </h2>
        </div>

        <p className="text-muted-foreground mx-auto mt-3 mb-4 max-w-lg pl-3 text-xs leading-5 tracking-tight md:mt-1 lg:pl-0 lg:text-sm lg:leading-snug xl:max-w-2xl">
          Gemini models with image generation capabilities{" "}
          <span className="border-primary/10 bg-muted text-primary rounded-md border px-1 py-0.5">
            gemini-2.5-flash-image-preview
          </span>{" "}
          support image generation. Images are exposed as files in the response.
          You need to enable image output in the provider options using the{" "}
          <span className="border-primary/10 bg-muted text-primary rounded-md border px-1 py-0.5">
            responseModalities
          </span>{" "}
          option.
        </p>
        <div className="flex h-full flex-col">
          <div className="p-2 sm:overflow-y-auto md:p-4">
            {imageData?.base64 &&
              imageData?.uint8Array &&
              !isLoading &&
              !error && (
                <div className="flex justify-center">
                  <GeneratedImage
                    base64={imageData.base64}
                    uint8Array={imageData.uint8Array}
                    mediaType={imageData.mediaType || "image/png"}
                    alt="Generated image"
                    className="aspect-square h-[280px] rounded-lg border md:h-[300px]"
                  />
                </div>
              )}

            {isLoading ? (
              <div className="flex justify-center">
                <div className="bg-background/10 flex aspect-square h-[280px] flex-col items-center justify-center rounded-lg border border-dashed text-center md:h-[300px]">
                  <h3 className="text-muted-foreground text-lg font-semibold lg:text-xl">
                    Generating image...
                  </h3>

                  <p className="text-muted-foreground/80 mb-4 text-[10px] font-light">
                    Average time{" "}
                    <span className="border-border/50 rounded-sm border bg-white/50 px-1 py-0.5 font-mono font-semibold text-blue-600">
                      12 seconds
                    </span>
                  </p>
                  <Countdown
                    className="mx-auto max-w-10"
                    loading={isLoading}
                    onTick={(seconds, ms) => {
                      // Optional callback to track timing
                      console.log(`Timer: ${seconds}s ${ms}ms`)
                    }}
                  />
                </div>
              </div>
            ) : null}

            {/* Error Display */}
            {error && (
              <div className="flex justify-center">
                <div className="border-destructive/30 bg-destructive/5 flex aspect-square h-[280px] flex-col items-center justify-center rounded-lg border text-center md:h-[300px]">
                  <AlertTriangleIcon className="text-destructive mb-2 h-5 w-5" />
                  <h3 className="text-destructive text-lg font-semibold">
                    Error generating image
                  </h3>

                  <p className="text-destructive max-w-[170px] text-sm font-medium tracking-tight text-pretty">
                    {error}
                  </p>
                </div>
              </div>
            )}
          </div>

          <div className="mt-12">
            <Suggestions>
              {imageSuggestions.map((suggestion) => (
                <Suggestion
                  key={suggestion.title}
                  onClick={() => setPrompt(suggestion.prompt)}
                  suggestion={suggestion.prompt}
                >
                  <div>
                    <div className="text-sm font-medium">
                      {suggestion.title}
                    </div>
                  </div>
                </Suggestion>
              ))}
            </Suggestions>

            <PromptInput
              className="relative mt-4 w-full"
              onSubmit={handleSubmit}
            >
              <PromptInputTextarea
                className="pr-12"
                onChange={(e) => setPrompt(e.currentTarget.value)}
                placeholder="Describe your image in detail (style, mood, lighting, composition)..."
                value={prompt}
              />
              <PromptInputSubmit
                className="absolute right-1 bottom-1"
                disabled={!prompt.trim() || isLoading}
                status={isLoading ? "submitted" : "ready"}
              />
            </PromptInput>
          </div>
        </div>
      </div>
    </div>
  )
}

const GeminiIcon = (props: SVGProps<SVGSVGElement>) => (
  <svg
    fill="none"
    height="1em"
    viewBox="0 0 296 298"
    width="1em"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <mask
      height={298}
      id="gemini__a"
      maskUnits="userSpaceOnUse"
      style={{
        maskType: "alpha",
      }}
      width={296}
      x={0}
      y={0}
    >
      <path
        d="M141.201 4.886c2.282-6.17 11.042-6.071 13.184.148l5.985 17.37a184.004 184.004 0 0 0 111.257 113.049l19.304 6.997c6.143 2.227 6.156 10.91.02 13.155l-19.35 7.082a184.001 184.001 0 0 0-109.495 109.385l-7.573 20.629c-2.241 6.105-10.869 6.121-13.133.025l-7.908-21.296a184 184 0 0 0-109.02-108.658l-19.698-7.239c-6.102-2.243-6.118-10.867-.025-13.132l20.083-7.467A183.998 183.998 0 0 0 133.291 26.28l7.91-21.394Z"
        fill="#3186FF"
      />
    </mask>
    <g mask="url(#gemini__a)">
      <g filter="url(#gemini__b)">
        <ellipse cx={163} cy={149} fill="#3689FF" rx={196} ry={159} />
      </g>
      <g filter="url(#gemini__c)">
        <ellipse cx={33.5} cy={142.5} fill="#F6C013" rx={68.5} ry={72.5} />
      </g>
      <g filter="url(#gemini__d)">
        <ellipse cx={19.5} cy={148.5} fill="#F6C013" rx={68.5} ry={72.5} />
      </g>
      <g filter="url(#gemini__e)">
        <path
          d="M194 10.5C172 82.5 65.5 134.333 22.5 135L144-66l50 76.5Z"
          fill="#FA4340"
        />
      </g>
      <g filter="url(#gemini__f)">
        <path
          d="M190.5-12.5C168.5 59.5 62 111.333 19 112L140.5-89l50 76.5Z"
          fill="#FA4340"
        />
      </g>
      <g filter="url(#gemini__g)">
        <path
          d="M194.5 279.5C172.5 207.5 66 155.667 23 155l121.5 201 50-76.5Z"
          fill="#14BB69"
        />
      </g>
      <g filter="url(#gemini__h)">
        <path
          d="M196.5 320.5C174.5 248.5 68 196.667 25 196l121.5 201 50-76.5Z"
          fill="#14BB69"
        />
      </g>
    </g>
    <defs>
      <filter
        colorInterpolationFilters="sRGB"
        filterUnits="userSpaceOnUse"
        height={390}
        id="gemini__b"
        width={464}
        x={-69}
        y={-46}
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
        <feGaussianBlur
          result="effect1_foregroundBlur_69_17998"
          stdDeviation={18}
        />
      </filter>
      <filter
        colorInterpolationFilters="sRGB"
        filterUnits="userSpaceOnUse"
        height={273}
        id="gemini__c"
        width={265}
        x={-99}
        y={6}
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
        <feGaussianBlur
          result="effect1_foregroundBlur_69_17998"
          stdDeviation={32}
        />
      </filter>
      <filter
        colorInterpolationFilters="sRGB"
        filterUnits="userSpaceOnUse"
        height={273}
        id="gemini__d"
        width={265}
        x={-113}
        y={12}
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
        <feGaussianBlur
          result="effect1_foregroundBlur_69_17998"
          stdDeviation={32}
        />
      </filter>
      <filter
        colorInterpolationFilters="sRGB"
        filterUnits="userSpaceOnUse"
        height={329}
        id="gemini__e"
        width={299.5}
        x={-41.5}
        y={-130}
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
        <feGaussianBlur
          result="effect1_foregroundBlur_69_17998"
          stdDeviation={32}
        />
      </filter>
      <filter
        colorInterpolationFilters="sRGB"
        filterUnits="userSpaceOnUse"
        height={329}
        id="gemini__f"
        width={299.5}
        x={-45}
        y={-153}
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
        <feGaussianBlur
          result="effect1_foregroundBlur_69_17998"
          stdDeviation={32}
        />
      </filter>
      <filter
        colorInterpolationFilters="sRGB"
        filterUnits="userSpaceOnUse"
        height={329}
        id="gemini__g"
        width={299.5}
        x={-41}
        y={91}
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
        <feGaussianBlur
          result="effect1_foregroundBlur_69_17998"
          stdDeviation={32}
        />
      </filter>
      <filter
        colorInterpolationFilters="sRGB"
        filterUnits="userSpaceOnUse"
        height={329}
        id="gemini__h"
        width={299.5}
        x={-39}
        y={132}
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
        <feGaussianBlur
          result="effect1_foregroundBlur_69_17998"
          stdDeviation={32}
        />
      </filter>
    </defs>
  </svg>
)
ai-sdk-gemini-flash-image
