"use client"

import { useState, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { useToast } from "@/components/ui/use-toast"
import { submitContactForm } from "@/app/actions/contact"
import { useFormStatus } from "react-dom"
import { motion } from "framer-motion"

function SubmitButton() {
  const { pending } = useFormStatus()

  return (
    <Button
      type="submit"
      className="w-full bg-primary-900 hover:bg-primary-800 dark:bg-primary-700 dark:hover:bg-primary-600 cursor-not-allowed"
      disabled={true || pending}
    >
      {pending ? "Invio..." : "Invia messaggio (in arrivo)"}
    </Button>
  )
}

export function ContactForm() {
  const { toast } = useToast()
  const formRef = useRef<HTMLFormElement>(null)
  const [formState, setFormState] = useState<{
    success?: boolean
    message?: string
  }>({})

  async function handleSubmit(formData: FormData) {
    // Reset form state
    setFormState({})

    // Submit the form
    const result = await submitContactForm(formData)

    // Update form state
    setFormState(result)

    // Show toast notification
    toast({
      title: result.success ? "Messaggio inviato!" : "Errore",
      description: result.message,
      variant: result.success ? "default" : "destructive",
    })

    // Reset form if successful
    if (result.success && formRef.current) {
      formRef.current.reset()
    }
  }

  return (
    <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
      <form
        ref={formRef}
        action={handleSubmit}
        className="space-y-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border dark:border-gray-700"
      >
        {formState.message && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            transition={{ duration: 0.3 }}
            className={`p-3 rounded-md ${
              formState.success
                ? "bg-green-50 text-green-800 dark:bg-green-900/20 dark:text-green-300"
                : "bg-red-50 text-red-800 dark:bg-red-900/20 dark:text-red-300"
            }`}
          >
            {formState.message}
          </motion.div>
        )}

        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          <div className="space-y-2">
            <Label htmlFor="firstName">Nome</Label>
            <Input id="firstName" name="firstName" required />
          </div>
          <div className="space-y-2">
            <Label htmlFor="lastName">Cognome</Label>
            <Input id="lastName" name="lastName" required />
          </div>
        </div>
        <div className="space-y-2">
          <Label htmlFor="email">Email</Label>
          <Input id="email" name="email" type="email" required />
        </div>
        <div className="space-y-2">
          <Label htmlFor="company">Azienda</Label>
          <Input id="company" name="company" />
        </div>
        <div className="space-y-2">
          <Label htmlFor="message">Messaggio</Label>
          <Textarea id="message" name="message" required className="min-h-[120px]" />
        </div>
        <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
          <SubmitButton />
        </motion.div>
      </form>
    </motion.div>
  )
}