"use client"

import React, { useEffect, useRef, useState } from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { AlertCircle, Sparkles, Volume2 } from "lucide-react"
import { motion } from "motion/react"
import { Controller, useForm } from "react-hook-form"
import * as z from "zod"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
} from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"

import { generateSpeechAction, type Voice } from "../lib/actions"
import { AudioPlayer } from "./audio-player"

// Define the form schema with Zod
const formSchema = z.object({
  text: z
    .string()
    .min(1, "Text is required")
    .max(1000, "Text must be less than 1000 characters"),
  voice: z.enum(["alloy", "echo", "fable", "onyx", "nova", "shimmer"] as const),
})

// Type for the form values
type FormValues = z.infer<typeof formSchema>

export function SpeechSandbox() {
  const [isGenerating, setIsGenerating] = useState(false)
  const [audio, setAudio] = useState<{
    src: string | null
    isLoading: boolean
    timestamp: number
    generating: boolean
  }>({
    src: null,
    isLoading: true,
    timestamp: 0,
    generating: false,
  })
  const [error, setError] = useState<string | null>(null)
  const [inputText, setInputText] = useState("")
  const textareaRef = useRef<HTMLTextAreaElement>(null)

  // Track if this is the first render
  const [isFirstRender, setIsFirstRender] = useState(true)
  useEffect(() => {
    setIsFirstRender(false)
  }, [])

  // Initialize the form
  const { control, handleSubmit, setValue, getValues, watch } =
    useForm<FormValues>({
      resolver: zodResolver(formSchema),
      defaultValues: {
        text: "",
        voice: "nova",
      },
    })

  // Watch the text field to display character count
  const watchedText = watch("text")
  const characterCount = watchedText?.length || 0

  // Handle form submission
  async function onSubmit(values: FormValues) {
    setIsGenerating(true)
    setError(null)
    setInputText(values.text)

    if (audio.src) {
      URL.revokeObjectURL(audio.src)
    }

    // Set generating state
    setAudio({
      src: null,
      isLoading: true,
      timestamp: Date.now(),
      generating: true,
    })

    try {
      // Create FormData from the values
      const formData = new FormData()
      formData.append("text", values.text)
      formData.append("voice", values.voice)

      const result = await generateSpeechAction(formData)

      if (result.success && result.audio) {
        const audioBlob = new Blob(
          [Uint8Array.from(atob(result.audio), (c) => c.charCodeAt(0))],
          {
            type: result.mimeType,
          }
        )
        const url = URL.createObjectURL(audioBlob)
        setAudio({
          src: url,
          isLoading: false,
          timestamp: Date.now(),
          generating: false,
        })
      } else if (result.error) {
        setError(
          result.error instanceof Error ? result.error.message : result.error
        )
        setAudio((prev) => ({ ...prev, generating: false }))
      }
    } catch (err) {
      setError("An unexpected error occurred")
      console.error(err)
      setAudio((prev) => ({ ...prev, generating: false }))
    } finally {
      setIsGenerating(false)
    }
  }

  function handleQuickTextSelect(text: string) {
    setValue("text", text, { shouldValidate: true })
    if (textareaRef.current) {
      textareaRef.current.focus()
    }
  }

  function handleDownloadAudio() {
    if (audio.src) {
      const a = document.createElement("a")
      a.href = audio.src
      a.download = `speech-${getValues("voice")}-${Date.now()}.mp3`
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    }
  }

  // Handle keyboard shortcuts
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      // Cmd/Ctrl + Enter to submit the form
      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
        handleSubmit(onSubmit)()
      }
    }

    window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [handleSubmit])

  React.useEffect(() => {
    return () => {
      if (audio.src) {
        URL.revokeObjectURL(audio.src)
      }
    }
  }, [audio.src])

  const voices: {
    value: Voice
    label: string
    description: string
    category: "neutral" | "conversational" | "authoritative"
  }[] = [
    {
      value: "alloy",
      label: "Alloy",
      description: "Neutral and balanced",
      category: "neutral",
    },
    {
      value: "echo",
      label: "Echo",
      description: "Soft and conversational",
      category: "conversational",
    },
    {
      value: "fable",
      label: "Fable",
      description: "Expressive and dynamic",
      category: "conversational",
    },
    {
      value: "onyx",
      label: "Onyx",
      description: "Deep and authoritative",
      category: "authoritative",
    },
    {
      value: "nova",
      label: "Nova",
      description: "Warm and friendly",
      category: "conversational",
    },
    {
      value: "shimmer",
      label: "Shimmer",
      description: "Clear and energetic",
      category: "neutral",
    },
  ]

  const quickTextSamples = [
    "Hello, welcome to the AI Speech Sandbox.",
    "The quick brown fox jumps over the lazy dog.",
    "Today is a beautiful day for generating speech with AI.",
    "Artificial intelligence is transforming how we interact with technology.",
    "Can you hear me clearly? This is a test of the TTS system.",
  ]
  // Framer Motion variants for skeleton loading
  const skeletonVariants = {
    pulse: {
      opacity: [0.5, 0.8, 0.5],
      transition: {
        duration: 1.5,
        repeat: Number.POSITIVE_INFINITY,
        ease: "easeInOut",
      },
    },
  }

  const progressVariants = {
    loading: {
      x: ["-100%", "100%"],
      transition: {
        duration: 1.5,
        repeat: Number.POSITIVE_INFINITY,
        ease: "easeInOut",
      },
    },
  }

  return (
    <div
      className={cn(
        "mx-auto w-full max-w-2xl transition-all duration-500",
        isFirstRender ? "translate-y-2 opacity-0" : "translate-y-0 opacity-100"
      )}
    >
      <form className="space-y-8" onSubmit={handleSubmit(onSubmit)}>
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <h2 className="text-sm font-medium text-zinc-900">Text</h2>
              <span className="text-xs text-zinc-500">
                ({characterCount}/1000)
              </span>
            </div>
            <div className="flex items-center gap-3">
              <div className="flex gap-1.5">
                {quickTextSamples.map((sample, index) => (
                  <Tooltip key={index}>
                    <TooltipTrigger asChild>
                      <button
                        aria-label={`Quick text ${index + 1}`}
                        className="flex h-6 w-6 items-center justify-center rounded-full bg-zinc-100 text-xs font-medium text-zinc-600 transition-colors hover:bg-zinc-200 hover:text-zinc-900"
                        onClick={() => handleQuickTextSelect(sample)}
                        type="button"
                      >
                        {index + 1}
                      </button>
                    </TooltipTrigger>
                    <TooltipContent className="max-w-[200px]" side="bottom">
                      <p className="truncate text-xs">{sample}</p>
                    </TooltipContent>
                  </Tooltip>
                ))}
              </div>
            </div>
          </div>

          <Controller
            control={control}
            name="text"
            render={({ field, fieldState }) => (
              <div className="space-y-1.5">
                <div className="relative">
                  <Textarea
                    className={cn(
                      "min-h-32 resize-none rounded-md border-zinc-200 text-base leading-relaxed transition-all duration-200 focus-visible:ring-black",
                      fieldState.error
                        ? "border-red-300 focus-visible:ring-red-500"
                        : ""
                    )}
                    placeholder="Enter text to convert to speech..."
                    ref={(e) => {
                      field.ref(e)
                      textareaRef.current = e
                    }}
                    {...field}
                  />
                  {characterCount > 0 && (
                    <div className="absolute right-2 bottom-2">
                      <div
                        className={cn(
                          "flex h-8 w-8 items-center justify-center rounded-full text-xs font-medium transition-colors",
                          characterCount > 900
                            ? "bg-amber-100 text-amber-700"
                            : "bg-zinc-100 text-zinc-500"
                        )}
                      >
                        {1000 - characterCount}
                      </div>
                    </div>
                  )}
                </div>
                {fieldState.error && (
                  <p className="pl-1 text-xs text-red-500">
                    {fieldState.error.message}
                  </p>
                )}
              </div>
            )}
          />
        </div>

        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
          <div className="space-y-3">
            <h2 className="text-sm font-medium text-zinc-900">Voice</h2>
            <Controller
              control={control}
              name="voice"
              render={({ field }) => (
                <div className="relative">
                  <Select onValueChange={field.onChange} value={field.value}>
                    <SelectTrigger
                      aria-label="Select voice"
                      className="flex h-10 w-full items-center justify-between rounded-md border-zinc-200 pr-8 pl-3 focus:ring-black"
                    >
                      <div className="flex items-center gap-2 truncate">
                        <div className="h-1.5 w-1.5 flex-shrink-0 rounded-full bg-emerald-500" />
                        <span className="truncate">
                          {voices.find((v) => v.value === field.value)?.label ||
                            "Select a voice"}
                        </span>
                      </div>
                    </SelectTrigger>
                    <SelectContent
                      className="max-h-[280px] overflow-y-auto rounded-md border border-zinc-200 p-1 shadow-lg"
                      position="popper"
                      sideOffset={4}
                    >
                      {["neutral", "conversational", "authoritative"].map(
                        (category) => (
                          <div className="mb-1 last:mb-0" key={category}>
                            <div className="px-2 py-1.5 text-xs font-medium text-zinc-500 capitalize">
                              {category}
                            </div>
                            {voices
                              .filter((voice) => voice.category === category)
                              .map((voice) => (
                                <SelectItem
                                  className="cursor-pointer rounded-sm px-2 py-2 data-[highlighted]:bg-zinc-100 data-[state=checked]:bg-zinc-50 data-[state=checked]:font-medium"
                                  key={voice.value}
                                  value={voice.value}
                                >
                                  <div className="flex items-center gap-2">
                                    <div
                                      className={cn(
                                        "h-1.5 w-1.5 flex-shrink-0 rounded-full",
                                        field.value === voice.value
                                          ? "bg-emerald-500"
                                          : "bg-zinc-300"
                                      )}
                                    />
                                    <div className="flex flex-col">
                                      <span className="text-sm">
                                        {voice.label}
                                      </span>
                                      <span className="mt-0.5 text-xs text-zinc-500">
                                        {voice.description}
                                      </span>
                                    </div>
                                  </div>
                                </SelectItem>
                              ))}
                          </div>
                        )
                      )}
                    </SelectContent>
                  </Select>
                </div>
              )}
            />

            {/* Voice description */}
            <div className="text-xs leading-relaxed text-zinc-500">
              {voices.find((v) => v.value === getValues("voice"))
                ?.description || "Select a voice to see its description"}
            </div>
          </div>

          <div className="space-y-3">
            <h2 className="text-sm font-medium text-zinc-900">Generate</h2>
            <Button
              className="h-10 w-full rounded-md bg-black text-white shadow-[0_1px_2px_rgba(0,0,0,0.05)] transition-all duration-200 hover:bg-zinc-800"
              disabled={isGenerating}
              type="submit"
            >
              {isGenerating ? (
                "Generating"
              ) : (
                <>
                  <Volume2 className="mr-2 h-4 w-4" />
                  Generate speech
                </>
              )}
            </Button>
            <div className="text-xs leading-relaxed text-zinc-500">
              Press{" "}
              <kbd className="rounded border border-zinc-200 bg-zinc-100 px-1.5 py-0.5 font-mono text-xs text-zinc-600">
                ⌘ + Enter
              </kbd>{" "}
              to generate speech
            </div>
          </div>
        </div>
      </form>

      {error && (
        <div className="fade-in slide-in-from-top-2 animate-in mt-6 flex items-center gap-2 rounded-md border border-red-100 bg-red-50 p-3 text-sm text-red-600 duration-200">
          <AlertCircle className="h-4 w-4 flex-shrink-0" />
          <p>{error}</p>
        </div>
      )}

      {(audio.generating || audio.src) && (
        <div className="mt-8 space-y-3 transition-all duration-300">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <h2 className="text-sm font-medium text-zinc-900">
                Generated audio
              </h2>
              <div className="flex items-center gap-1 text-xs text-zinc-500">
                <span className="inline-block h-1.5 w-1.5 rounded-full bg-emerald-500" />
                {getValues("voice")}
              </div>
            </div>
            {inputText && (
              <span className="max-w-[60%] truncate text-xs text-zinc-500">
                "
                {inputText.length > 40
                  ? inputText.substring(0, 40) + "..."
                  : inputText}
                "
              </span>
            )}
          </div>

          {audio.generating ? (
            <motion.div
              animate={{ opacity: 1 }}
              className="space-y-3 rounded-md border border-zinc-200 bg-white p-4"
              initial={{ opacity: 0.8 }}
              transition={{ duration: 0.3 }}
            >
              {/* Top controls skeleton */}
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  {/* Play button skeleton */}
                  <motion.div
                    animate="pulse"
                    className="h-8 w-8 rounded-full bg-zinc-100"
                    variants={skeletonVariants}
                  />

                  {/* Time display skeleton */}
                  <div className="flex items-center gap-1.5">
                    <motion.div
                      animate="pulse"
                      className="h-4 w-4 rounded bg-zinc-100"
                      variants={skeletonVariants}
                    />
                    <motion.div
                      animate="pulse"
                      className="h-4 w-16 rounded bg-zinc-100"
                      variants={skeletonVariants}
                    />
                    <motion.div
                      animate="pulse"
                      className="h-4 w-4 rounded bg-zinc-100"
                      variants={skeletonVariants}
                    />
                  </div>
                </div>

                {/* Right controls skeleton */}
                <div className="flex items-center gap-2">
                  <motion.div
                    animate="pulse"
                    className="h-4 w-8 rounded bg-zinc-100"
                    variants={skeletonVariants}
                  />
                  <motion.div
                    animate="pulse"
                    className="h-4 w-4 rounded bg-zinc-100"
                    variants={skeletonVariants}
                  />
                  <motion.div
                    animate="pulse"
                    className="h-4 w-4 rounded bg-zinc-100"
                    variants={skeletonVariants}
                  />
                </div>
              </div>

              {/* Progress bar skeleton */}
              <div className="relative h-1.5 w-full overflow-hidden rounded-full bg-zinc-100">
                <motion.div
                  animate="loading"
                  className="absolute h-full w-full bg-zinc-200"
                  style={{ originX: 0 }}
                  variants={progressVariants}
                />
              </div>
            </motion.div>
          ) : audio.src ? (
            <AudioPlayer
              key={audio.timestamp} // Force re-render on new audio
              onDownload={handleDownloadAudio}
              src={audio.src}
            />
          ) : null}
        </div>
      )}

      <div className="mt-12 flex items-center justify-between border-t border-zinc-100 pt-6 text-xs text-zinc-400">
        <div className="flex items-center gap-1">
          <Sparkles className="h-3 w-3" />
          <span>Powered by Vercel AI SDK</span>
        </div>
        <div>OpenAI TTS-1</div>
      </div>
    </div>
  )
}
ai-generate-audio
