/**
 * React 组件集成示例
 * 如何在 React 项目中集成 GLM-4 语音聊天
 */

// ============ 方式 1: 直接使用 iframe ============
// 最简单的方式，推荐用于快速集成

import React from 'react';

export function VoiceWidgetSimple() {
    return (
        <div style={{
            position: 'fixed',
            bottom: '20px',
            right: '20px',
            zIndex: 999
        }}>
            <iframe
                src="/voice/index.html"
                width="450"
                height="600"
                frameBorder="0"
                allow="microphone; speaker"
                style={{
                    borderRadius: '12px',
                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'
                }}
            />
        </div>
    );
}

// ============ 方式 2: 包装成可控的组件 ============
// 支持配置和事件处理

interface VoiceWidgetProps {
    position?: 'fixed' | 'absolute';
    bottom?: number;
    right?: number;
    top?: number;
    left?: number;
    width?: number;
    height?: number;
    theme?: 'light' | 'dark';
    onLoad?: () => void;
    onError?: (error: Error) => void;
}

export function VoiceWidget({
    position = 'fixed',
    bottom = 20,
    right = 20,
    width = 450,
    height = 600,
    onLoad,
    onError
}: VoiceWidgetProps) {
    const iframeRef = React.useRef<HTMLIFrameElement>(null);

    React.useEffect(() => {
        const iframe = iframeRef.current;
        if (!iframe) return;

        // 监听 iframe 加载
        const handleLoad = () => {
            console.log('Voice widget loaded');
            onLoad?.();
        };

        iframe.addEventListener('load', handleLoad);
        return () => iframe.removeEventListener('load', handleLoad);
    }, [onLoad]);

    return (
        <div style={{
            position: position as any,
            bottom,
            right,
            zIndex: 999,
            width,
            height
        }}>
            <iframe
                ref={iframeRef}
                src="/voice/index.html"
                width={width}
                height={height}
                frameBorder="0"
                allow="microphone; speaker"
                style={{
                    borderRadius: '12px',
                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
                    border: 'none'
                }}
            />
        </div>
    );
}

// ============ 方式 3: 侧边栏布局 ============
// 将语音助手放在侧边栏

export function LayoutWithVoiceWidget({ children }: { children: React.ReactNode }) {
    return (
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 450px', height: '100vh' }}>
            <main style={{ overflowY: 'auto' }}>
                {children}
            </main>
            <aside style={{ borderLeft: '1px solid #eee' }}>
                <iframe
                    src="/voice/index.html"
                    width="100%"
                    height="100%"
                    frameBorder="0"
                    allow="microphone; speaker"
                    style={{ border: 'none' }}
                />
            </aside>
        </div>
    );
}

// ============ 方式 4: 模态对话框 ============
// 按钮触发显示/隐藏

export function VoiceWidgetModal() {
    const [isOpen, setIsOpen] = React.useState(true);

    return (
        <>
            <button
                onClick={() => setIsOpen(!isOpen)}
                style={{
                    position: 'fixed',
                    bottom: '20px',
                    right: '20px',
                    zIndex: 1000,
                    width: '60px',
                    height: '60px',
                    borderRadius: '50%',
                    border: 'none',
                    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                    color: 'white',
                    fontSize: '24px',
                    cursor: 'pointer',
                    boxShadow: '0 4px 12px rgba(102, 126, 234, 0.4)',
                    display: isOpen ? 'none' : 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                }}
            >
                🎤
            </button>

            {isOpen && (
                <div style={{
                    position: 'fixed',
                    bottom: '20px',
                    right: '20px',
                    zIndex: 999,
                    width: '450px',
                    height: '600px',
                    borderRadius: '12px',
                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
                    background: 'white'
                }}>
                    <iframe
                        src="/voice/index.html"
                        width="100%"
                        height="100%"
                        frameBorder="0"
                        allow="microphone; speaker"
                        style={{ borderRadius: '12px', border: 'none' }}
                    />
                    <button
                        onClick={() => setIsOpen(false)}
                        style={{
                            position: 'absolute',
                            top: '10px',
                            right: '10px',
                            width: '32px',
                            height: '32px',
                            borderRadius: '50%',
                            border: 'none',
                            background: '#f0f0f0',
                            cursor: 'pointer',
                            zIndex: 1001,
                            fontSize: '16px'
                        }}
                    >
                        ✕
                    </button>
                </div>
            )}
        </>
    );
}

// ============ 方式 5: 自定义 Hook ============
// 更高级的用法

interface UseVoiceWidgetOptions {
    autoOpen?: boolean;
    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
}

export function useVoiceWidget(options?: UseVoiceWidgetOptions) {
    const [isOpen, setIsOpen] = React.useState(options?.autoOpen ?? true);
    const iframeRef = React.useRef<HTMLIFrameElement>(null);

    const getPositionStyle = () => {
        const base = { zIndex: 999, width: 450, height: 600 };
        switch (options?.position) {
            case 'bottom-left':
                return { ...base, bottom: 20, left: 20 };
            case 'top-right':
                return { ...base, top: 20, right: 20 };
            case 'top-left':
                return { ...base, top: 20, left: 20 };
            default: // bottom-right
                return { ...base, bottom: 20, right: 20 };
        }
    };

    const VoiceComponent = () => (
        <div style={getPositionStyle() as any}>
            <iframe
                ref={iframeRef}
                src="/voice/index.html"
                width={450}
                height={600}
                frameBorder="0"
                allow="microphone; speaker"
                style={{ borderRadius: '12px', boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)' }}
            />
        </div>
    );

    return {
        VoiceComponent,
        isOpen,
        setIsOpen,
        iframeRef
    };
}

// ============ 方式 6: 完整页面应用 ============
// 使用 iframe 但支持更多交互

export default function App() {
    const [apiKey, setApiKey] = React.useState('');
    const [isConfigured, setIsConfigured] = React.useState(false);

    const handleConfigApiKey = () => {
        const key = prompt('请输入你的 GLM-4 API 密钥：');
        if (key) {
            setApiKey(key);
            localStorage.setItem('glm_api_key', key);
            setIsConfigured(true);
        }
    };

    return (
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 450px', height: '100vh' }}>
            {/* 主内容区 */}
            <main style={{
                overflowY: 'auto',
                padding: '40px',
                background: '#f5f5f5'
            }}>
                <h1>欢迎使用 GLM-4 语音聊天</h1>
                <p>你可以与右侧的 AI 助手进行语音对话。</p>

                {!isConfigured && (
                    <div style={{
                        background: '#fff3cd',
                        padding: '20px',
                        borderRadius: '8px',
                        marginTop: '20px',
                        marginBottom: '20px'
                    }}>
                        <p>⚠️ 首次使用需要配置 API 密钥</p>
                        <button
                            onClick={handleConfigApiKey}
                            style={{
                                marginTop: '10px',
                                padding: '10px 20px',
                                background: '#667eea',
                                color: 'white',
                                border: 'none',
                                borderRadius: '4px',
                                cursor: 'pointer'
                            }}
                        >
                            配置 API 密钥
                        </button>
                    </div>
                )}

                {/* 你的网站内容 */}
                <section style={{
                    background: 'white',
                    padding: '20px',
                    borderRadius: '8px',
                    marginTop: '20px'
                }}>
                    <h2>功能介绍</h2>
                    <ul>
                        <li>💬 智能对话：支持自然语言理解和生成</li>
                        <li>🎙️ 语音输入：长按按钮说话</li>
                        <li>🔊 语音输出：AI 自动回复语音</li>
                        <li>💾 对话记录：自动保存在浏览器本地</li>
                        <li>🔐 隐私保护：完全在浏览器端处理</li>
                    </ul>
                </section>
            </main>

            {/* 语音助手侧边栏 */}
            <aside style={{
                borderLeft: '1px solid #ddd',
                height: '100vh',
                overflowY: 'hidden'
            }}>
                <iframe
                    src="/voice/index.html"
                    width="100%"
                    height="100%"
                    frameBorder="0"
                    allow="microphone; speaker"
                    style={{ border: 'none' }}
                />
            </aside>
        </div>
    );
}

// ============ 使用示例 ============

// 最简单的用法
// <VoiceWidgetSimple />

// 配置选项
// <VoiceWidget position="fixed" bottom={20} right={20} width={450} height={600} />

// 带侧边栏的布局
// <LayoutWithVoiceWidget>
//   <YourContent />
// </LayoutWithVoiceWidget>

// 模态对话框
// <VoiceWidgetModal />

// 使用 Hook
// const { VoiceComponent, isOpen, setIsOpen } = useVoiceWidget({ position: 'bottom-right' });
// return <VoiceComponent />;

// ============ 常见问题 ============

/**
 * Q1: 如何传递 API 密钥给 iframe？
 * A: API 密钥保存在 localStorage 中，iframe 会自动读取。
 *    也可以在打开网页后点击 ⚙️ 手动输入。
 *
 * Q2: 如何与 iframe 通信？
 * A: 使用 window.postMessage() 和 iframe.contentWindow.postMessage()
 *
 * Q3: 如何自定义样式？
 * A: 修改源文件 /voice/index.html 中的 <style> 部分
 *
 * Q4: 支持哪些框架？
 * A: React、Vue、Angular 等任何框架都支持，使用 iframe 最兼容
 *
 * Q5: 如何处理多个 iframe？
 * A: 每个 iframe 独立运行，localStorage 是共享的
 */