'use client';
import React from 'react';
import {WorldProps, elementSections, ElementSection, WorldElement} from '@/lib/models/World';
import {SeriesWorldProps} from '@/lib/models/Series';
import {useTranslations} from 'next-intl';

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 renderField(label: string, value: string | null | undefined): React.JSX.Element | null {
        if (!value) return null;
        return (
            <div className="mb-3">
                <span className="text-text-secondary text-xs block mb-1">{label}</span>
                <p className="text-text-primary text-sm whitespace-pre-wrap">{value}</p>
            </div>
        );
    }

    function renderElementSection(section: ElementSection): React.JSX.Element | null {
        const elements: WorldElement[] = world[section.section] as WorldElement[];
        if (!elements || elements.length === 0) return null;

        return (
            <div key={section.section} className="border-b border-secondary/30 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-secondary/20 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/30 pb-3">
                <h3 className="text-text-primary font-semibold text-base mb-3">{world.name}</h3>
                {renderField(t('worldSetting.worldHistory'), world.history)}
            </div>

            {/* Politique et économie */}
            {(world.politics || world.economy) && (
                <div className="border-b border-secondary/30 pb-3">
                    <h4 className="text-text-primary font-medium text-sm mb-2">{t('worldSetting.politicsEconomy')}</h4>
                    {renderField(t('worldSetting.politics'), world.politics)}
                    {renderField(t('worldSetting.economy'), world.economy)}
                </div>
            )}

            {/* Religion et langues */}
            {(world.religion || world.languages) && (
                <div className="border-b border-secondary/30 pb-3">
                    <h4 className="text-text-primary font-medium text-sm mb-2">{t('worldSetting.cultureLanguages')}</h4>
                    {renderField(t('worldSetting.religion'), world.religion)}
                    {renderField(t('worldSetting.languages'), world.languages)}
                </div>
            )}

            {/* Sections d'éléments */}
            {elementSections.map(function (section: ElementSection): React.JSX.Element | null {
                return renderElementSection(section);
            })}
        </div>
    );
}
