// Framer code override examples
import { Override } from "framer"
import { useState, useEffect } from "react"

// Animation trigger override
export const HoverScale: Override = () => {
    return {
        whileHover: { 
            scale: 1.05,
            transition: { type: "spring", stiffness: 300 }
        },
        whileTap: { scale: 0.95 },
        style: { cursor: "pointer" }
    }
}

// Dynamic content override
export const DynamicText: Override = () => {
    const [text, setText] = useState("Loading...")
    
    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setText(data.message))
            .catch(error => setText("Error loading"))
    }, [])
    
    return { text }
}

// Interactive form override
export const ContactForm: Override = () => {
    const [formData, setFormData] = useState({
        name: "",
        email: "",
        message: ""
    })
    const [status, setStatus] = useState("ready")
    
    const handleSubmit = async (event) => {
        event.preventDefault()
        setStatus("sending")
        
        try {
            const response = await fetch('/api/contact', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(formData)
            })
            
            if (response.ok) {
                setStatus("success")
                setFormData({ name: "", email: "", message: "" })
            } else {
                setStatus("error")
            }
        } catch (error) {
            setStatus("error")
        }
    }
    
    return {
        onSubmit: handleSubmit,
        children: (
            <>
                <input
                    type="text"
                    placeholder="Name"
                    value={formData.name}
                    onChange={(e) => setFormData({...formData, name: e.target.value})}
                />
                <input
                    type="email"
                    placeholder="Email"
                    value={formData.email}
                    onChange={(e) => setFormData({...formData, email: e.target.value})}
                />
                <textarea
                    placeholder="Message"
                    value={formData.message}
                    onChange={(e) => setFormData({...formData, message: e.target.value})}
                />
                <button type="submit" disabled={status === "sending"}>
                    {status === "sending" ? "Sending..." : "Send Message"}
                </button>
                {status === "success" && <p>Message sent successfully!</p>}
                {status === "error" && <p>Error sending message</p>}
            </>
        )
    }
}

// API data integration override
export const ProductList: Override = () => {
    const [products, setProducts] = useState([])
    const [loading, setLoading] = useState(true)
    
    useEffect(() => {
        const fetchProducts = async () => {
            try {
                const response = await fetch('https://api.shop.com/products')
                const data = await response.json()
                setProducts(data.products)
            } catch (error) {
                console.error('Failed to fetch products:', error)
            } finally {
                setLoading(false)
            }
        }
        
        fetchProducts()
    }, [])
    
    if (loading) return { children: <div>Loading products...</div> }
    
    return {
        children: products.map(product => (
            <div key={product.id} style={{ marginBottom: 20 }}>
                <img src={product.image} alt={product.name} />
                <h3>{product.name}</h3>
                <p>{product.price}</p>
                <button onClick={() => addToCart(product.id)}>
                    Add to Cart
                </button>
            </div>
        ))
    }
}

// Scroll-triggered animation override
export const ScrollReveal: Override = () => {
    const [isInView, setIsInView] = useState(false)
    
    useEffect(() => {
        const observer = new IntersectionObserver(
            ([entry]) => setIsInView(entry.isIntersecting),
            { threshold: 0.1 }
        )
        
        const element = document.getElementById('scroll-target')
        if (element) observer.observe(element)
        
        return () => observer.disconnect()
    }, [])
    
    return {
        id: "scroll-target",
        animate: isInView ? { 
            opacity: 1, 
            y: 0,
            transition: { duration: 0.6, ease: "easeOut" }
        } : { 
            opacity: 0, 
            y: 50 
        }
    }
}

// Real-time data dashboard override
export const Dashboard: Override = () => {
    const [metrics, setMetrics] = useState({
        visitors: 0,
        conversions: 0,
        revenue: 0
    })
    
    useEffect(() => {
        const fetchMetrics = () => {
            fetch('/api/analytics')
                .then(response => response.json())
                .then(data => setMetrics(data))
                .catch(console.error)
        }
        
        fetchMetrics()
        const interval = setInterval(fetchMetrics, 30000) // Update every 30s
        
        return () => clearInterval(interval)
    }, [])
    
    return {
        children: (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
                <div>
                    <h3>Visitors</h3>
                    <p style={{ fontSize: 32, fontWeight: 'bold' }}>
                        {metrics.visitors.toLocaleString()}
                    </p>
                </div>
                <div>
                    <h3>Conversions</h3>
                    <p style={{ fontSize: 32, fontWeight: 'bold' }}>
                        {metrics.conversions.toLocaleString()}
                    </p>
                </div>
                <div>
                    <h3>Revenue</h3>
                    <p style={{ fontSize: 32, fontWeight: 'bold' }}>
                        ${metrics.revenue.toLocaleString()}
                    </p>
                </div>
            </div>
        )
    }
}

// Component state management override
export const ToggleSwitch: Override = () => {
    const [isOn, setIsOn] = useState(false)
    
    return {
        onClick: () => setIsOn(!isOn),
        animate: isOn ? { 
            backgroundColor: "#10B981",
            x: 24 
        } : { 
            backgroundColor: "#6B7280",
            x: 0 
        },
        transition: { type: "spring", stiffness: 500, damping: 30 }
    }
}

// Custom hook for API integration
const useAPI = (url) => {
    const [data, setData] = useState(null)
    const [loading, setLoading] = useState(true)
    const [error, setError] = useState(null)
    
    useEffect(() => {
        const fetchData = async () => {
            try {
                setLoading(true)
                const response = await fetch(url)
                if (!response.ok) throw new Error('API request failed')
                const result = await response.json()
                setData(result)
            } catch (err) {
                setError(err.message)
            } finally {
                setLoading(false)
            }
        }
        
        fetchData()
    }, [url])
    
    return { data, loading, error }
}

// Advanced integration example
export const WeatherWidget: Override = () => {
    const { data: weather, loading } = useAPI(
        `https://api.openweathermap.org/data/2.5/weather?q=London&appid=${process.env.WEATHER_API_KEY}`
    )
    
    if (loading) return { children: <div>Loading weather...</div> }
    
    return {
        children: (
            <div>
                <h3>{weather?.name}</h3>
                <p>{Math.round(weather?.main?.temp - 273.15)}°C</p>
                <p>{weather?.weather?.[0]?.description}</p>
            </div>
        )
    }
}