import type { ControlType, PropertyControls } from "framer"
import { motion } from "framer-motion"
import { useState, FormEvent } from "react"

interface FormField {
    id: string
    label: string
    type: "text" | "email" | "checkbox" | "radio" | "select" | "textarea"
    required: boolean
    placeholder?: string
    options?: string[]
}

interface Props {
    webhookUrl: string
    redirectUrl?: string
    fields: FormField[]
    submitButtonText: string
    successMessage: string
    errorMessage: string
}

export default function ContactForm({ 
    webhookUrl = "https://",
    redirectUrl = "",
    fields = [
        {
            id: "fullName",
            label: "Full Name",
            type: "text",
            required: true,
            placeholder: "Enter your full name"
        },
        {
            id: "email",
            label: "Email",
            type: "email",
            required: true,
            placeholder: "Enter your email"
        },
        {
            id: "services",
            label: "What services are you interested in?",
            type: "checkbox",
            required: true,
            options: ["Marketing Assets", "Display Ads", "Video Ads", "Video", "Something else"]
        },
        {
            id: "companySize",
            label: "Company Size",
            type: "radio",
            required: true,
            options: ["0-50", "50-100", "100-500"]
        }
    ],
    submitButtonText = "Submit",
    successMessage = "Form submitted successfully!",
    errorMessage = "There was an error submitting the form. Please try again."
}: Props) {
    const [formData, setFormData] = useState<Record<string, any>>({})
    const [isSubmitting, setIsSubmitting] = useState(false)
    const [submitStatus, setSubmitStatus] = useState<"idle" | "success" | "error">("idle")

    const handleChange = (fieldId: string, value: any) => {
        setFormData(prev => ({
            ...prev,
            [fieldId]: value
        }))
    }

    const handleSubmit = async (e: FormEvent) => {
        e.preventDefault()
        setIsSubmitting(true)
        
        try {
            const response = await fetch(webhookUrl, {
                method: "POST",
                mode: "no-cors",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(formData),
            })

            setSubmitStatus("success")
            setFormData({})
            
            if (redirectUrl) {
                setTimeout(() => {
                    window.location.href = redirectUrl
                }, 1500)
            }
        } catch (error) {
            setSubmitStatus("error")
            console.error("Form submission error:", error)
        } finally {
            setIsSubmitting(false)
        }
    }

    const renderField = (field: FormField) => {
        const commonLabelStyles = {
            display: "block",
            fontSize: "0.875rem",
            fontWeight: 500,
            marginBottom: "0.5rem",
        }

        const commonInputStyles = {
            width: "100%",
            padding: "0.5rem",
            border: "1px solid #e5e7eb",
            borderRadius: "0.25rem",
        }

        const pillStyles = {
            display: "inline-flex",
            alignItems: "center",
            padding: "0.5rem 1rem",
            borderRadius: "9999px",
            border: "1px solid #e5e7eb",
            cursor: "pointer",
            transition: "all 0.2s ease",
        }

        switch (field.type) {
            case "checkbox":
                return (
                    <div>
                        <label style={commonLabelStyles}>{field.label}</label>
                        <div style={{ display: "flex", flexWrap: "wrap", gap: "0.75rem" }}>
                            {field.options?.map(option => {
                                const isChecked = Array.isArray(formData[field.id]) && formData[field.id]?.includes(option)
                                const currentValues = formData[field.id] || []
                                return (
                                    <label
                                        key={option}
                                        style={{
                                            ...pillStyles,
                                            backgroundColor: isChecked ? "#000" : "transparent",
                                            color: isChecked ? "#fff" : "#000",
                                        }}
                                    >
                                        <input
                                            type="checkbox"
                                            checked={isChecked}
                                            onChange={(e) => {
                                                const newValues = e.target.checked
                                                    ? [...currentValues, option]
                                                    : currentValues.filter((v: string) => v !== option)
                                                handleChange(field.id, newValues)
                                            }}
                                            style={{ display: "none" }}
                                            required={field.required && currentValues.length === 0}
                                        />
                                        <span>{option}</span>
                                    </label>
                                )
                            })}
                        </div>
                    </div>
                )

            case "radio":
                return (
                    <div>
                        <label style={commonLabelStyles}>{field.label}</label>
                        <div style={{ display: "flex", flexWrap: "wrap", gap: "0.75rem" }}>
                            {field.options?.map(option => (
                                <label
                                    key={option}
                                    style={{
                                        ...pillStyles,
                                        backgroundColor: formData[field.id] === option ? "#000" : "transparent",
                                        color: formData[field.id] === option ? "#fff" : "#000",
                                    }}
                                >
                                    <input
                                        type="radio"
                                        name={field.id}
                                        value={option}
                                        checked={formData[field.id] === option}
                                        onChange={(e) => handleChange(field.id, e.target.value)}
                                        style={{ display: "none" }}
                                        required={field.required}
                                    />
                                    <span>{option}</span>
                                </label>
                            ))}
                        </div>
                    </div>
                )

            case "select":
                return (
                    <div>
                        <label style={commonLabelStyles}>{field.label}</label>
                        <select
                            value={formData[field.id] || ""}
                            onChange={(e) => handleChange(field.id, e.target.value)}
                            style={commonInputStyles}
                            required={field.required}
                        >
                            <option value="">{field.placeholder || "Select an option"}</option>
                            {field.options?.map(option => (
                                <option key={option} value={option}>
                                    {option}
                                </option>
                            ))}
                        </select>
                    </div>
                )

            case "textarea":
                return (
                    <div>
                        <label style={commonLabelStyles}>{field.label}</label>
                        <textarea
                            value={formData[field.id] || ""}
                            onChange={(e) => handleChange(field.id, e.target.value)}
                            placeholder={field.placeholder}
                            style={commonInputStyles}
                            rows={4}
                            required={field.required}
                        />
                    </div>
                )

            default:
                return (
                    <div>
                        <label style={commonLabelStyles}>{field.label}</label>
                        <input
                            type={field.type}
                            value={formData[field.id] || ""}
                            onChange={(e) => handleChange(field.id, e.target.value)}
                            placeholder={field.placeholder}
                            style={commonInputStyles}
                            required={field.required}
                        />
                    </div>
                )
        }
    }

    return (
        <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            style={{
                maxWidth: "42rem",
                margin: "0 auto",
                padding: "1.5rem",
                background: "white",
                minHeight: "100px",
                width: "100%",
                borderRadius: "8px",
                boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
            }}
        >
            <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
                {fields.map((field) => (
                    <div key={field.id}>
                        {renderField(field)}
                    </div>
                ))}

                <motion.button
                    type="submit"
                    disabled={isSubmitting}
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                    style={{
                        width: "fit-content",
                        backgroundColor: "#000",
                        color: "white",
                        padding: "0.5rem 1.5rem",
                        borderRadius: "9999px",
                        opacity: isSubmitting ? "0.5" : "1",
                        border: "1px solid #000",
                        cursor: "pointer",
                        transition: "all 0.2s ease",
                        alignSelf: "flex-start",
                    }}
                >
                    {isSubmitting ? `${submitButtonText}...` : submitButtonText}
                </motion.button>

                {submitStatus === "success" && (
                    <motion.p
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        style={{ color: "#22c55e" }}
                    >
                        {successMessage}
                    </motion.p>
                )}
                {submitStatus === "error" && (
                    <motion.p
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        style={{ color: "#ef4444" }}
                    >
                        {errorMessage}
                    </motion.p>
                )}
            </form>
        </motion.div>
    )
}

ContactForm.displayName = "Contact Form"

ContactForm.propertyControls = {
    webhookUrl: {
        type: "string",
        title: "Webhook URL",
        defaultValue: "https://",
        placeholder: "Enter your webhook URL",
    },
    redirectUrl: {
        type: "string",
        title: "Redirect URL",
        defaultValue: "",
        placeholder: "Enter redirect URL (optional)",
        optional: true,
        description: "Where to redirect after successful submission",
    },
    fields: {
        type: "array",
        title: "Form Fields",
        defaultValue: [
            {
                id: "fullName",
                label: "Full Name",
                type: "text",
                required: true,
                placeholder: "Enter your full name"
            },
            {
                id: "email",
                label: "Email",
                type: "email",
                required: true,
                placeholder: "Enter your email"
            },
            {
                id: "services",
                label: "What services are you interested in?",
                type: "checkbox",
                required: true,
                options: ["Marketing Assets", "Display Ads", "Video Ads", "Video", "Something else"]
            },
            {
                id: "companySize",
                label: "Company Size",
                type: "radio",
                required: true,
                options: ["0-50", "50-100", "100-500"]
            }
        ],
        propertyControl: {
            type: "object",
            controls: {
                id: {
                    type: "string",
                    title: "Field ID",
                },
                label: {
                    type: "string",
                    title: "Label",
                },
                type: {
                    type: "enum",
                    title: "Input Type",
                    options: ["text", "email", "checkbox", "radio", "select", "textarea"],
                    optionTitles: ["Text", "Email", "Checkbox", "Radio", "Select", "Textarea"],
                },
                required: {
                    type: "boolean",
                    title: "Required",
                    defaultValue: false,
                },
                placeholder: {
                    type: "string",
                    title: "Placeholder",
                    optional: true,
                },
                options: {
                    type: "array",
                    title: "Options",
                    propertyControl: { type: "string" },
                    optional: true,
                    hidden: ({ type }) => !["checkbox", "radio", "select"].includes(type),
                },
            },
        },
    },
    submitButtonText: {
        type: "string",
        title: "Submit Button Text",
        defaultValue: "Submit",
    },
    successMessage: {
        type: "string",
        title: "Success Message",
        defaultValue: "Form submitted successfully!",
    },
    errorMessage: {
        type: "string",
        title: "Error Message",
        defaultValue: "There was an error submitting the form. Please try again.",
    },
} as const satisfies PropertyControls