'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 Collapse from '@/components/ui/Collapse';
import {Church, Coins, Globe, Landmark, Languages, ScrollText} from 'lucide-react';
import {useTranslations} from '@/lib/i18n';
import DetailHeroSection from '@/components/ui/DetailHeroSection';
import DetailField from '@/components/ui/DetailField';

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

export default function WorldSettingsDetail({
                                                world,
                                                seriesWorld,
                                            }: WorldSettingsDetailProps): 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 (
            <Collapse variant="card" key={section.section} title={section.title} icon={section.icon}>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                        {elements.map(function (element: WorldElement): React.JSX.Element {
                            return (
                                <div key={element.id}
                                     className="p-4 rounded-lg">
                                    <h4 className="text-text-primary font-semibold">{element.name}</h4>
                                    {element.description && (
                                        <p className="text-text-secondary text-sm mt-2 line-clamp-3">{element.description}</p>
                                    )}
                                </div>
                            );
                        })}
                    </div>
            </Collapse>
        );
    }
    
    return (
        <div className="space-y-6 px-2 pb-4">
            {/* Hero Section */}
            <DetailHeroSection icon={Globe} title={world.name || '—'}/>
            
            {/* Histoire du monde - Full width */}
            <DetailField icon={ScrollText} label={t('worldSetting.worldHistory')} value={world.history}/>
            
            {/* Politique & Économie - Side by side */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                <DetailField icon={Landmark} label={t('worldSetting.politics')} value={world.politics}/>
                <DetailField icon={Coins} label={t('worldSetting.economy')} value={world.economy}/>
            </div>
            
            {/* Religion & Langues - Side by side */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                <DetailField icon={Church} label={t('worldSetting.religion')} value={world.religion}/>
                <DetailField icon={Languages} label={t('worldSetting.languages')} value={world.languages}/>
            </div>
            
            {/* Sections d'éléments - Grille de cards */}
            {elementSections.map(function (section: ElementSection): React.JSX.Element | null {
                return renderElementSection(section);
            })}
        </div>
    );
}
