import React from 'react';
import { cn } from '@/lib/utils';
import { Send, Mail, User, MessageSquare } from 'lucide-react';

interface Section {
    id: string;
    type: string;
    layoutVariant?: string;
    colorScheme?: string;
    props: Record<string, { type: 'static' | 'dynamic'; value?: string; source?: string }>;
    elementStyles?: Record<string, any>;
    styles?: any;
}

interface ContactFormRendererProps {
    section: Section;
    className?: string;
}

const COLOR_SCHEMES: Record<string, { bg: string; text: string; inputBg: string; btnBg: string }> = {
    default: { bg: '', text: 'text-gray-900', inputBg: 'bg-gray-50', btnBg: 'bg-blue-600' },
    primary: { bg: 'wn-primary-bg', text: 'text-white', inputBg: 'bg-white', btnBg: 'bg-white' },
    secondary: { bg: 'wn-secondary-bg', text: 'text-white', inputBg: 'bg-gray-700', btnBg: 'bg-blue-500' },
    muted: { bg: 'bg-gray-50', text: 'text-gray-700', inputBg: 'bg-white', btnBg: 'bg-gray-800' },
};

export function ContactFormRenderer({ section, className }: ContactFormRendererProps) {
    const scheme = COLOR_SCHEMES[section.colorScheme || 'default'] ?? COLOR_SCHEMES['default'];

    const title = section.props?.title?.value || 'Contact Us';

    // Helper to get text styles (including font family)
    const getTextStyles = (elementName: string) => {
        const styles = section.elementStyles?.[elementName] || {};
        return {
            classNames: cn(
                styles.fontSize,
                styles.fontWeight,
                {
                    'font-sans': styles.fontFamily === 'secondary',
                    'font-serif': styles.fontFamily === 'primary',
                }
            ),
            style: {
                color: styles.color,
                textAlign: styles.textAlign
            }
        };
    };

    const titleStyle = getTextStyles('title');
    const buttonStyleObj = getTextStyles('button');
    const fieldsStyleObj = getTextStyles('fields');

    const buttonStyle = section.elementStyles?.button || {};
    const fieldsStyle = section.elementStyles?.fields || {};

    // Helper to get background style for dynamic schemes
    const getBackgroundStyle = () => {
        if (scheme.bg === 'wn-gradient-bg') {
            return { backgroundImage: 'linear-gradient(135deg, var(--wn-gradient-start, #9333ea), var(--wn-gradient-end, #3b82f6))' };
        }
        if (scheme.bg === 'wn-primary-bg') {
            return { backgroundColor: 'var(--wn-primary, #1a1a1a)' };
        }
        if (scheme.bg === 'wn-secondary-bg') {
            return { backgroundColor: 'var(--wn-secondary, #6b7280)' };
        }
        return undefined;
    };

    const heightMap: Record<string, string> = {
        'default': 'py-12 md:py-20',
        'small': 'py-8 md:py-12',
        'medium': 'py-16 md:py-24',
        'large': 'py-24 md:py-36',
        'fullscreen': 'min-h-[50vh] flex flex-col justify-center',
    };
    const customPadding = section.styles?.paddingTop || section.styles?.paddingBottom;
    const heightClasses = customPadding ? '' : (heightMap[section.styles?.heightPreset || 'default'] || 'py-12 md:py-20');

    const hasCustomBackground = !!section.styles?.backgroundColor || !!section.styles?.backgroundImage || section.styles?.backgroundType === 'gradient';

    return (
        <div
            className={cn(heightClasses, 'px-4 md:px-8', !hasCustomBackground && !scheme.bg.startsWith('wn-') && scheme.bg, scheme.text, className)}
            style={hasCustomBackground ? {} : getBackgroundStyle()}
        >
            <div className="max-w-xl mx-auto">
                <h2
                    className={cn(
                        "text-3xl font-bold text-center mb-8",
                        titleStyle.classNames
                    )}
                    style={titleStyle.style}
                >
                    {title}
                </h2>

                <form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
                    {/* Name field */}
                    <div className="relative">
                        <User className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                        <input
                            type="text"
                            placeholder="Your Name"
                            className={cn(
                                'w-full pl-12 pr-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500',
                                !fieldsStyle.backgroundColor && scheme.inputBg
                            )}
                            style={{
                                backgroundColor: fieldsStyle.backgroundColor,
                                color: fieldsStyle.color
                            }}
                            disabled
                        />
                    </div>

                    {/* Email field */}
                    <div className="relative">
                        <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                        <input
                            type="email"
                            placeholder="Your Email"
                            className={cn(
                                'w-full pl-12 pr-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500',
                                !fieldsStyle.backgroundColor && scheme.inputBg
                            )}
                            style={{
                                backgroundColor: fieldsStyle.backgroundColor,
                                color: fieldsStyle.color
                            }}
                            disabled
                        />
                    </div>

                    {/* Message field */}
                    <div className="relative">
                        <MessageSquare className="absolute left-4 top-4 w-5 h-5 text-gray-400" />
                        <textarea
                            placeholder="Your Message"
                            rows={4}
                            className={cn(
                                'w-full pl-12 pr-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none',
                                !fieldsStyle.backgroundColor && scheme.inputBg
                            )}
                            style={{
                                backgroundColor: fieldsStyle.backgroundColor,
                                color: fieldsStyle.color
                            }}
                            disabled
                        />
                    </div>

                    {/* Submit button */}
                    <button
                        type="submit"
                        className={cn(
                            'w-full flex items-center justify-center gap-2 py-3 rounded-lg font-semibold transition opacity-80 cursor-not-allowed',
                            !buttonStyle.backgroundColor && scheme.btnBg,
                            !buttonStyle.color && (section.colorScheme === 'primary' || section.colorScheme === 'gradient' ? 'text-blue-600' : 'text-white'),
                            buttonStyleObj.classNames
                        )}
                        style={{
                            backgroundColor: buttonStyle.backgroundColor,
                            color: buttonStyle.color
                        }}
                        disabled
                    >
                        <Send className="w-5 h-5" />
                        Send Message
                    </button>

                    <p className="text-center text-sm opacity-60">
                        (Form preview only - functional on frontend)
                    </p>
                </form>
            </div>
        </div>
    );
}
