"use client";

import React, { useState, useEffect, useRef } from "react";
import { motion } from "motion/react";
import * as z from "zod";

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm, Controller } from "react-hook-form";
import { Volume2, AlertCircle, Sparkles } from "lucide-react";

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

import { cn } from "@/lib/utils";

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

// 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(
        "w-full max-w-2xl mx-auto transition-all duration-500",
        isFirstRender ? "opacity-0 translate-y-2" : "opacity-100 translate-y-0"
      )}
    >
      <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
        <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
                        type="button"
                        onClick={() => handleQuickTextSelect(sample)}
                        className="w-6 h-6 rounded-full bg-zinc-100 text-xs font-medium text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900 transition-colors flex items-center justify-center"
                        aria-label={`Quick text ${index + 1}`}
                      >
                        {index + 1}
                      </button>
                    </TooltipTrigger>
                    <TooltipContent side="bottom" className="max-w-[200px]">
                      <p className="text-xs truncate">{sample}</p>
                    </TooltipContent>
                  </Tooltip>
                ))}
              </div>
            </div>
          </div>

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

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

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

      {error && (
        <div className="mt-6 p-3 border border-red-100 bg-red-50 rounded-md flex items-center gap-2 text-sm text-red-600 animate-in fade-in slide-in-from-top-2 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 justify-between items-center">
            <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 w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                {getValues("voice")}
              </div>
            </div>
            {inputText && (
              <span className="text-xs text-zinc-500 truncate max-w-[60%]">
                "
                {inputText.length > 40
                  ? inputText.substring(0, 40) + "..."
                  : inputText}
                "
              </span>
            )}
          </div>

          {audio.generating ? (
            <motion.div
              className="rounded-md border border-zinc-200 bg-white p-4 space-y-3"
              initial={{ opacity: 0.8 }}
              animate={{ opacity: 1 }}
              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
                    className="w-8 h-8 rounded-full bg-zinc-100"
                    variants={skeletonVariants}
                    animate="pulse"
                  />

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

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

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

      <div className="mt-12 pt-6 border-t border-zinc-100 flex items-center justify-between 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>
  );
}