'use client';
import React from 'react';
import {ElementSection, WorldElement, WorldProps} from '@/lib/types/world';
import {elementSections} from '@/lib/constants/world';
import {SeriesWorldProps} from '@/lib/types/series';
import {useTranslations} from '@/lib/i18n';
import DetailField from '@/components/ui/DetailField';

interface WorldEditorDetailProps {
    world: WorldProps;
    seriesWorld?: SeriesWorldProps | null;
}

/**
 * WorldEditorDetail - Version sidebar lecture seule
 * Mêmes fonctionnalités que WorldSettingsDetail, layout linéaire
 */
export default function WorldEditorDetail({
                                              world,
                                              seriesWorld,
                                          }: WorldEditorDetailProps): React.JSX.Element {
    const t = useTranslations();
    
    function renderElementSection(section: ElementSection): React.JSX.Element | null {
        const elements: WorldElement[] = world[section.section];
        if (!elements || elements.length === 0) return null;
        
        return (
            <div key={section.section} className="border-b border-secondary pb-3">
                <h4 className="text-text-primary font-medium text-sm mb-2">{section.title}</h4>
                <div className="space-y-2">
                    {elements.map(function (element: WorldElement): React.JSX.Element {
                        return (
                            <div key={element.id} className="bg-tertiary rounded-lg p-2">
                                <p className="text-text-primary font-medium text-sm">{element.name}</p>
                                {element.description && (
                                    <p className="text-text-secondary text-xs mt-1">{element.description}</p>
                                )}
                            </div>
                        );
                    })}
                </div>
            </div>
        );
    }
    
    return (
        <div className="space-y-4">
            {/* Informations de base */}
            <div className="border-b border-secondary pb-3">
                <h3 className="text-text-primary font-semibold text-base mb-3">{world.name}</h3>
                <DetailField variant="compact" label={t('worldSetting.worldHistory')} value={world.history}/>
            </div>
            
            {/* Politique et économie */}
            {(world.politics || world.economy) && (
                <div className="border-b border-secondary pb-3">
                    <h4 className="text-text-primary font-medium text-sm mb-2">{t('worldSetting.politicsEconomy')}</h4>
                    <DetailField variant="compact" label={t('worldSetting.politics')} value={world.politics}/>
                    <DetailField variant="compact" label={t('worldSetting.economy')} value={world.economy}/>
                </div>
            )}
            
            {/* Religion et langues */}
            {(world.religion || world.languages) && (
                <div className="border-b border-secondary pb-3">
                    <h4 className="text-text-primary font-medium text-sm mb-2">{t('worldSetting.cultureLanguages')}</h4>
                    <DetailField variant="compact" label={t('worldSetting.religion')} value={world.religion}/>
                    <DetailField variant="compact" label={t('worldSetting.languages')} value={world.languages}/>
                </div>
            )}
            
            {/* Sections d'éléments */}
            {elementSections.map(function (section: ElementSection): React.JSX.Element | null {
                return renderElementSection(section);
            })}
        </div>
    );
}
