'use client'

import { useState, useEffect } from 'react'
import Image from 'next/image'
import { createClient } from '@/lib/supabase/client'
import { SectionWrapper } from '@/components/shared/section-wrapper'

interface TechItem {
    id: string
    name: string
    logo_url: string | null
}

const FALLBACK_STACK = [
    'cPanel', 'LiteSpeed', 'CloudLinux', 'Virtualizor', 'Softaculous', 'AlmaLinux',
    'Cloudflare', 'Imunify360', 'JetBackup', 'Google Cloud', 'WHMCS', 'MySQL'
]

interface TechStackMarqueeProps {
    config?: {
        show_heading: boolean
        heading: string
    }
}

export function TechStackMarquee({ config }: TechStackMarqueeProps) {
    const [stack, setStack] = useState<TechItem[]>([])

    const showHeading = config?.show_heading ?? false
    const heading = config?.heading ?? 'Our Technology Stack'

    useEffect(() => {
        const supabase = createClient()
        supabase
            .from('tech_stack')
            .select('id, name, logo_url')
            .eq('is_visible', true)
            .order('sort_order', { ascending: true })
            .then(({ data }) => {
                if (data && data.length > 0) setStack(data)
                else setStack(FALLBACK_STACK.map((name, i) => ({ id: String(i), name, logo_url: null })))
            })
    }, [])

    if (stack.length === 0) return null

    const displayStack = [...stack, ...stack]

    return (
        <SectionWrapper bg="white" className="py-12 border-t border-slate-100">
            {showHeading && (
                <div className="text-center mb-8">
                    <h2 className="text-2xl md:text-3xl font-bold text-navy">{heading}</h2>
                </div>
            )}
            <div className="overflow-hidden relative w-full">
                <div className="flex whitespace-nowrap animate-marquee hover:[animation-play-state:paused]">
                    {displayStack.map((item, i) => (
                        <div key={`${item.id}-${i}`} className="mx-8 flex items-center gap-2 grayscale hover:grayscale-0 transition-all opacity-50 hover:opacity-100 cursor-default">
                            {item.logo_url ? (
                                <Image src={item.logo_url} alt={item.name} width={32} height={32} className="rounded-full object-contain" />
                            ) : (
                                <div className="w-8 h-8 bg-slate-200 rounded-full flex items-center justify-center text-xs font-bold text-slate-500">
                                    {item.name[0]}
                                </div>
                            )}
                            <span className="text-lg font-bold text-slate-700">{item.name}</span>
                        </div>
                    ))}
                </div>
            </div>

            <style jsx>{`
         @keyframes marquee {
           0% { transform: translateX(0); }
           100% { transform: translateX(-50%); }
         }
         .animate-marquee {
           animation: marquee 30s linear infinite;
         }
       `}</style>
        </SectionWrapper>
    )
}
