'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 {AlertTriangle, Eye, Puzzle, StickyNote, Wand2, Zap} from 'lucide-react';
import {useTranslations} from '@/lib/i18n';
import DetailHeroSection from '@/components/ui/DetailHeroSection';
import DetailField from '@/components/ui/DetailField';

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

export default function SpellSettingsDetail({
                                                spell,
                                                availableTags,
                                                seriesSpell,
                                            }: SpellSettingsDetailProps): 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 t('spellPowerLevels.none');
        }
        const level: SelectBoxProps | undefined = spellPowerLevels.find(function (l: SelectBoxProps): boolean {
            return l.value === spell.powerLevel;
        });
        return level ? t(level.label) : spell.powerLevel;
    }
    
    function getPowerLevelColor(): string {
        switch (spell.powerLevel) {
            case 'weak':
                return 'bg-accent-green/20 text-accent-green border-accent-green/30';
            case 'moderate':
                return 'bg-accent-blue/20 text-accent-blue border-accent-blue/30';
            case 'strong':
                return 'bg-accent-orange/20 text-accent-orange border-accent-orange/30';
            case 'legendary':
                return 'bg-accent-purple/20 text-accent-purple border-accent-purple/30';
            default:
                return 'bg-secondary text-text-secondary border-secondary';
        }
    }
    
    const selectedTags: SpellTagProps[] = getSelectedTags();
    
    return (
        <div className="space-y-6 px-2 pb-4">
            {/* Hero Section */}
            <DetailHeroSection icon={Wand2} title={spell.name || '—'}>
                <div className="flex items-center gap-3 mt-3">
                    <span
                        className={`inline-flex items-center gap-2 px-3 py-1 rounded-lg text-sm border ${getPowerLevelColor()}`}>
                        <Zap className="w-3 h-3" strokeWidth={1.75}/>
                        {getLocalizedPowerLevel()}
                    </span>
                </div>
                {selectedTags.length > 0 && (
                    <div className="flex flex-wrap gap-2 mt-4">
                        {selectedTags.map(function (tag: SpellTagProps): React.JSX.Element {
                            return <SpellTagChip key={tag.id} tag={tag}/>;
                        })}
                    </div>
                )}
            </DetailHeroSection>
            
            {/* Description & Appearance - Side by side */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                <DetailField icon={Wand2} label={t('spellDetail.description')} value={spell.description}/>
                <DetailField icon={Eye} label={t('spellDetail.appearance')} value={spell.appearance}/>
            </div>

            {/* Components & Limitations - Side by side */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                <DetailField icon={Puzzle} label={t('spellDetail.components')} value={spell.components}/>

                <div className="p-5 bg-error/10 rounded-xl border border-error/30">
                    <div className="flex items-center gap-2 mb-3">
                        <AlertTriangle className="w-4 h-4 text-error" strokeWidth={1.75}/>
                        <h3 className="text-text-primary font-semibold">{t('spellDetail.limitations')}</h3>
                    </div>
                    <p className={`whitespace-pre-wrap ${spell.limitations ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
                        {spell.limitations || '—'}
                    </p>
                </div>
            </div>
            
            {/* Notes - Full width */}
            <DetailField icon={StickyNote} label={t('spellDetail.notes')} value={spell.notes}/>
        </div>
    );
}
