'use client';
import React from 'react';
import {WorldProps, elementSections, ElementSection, WorldElement} from '@/lib/models/World';
import {SeriesWorldProps} from '@/lib/models/Series';
import CollapsableArea from '@/components/CollapsableArea';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {
    faGlobe,
    faLandmark,
    faBook,
    faCoins,
    faChurch,
    faLanguage,
    faScroll
} from '@fortawesome/free-solid-svg-icons';
import {useTranslations} from 'next-intl';

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] as WorldElement[];
        if (!elements || elements.length === 0) return null;

        return (
            <CollapsableArea 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 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
                    {elements.map(function (element: WorldElement): React.JSX.Element {
                        return (
                            <div key={element.id} className="p-4 bg-dark-background/30 rounded-lg border border-secondary/20 hover:border-primary/30 transition-colors">
                                <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>
            </CollapsableArea>
        );
    }

    return (
        <div className="space-y-6 px-2 pb-4">
            {/* Hero Section */}
            <div className="p-6 bg-gradient-to-r from-primary/10 via-secondary/20 to-transparent rounded-2xl border border-secondary/30">
                <div className="flex items-start gap-4">
                    <div className="w-16 h-16 rounded-xl bg-primary/20 flex items-center justify-center shrink-0">
                        <FontAwesomeIcon icon={faGlobe} className="w-8 h-8 text-primary"/>
                    </div>
                    <div className="flex-1 min-w-0">
                        <h2 className="text-2xl font-bold text-text-primary">{world.name || '—'}</h2>
                    </div>
                </div>
            </div>

            {/* Histoire du monde - Full width */}
            <div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
                <div className="flex items-center gap-2 mb-3">
                    <FontAwesomeIcon icon={faScroll} className="w-4 h-4 text-primary"/>
                    <h3 className="text-text-primary font-semibold">{t('worldSetting.worldHistory')}</h3>
                </div>
                <p className={`whitespace-pre-wrap ${world.history ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
                    {world.history || '—'}
                </p>
            </div>

            {/* Politique & Économie - Side by side */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                <div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
                    <div className="flex items-center gap-2 mb-3">
                        <FontAwesomeIcon icon={faLandmark} className="w-4 h-4 text-primary"/>
                        <h3 className="text-text-primary font-semibold">{t('worldSetting.politics')}</h3>
                    </div>
                    <p className={`whitespace-pre-wrap ${world.politics ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
                        {world.politics || '—'}
                    </p>
                </div>

                <div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
                    <div className="flex items-center gap-2 mb-3">
                        <FontAwesomeIcon icon={faCoins} className="w-4 h-4 text-primary"/>
                        <h3 className="text-text-primary font-semibold">{t('worldSetting.economy')}</h3>
                    </div>
                    <p className={`whitespace-pre-wrap ${world.economy ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
                        {world.economy || '—'}
                    </p>
                </div>
            </div>

            {/* Religion & Langues - Side by side */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                <div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
                    <div className="flex items-center gap-2 mb-3">
                        <FontAwesomeIcon icon={faChurch} className="w-4 h-4 text-primary"/>
                        <h3 className="text-text-primary font-semibold">{t('worldSetting.religion')}</h3>
                    </div>
                    <p className={`whitespace-pre-wrap ${world.religion ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
                        {world.religion || '—'}
                    </p>
                </div>

                <div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
                    <div className="flex items-center gap-2 mb-3">
                        <FontAwesomeIcon icon={faLanguage} className="w-4 h-4 text-primary"/>
                        <h3 className="text-text-primary font-semibold">{t('worldSetting.languages')}</h3>
                    </div>
                    <p className={`whitespace-pre-wrap ${world.languages ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
                        {world.languages || '—'}
                    </p>
                </div>
            </div>

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