'use client';
import React from 'react';
import {SpellEditState, SpellTagProps} from '@/lib/types/spell';
import {spellPowerLevels} from '@/lib/constants/spell';
import {SeriesSpellDetailResponse} from '@/lib/types/series';
import {SelectBoxProps} from '@/components/form/SelectBox';
import SpellTagChip from '@/components/book/settings/spells/SpellTagChip';
import DetailField from '@/components/ui/DetailField';
import {useTranslations} from '@/lib/i18n';

interface SpellEditorDetailProps {
    spell: SpellEditState;
    availableTags: SpellTagProps[];
    seriesSpell?: SeriesSpellDetailResponse | null;
}

/**
 * SpellEditorDetail - Version sidebar lecture seule
 * Layout linéaire simple, juste les infos essentielles empilées
 * PAS de CollapsableArea, PAS de grids
 */
export default function SpellEditorDetail({
                                              spell,
                                              availableTags,
                                              seriesSpell,
                                          }: SpellEditorDetailProps): React.JSX.Element {
    const t = useTranslations();
    
    function getSelectedTags(): SpellTagProps[] {
        return availableTags.filter(function (tag: SpellTagProps): boolean {
            return spell.tags.includes(tag.id);
        });
    }
    
    function getLocalizedPowerLevel(): string {
        if (!spell.powerLevel || spell.powerLevel === 'none') {
            return '';
        }
        const level: SelectBoxProps | undefined = spellPowerLevels.find(function (l: SelectBoxProps): boolean {
            return l.value === spell.powerLevel;
        });
        return level ? t(level.label) : spell.powerLevel;
    }
    
    const selectedTags: SpellTagProps[] = getSelectedTags();
    const powerLevelText: string = getLocalizedPowerLevel();

    return (
        <div>
            <h3 className="text-text-primary font-semibold text-base mb-4">{spell.name}</h3>
            
            <DetailField variant="compact" label={t('spellDetail.description')} value={spell.description}/>
            <DetailField variant="compact" label={t('spellDetail.appearance')} value={spell.appearance}/>
            {powerLevelText &&
                <DetailField variant="compact" label={t('spellDetail.powerLevel')} value={powerLevelText}/>}
            <DetailField variant="compact" label={t('spellDetail.components')} value={spell.components}/>
            <DetailField variant="compact" label={t('spellDetail.limitations')} value={spell.limitations}/>
            <DetailField variant="compact" label={t('spellDetail.notes')} value={spell.notes}/>
            
            {selectedTags.length > 0 && (
                <div className="mb-3">
                    <span className="text-text-secondary text-xs block mb-1">{t('spellDetail.tags')}</span>
                    <div className="flex flex-wrap gap-1.5">
                        {selectedTags.map(function (tag: SpellTagProps): React.JSX.Element {
                            return <SpellTagChip key={tag.id} tag={tag} size="sm"/>;
                        })}
                    </div>
                </div>
            )}
        </div>
    );
}