// ==========================================
// ChatPane Kit — MessageActions Component
// ==========================================
// Per-message action toolbar: regenerate, copy, delete.
// Appears on hover/focus. Independently importable.
//
// Usage:
//   html`<${MessageActions} role="assistant" content=${text}
//         onRegenerate=${fn} onDelete=${fn} />`

const html = window.html;
const { useState, useCallback } = window.hooks;

const REGEN_SVG = html`
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="1 4 1 10 7 10"/>
        <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
    </svg>`;

const COPY_SVG = html`
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <rect x="9" y="9" width="13" height="13" rx="2"/>
        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
    </svg>`;

const CHECK_SVG = html`
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"/>
    </svg>`;

const DELETE_SVG = html`
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="3 6 5 6 21 6"/>
        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
    </svg>`;

/**
 * @param {{
 *   role: string,
 *   content: string,
 *   onRegenerate?: () => void,
 *   onDelete?: () => void,
 * }} props
 */
export function MessageActions({ role, content, onRegenerate, onDelete }) {
    const [copied, setCopied] = useState(false);

    const _copy = useCallback(async () => {
        try {
            await navigator.clipboard.writeText(content || '');
        } catch (_) {
            const ta = document.createElement('textarea');
            ta.value = content || '';
            ta.style.cssText = 'position:fixed;left:-9999px';
            document.body.appendChild(ta);
            ta.select();
            document.execCommand('copy');
            document.body.removeChild(ta);
        }
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
    }, [content]);

    return html`
        <div class="sw-chat-msg__actions" role="toolbar" aria-label="Message actions">
            ${role === 'assistant' && onRegenerate && html`
                <button class="sw-chat-msg__action-btn"
                        title="Regenerate"
                        onClick=${onRegenerate}
                        aria-label="Regenerate response">
                    ${REGEN_SVG}
                </button>`}
            <button class="sw-chat-msg__action-btn"
                    title=${copied ? 'Copied!' : 'Copy'}
                    onClick=${_copy}
                    aria-label="Copy message text">
                ${copied ? CHECK_SVG : COPY_SVG}
            </button>
            ${onDelete && html`
                <button class="sw-chat-msg__action-btn sw-chat-msg__action-btn--danger"
                        title="Delete"
                        onClick=${onDelete}
                        aria-label="Delete message">
                    ${DELETE_SVG}
                </button>`}
        </div>`;
}
