'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, isValidElement, createContext, useContext } from 'react';
import { cn } from '@/lib/utils';
import { Copy, Check } from '@phosphor-icons/react';
/**
 * Pre and Code components for code block styling
 */ // Context to detect if we're inside a CodeGroup
export const CodeGroupContext = /*#__PURE__*/ createContext(false);
// Extract text content from nested React elements
function extractTextContent(node) {
    if (typeof node === 'string') return node;
    if (typeof node === 'number') return String(node);
    if (Array.isArray(node)) return node.map(extractTextContent).join('');
    if (/*#__PURE__*/ isValidElement(node)) {
        const props = node.props;
        if (props.children) {
            return extractTextContent(props.children);
        }
    }
    return '';
}
// Get display name for language
function getDisplayName(language) {
    const displayNames = {
        javascript: 'JavaScript',
        typescript: 'TypeScript',
        python: 'Python',
        java: 'Java',
        go: 'Go',
        rust: 'Rust',
        ruby: 'Ruby',
        php: 'PHP',
        csharp: 'C#',
        cpp: 'C++',
        c: 'C',
        swift: 'Swift',
        kotlin: 'Kotlin',
        bash: 'Bash',
        shell: 'Shell',
        json: 'JSON',
        yaml: 'YAML',
        html: 'HTML',
        css: 'CSS',
        sql: 'SQL',
        markdown: 'Markdown',
        text: 'Text',
        plaintext: 'Text'
    };
    return displayNames[language.toLowerCase()] || language.charAt(0).toUpperCase() + language.slice(1);
}
export function Pre({ children, className, 'data-language': dataLanguage, ...props }) {
    const isInCodeGroup = useContext(CodeGroupContext);
    const [copied, setCopied] = useState(false);
    // If inside CodeGroup, render plain pre (CodeGroup handles styling)
    if (isInCodeGroup) {
        return /*#__PURE__*/ _jsx("pre", {
            className: cn('overflow-x-auto', className),
            ...props,
            children: children
        });
    }
    // Extract language from children's className or data attribute
    let language = dataLanguage || 'text';
    let content = '';
    if (/*#__PURE__*/ isValidElement(children)) {
        const childProps = children.props;
        const childClassName = childProps.className || '';
        const match = childClassName.match(/language-(\w+)/);
        if (match) {
            language = match[1];
        }
        content = extractTextContent(childProps.children);
    }
    const handleCopy = async ()=>{
        try {
            await navigator.clipboard.writeText(content.trim());
            setCopied(true);
            setTimeout(()=>setCopied(false), 2000);
        } catch (err) {
            console.error('Failed to copy:', err);
        }
    };
    const displayName = getDisplayName(language);
    // Standalone code block - styled like CodeGroup
    return /*#__PURE__*/ _jsxs("div", {
        className: "docs-code-block my-4 rounded-xl border border-zinc-800 overflow-hidden bg-[#1a1a1a]",
        children: [
            /*#__PURE__*/ _jsxs("div", {
                className: "docs-code-header flex items-center justify-between bg-[#262626] px-2",
                children: [
                    /*#__PURE__*/ _jsx("div", {
                        className: "flex overflow-x-auto",
                        children: /*#__PURE__*/ _jsxs("div", {
                            className: "docs-code-tab px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white relative",
                            children: [
                                displayName,
                                /*#__PURE__*/ _jsx("span", {
                                    className: "absolute bottom-0 left-0 right-0 h-0.5 bg-emerald-500 rounded-full"
                                })
                            ]
                        })
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        className: "docs-code-actions flex items-center gap-1 pr-2",
                        children: /*#__PURE__*/ _jsx("button", {
                            type: "button",
                            onClick: handleCopy,
                            className: cn('p-1.5 rounded text-zinc-500 hover:text-zinc-300', 'hover:bg-zinc-700/50 transition-colors', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50'),
                            title: "Copy code",
                            children: copied ? /*#__PURE__*/ _jsx(Check, {
                                className: "h-4 w-4 text-emerald-500",
                                weight: "bold"
                            }) : /*#__PURE__*/ _jsx(Copy, {
                                className: "h-4 w-4"
                            })
                        })
                    })
                ]
            }),
            /*#__PURE__*/ _jsx("div", {
                className: "docs-code-content overflow-x-auto",
                children: /*#__PURE__*/ _jsx("pre", {
                    className: cn('p-4 m-0 bg-transparent text-sm', className),
                    ...props,
                    children: children
                })
            })
        ]
    });
}
export function Code({ children, className, ...props }) {
    const isCodeBlock = className?.includes('language-');
    if (isCodeBlock) {
        return /*#__PURE__*/ _jsx("code", {
            className: cn(className, 'bg-transparent'),
            ...props,
            children: children
        });
    }
    // Inline code
    return /*#__PURE__*/ _jsx("code", {
        className: cn('docs-inline-code px-1.5 py-0.5 rounded text-sm font-mono', 'bg-zinc-800 text-zinc-200', className),
        ...props,
        children: children
    });
}
