{"version":3,"file":"AiCodeExplainer-CLIi0ncg.js","sources":["../../components/features/AiCodeExplainer.tsx"],"sourcesContent":["\n\nimport React, { useState, useCallback, useEffect, useMemo } from 'react';\nimport { explainCodeStructured, StructuredExplanation } from '../../services/geminiService.ts';\nimport { CpuChipIcon } from '../icons/InterfaceIcons.tsx';\nimport { MarkdownRenderer } from '../shared/MarkdownRenderer.tsx';\n\nconst LoadingSpinner: React.FC<{text?: string}> = ({ text = 'AI is analyzing...'}) => (\n    <div className=\"flex items-center justify-center space-x-2\">\n        <div className=\"w-2 h-2 rounded-full bg-primary animate-pulse\" style={{ animationDelay: '0s' }}></div>\n        <div className=\"w-2 h-2 rounded-full bg-primary animate-pulse\" style={{ animationDelay: '0.2s' }}></div>\n        <div className=\"w-2 h-2 rounded-full bg-primary animate-pulse\" style={{ animationDelay: '0.4s' }}></div>\n        <span className=\"text-text-secondary ml-2\">{text}</span>\n    </div>\n);\n\nconst exampleCode = `const bubbleSort = (arr) => {\n  for (let i = 0; i < arr.length; i++) {\n    for (let j = 0; j < arr.length - i - 1; j++) {\n      if (arr[j] > arr[j + 1]) {\n        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];\n      }\n    }\n  }\n  return arr;\n};`;\n\ntype ExplanationTab = 'summary' | 'lineByLine' | 'complexity' | 'suggestions';\n\nconst simpleSyntaxHighlight = (code: string) => {\n    return code\n        .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')\n        .replace(/(const|let|var|function|return|if|for|=>)/g, '<span class=\"text-indigo-600\">$1</span>')\n        .replace(/(\\'|\")(.*?)(\\'|\")/g, '<span class=\"text-emerald-700\">$1$2$3</span>')\n        .replace(/(\\/\\/.*)/g, '<span class=\"text-gray-500\">$1</span>')\n        .replace(/(\\{|\\}|\\(|\\)|\\[|\\])/g, '<span class=\"text-gray-600\">$1</span>');\n};\n\nexport const AiCodeExplainer: React.FC<{ initialCode?: string }> = ({ initialCode }) => {\n    const [code, setCode] = useState<string>(initialCode || exampleCode);\n    const [explanation, setExplanation] = useState<StructuredExplanation | null>(null);\n    const [isLoading, setIsLoading] = useState<boolean>(false);\n    const [error, setError] = useState<string>('');\n    const [activeTab, setActiveTab] = useState<ExplanationTab>('summary');\n\n    const handleExplain = useCallback(async (codeToExplain: string) => {\n        if (!codeToExplain.trim()) {\n            setError('Please enter some code to explain.');\n            return;\n        }\n        setIsLoading(true);\n        setError('');\n        setExplanation(null);\n        setActiveTab('summary');\n        try {\n            const result = await explainCodeStructured(codeToExplain);\n            setExplanation(result);\n        } catch (err) {\n            const errorMessage = err instanceof Error ? err.message : 'An unknown error occurred.';\n            setError(`Failed to get explanation: ${errorMessage}`);\n        } finally {\n            setIsLoading(false);\n        }\n    }, []);\n    \n    useEffect(() => {\n        if (initialCode) {\n            setCode(initialCode);\n            handleExplain(initialCode);\n        }\n    }, [initialCode, handleExplain]);\n\n    const highlightedCode = useMemo(() => simpleSyntaxHighlight(code), [code]);\n\n    const renderTabContent = () => {\n        if (!explanation) return null;\n        switch(activeTab) {\n            case 'summary':\n                return <MarkdownRenderer content={explanation.summary} />;\n            case 'lineByLine':\n                return (\n                    <div className=\"space-y-3\">\n                        {explanation.lineByLine.map((item, index) => (\n                            <div key={index} className=\"p-3 bg-background rounded-md border border-border\">\n                                <p className=\"font-mono text-xs text-primary mb-1\">Lines: {item.lines}</p>\n                                <p className=\"text-sm\">{item.explanation}</p>\n                            </div>\n                        ))}\n                    </div>\n                );\n            case 'complexity':\n                return (\n                    <div>\n                        <p><strong>Time Complexity:</strong> <span className=\"font-mono text-amber-600\">{explanation.complexity.time}</span></p>\n                        <p><strong>Space Complexity:</strong> <span className=\"font-mono text-amber-600\">{explanation.complexity.space}</span></p>\n                    </div>\n                );\n            case 'suggestions':\n                return (\n                     <ul className=\"list-disc list-inside space-y-2\">\n                        {explanation.suggestions.map((item, index) => <li key={index}>{item}</li>)}\n                    </ul>\n                );\n        }\n    }\n\n    return (\n        <div className=\"h-full flex flex-col p-4 sm:p-6 lg:p-8 text-text-primary\">\n            <header className=\"mb-6\">\n                <h1 className=\"text-3xl font-bold flex items-center\">\n                    <CpuChipIcon />\n                    <span className=\"ml-3\">AI Code Explainer</span>\n                </h1>\n                <p className=\"text-text-secondary mt-1\">Get a detailed, structured analysis of any code snippet.</p>\n            </header>\n            <div className=\"flex-grow flex flex-col gap-4 min-h-0\">\n                <div className=\"flex flex-col h-2/5 min-h-[200px]\">\n                    <label htmlFor=\"code-input\" className=\"text-sm font-medium text-text-secondary mb-2\">Your Code</label>\n                    <div className=\"relative flex-grow\">\n                        <textarea\n                            id=\"code-input\"\n                            value={code}\n                            onChange={(e) => setCode(e.target.value)}\n                            placeholder=\"Paste your code here...\"\n                            spellCheck=\"false\"\n                            className=\"absolute inset-0 w-full h-full p-4 bg-transparent border border-border rounded-md resize-none font-mono text-sm text-transparent caret-primary focus:ring-2 focus:ring-primary focus:outline-none z-10\"\n                        />\n                        <pre \n                            aria-hidden=\"true\"\n                            className=\"absolute inset-0 w-full h-full p-4 bg-gray-50 border border-transparent rounded-md font-mono text-sm pointer-events-none z-0 whitespace-pre-wrap\"\n                            dangerouslySetInnerHTML={{ __html: highlightedCode + '\\n' }} \n                        />\n                    </div>\n                </div>\n\n                <div className=\"flex-shrink-0\">\n                    <button\n                        onClick={() => handleExplain(code)}\n                        disabled={isLoading}\n                        className=\"btn-primary w-full max-w-xs mx-auto flex items-center justify-center px-6 py-3\"\n                    >\n                        {isLoading ? <LoadingSpinner text=\"Analyzing...\"/> : 'Analyze Code'}\n                    </button>\n                </div>\n                \n                <div className=\"flex flex-col flex-grow min-h-0\">\n                    <label className=\"text-sm font-medium text-text-secondary mb-2\">AI Analysis</label>\n                    <div className=\"relative flex-grow flex flex-col bg-surface border border-border rounded-md overflow-hidden\">\n                        <div className=\"flex-shrink-0 flex border-b border-border\">\n                           {(['summary', 'lineByLine', 'complexity', 'suggestions'] as ExplanationTab[]).map(tab => (\n                               <button key={tab} onClick={() => setActiveTab(tab)} disabled={!explanation}\n                                className={`px-4 py-2 text-sm font-medium capitalize transition-colors ${activeTab === tab ? 'bg-gray-100 text-primary' : 'text-text-secondary hover:bg-gray-50 disabled:text-gray-300'}`}>\n                                   {tab.replace(/([A-Z])/g, ' $1')}\n                               </button>\n                           ))}\n                        </div>\n                        <div className=\"p-4 flex-grow overflow-y-auto\">\n                            {isLoading && <div className=\"flex items-center justify-center h-full\"><LoadingSpinner /></div>}\n                            {error && <p className=\"text-red-500\">{error}</p>}\n                            {explanation && !isLoading && renderTabContent()}\n                            {!isLoading && !explanation && !error && <div className=\"text-text-secondary h-full flex items-center justify-center\">The analysis will appear here.</div>}\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};"],"names":["LoadingSpinner","text","jsxs","jsx","exampleCode","simpleSyntaxHighlight","code","AiCodeExplainer","initialCode","setCode","useState","explanation","setExplanation","isLoading","setIsLoading","error","setError","activeTab","setActiveTab","handleExplain","useCallback","codeToExplain","result","explainCodeStructured","err","errorMessage","useEffect","highlightedCode","useMemo","renderTabContent","MarkdownRenderer","item","index","CpuChipIcon","e","tab"],"mappings":"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"}