"use client"

import {
  useRef,
  useState,
  useCallback,
  useEffect,
  type ChangeEvent,
  type KeyboardEvent,
  type ClipboardEvent,
} from "react"
import { Plus, X, ArrowUp, Square } from "lucide-react"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

export interface AttachedFile {
  id: string
  file: File
  preview?: string
}

interface PromptInputProps {
  value?: string
  onChange?: (value: string) => void
  onSubmit?: (value: string, files?: AttachedFile[]) => void
  onStop?: () => void
  isLoading?: boolean
  placeholder?: string
  placeholders?: string[]
  disabled?: boolean
  allowAttachments?: boolean
  acceptedFileTypes?: string
  maxLength?: number
  className?: string
}

const MIN_HEIGHT = 32
const MAX_HEIGHT = 160

const SUPPORTED_IMAGE_TYPES = [
  "image/png",
  "image/jpeg",
  "image/jpg",
  "image/webp",
  "image/gif",
]

function useTypingAnimation(
  placeholders: string[],
  {
    typingSpeed = 70,
    deletingSpeed = 35,
    pauseDuration = 2500,
  }: {
    typingSpeed?: number
    deletingSpeed?: number
    pauseDuration?: number
  } = {}
) {
  const [displayText, setDisplayText] = useState("")
  const [placeholderIndex, setPlaceholderIndex] = useState(0)
  const [charIndex, setCharIndex] = useState(0)
  const [isDeleting, setIsDeleting] = useState(false)
  const [isPaused, setIsPaused] = useState(false)

  useEffect(() => {
    if (placeholders.length === 0) return

    const currentPlaceholder = placeholders[placeholderIndex]

    if (isPaused) {
      const pauseTimeout = setTimeout(() => {
        setIsPaused(false)
        setIsDeleting(true)
      }, pauseDuration)
      return () => clearTimeout(pauseTimeout)
    }

    const timeout = setTimeout(
      () => {
        if (!isDeleting) {
          if (charIndex < currentPlaceholder.length) {
            setDisplayText(currentPlaceholder.slice(0, charIndex + 1))
            setCharIndex(charIndex + 1)
          } else {
            setIsPaused(true)
          }
        } else {
          if (charIndex > 0) {
            setDisplayText(currentPlaceholder.slice(0, charIndex - 1))
            setCharIndex(charIndex - 1)
          } else {
            setIsDeleting(false)
            setPlaceholderIndex((placeholderIndex + 1) % placeholders.length)
          }
        }
      },
      isDeleting ? deletingSpeed : typingSpeed
    )

    return () => clearTimeout(timeout)
  }, [
    charIndex,
    isDeleting,
    isPaused,
    placeholderIndex,
    placeholders,
    typingSpeed,
    deletingSpeed,
    pauseDuration,
  ])

  return displayText
}

export function PromptInput({
  value: controlledValue,
  onChange,
  onSubmit,
  onStop,
  isLoading = false,
  placeholder = "Type a message...",
  placeholders,
  disabled = false,
  allowAttachments = false,
  acceptedFileTypes = "image/*",
  maxLength,
  className,
}: PromptInputProps) {
  const textareaRef = useRef<HTMLTextAreaElement>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)

  const [internalValue, setInternalValue] = useState("")
  const [height, setHeight] = useState(MIN_HEIGHT)
  const [attachedFiles, setAttachedFiles] = useState<AttachedFile[]>([])

  const value = controlledValue ?? internalValue
  const setValue = useCallback(
    (v: string) => {
      if (onChange) {
        onChange(v)
      } else {
        setInternalValue(v)
      }
    },
    [onChange]
  )

  const maxHeight = MAX_HEIGHT

  const animatedPlaceholder = useTypingAnimation(placeholders || [])
  const hasAnimatedPlaceholder = placeholders && placeholders.length > 0
  const showAnimatedPlaceholder =
    hasAnimatedPlaceholder && !value && attachedFiles.length === 0
  const finalPlaceholder = hasAnimatedPlaceholder ? "" : placeholder

  useEffect(() => {
    if (!value && textareaRef.current) {
      textareaRef.current.style.height = `${MIN_HEIGHT}px`
      setHeight(MIN_HEIGHT)
    }
  }, [value])

  const createFilePreview = useCallback(async (file: File): Promise<string | undefined> => {
    if (!file.type.startsWith("image/")) return undefined
    return new Promise((resolve) => {
      const reader = new FileReader()
      reader.onload = () => resolve(reader.result as string)
      reader.onerror = () => resolve(undefined)
      reader.readAsDataURL(file)
    })
  }, [])

  const addFile = useCallback(
    async (file: File) => {
      if (!SUPPORTED_IMAGE_TYPES.includes(file.type)) return

      const preview = await createFilePreview(file)
      const newFile: AttachedFile = {
        id: `file-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`,
        file,
        preview,
      }
      setAttachedFiles((prev) => [...prev, newFile])
    },
    [createFilePreview]
  )

  const removeFile = useCallback((fileId: string) => {
    setAttachedFiles((prev) => prev.filter((f) => f.id !== fileId))
  }, [])

  const handleFileChange = useCallback(
    (e: ChangeEvent<HTMLInputElement>) => {
      const files = e.target.files
      if (files) {
        Array.from(files).forEach(addFile)
      }
      if (fileInputRef.current) {
        fileInputRef.current.value = ""
      }
    },
    [addFile]
  )

  const handlePaste = useCallback(
    (e: ClipboardEvent<HTMLTextAreaElement>) => {
      if (!allowAttachments) return

      const items = e.clipboardData?.items
      if (!items) return

      for (const item of Array.from(items)) {
        if (item.type.startsWith("image/")) {
          e.preventDefault()
          const file = item.getAsFile()
          if (file) {
            addFile(file)
          }
          break
        }
      }
    },
    [allowAttachments, addFile]
  )

  const handleChange = useCallback(
    (e: ChangeEvent<HTMLTextAreaElement>) => {
      const newValue = e.target.value
      if (maxLength && newValue.length > maxLength) return
      setValue(newValue)

      requestAnimationFrame(() => {
        const textarea = textareaRef.current
        if (textarea) {
          textarea.style.height = "0px"
          const scrollHeight = textarea.scrollHeight
          const newHeight = Math.max(MIN_HEIGHT, Math.min(scrollHeight, maxHeight))
          textarea.style.height = `${newHeight}px`
          setHeight(newHeight)
        }
      })
    },
    [setValue, maxHeight, maxLength]
  )

  const handleSubmit = useCallback(() => {
    if ((!value.trim() && attachedFiles.length === 0) || isLoading || disabled)
      return

    onSubmit?.(value.trim(), attachedFiles.length > 0 ? attachedFiles : undefined)
    setValue("")
    setAttachedFiles([])
  }, [value, attachedFiles, isLoading, disabled, onSubmit, setValue])

  const handleKeyDown = useCallback(
    (e: KeyboardEvent<HTMLTextAreaElement>) => {
      if (e.key === "Enter" && !e.shiftKey) {
        e.preventDefault()
        handleSubmit()
      }
    },
    [handleSubmit]
  )

  return (
    <div
      className={cn(
        "w-full border border-border bg-background transition-colors duration-150",
        "rounded-3xl pt-4 px-3 pb-3",
        className
      )}
    >
      <div className="flex flex-col">
        {attachedFiles.length > 0 && (
          <div className="flex flex-wrap gap-2 mb-3">
            {attachedFiles.map((file) => (
              <div key={file.id} className="relative group">
                <div className="rounded-lg overflow-hidden border border-border bg-muted w-16 h-16">
                  {file.preview ? (
                    <img
                      src={file.preview}
                      alt={file.file.name}
                      className="w-full h-full object-cover"
                    />
                  ) : (
                    <div className="w-full h-full flex items-center justify-center text-muted-foreground text-xs">
                      {file.file.name.slice(0, 4)}
                    </div>
                  )}
                </div>
                <button
                  type="button"
                  onClick={() => removeFile(file.id)}
                  className={cn(
                    "absolute -top-1.5 -right-1.5 rounded-full",
                    "bg-foreground text-background",
                    "flex items-center justify-center w-5 h-5",
                    "opacity-0 group-hover:opacity-100 transition-opacity",
                    "hover:bg-destructive hover:text-white"
                  )}
                >
                  <X className="w-3 h-3" />
                </button>
              </div>
            ))}
          </div>
        )}

        <div className="w-full relative mb-3">
          {showAnimatedPlaceholder && (
            <div className="absolute inset-0 px-1 pointer-events-none text-sm text-muted-foreground leading-6 flex items-start">
              <span>{animatedPlaceholder}</span>
              <span className="animate-pulse ml-[1px]">|</span>
            </div>
          )}
          <textarea
            ref={textareaRef}
            value={value}
            onChange={handleChange}
            onKeyDown={handleKeyDown}
            onPaste={handlePaste}
            placeholder={
              attachedFiles.length > 0 ? "Add a message..." : finalPlaceholder
            }
            disabled={disabled || isLoading}
            className={cn(
              "w-full bg-transparent outline-none px-1 block",
              "text-sm text-foreground leading-6",
              "placeholder:text-muted-foreground",
              "disabled:opacity-50 disabled:cursor-not-allowed",
              "resize-none"
            )}
            style={{
              height: height,
              minHeight: MIN_HEIGHT,
              maxHeight: maxHeight,
              overflow: height >= maxHeight ? "auto" : "hidden",
            }}
          />
        </div>

        <input
          ref={fileInputRef}
          type="file"
          accept={acceptedFileTypes}
          multiple
          onChange={handleFileChange}
          className="hidden"
        />

        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            {allowAttachments && (
              <button
                type="button"
                onClick={() => fileInputRef.current?.click()}
                disabled={isLoading || disabled}
                className={cn(
                  "flex items-center justify-center h-8 w-8 rounded-xl",
                  "text-muted-foreground hover:text-foreground",
                  "hover:bg-muted transition-colors duration-150",
                  "disabled:opacity-50 disabled:cursor-not-allowed"
                )}
                title="Add file"
              >
                <Plus className="size-4" />
              </button>
            )}

            {maxLength && (
              <span className="text-xs text-muted-foreground">
                {value.length}/{maxLength}
              </span>
            )}
          </div>

          {isLoading ? (
            <Button
              type="button"
              onClick={onStop}
              variant="destructive"
              size="icon-sm"
              className="rounded-xl"
            >
              <Square className="h-3 w-3 fill-current" />
            </Button>
          ) : (
            <Button
              type="button"
              onClick={handleSubmit}
              size="icon-sm"
              disabled={
                (!value.trim() && attachedFiles.length === 0) || disabled
              }
              className="rounded-xl"
            >
              <ArrowUp className="h-4 w-4" />
            </Button>
          )}
        </div>
      </div>
    </div>
  )
}
UI Components

PromptInput
