"use client"

import type React from "react"
import { useRef, useState } from "react"
import { FileIcon, UploadIcon, XIcon } from "lucide-react"
import { AnimatePresence, motion } from "motion/react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Response } from "@/components/ai-elements/response"

import { LoadingDots } from "../components/loading-dots"
import { useFileDrop } from "../hooks/use-file-drop"
import { analyzePdf } from "../lib/actions"

export function PdfContainer() {
  const [file, setFile] = useState<File | null>(null)
  const [question, setQuestion] = useState("What is this document about?")
  const [response, setResponse] = useState("")
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<{ message: string; type?: string } | null>(
    null
  )
  const [success, setSuccess] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)

  const { isDragging, dropRef } = useFileDrop({
    onDrop: (files) => {
      if (files[0]) {
        setFile(files[0])
        setError(null)
        setSuccess(true)

        // Reset success state after animation completes
        setTimeout(() => setSuccess(false), 2000)
      }
    },
  })

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      const file = e.target.files[0]
      if (file.size <= 1 * 1024 * 1024) {
        setFile(file)
        setError(null)
        setSuccess(true)

        // Reset success state after animation completes
        setTimeout(() => setSuccess(false), 2000)
      } else {
        setError({ message: "File size exceeds 1MB limit" })
      }
    }
  }

  const handleRemoveFile = () => {
    setFile(null)
    if (fileInputRef.current) {
      fileInputRef.current.value = ""
    }
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    if (!file) {
      setError({ message: "Please select a PDF file" })
      return
    }

    try {
      setLoading(true)
      setResponse("")
      setError(null)

      // Convert file to ArrayBuffer
      const buffer = await file.arrayBuffer()

      // Call the server action
      const result = await analyzePdf({
        pdfBuffer: buffer,
        question,
      })

      if (typeof result === "object" && result !== null && "error" in result) {
        if (result.error.message.includes("Rate limit exceeded")) {
          setError({ message: result.error.message, type: "rateLimit" })
        } else {
          setError({ message: result.error.message })
        }
      } else {
        setResponse(result as string)
      }
    } catch (err) {
      setError({ message: "An error occurred while analyzing the PDF" })
      console.error(err)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="flex w-full flex-col items-center justify-center">
      <motion.div
        animate={{ opacity: 1, y: 0 }}
        className="w-full max-w-2xl"
        initial={{ opacity: 0, y: 10 }}
        transition={{ duration: 0.4, ease: [0.23, 1, 0.32, 1] }}
      >
        <Card className="bg-card w-full overflow-hidden border-none shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.05),_0px_1px_1px_0px_rgba(255,_252,_240,_0.5)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.1)_inset,_0px_0px_1px_0px_rgba(28,_27,_26,_0.5)]">
          <form className="space-y-5 p-6" onSubmit={handleSubmit}>
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <Label
                  className="text-foreground text-xs font-medium"
                  htmlFor="pdf-upload"
                >
                  PDF Document
                </Label>
                {file && (
                  <button
                    className="text-muted-foreground hover:text-foreground text-xs transition-colors"
                    onClick={handleRemoveFile}
                    type="button"
                  >
                    Remove
                  </button>
                )}
              </div>

              {file ? (
                <motion.div
                  animate={{ opacity: 1, y: 0 }}
                  className={cn(
                    "border-border/40 flex items-center rounded-md border p-3",
                    success
                      ? "border-green-500/30 bg-green-50 dark:bg-green-950/20"
                      : "bg-muted/30"
                  )}
                  initial={{ opacity: 0, y: 5 }}
                >
                  <div className="bg-primary/10 mr-3 flex h-8 w-8 items-center justify-center rounded-md">
                    <FileIcon className="text-primary h-4 w-4" />
                  </div>
                  <div className="min-w-0 flex-1">
                    <p
                      className="text-foreground max-w-[180px] truncate text-xs font-medium"
                      title={file.name}
                    >
                      {file.name}
                    </p>
                    <p className="text-muted-foreground text-xs">
                      {(file.size / 1024).toFixed(1)} KB
                    </p>
                  </div>
                  <button
                    className="hover:bg-muted/60 ml-2 rounded-full p-1 transition-colors"
                    onClick={handleRemoveFile}
                    type="button"
                  >
                    <XIcon className="text-muted-foreground h-3.5 w-3.5" />
                  </button>
                </motion.div>
              ) : (
                <div
                  className={cn(
                    "group relative cursor-pointer",
                    isDragging &&
                      "ring-primary/30 ring-offset-background ring-2 ring-offset-2"
                  )}
                  onClick={() => fileInputRef.current?.click()}
                  ref={dropRef}
                >
                  <div
                    className={cn(
                      "border-border/60 bg-muted/40 flex h-24 flex-col items-center justify-center rounded-md border border-dashed px-4 py-5 text-center transition-all",
                      isDragging
                        ? "border-primary/50 bg-primary/5"
                        : "hover:bg-muted/60"
                    )}
                  >
                    <UploadIcon className="text-muted-foreground mb-2 h-5 w-5" />
                    <div className="text-muted-foreground text-xs">
                      <span className="text-foreground font-medium">
                        Click to upload
                      </span>{" "}
                      or drag and drop
                    </div>
                    <p className="text-muted-foreground/70 mt-1 text-xs">
                      PDF (max 1MB)
                    </p>
                  </div>
                  <Input
                    accept="application/pdf"
                    className="sr-only"
                    id="pdf-upload"
                    onChange={handleFileChange}
                    ref={fileInputRef}
                    type="file"
                  />
                </div>
              )}
            </div>

            <div className="space-y-3">
              <Label
                className="text-foreground text-xs font-medium"
                htmlFor="question"
              >
                Question
              </Label>
              <Textarea
                className="border-border/40 bg-muted/30 focus-visible:ring-primary/30 min-h-[40px] resize-none text-sm"
                id="question"
                onChange={(e) => setQuestion(e.target.value)}
                placeholder="What would you like to know about this document?"
                rows={2}
                value={question}
              />
            </div>

            <AnimatePresence>
              {error && (
                <motion.div
                  animate={{ opacity: 1, height: "auto" }}
                  className="overflow-hidden"
                  exit={{ opacity: 0, height: 0 }}
                  initial={{ opacity: 0, height: 0 }}
                >
                  <div
                    className={`rounded-md px-3 py-2 ${
                      error.type === "rateLimit"
                        ? "border border-yellow-200 bg-yellow-50 dark:border-yellow-900/30 dark:bg-yellow-950/20"
                        : "border border-red-200 bg-red-50 dark:border-red-900/30 dark:bg-red-950/20"
                    }`}
                  >
                    <p
                      className={`text-xs ${
                        error.type === "rateLimit"
                          ? "text-yellow-600 dark:text-yellow-400"
                          : "text-red-600 dark:text-red-400"
                      }`}
                    >
                      {error.message}
                    </p>
                  </div>
                </motion.div>
              )}
            </AnimatePresence>

            <Button
              className="h-9 w-full text-sm font-medium"
              disabled={loading || !file}
              type="submit"
            >
              {loading ? (
                <span className="flex items-center">
                  <span className="mr-2">Analyzing</span>
                  <LoadingDots />
                </span>
              ) : (
                "Analyze PDF"
              )}
            </Button>
          </form>

          <AnimatePresence>
            {response && (
              <motion.div
                animate={{ opacity: 1, height: "auto" }}
                className="overflow-hidden"
                exit={{ opacity: 0, height: 0 }}
                initial={{ opacity: 0, height: 0 }}
                transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
              >
                <div className="border-border/30 bg-muted/20 border-t px-6 py-5">
                  <h2 className="text-foreground text-sm font-medium">
                    Response
                  </h2>
                  <div className="bg-card shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.05),_0px_1px_1px_0px_rgba(255,_252,_240,_0.5)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.1)_inset,_0px_0px_1px_0px_rgba(28,_27,_26,_0.5) space-y-6 rounded-md p-4">
                    <Response>{response}</Response>
                  </div>
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </Card>
      </motion.div>
    </div>
  )
}
ai-pdf-ingest
