/**
 * Calendar Preview Component
 * 
 * Preview of a calendar/scheduling widget as it would appear in chat.
 * Shows all 4 steps simultaneously in a 2x2 grid for a complete overview.
 * Uses the shared Calendar component for parity with live view.
 * 
 * @since 1.5.0
 * @updated 1.6.0 - Migrated to shared component
 * @updated 1.7.0 - Restored 2x2 grid showing all 4 phases
 * @updated 1.8.0 - Added language prop for multilingual preview
 */

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

interface CalendarPreviewProps {
    globalValues: PresetGlobalValues;
    widgetSettings?: CalendarWidgetSettings | null;
    /** Show a single step instead of the 2x2 grid */
    showStep?: 'date' | 'time' | 'form' | 'confirmation';
    /** When true, show only a single step (no grid) */
    singleStep?: boolean;
    /** Text direction. Defaults to true (RTL). */
    isRTL?: boolean;
    language?: string;
}

const PRE_SELECTED_DATE = '2024-12-22';
const PRE_SELECTED_TIME = '09:00';

export const CalendarPreview: React.FC<CalendarPreviewProps> = ({ 
    globalValues,
    widgetSettings,
    showStep = 'date',
    singleStep = false,
    isRTL = true,
    language,
}) => {
    const ws = getWidgetStrings(language);

    const sharedConfig = {
        title: ws.calendarMeetingScheduled,
        require_name: true,
        require_phone: true,
        require_email: true,
        available_times: [
            { time: '09:00', available: true },
            { time: '10:00', available: true },
            { time: '11:00', available: true },
            { time: '12:00', available: false },
            { time: '14:00', available: true },
            { time: '15:00', available: true },
            { time: '16:00', available: true },
            { time: '17:00', available: true },
        ],
    };

    const preFormData = {
        name: t('John Doe'),
        phone: '050-0000000',
        email: 'example@mail.com',
    };

    const steps: Array<{ step: 'date' | 'time' | 'form' | 'confirmation'; label: string }> = [
        { step: 'date', label: ws.calendarDate },
        { step: 'time', label: ws.calendarTime },
        { step: 'form', label: ws.calendarDetails },
        { step: 'confirmation', label: ws.calendarConfirmation },
    ];

    if (singleStep) {
        return (
            <div style={{ maxWidth: '320px', width: '100%' }}>
                <Calendar
                    globalValues={globalValues as any}
                    widgetSettings={widgetSettings as any}
                    context="preview"
                    isRTL={isRTL}
                    language={language}
                    initialStep={showStep}
                    config={sharedConfig}
                />
            </div>
        );
    }

    return (
        <div
            className="preview-calendar-full"
            style={{
                width: '100%',
                direction: isRTL ? 'rtl' : 'ltr',
            }}
        >
            <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(2, 1fr)',
                gap: '12px',
            }}>
                {steps.map(({ step, label: _label }) => (
                    <div
                        key={step}
                        style={{
                            overflow: 'hidden',
                            borderRadius: '8px',
                            border: `1px solid ${(globalValues.colors as any)?.border || '#E5E7EB'}`,
                            position: 'relative',
                        }}
                    >
                        <div style={{
                            transform: 'scale(1)',
                            transformOrigin: 'top center',
                            pointerEvents: 'none',
                        }}>
                            <Calendar
                                globalValues={globalValues as any}
                                widgetSettings={widgetSettings as any}
                                context="preview"
                                isRTL={isRTL}
                                language={language}
                                initialStep={step}
                                lockedStep={true}
                                preSelectedDate={step !== 'date' ? PRE_SELECTED_DATE : null}
                                preSelectedTime={step === 'form' || step === 'confirmation' ? PRE_SELECTED_TIME : null}
                                preFormData={step === 'confirmation' ? preFormData : undefined}
                                config={sharedConfig}
                            />
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default CalendarPreview;
