/**
 * Element Settings Editor
 * Week 21 V2 - Visual Element Editor
 * 
 * Main editor for all chat element settings.
 * Uses LinkedFieldEditor for the link/unlink system.
 */

import React from 'react';
import { t } from '@/lib/i18n';
import { 
    ElementSettings, 
    PresetGlobalValues,
    DEFAULT_ELEMENT_SETTINGS,
    FieldValue 
} from '../../../types/appearance';
import { ElementSection, SubSection } from '../ElementSection';
import { LinkedFieldEditor } from '../LinkedFieldEditor';
import { 
    Layout, 
    MessageSquare, 
    Circle, 
    User, 
    Bot, 
    Type as TypeIcon,
} from 'lucide-react';

interface ElementSettingsEditorProps {
    settings: ElementSettings | null;
    globalValues: PresetGlobalValues;
    onChange: (settings: ElementSettings) => void;
    disabled?: boolean;
}

export const ElementSettingsEditor: React.FC<ElementSettingsEditorProps> = ({
    settings,
    globalValues,
    onChange,
    disabled = false,
}) => {
    // Use defaults if null
    const currentSettings = settings ?? DEFAULT_ELEMENT_SETTINGS;
    
    // Generic handler for updating nested settings
    const handleFieldChange = <K extends keyof ElementSettings>(
        elementKey: K,
        fieldKey: keyof ElementSettings[K],
        value: FieldValue | boolean | string
    ) => {
        onChange({
            ...currentSettings,
            [elementKey]: {
                ...currentSettings[elementKey],
                [fieldKey]: value,
            },
        });
    };
    
    return (
        <div className="element-settings-editor space-y-4">
            {/* Header Section */}
            <ElementSection
                title={t('Header')}
                description={t('Style the top header of the chat')}
                icon={<Layout className="w-5 h-5" />}
                preview={
                    <HeaderPreview 
                        settings={currentSettings.header}
                        globalValues={globalValues}
                    />
                }
            >
                <SubSection title={t('Colors')}>
                    <LinkedFieldEditor
                        label={t('Background Color')}
                        value={currentSettings.header.background}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('header', 'background', v)}
                        fieldType="color"
                        disabled={disabled}
                    />
                    <LinkedFieldEditor
                        label={t('Text Color')}
                        value={currentSettings.header.text}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('header', 'text', v)}
                        fieldType="color"
                        disabled={disabled}
                    />
                </SubSection>
                
                <SubSection title={t('Dimensions')}>
                    <LinkedFieldEditor
                        label={t('Height')}
                        value={currentSettings.header.height}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('header', 'height', v)}
                        fieldType="size"
                        placeholder="60px"
                        disabled={disabled}
                    />
                    <LinkedFieldEditor
                        label={t('Padding')}
                        value={currentSettings.header.padding}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('header', 'padding', v)}
                        fieldType="size"
                        placeholder="0 16px"
                        disabled={disabled}
                    />
                </SubSection>
            </ElementSection>
            
            {/* Chat Window Section */}
            <ElementSection
                title={t('Chat Window')}
                description={t('Dimensions and style settings for the main window')}
                icon={<MessageSquare className="w-5 h-5" />}
                preview={
                    <WindowPreview 
                        settings={currentSettings.chatWindow}
                        globalValues={globalValues}
                    />
                }
            >
                <SubSection title={t('Dimensions')}>
                    <LinkedFieldEditor
                        label={t('Width')}
                        value={currentSettings.chatWindow.width}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('chatWindow', 'width', v)}
                        fieldType="size"
                        placeholder="380px"
                        disabled={disabled}
                    />
                    <LinkedFieldEditor
                        label={t('Height')}
                        value={currentSettings.chatWindow.height}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('chatWindow', 'height', v)}
                        fieldType="size"
                        placeholder="600px"
                        disabled={disabled}
                    />
                </SubSection>
                
                <SubSection title={t('Style')}>
                    <LinkedFieldEditor
                        label={t('Background Color')}
                        value={currentSettings.chatWindow.background}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('chatWindow', 'background', v)}
                        fieldType="color"
                        disabled={disabled}
                    />
                    <LinkedFieldEditor
                        label={t('Border Radius')}
                        value={currentSettings.chatWindow.borderRadius}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('chatWindow', 'borderRadius', v)}
                        fieldType="size"
                        disabled={disabled}
                    />
                    <LinkedFieldEditor
                        label={t('Shadow')}
                        value={currentSettings.chatWindow.shadow}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('chatWindow', 'shadow', v)}
                        fieldType="text"
                        disabled={disabled}
                    />
                </SubSection>
            </ElementSection>
            
            {/* Chat Bubble Section */}
            <ElementSection
                title={t('Chat Bubble')}
                description={t('The floating button that opens the chat')}
                icon={<Circle className="w-5 h-5" />}
                preview={
                    <BubblePreview 
                        settings={currentSettings.chatBubble}
                        globalValues={globalValues}
                    />
                }
            >
                <SubSection title={t('Appearance')}>
                    <LinkedFieldEditor
                        label={t('Size')}
                        value={currentSettings.chatBubble.size}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('chatBubble', 'size', v)}
                        fieldType="size"
                        placeholder="60px"
                        disabled={disabled}
                    />
                    <LinkedFieldEditor
                        label={t('Background Color')}
                        value={currentSettings.chatBubble.background}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('chatBubble', 'background', v)}
                        fieldType="color"
                        disabled={disabled}
                    />
                </SubSection>
            </ElementSection>
            
            {/* User Message Section */}
            <ElementSection
                title={t('User Message')}
                description={t('Style the user message bubbles')}
                icon={<User className="w-5 h-5" />}
                preview={
                    <MessagePreview 
                        settings={currentSettings.userMessage}
                        globalValues={globalValues}
                        isUser={true}
                    />
                }
            >
                <SubSection title={t('Colors')}>
                    <LinkedFieldEditor
                        label={t('Background Color')}
                        value={currentSettings.userMessage.background}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('userMessage', 'background', v)}
                        fieldType="color"
                        disabled={disabled}
                    />
                    <LinkedFieldEditor
                        label={t('Text Color')}
                        value={currentSettings.userMessage.text}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('userMessage', 'text', v)}
                        fieldType="color"
                        disabled={disabled}
                    />
                </SubSection>
                
                <SubSection title={t('Dimensions')}>
                    <LinkedFieldEditor
                        label={t('Border Radius')}
                        value={currentSettings.userMessage.borderRadius}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('userMessage', 'borderRadius', v)}
                        fieldType="size"
                        disabled={disabled}
                    />
                    <LinkedFieldEditor
                        label={t('Padding')}
                        value={currentSettings.userMessage.padding}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('userMessage', 'padding', v)}
                        fieldType="size"
                        placeholder="12px 16px"
                        disabled={disabled}
                    />
                    <LinkedFieldEditor
                        label={t('Max Width')}
                        value={currentSettings.userMessage.maxWidth}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('userMessage', 'maxWidth', v)}
                        fieldType="size"
                        placeholder="80%"
                        disabled={disabled}
                    />
                    <LinkedFieldEditor
                        label={t('Font Size')}
                        value={currentSettings.userMessage.fontSize}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('userMessage', 'fontSize', v)}
                        fieldType="size"
                        disabled={disabled}
                    />
                </SubSection>
            </ElementSection>
            
            {/* Bot Message Section */}
            <ElementSection
                title={t('Bot Message')}
                description={t('Style the bot message bubbles')}
                icon={<Bot className="w-5 h-5" />}
                preview={
                    <MessagePreview 
                        settings={currentSettings.botMessage}
                        globalValues={globalValues}
                        isUser={false}
                    />
                }
            >
                <SubSection title={t('Colors')}>
                    <LinkedFieldEditor
                        label={t('Background Color')}
                        value={currentSettings.botMessage.background}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('botMessage', 'background', v)}
                        fieldType="color"
                        disabled={disabled}
                    />
                    <LinkedFieldEditor
                        label={t('Text Color')}
                        value={currentSettings.botMessage.text}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('botMessage', 'text', v)}
                        fieldType="color"
                        disabled={disabled}
                    />
                </SubSection>
                
                <SubSection title={t('Dimensions')}>
                    <LinkedFieldEditor
                        label={t('Border Radius')}
                        value={currentSettings.botMessage.borderRadius}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('botMessage', 'borderRadius', v)}
                        fieldType="size"
                        disabled={disabled}
                    />
                    <LinkedFieldEditor
                        label={t('Padding')}
                        value={currentSettings.botMessage.padding}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('botMessage', 'padding', v)}
                        fieldType="size"
                        placeholder="12px 16px"
                        disabled={disabled}
                    />
                </SubSection>
            </ElementSection>
            
            {/* Input Area Section */}
            <ElementSection
                title={t('Input Area')}
                description={t('Style the input field and send button')}
                icon={<TypeIcon className="w-5 h-5" />}
                preview={
                    <InputAreaPreview 
                        settings={currentSettings.inputArea}
                        globalValues={globalValues}
                    />
                }
            >
                <SubSection title={t('Input Field')}>
                    <LinkedFieldEditor
                        label={t('Background Color')}
                        value={currentSettings.inputArea.background}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('inputArea', 'background', v)}
                        fieldType="color"
                        disabled={disabled}
                    />
                    <LinkedFieldEditor
                        label={t('Text Color')}
                        value={currentSettings.inputArea.text}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('inputArea', 'text', v)}
                        fieldType="color"
                        disabled={disabled}
                    />
                    <LinkedFieldEditor
                        label={t('Border Color')}
                        value={currentSettings.inputArea.border}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('inputArea', 'border', v)}
                        fieldType="color"
                        disabled={disabled}
                    />
                    <LinkedFieldEditor
                        label={t('Border Radius')}
                        value={currentSettings.inputArea.borderRadius}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('inputArea', 'borderRadius', v)}
                        fieldType="size"
                        disabled={disabled}
                    />
                </SubSection>
                
                <SubSection title={t('Send Button')}>
                    <LinkedFieldEditor
                        label={t('Background Color')}
                        value={currentSettings.inputArea.sendButtonBackground}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('inputArea', 'sendButtonBackground', v)}
                        fieldType="color"
                        disabled={disabled}
                    />
                    <LinkedFieldEditor
                        label={t('Icon Color')}
                        value={currentSettings.inputArea.sendButtonIcon}
                        globalValues={globalValues}
                        onChange={(v) => handleFieldChange('inputArea', 'sendButtonIcon', v)}
                        fieldType="color"
                        disabled={disabled}
                    />
                </SubSection>
            </ElementSection>
            
        </div>
    );
};

// Mini Preview Components

import { resolveFieldValue, HeaderElementSettings, ChatWindowSettings, ChatBubbleSettings, UserMessageSettings, BotMessageSettings, InputAreaSettings } from '../../../types/appearance';

function HeaderPreview({ settings, globalValues }: { settings: HeaderElementSettings; globalValues: PresetGlobalValues }) {
    const bg = resolveFieldValue(settings.background, globalValues);
    const text = resolveFieldValue(settings.text, globalValues);
    
    return (
        <div 
            className="rounded-t-lg p-2 flex items-center gap-2"
            style={{ backgroundColor: bg }}
        >
            <div className="w-6 h-6 rounded-full bg-white/20" />
            <div style={{ color: text }}>
                <div className="text-xs font-medium">{t('Chat')}</div>
            </div>
        </div>
    );
}

function WindowPreview({ settings, globalValues }: { settings: ChatWindowSettings; globalValues: PresetGlobalValues }) {
    const bg = resolveFieldValue(settings.background, globalValues);
    const radius = resolveFieldValue(settings.borderRadius, globalValues);
    const shadow = resolveFieldValue(settings.shadow, globalValues);
    
    return (
        <div 
            className="w-20 h-28"
            style={{ 
                backgroundColor: bg, 
                borderRadius: radius,
                boxShadow: shadow,
            }}
        />
    );
}

function BubblePreview({ settings, globalValues }: { settings: ChatBubbleSettings; globalValues: PresetGlobalValues }) {
    const bg = resolveFieldValue(settings.background, globalValues);
    const size = resolveFieldValue(settings.size, globalValues);
    
    return (
        <div 
            className="rounded-full flex items-center justify-center text-white"
            style={{ 
                backgroundColor: bg, 
                width: size,
                height: size,
            }}
        >
            🤖
        </div>
    );
}

function MessagePreview({ settings, globalValues, isUser }: { settings: UserMessageSettings | BotMessageSettings; globalValues: PresetGlobalValues; isUser: boolean }) {
    const bg = resolveFieldValue(settings.background, globalValues);
    const text = resolveFieldValue(settings.text, globalValues);
    const radius = resolveFieldValue(settings.borderRadius, globalValues);
    
    return (
        <div className={`flex ${isUser ? 'justify-end' : 'justify-start'}`}>
            <div 
                className="px-3 py-2 text-xs max-w-[80%]"
                style={{ 
                    backgroundColor: bg, 
                    color: text,
                    borderRadius: radius,
                }}
            >
                {t('Sample message')}
            </div>
        </div>
    );
}

function InputAreaPreview({ settings, globalValues }: { settings: InputAreaSettings; globalValues: PresetGlobalValues }) {
    const bg = resolveFieldValue(settings.background, globalValues);
    const border = resolveFieldValue(settings.border, globalValues);
    const radius = resolveFieldValue(settings.borderRadius, globalValues);
    const btnBg = resolveFieldValue(settings.sendButtonBackground, globalValues);
    
    return (
        <div className="flex gap-2">
            <div 
                className="flex-1 px-2 py-1.5 text-xs"
                style={{ 
                    backgroundColor: bg,
                    border: `1px solid ${border}`,
                    borderRadius: radius,
                }}
            >
                {t('Type...')}
            </div>
            <div 
                className="w-7 h-7 rounded-full flex items-center justify-center text-white text-xs"
                style={{ backgroundColor: btnBg }}
            >
                →
            </div>
        </div>
    );
}

export default ElementSettingsEditor;

