/**
 * Lead Form Preview Component
 * 
 * Comprehensive preview showing all form states and field types for easy customization.
 * Shows: Collapsed (chips), Expanded, and Success states side by side.
 * Includes all field types: text, email, phone, textarea, select, date, number, checkbox.
 * 
 * @since 1.5.0
 * @updated 1.6.0 - Migrated to shared component
 * @updated 1.7.0 - Added comprehensive "kitchen sink" preview with all states
 * @updated 1.8.0 - Added language prop for multilingual preview
 */

import React from 'react';
import { LeadForm } from '@shared/components/widgets/LeadForm';
import type { PresetGlobalValues, LeadFormWidgetSettings } from '../../../types/appearance';
import { t } from '@/lib/i18n';
import { getWidgetStrings } from '@shared/utils/widget-strings';

interface LeadFormPreviewProps {
    globalValues: PresetGlobalValues;
    widgetSettings?: LeadFormWidgetSettings | null;
    showState?: 'form' | 'success';
    isRTL?: boolean;
    language?: string;
}

const SectionLabel: React.FC<{ children: React.ReactNode }> = ({ children }) => (
    <div style={{
        fontSize: '11px',
        fontWeight: 600,
        color: '#6B7280',
        textTransform: 'uppercase',
        letterSpacing: '0.05em',
        marginBottom: '8px',
        paddingBottom: '4px',
        borderBottom: '1px solid #E5E7EB',
    }}>
        {children}
    </div>
);

export const LeadFormPreview: React.FC<LeadFormPreviewProps> = ({ 
    globalValues,
    widgetSettings,
    isRTL = true,
    language,
}) => {
    const ws = getWidgetStrings(language);

    const allFieldTypesSchema = {
        title: ws.leadFormTitle,
        fields: [
            { name: 'name', type: 'text', label: ws.leadFormNameLabel, required: true, placeholder: ws.leadFormNamePlaceholder, icon: 'user' },
            { name: 'email', type: 'email', label: ws.leadFormEmailLabel, required: true, placeholder: t('example@email.com'), icon: 'mail' },
            { name: 'phone', type: 'tel', label: ws.leadFormPhoneLabel, required: false, placeholder: t('050-000-0000'), icon: 'phone' },
            { name: 'subject', type: 'select', label: t('Subject'), required: true, placeholder: t('Select subject...'), options: [
                { value: 'sales', label: t('Sales') },
                { value: 'support', label: t('Support') },
                { value: 'other', label: t('Other') },
            ]},
            { name: 'date', type: 'date', label: t('Preferred Date'), required: false, placeholder: t('Select date') },
            { name: 'quantity', type: 'number', label: t('Quantity'), required: false, placeholder: '1' },
            { name: 'message', type: 'textarea', label: ws.leadFormMessageLabel, required: false, placeholder: ws.leadFormMessagePlaceholder, icon: 'message-square', rows: 3 },
            { name: 'terms', type: 'checkbox', label: t('I agree to the terms of use'), required: true, placeholder: '' },
        ],
        submit_text: ws.leadFormSubmit,
        success_message: ws.leadFormSuccess,
    };

    const chipsPreviewSchema = {
        title: t('Collapsed Form'),
        fields: [
            { name: 'name', type: 'text', label: ws.leadFormNameLabel, required: true, placeholder: ws.leadFormNamePlaceholder, icon: 'user' },
            { name: 'email', type: 'email', label: ws.leadFormEmailLabel, required: true, placeholder: ws.leadFormEmailLabel, icon: 'mail' },
            { name: 'phone', type: 'tel', label: ws.leadFormPhoneLabel, required: false, placeholder: ws.leadFormPhoneLabel, icon: 'phone' },
            { name: 'subject', type: 'select', label: t('Subject'), required: false, placeholder: t('Select...'), options: [
                { value: 'sales', label: t('Sales') },
                { value: 'support', label: t('Support') },
            ]},
            { name: 'message', type: 'textarea', label: ws.leadFormMessageLabel, required: false, placeholder: ws.leadFormMessagePlaceholder, rows: 2 },
        ],
        submit_text: ws.leadFormSubmit,
        success_message: ws.leadFormSuccess,
    };

    return (
        <div style={{ 
            display: 'flex', 
            flexDirection: 'column', 
            gap: '24px',
            width: '100%',
            maxWidth: '700px',
        }}>
            {/* Row 1: Collapsed State (Chips Mode) */}
            <div>
                <SectionLabel>{t('Collapsed State (Chips)')}</SectionLabel>
                <LeadForm
                    globalValues={globalValues as any}
                    widgetSettings={widgetSettings as any}
                    context="preview"
                    isRTL={isRTL}
                    language={language}
                    showState="form"
                    forceCollapsed={true}
                    schema={chipsPreviewSchema}
                />
            </div>
            
            {/* Row 2: Success State */}
            <div>
                <SectionLabel>{t('Success State')}</SectionLabel>
                <LeadForm
                    globalValues={globalValues as any}
                    widgetSettings={widgetSettings as any}
                    context="preview"
                    isRTL={isRTL}
                    language={language}
                    showState="success"
                    schema={allFieldTypesSchema}
                />
            </div>
            
            {/* Row 3: Expanded State with all field types */}
            <div>
                <SectionLabel>{t('Expanded State (All Field Types)')}</SectionLabel>
                <LeadForm
                    globalValues={globalValues as any}
                    widgetSettings={widgetSettings as any}
                    context="preview"
                    isRTL={isRTL}
                    language={language}
                    showState="form"
                    forceCollapsed={false}
                    schema={allFieldTypesSchema}
                />
            </div>
        </div>
    );
};

export default LeadFormPreview;
