'use client';
import React from 'react';
import {SpellEditState, spellPowerLevels, SpellTagProps} from '@/lib/models/Spell';
import {SeriesSpellDetailResponse} from '@/lib/models/Series';
import {SelectBoxProps} from '@/shared/interface';
import SpellTagChip from '@/components/book/settings/spells/SpellTagChip';
import {useTranslations} from 'next-intl';

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;
    }

    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>
        );
    }

    const selectedTags: SpellTagProps[] = getSelectedTags();
    const powerLevelText: string = getLocalizedPowerLevel();

    return (
        <div>
            <h3 className="text-text-primary font-semibold text-base mb-4">{spell.name}</h3>

            {renderField(t('spellDetail.description'), spell.description)}
            {renderField(t('spellDetail.appearance'), spell.appearance)}
            {powerLevelText && renderField(t('spellDetail.powerLevel'), powerLevelText)}
            {renderField(t('spellDetail.components'), spell.components)}
            {renderField(t('spellDetail.limitations'), spell.limitations)}
            {renderField(t('spellDetail.notes'), 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>
    );
}