'use client';
import React, {Dispatch, SetStateAction, useState} from 'react';
import {defaultTagColors, SpellEditState, spellPowerLevels, SpellTagProps} from "@/lib/models/Spell";
import {SelectBoxProps} from "@/shared/interface";
import CollapsableArea from "@/components/CollapsableArea";
import InputField from "@/components/form/InputField";
import TextInput from "@/components/form/TextInput";
import TexteAreaInput from "@/components/form/TexteAreaInput";
import SelectBox from "@/components/form/SelectBox";
import SpellTagChip from "@/components/book/settings/spells/SpellTagChip";
import DeleteButton from "@/components/form/DeleteButton";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {
    faArrowLeft,
    faBolt,
    faBook,
    faEye,
    faHatWizard,
    faPlus,
    faPuzzlePiece,
    faSave,
    faStickyNote,
    faTags,
    faTriangleExclamation
} from "@fortawesome/free-solid-svg-icons";
import {useTranslations} from "next-intl";

interface SpellDetailProps {
    selectedSpell: SpellEditState;
    setSelectedSpell: Dispatch<SetStateAction<SpellEditState | null>>;
    availableTags: SpellTagProps[];
    handleSpellChange: (key: keyof SpellEditState, value: string | string[] | null) => void;
    handleSaveSpell: () => Promise<void>;
    handleDeleteSpell: (spellId: string) => Promise<void>;
    handleCreateTagInline: (name: string, color: string) => Promise<SpellTagProps | null>;
}

export default function SpellDetail(
    {
        selectedSpell,
        setSelectedSpell,
        availableTags,
        handleSpellChange,
        handleSaveSpell,
        handleDeleteSpell,
        handleCreateTagInline,
    }: SpellDetailProps) {
    const t = useTranslations();
    
    const [tagSearchQuery, setTagSearchQuery] = useState<string>('');
    const [showTagDropdown, setShowTagDropdown] = useState<boolean>(false);
    const [isCreatingTag, setIsCreatingTag] = useState<boolean>(false);
    const [newTagColor, setNewTagColor] = useState<string>(defaultTagColors[0]);
    
    function handleAddTag(tagId: string): void {
        if (!selectedSpell.tags.includes(tagId)) {
            handleSpellChange('tags', [...selectedSpell.tags, tagId]);
        }
        setTagSearchQuery('');
        setShowTagDropdown(false);
    }
    
    function handleRemoveTag(tagId: string): void {
        handleSpellChange('tags', selectedSpell.tags.filter((id: string) => id !== tagId));
    }
    
    function getFilteredAvailableTags(): SpellTagProps[] {
        return availableTags.filter((tag: SpellTagProps) => {
            const notAlreadyAdded = !selectedSpell.tags.includes(tag.id);
            const matchesSearch = tag.name.toLowerCase().includes(tagSearchQuery.toLowerCase());
            return notAlreadyAdded && matchesSearch;
        });
    }
    
    function getSelectedTags(): SpellTagProps[] {
        return availableTags.filter((tag: SpellTagProps) => selectedSpell.tags.includes(tag.id));
    }
    
    async function handleCreateTag(): Promise<void> {
        if (!tagSearchQuery.trim()) {
            return;
        }
        const newTag: SpellTagProps | null = await handleCreateTagInline(tagSearchQuery.trim(), newTagColor);
        if (newTag) {
            handleAddTag(newTag.id);
            setIsCreatingTag(false);
            setNewTagColor(defaultTagColors[0]);
        }
    }
    
    function getLocalizedPowerLevels(): SelectBoxProps[] {
        return spellPowerLevels.map((level: SelectBoxProps): SelectBoxProps => ({
            value: level.value,
            label: t(level.label),
        }));
    }
    
    const filteredTags = getFilteredAvailableTags();
    const selectedTags = getSelectedTags();
    const showCreateOption = tagSearchQuery.trim() && !availableTags.some((tag: SpellTagProps) => tag.name.toLowerCase() === tagSearchQuery.toLowerCase());
    
    
    return (
        <div className="space-y-4">
            <div
                className="flex justify-between items-center p-4 border-b border-secondary/50 bg-tertiary/50 backdrop-blur-sm">
                <button
                    onClick={() => setSelectedSpell(null)}
                    className="flex items-center gap-2 bg-secondary/50 py-2 px-4 rounded-xl border border-secondary/50 hover:bg-secondary hover:border-secondary hover:shadow-md hover:scale-105 transition-all duration-200"
                >
                    <FontAwesomeIcon icon={faArrowLeft} className="text-primary w-4 h-4"/>
                    <span className="text-text-primary font-medium">{t("spellDetail.back")}</span>
                </button>
                <span className="text-text-primary font-semibold text-lg">
                    {selectedSpell.name || t("spellDetail.newSpell")}
                </span>
                <div className="flex items-center gap-2">
                    {selectedSpell.id && (
                        <DeleteButton
                            onDelete={(): Promise<void> => handleDeleteSpell(selectedSpell.id as string)}
                            confirmTitle={t("spellDetail.deleteTitle")}
                            confirmMessage={t("spellDetail.deleteMessage", {name: selectedSpell.name})}
                            confirmButtonText={t("common.delete")}
                            cancelButtonText={t("common.cancel")}
                        />
                    )}
                    <button
                        onClick={handleSaveSpell}
                        className="flex items-center justify-center bg-primary w-10 h-10 rounded-xl border border-primary-dark shadow-md hover:shadow-lg hover:scale-110 transition-all duration-200"
                    >
                        <FontAwesomeIcon icon={selectedSpell.id ? faSave : faPlus}
                                         className="text-text-primary w-5 h-5"/>
                    </button>
                </div>
            </div>
            
            <div className="overflow-y-auto max-h-[calc(100vh-350px)] space-y-4 px-2 pb-4">
                <CollapsableArea title={t("spellDetail.basicInfo")} icon={faHatWizard}>
                    <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
                        <InputField
                            fieldName={t("spellDetail.name")}
                            input={
                                <TextInput
                                    value={selectedSpell.name}
                                    setValue={(e) => handleSpellChange('name', e.target.value)}
                                    placeholder={t("spellDetail.namePlaceholder")}
                                />
                            }
                        />
                        
                        <InputField
                            fieldName={t("spellDetail.description")}
                            icon={faBook}
                            input={
                                <TexteAreaInput
                                    value={selectedSpell.description}
                                    setValue={(e) => handleSpellChange('description', e.target.value)}
                                    placeholder={t("spellDetail.descriptionPlaceholder")}
                                />
                            }
                        />
                        
                        <InputField
                            fieldName={t("spellDetail.appearance")}
                            icon={faEye}
                            input={
                                <TexteAreaInput
                                    value={selectedSpell.appearance}
                                    setValue={(e) => handleSpellChange('appearance', e.target.value)}
                                    placeholder={t("spellDetail.appearancePlaceholder")}
                                />
                            }
                        />
                    </div>
                </CollapsableArea>
                
                <CollapsableArea title={t("spellDetail.tags")} icon={faTags}>
                    <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
                        {selectedTags.length > 0 && (
                            <div className="flex flex-wrap gap-2 mb-3">
                                {selectedTags.map((tag: SpellTagProps) => (
                                    <SpellTagChip
                                        key={tag.id}
                                        tag={tag}
                                        onRemove={() => handleRemoveTag(tag.id)}
                                    />
                                ))}
                            </div>
                        )}
                        
                        <div className="relative">
                            <TextInput
                                value={tagSearchQuery}
                                setValue={(e) => {
                                    setTagSearchQuery(e.target.value);
                                    setShowTagDropdown(true);
                                }}
                                placeholder={t("spellDetail.addTag")}
                                onFocus={() => setShowTagDropdown(true)}
                            />
                            
                            {showTagDropdown && (tagSearchQuery || filteredTags.length > 0) && (
                                <div
                                    className="absolute z-10 w-full mt-1 bg-tertiary border border-secondary/50 rounded-xl shadow-lg max-h-48 overflow-y-auto">
                                    {filteredTags.map((tag: SpellTagProps) => (
                                        <button
                                            key={tag.id}
                                            onClick={() => handleAddTag(tag.id)}
                                            className="w-full flex items-center gap-2 px-4 py-2 hover:bg-secondary/50 transition-colors text-left"
                                        >
                                            <span
                                                className="w-3 h-3 rounded-full"
                                                style={{backgroundColor: tag.color || '#3B82F6'}}
                                            />
                                            <span className="text-text-primary">{tag.name}</span>
                                        </button>
                                    ))}
                                    
                                    {showCreateOption && !isCreatingTag && (
                                        <button
                                            onClick={() => setIsCreatingTag(true)}
                                            className="w-full flex items-center gap-2 px-4 py-2 hover:bg-secondary/50 transition-colors text-left border-t border-secondary/30"
                                        >
                                            <FontAwesomeIcon icon={faPlus} className="text-primary w-3 h-3"/>
                                            <span className="text-primary font-medium">
                                                {t("spellDetail.createTag", {name: tagSearchQuery})}
                                            </span>
                                        </button>
                                    )}
                                    
                                    {isCreatingTag && (
                                        <div className="p-4 border-t border-secondary/30">
                                            <p className="text-text-secondary text-sm mb-3">
                                                {t("spellDetail.createTag", {name: tagSearchQuery})}
                                            </p>
                                            <div className="flex flex-wrap gap-2 mb-3">
                                                {defaultTagColors.map((color: string) => (
                                                    <button
                                                        key={color}
                                                        onClick={() => setNewTagColor(color)}
                                                        className={`w-8 h-8 rounded-full transition-all duration-200 ${newTagColor === color ? 'ring-2 ring-offset-2 ring-primary scale-110' : 'hover:scale-110'}`}
                                                        style={{backgroundColor: color}}
                                                    />
                                                ))}
                                            </div>
                                            <div className="flex gap-2">
                                                <button
                                                    onClick={() => setIsCreatingTag(false)}
                                                    className="flex-1 py-2 px-3 bg-secondary/50 text-text-primary rounded-lg hover:bg-secondary transition-colors"
                                                >
                                                    {t("common.cancel")}
                                                </button>
                                                <button
                                                    onClick={handleCreateTag}
                                                    className="flex-1 py-2 px-3 bg-primary text-text-primary rounded-lg hover:bg-primary-dark transition-colors"
                                                >
                                                    {t("common.confirm")}
                                                </button>
                                            </div>
                                        </div>
                                    )}
                                </div>
                            )}
                        </div>
                    </div>
                </CollapsableArea>
                
                <CollapsableArea title={t("spellDetail.powerLevel")} icon={faBolt}>
                    <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
                        <SelectBox
                            defaultValue={selectedSpell.powerLevel || 'none'}
                            onChangeCallBack={(e) => handleSpellChange('powerLevel', e.target.value === 'none' ? null : e.target.value)}
                            data={getLocalizedPowerLevels()}
                        />
                    </div>
                </CollapsableArea>
                
                <CollapsableArea title={t("spellDetail.components")} icon={faPuzzlePiece}>
                    <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
                        <TexteAreaInput
                            value={selectedSpell.components || ''}
                            setValue={(e) => handleSpellChange('components', e.target.value || null)}
                            placeholder={t("spellDetail.componentsPlaceholder")}
                        />
                    </div>
                </CollapsableArea>
                
                <CollapsableArea title={t("spellDetail.limitations")} icon={faTriangleExclamation}>
                    <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
                        <TexteAreaInput
                            value={selectedSpell.limitations || ''}
                            setValue={(e) => handleSpellChange('limitations', e.target.value || null)}
                            placeholder={t("spellDetail.limitationsPlaceholder")}
                        />
                    </div>
                </CollapsableArea>
                
                <CollapsableArea title={t("spellDetail.notes")} icon={faStickyNote}>
                    <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
                        <TexteAreaInput
                            value={selectedSpell.notes || ''}
                            setValue={(e) => handleSpellChange('notes', e.target.value || null)}
                            placeholder={t("spellDetail.notesPlaceholder")}
                        />
                    </div>
                </CollapsableArea>
            </div>
        </div>
    );
}