/**
 * Global Values Editor
 * Week 21 V2 - Visual Element Editor
 * 
 * Main component for editing global design values (colors, typography, etc.)
 */

import React, { useState } from 'react';
import { t } from '@/lib/i18n';
import { PresetGlobalValues, DEFAULT_GLOBAL_VALUES } from '../../../types/appearance';
import { ColorsSection } from './ColorsSection';
import { TypographySection } from './TypographySection';

interface GlobalValuesEditorProps {
    values: PresetGlobalValues | null;
    onChange: (values: PresetGlobalValues) => void;
    disabled?: boolean;
}

type TabId = 'colors' | 'typography';

interface Tab {
    id: TabId;
    label: string;
    icon: React.ReactNode;
}

function getTabs(): Tab[] {
    return [
        {
            id: 'colors',
            label: t('Colors'),
            icon: (
                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
                </svg>
            ),
        },
        {
            id: 'typography',
            label: t('Typography'),
            icon: (
                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            ),
        },
    ];
}

export const GlobalValuesEditor: React.FC<GlobalValuesEditorProps> = ({
    values,
    onChange,
    disabled = false,
}) => {
    const [activeTab, setActiveTab] = useState<TabId>('colors');
    
    const currentValues: PresetGlobalValues = {
        colors: {
            ...DEFAULT_GLOBAL_VALUES.colors,
            ...values?.colors,
            custom: values?.colors?.custom ?? DEFAULT_GLOBAL_VALUES.colors.custom ?? [],
        },
        typography: {
            ...DEFAULT_GLOBAL_VALUES.typography,
            ...values?.typography,
            custom: values?.typography?.custom ?? DEFAULT_GLOBAL_VALUES.typography.custom ?? [],
        },
    };
    
    // Handler to update a specific section
    const handleSectionChange = <K extends keyof PresetGlobalValues>(
        section: K,
        newValues: PresetGlobalValues[K]
    ) => {
        onChange({
            ...currentValues,
            [section]: newValues,
        });
    };
    
    const renderTabContent = () => {
        switch (activeTab) {
            case 'colors':
                return (
                    <ColorsSection
                        colors={currentValues.colors}
                        onChange={(colors) => handleSectionChange('colors', colors)}
                        disabled={disabled}
                    />
                );
            case 'typography':
                return (
                    <TypographySection
                        typography={currentValues.typography}
                        globalValues={currentValues}
                        onChange={(typography) => handleSectionChange('typography', typography)}
                        disabled={disabled}
                    />
                );
            default:
                return null;
        }
    };
    
    return (
        <div className="global-values-editor">
            {/* Tab Navigation */}
            <div className="border-b border-gray-200 mb-6">
                <nav className="flex gap-1 -mb-px" aria-label={t('Tabs')}>
                    {getTabs().map((tab) => (
                        <button
                            key={tab.id}
                            onClick={() => setActiveTab(tab.id)}
                            className={`
                                flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors
                                ${activeTab === tab.id
                                    ? 'border-primary text-primary'
                                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                                }
                                ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
                            `}
                            disabled={disabled}
                        >
                            {tab.icon}
                            <span>{tab.label}</span>
                        </button>
                    ))}
                </nav>
            </div>
            
            {/* Tab Content */}
            <div className="tab-content">
                {renderTabContent()}
            </div>
        </div>
    );
};

export default GlobalValuesEditor;

