<?php
/**
 * Brain Chat Panel - KineticCopy v1.4.0
 * BrainWave SVG animation replaces emoji bubble.
 * Greeting system: Haiku-generated, user-aware, injected on first open.
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// BrainWave SVG - reusable, two colour variants
// Bubble (dark bg): waves in #ffee89
// Header (dark bar): waves in #ffee89 (smaller)
?>

<?php
/**
 * Inline BrainWave SVG helper.
 * @param string $color   Stroke colour
 * @param int    $width   SVG width
 * @param int    $height  SVG height
 */
function kc_brainwave_svg( string $color = '#ffee89', int $width = 32, int $height = 20 ): string {
    return sprintf(
        '<svg class="kc-brainwave" viewBox="0 0 60 40" width="%d" height="%d" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path class="kc-wave kc-wave-1" d="M0 15 Q15 8,30 15 T60 15" stroke="%s" stroke-width="2.5" fill="none" stroke-linecap="round"/>
            <path class="kc-wave kc-wave-2" d="M0 20 Q15 13,30 20 T60 20" stroke="%s" stroke-width="2"   fill="none" stroke-linecap="round" opacity="0.8"/>
            <path class="kc-wave kc-wave-3" d="M0 25 Q15 18,30 25 T60 25" stroke="%s" stroke-width="1.5" fill="none" stroke-linecap="round" opacity="0.6"/>
        </svg>',
        $width,
        $height,
        esc_attr( $color ),
        esc_attr( $color ),
        esc_attr( $color )
    );
}
?>

<!-- ── Brain Bubble (collapsed) ─────────────────────────────────────── -->
<button id="claude-chat-btn"
        class="claude-fab"
        title="<?php esc_attr_e( 'Chat with Brain', 'claude-ai-copywriter' ); ?>"
        aria-label="<?php esc_attr_e( 'Open Brain chat', 'claude-ai-copywriter' ); ?>">
    <?php echo kc_brainwave_svg( '#ffee89', 32, 20 ); ?>
</button>

<!-- ── Brain Chat Panel (expanded) ──────────────────────────────────── -->
<div id="claude-chat-panel" class="claude-chat" hidden role="dialog"
     aria-label="<?php esc_attr_e( 'Brain - copy strategy assistant', 'claude-ai-copywriter' ); ?>">

    <!-- History Panel (slides in over messages) -->
    <div id="kc-history-panel" role="region" aria-label="<?php esc_attr_e( 'Previous conversations', 'claude-ai-copywriter' ); ?>">
        <div class="kc-history-header">
            <span class="kc-history-header-label"><?php esc_html_e( 'Previous conversations', 'claude-ai-copywriter' ); ?></span>
            <button class="kc-history-close" id="kc-history-close" aria-label="<?php esc_attr_e( 'Back to chat', 'claude-ai-copywriter' ); ?>">
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                    <line x1="18" y1="6" x2="6" y2="18"/>
                    <line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
            </button>
        </div>
        <div id="kc-history-list" class="kc-history-list">
            <p class="kc-history-empty"><?php esc_html_e( 'No previous conversations yet.', 'claude-ai-copywriter' ); ?></p>
        </div>
    </div>

    <!-- Header -->
    <div class="claude-chat-header">
        <div class="claude-chat-title">
            <?php echo kc_brainwave_svg( 'rgba(255,255,255,0.85)', 24, 15 ); ?>
            <span><?php esc_html_e( 'Brain', 'claude-ai-copywriter' ); ?></span>
        </div>
        <div class="claude-chat-actions">
            <button id="kc-chat-history"
                    class="claude-chat-btn"
                    title="<?php esc_attr_e( 'Previous conversations', 'claude-ai-copywriter' ); ?>"
                    aria-label="<?php esc_attr_e( 'Browse previous conversations', 'claude-ai-copywriter' ); ?>">
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10"/>
                    <polyline points="12 6 12 12 16 14"/>
                </svg>
            </button>
            <button id="claude-chat-close"
                    class="claude-chat-btn"
                    title="<?php esc_attr_e( 'Close', 'claude-ai-copywriter' ); ?>"
                    aria-label="<?php esc_attr_e( 'Close Brain panel', 'claude-ai-copywriter' ); ?>">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                    <line x1="18" y1="6" x2="6" y2="18"/>
                    <line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
            </button>
        </div>
    </div>

    <!-- Messages -->
    <div id="claude-chat-messages" class="claude-chat-messages">
        <!-- Greeting placeholder - filled by JS on first open -->
        <div id="kc-brain-greeting" class="claude-message claude-message-ai kc-greeting" hidden>
            <div class="claude-message-content kc-greeting-content">
                <span class="kc-greeting-text"></span>
            </div>
        </div>
        <!-- Greeting loading skeleton (shown while greeting fetches) -->
        <div id="kc-brain-greeting-loading" class="claude-message claude-message-ai" hidden>
            <div class="claude-message-content kc-greeting-skeleton">
                <span class="kc-skeleton-line"></span>
                <span class="kc-skeleton-line kc-skeleton-short"></span>
            </div>
        </div>
    </div>

    <!-- Clear history — subtle footer link, less accident-prone than header button -->
    <button id="claude-chat-clear"
            type="button"
            title="<?php esc_attr_e( 'Clear chat history', 'claude-ai-copywriter' ); ?>"
            aria-label="<?php esc_attr_e( 'Clear chat history', 'claude-ai-copywriter' ); ?>">
        <?php esc_html_e( 'Clear history', 'claude-ai-copywriter' ); ?>
    </button>

    <!-- Input row -->
    <div class="claude-chat-input-row">
        <button id="claude-chat-research"
                class="claude-chat-research"
                title="<?php esc_attr_e( 'Search the web first', 'claude-ai-copywriter' ); ?>"
                aria-label="<?php esc_attr_e( 'Enable web research for this message', 'claude-ai-copywriter' ); ?>">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                <circle cx="11" cy="11" r="8"/>
                <line x1="21" y1="21" x2="16.65" y2="16.65"/>
            </svg>
        </button>
        <textarea id="claude-chat-input"
                  placeholder="<?php esc_attr_e( 'Ask anything about your copy...', 'claude-ai-copywriter' ); ?>"
                  rows="1"
                  aria-label="<?php esc_attr_e( 'Type your message', 'claude-ai-copywriter' ); ?>"></textarea>
        <button id="claude-chat-send"
                class="claude-chat-send"
                title="<?php esc_attr_e( 'Send message', 'claude-ai-copywriter' ); ?>"
                aria-label="<?php esc_attr_e( 'Send message to Brain', 'claude-ai-copywriter' ); ?>">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                <line x1="22" y1="2" x2="11" y2="13"/>
                <polygon points="22 2 15 22 11 13 2 9 22 2"/>
            </svg>
        </button>
    </div>

    <!-- Thinking indicator -->
    <div id="claude-chat-loading" class="claude-chat-loading" hidden aria-live="polite" aria-label="<?php esc_attr_e( 'Brain is thinking', 'claude-ai-copywriter' ); ?>">
        <div class="claude-typing-indicator">
            <span></span><span></span><span></span>
        </div>
    </div>

</div><!-- /#claude-chat-panel -->
