import { html } from 'https://unpkg.com/htm/preact/standalone.module.js';
import { THEMES } from './game.js';

export const Card = ({ card, onClick, is_disabled, onAttack, can_use_weapon, themeKey }) => {
    if (!card) return html`<div class="card-slot-empty"></div>`;

    const handleWeaponClick = (e) => {
        e.stopPropagation();
        onAttack(card, true);
    };

    const handleBareHandClick = (e) => {
        e.stopPropagation();
        onAttack(card, false);
    };

    const theme = THEMES[themeKey];
    
    const renderCardContent = () => {
        if (themeKey === 'Text') {
            return html`
                <div class="card-corner top-left">
                    <span>${card.rank}</span>
                    <span>${card.suit}</span>
                </div>
                <div class="card-center">
                    ${card.suit}
                </div>
                <div class="card-corner bottom-right">
                    <span>${card.rank}</span>
                    <span>${card.suit}</span>
                </div>
            `;
        } else {
            const code = `${card.rank}${card.suit_key[0]}`.toLowerCase();
            const src = `${theme.path}/${code}.${theme.ext}`;
            return html`<img src="${src}" class="card-image" alt="${card.rank}${card.suit}" />`;
        }
    };

    return html`
        <div class="card ${card.color} ${is_disabled ? 'disabled' : ''}" onClick=${() => !is_disabled && onClick(card)}>
            ${renderCardContent()}
            ${card.type === 'MONSTER' && !is_disabled ? html`
                <div class="card-overlay">
                    <button class="overlay-btn" title="Attack with Weapon" disabled=${!can_use_weapon} onClick=${handleWeaponClick}>
                        🗡️
                    </button>
                    <button class="overlay-btn" title="Bare-handed" onClick=${handleBareHandClick}>
                        👊
                    </button>
                </div>
            ` : ''}
        </div>
    `;
};

export const WeaponSlot = ({ weapon, last_enemy_value, themeKey }) => {
    if (!weapon) {
        return html`
            <div class="weapon-slot"><span>No Weapon</span></div>
            <div class="weapon-info">
                <p><strong>Unarmed</strong></p>
                <p>Attack Power: 0</p>
            </div>
        `;
    }

    const max_kill_msg = last_enemy_value === Infinity ? "Any" : `< ${last_enemy_value}`;
    return html`
        <div class="weapon-slot"><${Card} card=${weapon} is_disabled=${true} themeKey=${themeKey} /></div>
        <div class="weapon-info">
            <p><strong>Equipped: ${weapon.rank}${weapon.suit}</strong></p>
            <p>Power: ${weapon.value} | Max Kill: ${max_kill_msg}</p>
        </div>
    `;
};

export const GameOver = ({ won, hp, reset_game }) => {
    const title = won ? "VICTORY!" : "YOU DIED";
    const css_class = won ? "win" : "lose";
    return html`
        <div class="game-over ${css_class}">
            <h2>${title}</h2>
            <p>Final Health: ${won ? hp : "DEAD"}</p>
            <button onClick=${reset_game}>Play Again</button>
        </div>
    `;
};