import React, { useState, useEffect, useRef } from 'react';
import { Editor } from '@monaco-editor/react';
import { registerMonacoCompletions } from '../utils/monacoCompletions';
import {
  getChallenges,
  runCode,
  lintCode,
  getGuidance,
  getHandbookCatalog,
  getHandbookExample,
  Challenge,
  HandbookTopic,
  HandbookCatalog,
} from '../api/client';
import { MarkdownView } from '../components/MarkdownView';
import {
  MessageSquare,
  ChevronLeft,
  Play,
  CheckCircle2,
  Sparkles,
  Code,
  Send,
  HelpCircle,
  BookMarked,
  X,
  Search,
  Zap,
  BookOpen,
  Maximize2,
  Minimize2,
  Terminal,
  GripVertical,
  GripHorizontal,
} from 'lucide-react';

interface WorkspaceProps {
  challengeId: string;
  onBack: () => void;
}

const Workspace: React.FC<WorkspaceProps> = ({ challengeId, onBack }) => {
  const [allChallenges, setAllChallenges] = useState<Challenge[]>([]);
  const [currentChallenge, setCurrentChallenge] = useState<Challenge | null>(null);

  const [code, setCode] = useState('');
  const [stdinText, setStdinText] = useState('');

  // Resizable Layout Dimensions
  const [leftWidth, setLeftWidth] = useState(320); // Left Challenge Panel width in px
  const [rightWidth, setRightWidth] = useState(350); // Right Sidebar width in px
  const [outputHeight, setOutputHeight] = useState(180); // Output Console height in px

  const isDraggingLeft = useRef(false);
  const isDraggingRight = useRef(false);
  const isDraggingOutput = useRef(false);

  const [output, setOutput] = useState<{ status: 'idle' | 'success' | 'error'; text: string }>({
    status: 'idle',
    text: 'Execution and lint output will appear here...',
  });

  // Right sidebar state: 'mentor' | 'handbook' | 'closed'
  const [rightSidebarMode, setRightSidebarMode] = useState<'mentor' | 'handbook' | 'closed'>('mentor');

  // Mentor state
  const [guidance, setGuidance] = useState<string>('Ask the mentor a question or click Check Answer below...');
  const [userQuestion, setUserQuestion] = useState('');
  const [isLoadingGuidance, setIsLoadingGuidance] = useState(false);

  // Handbook W3Schools state
  const [handbookCatalog, setHandbookCatalog] = useState<HandbookCatalog>({ functions: [], subjects: [] });
  const [handbookTab, setHandbookTab] = useState<'functions' | 'subjects'>('functions');
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedTopic, setSelectedTopic] = useState<HandbookTopic | null>(null);
  const [handbookExample, setHandbookExample] = useState<string>(
    'Select a built-in function or topic above to view W3Schools reference card...'
  );
  const [isLoadingExample, setIsLoadingExample] = useState(false);

  const [isRunning, setIsRunning] = useState(false);
  const [isLinting, setIsLinting] = useState(false);

  // Load all challenges
  useEffect(() => {
    getChallenges()
      .then((challenges) => {
        setAllChallenges(challenges);
        const match = challenges.find((c) => (c.id || c.challenge_id) === challengeId);
        if (match) {
          setCurrentChallenge(match);
        } else if (challenges.length > 0) {
          setCurrentChallenge(challenges[0]);
        }
      })
      .catch((err) => console.error('Failed to load challenges:', err));
  }, [challengeId]);

  // Fetch handbook catalog when current challenge language changes
  useEffect(() => {
    if (currentChallenge) {
      getHandbookCatalog(currentChallenge.language)
        .then((catalog) => {
          setHandbookCatalog(catalog);
          if (catalog.functions.length > 0) {
            setSelectedTopic(catalog.functions[0]);
          } else if (catalog.subjects.length > 0) {
            setSelectedTopic(catalog.subjects[0]);
          }
        })
        .catch((err) => console.error('Failed to load handbook catalog:', err));
    }
  }, [currentChallenge]);

  // Global mousemove and mouseup listeners for drag-to-resize splitters
  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (isDraggingLeft.current) {
        const newWidth = Math.max(180, Math.min(600, e.clientX));
        setLeftWidth(newWidth);
      } else if (isDraggingRight.current) {
        const newWidth = Math.max(220, Math.min(700, window.innerWidth - e.clientX));
        setRightWidth(newWidth);
      } else if (isDraggingOutput.current) {
        const newHeight = Math.max(80, Math.min(650, window.innerHeight - e.clientY));
        setOutputHeight(newHeight);
      }
    };

    const handleMouseUp = () => {
      isDraggingLeft.current = false;
      isDraggingRight.current = false;
      isDraggingOutput.current = false;
      document.body.style.cursor = 'default';
      document.body.style.userSelect = 'auto';
    };

    window.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('mouseup', handleMouseUp);
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      window.removeEventListener('mouseup', handleMouseUp);
    };
  }, []);

  const startDraggingLeft = (e: React.MouseEvent) => {
    e.preventDefault();
    isDraggingLeft.current = true;
    document.body.style.cursor = 'col-resize';
    document.body.style.userSelect = 'none';
  };

  const startDraggingRight = (e: React.MouseEvent) => {
    e.preventDefault();
    isDraggingRight.current = true;
    document.body.style.cursor = 'col-resize';
    document.body.style.userSelect = 'none';
  };

  const startDraggingOutput = (e: React.MouseEvent) => {
    e.preventDefault();
    isDraggingOutput.current = true;
    document.body.style.cursor = 'row-resize';
    document.body.style.userSelect = 'none';
  };

  const handleSelectChallenge = (cid: string) => {
    const match = allChallenges.find((c) => (c.id || c.challenge_id) === cid);
    if (match) {
      setCurrentChallenge(match);
    }
  };

  const handleRunCode = async (overrideStdin?: string) => {
    if (!code.trim() || !currentChallenge) return;
    setIsRunning(true);
    setOutput({ status: 'idle', text: 'Executing code...' });
    const inputToSend = overrideStdin !== undefined ? overrideStdin : stdinText;

    try {
      const res = await runCode(currentChallenge.language.toLowerCase() || 'python', code, inputToSend);
      if (res.exit_code === 0) {
        setOutput({
          status: 'success',
          text: res.stdout?.trim() ? `Output:\n${res.stdout}` : '✓ Code executed successfully (exit code 0, no stdout).',
        });
      } else {
        const err = res.stderr?.trim() || res.stdout?.trim() || 'Unknown runtime error';
        setOutput({ status: 'error', text: `✗ Runtime Error (exit code ${res.exit_code}):\n${err}` });
      }
    } catch (err: any) {
      setOutput({ status: 'error', text: `✗ Error running code: ${err.message}` });
    } finally {
      setIsRunning(false);
    }
  };

  const handleSendStdin = () => {
    handleRunCode(stdinText);
  };

  const handleLintCode = async () => {
    if (!code.trim() || !currentChallenge) return;
    setIsLinting(true);
    setOutput({ status: 'idle', text: 'Running syntax & style lint...' });
    try {
      const res = await lintCode(currentChallenge.language.toLowerCase() || 'python', code);
      if (res.exit_code === 0) {
        setOutput({ status: 'success', text: '✓ Syntax & Style clean! No linting errors detected.' });
      } else {
        const raw = (res.stdout || '') + '\n' + (res.stderr || '');
        setOutput({ status: 'error', text: `✗ Lint Error(s):\n${raw.trim()}` });
      }
    } catch (err: any) {
      setOutput({ status: 'error', text: `✗ Error linting code: ${err.message}` });
    } finally {
      setIsLinting(false);
    }
  };

  const handleAskMentor = async (questionToAsk?: string) => {
    if (!currentChallenge) return;
    const q = questionToAsk !== undefined ? questionToAsk : userQuestion.trim();
    const cid = currentChallenge.id || currentChallenge.challenge_id;

    setIsLoadingGuidance(true);
    setRightSidebarMode('mentor');
    setGuidance('⏳ **Mentor is thinking and generating guidance...**\n\n*Analyzing your code, task requirements, and question...*');
    setUserQuestion('');

    try {
      const res = await getGuidance(
        cid,
        currentChallenge.language.toLowerCase() || 'python',
        code,
        q
      );
      const qHeader = q ? `### Question / Evaluation:\n> ${q}\n\n---\n\n` : '';
      setGuidance(`${qHeader}${res.mentor_response || 'No guidance received.'}`);
    } catch (err: any) {
      setGuidance(`⚠️ Error consulting Mentor: ${err.message}`);
    } finally {
      setIsLoadingGuidance(false);
    }
  };

  const handleSelectHandbookTopic = async (topic: HandbookTopic) => {
    if (!currentChallenge) return;
    setSelectedTopic(topic);
    setIsLoadingExample(true);
    setHandbookExample(`⏳ **Generating W3Schools reference card for '${topic.title}' in ${currentChallenge.language}...**\n\n*Consulting LLM backend...*`);

    try {
      const res = await getHandbookExample(currentChallenge.language, topic.id, topic.title);
      if (res.status === 'success') {
        setHandbookExample(res.example_markdown);
      } else {
        setHandbookExample(`⚠️ ${res.message}`);
      }
    } catch (err: any) {
      setHandbookExample(`⚠️ Error generating reference card: ${err.message}`);
    } finally {
      setIsLoadingExample(false);
    }
  };

  const handleCheckAnswer = () => {
    const checkPrompt =
      'Please evaluate my code implementation against all the requirements of this challenge. Check if my solution is complete and correct, point out any missing requirements or edge cases, and give me feedback on my answer.';
    handleAskMentor(checkPrompt);
  };

  const handleKeyDownQuestion = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleAskMentor();
    }
  };

  const handleKeyDownStdin = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      handleSendStdin();
    }
  };

  const activeCId = currentChallenge?.id || currentChallenge?.challenge_id || '';

  // Filter handbook catalog based on active tab and search query
  const rawList = handbookTab === 'functions' ? handbookCatalog.functions : handbookCatalog.subjects;
  const filteredList = rawList.filter((item) =>
    searchQuery.trim() === ''
      ? true
      : item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
        item.desc.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <div className="flex flex-col h-screen bg-darkBg text-gray-100 font-sans overflow-hidden">
      {/* Header Bar */}
      <header className="h-14 border-b border-darkBorder bg-darkSurface px-4 flex justify-between items-center select-none shadow-md z-10 shrink-0">
        <div className="flex items-center gap-4">
          <button
            onClick={onBack}
            className="p-1.5 hover:bg-gray-800 text-gray-400 hover:text-white rounded-lg transition-colors flex items-center gap-1 text-xs"
          >
            <ChevronLeft size={18} />
            <span>Dashboard</span>
          </button>
          <div className="h-4 w-px bg-darkBorder" />

          <div className="flex items-center gap-2">
            <Code className="text-blue-500" size={20} />
            <span className="font-bold text-sm text-white">TactiTerm</span>
          </div>

          <div className="h-4 w-px bg-darkBorder" />

          {/* Challenge Selector */}
          <select
            value={activeCId}
            onChange={(e) => handleSelectChallenge(e.target.value)}
            className="bg-darkBg border border-darkBorder text-gray-200 text-xs rounded-lg px-3 py-1.5 focus:outline-none focus:border-blue-500 font-medium"
          >
            {allChallenges.map((c) => {
              const cid = c.id || c.challenge_id;
              return (
                <option key={cid} value={cid}>
                  {c.name} ({c.difficulty})
                </option>
              );
            })}
          </select>
        </div>

        {/* Action Controls */}
        <div className="flex items-center gap-2">
          <button
            onClick={() => handleRunCode()}
            disabled={isRunning || !code.trim()}
            className="px-3.5 py-1.5 bg-green-600 hover:bg-green-500 disabled:opacity-50 text-white font-semibold text-xs rounded-lg transition-all flex items-center gap-1.5 shadow-sm"
          >
            {isRunning ? (
              <div className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
            ) : (
              <Play size={14} fill="currentColor" />
            )}
            <span>Run</span>
          </button>

          <button
            onClick={handleLintCode}
            disabled={isLinting || !code.trim()}
            className="px-3.5 py-1.5 bg-blue-600 hover:bg-blue-500 disabled:opacity-50 text-white font-semibold text-xs rounded-lg transition-all flex items-center gap-1.5 shadow-sm"
          >
            {isLinting ? (
              <div className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
            ) : (
              <CheckCircle2 size={14} />
            )}
            <span>Lint</span>
          </button>

          <button
            onClick={handleCheckAnswer}
            disabled={isLoadingGuidance || !code.trim()}
            className="px-3.5 py-1.5 bg-emerald-600 hover:bg-emerald-500 disabled:opacity-50 text-white font-semibold text-xs rounded-lg transition-all flex items-center gap-1.5 shadow-sm"
          >
            <Sparkles size={14} />
            <span>Check Answer</span>
          </button>

          {/* Dual Sidebar Toggles */}
          <button
            onClick={() => setRightSidebarMode(rightSidebarMode === 'mentor' ? 'closed' : 'mentor')}
            className={`px-3.5 py-1.5 font-semibold text-xs rounded-lg transition-all flex items-center gap-1.5 shadow-sm border ${
              rightSidebarMode === 'mentor'
                ? 'bg-amber-500/20 text-amber-300 border-amber-500/40'
                : 'bg-gray-800 text-gray-300 hover:bg-gray-700 border-gray-700'
            }`}
          >
            <MessageSquare size={14} />
            <span>Mentor</span>
          </button>

          <button
            onClick={() => setRightSidebarMode(rightSidebarMode === 'handbook' ? 'closed' : 'handbook')}
            className={`px-3.5 py-1.5 font-semibold text-xs rounded-lg transition-all flex items-center gap-1.5 shadow-sm border ${
              rightSidebarMode === 'handbook'
                ? 'bg-indigo-500/20 text-indigo-300 border-indigo-500/40'
                : 'bg-gray-800 text-gray-300 hover:bg-gray-700 border-gray-700'
            }`}
          >
            <BookMarked size={14} />
            <span>W3Schools Handbook</span>
          </button>
        </div>
      </header>

      {/* Main Container */}
      <div className="flex flex-1 overflow-hidden relative">
        {/* Left Column: Challenge Specifications (Scalable Width) */}
        <div
          style={{ width: `${leftWidth}px` }}
          className="border-r border-darkBorder bg-darkBg flex flex-col overflow-hidden shrink-0"
        >
          <div className="p-3 bg-darkSurface border-b border-darkBorder flex justify-between items-center">
            <h2 className="text-xs font-bold uppercase tracking-wider text-gray-400">Challenge Details</h2>
            {currentChallenge && (
              <span className="px-2 py-0.5 bg-blue-500/10 border border-blue-500/20 text-blue-400 text-[10px] uppercase font-bold rounded">
                {currentChallenge.language}
              </span>
            )}
          </div>

          <div className="flex-1 p-5 overflow-y-auto space-y-6">
            {currentChallenge ? (
              <>
                <div>
                  <h1 className="text-xl font-bold text-white mb-2">{currentChallenge.name}</h1>
                  <span
                    className={`inline-block px-2.5 py-0.5 text-[10px] uppercase font-bold rounded border ${
                      currentChallenge.difficulty.toLowerCase() === 'easy'
                        ? 'bg-green-500/10 text-green-400 border-green-500/20'
                        : currentChallenge.difficulty.toLowerCase() === 'medium'
                        ? 'bg-amber-500/10 text-amber-400 border-amber-500/20'
                        : 'bg-red-500/10 text-red-400 border-red-500/20'
                    }`}
                  >
                    {currentChallenge.difficulty}
                  </span>
                </div>

                <div>
                  <h3 className="text-xs font-bold uppercase tracking-wider text-blue-400 mb-2">Description</h3>
                  <p className="text-xs text-gray-300 leading-relaxed bg-darkSurface p-3 rounded-xl border border-darkBorder/50">
                    {currentChallenge.description}
                  </p>
                </div>

                {currentChallenge.requirements && currentChallenge.requirements.length > 0 && (
                  <div>
                    <h3 className="text-xs font-bold uppercase tracking-wider text-blue-400 mb-2">Requirements</h3>
                    <ul className="space-y-1.5">
                      {currentChallenge.requirements.map((req, idx) => (
                        <li key={idx} className="text-xs text-gray-300 flex items-start gap-2">
                          <span className="text-blue-500 font-bold">•</span>
                          <span>{req}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                )}

                {currentChallenge.hints && currentChallenge.hints.length > 0 && (
                  <div>
                    <h3 className="text-xs font-bold uppercase tracking-wider text-amber-400 mb-2">Hints</h3>
                    <ul className="space-y-1.5">
                      {currentChallenge.hints.map((hint, idx) => (
                        <li key={idx} className="text-xs text-gray-400 flex items-start gap-2 bg-amber-500/5 p-2 rounded-lg border border-amber-500/10">
                          <HelpCircle size={14} className="text-amber-400 shrink-0 mt-0.5" />
                          <span>{hint}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                )}
              </>
            ) : (
              <p className="text-xs text-gray-400">Loading details...</p>
            )}
          </div>
        </div>

        {/* Resizable Splitter Handle: Left Column */}
        <div
          onMouseDown={startDraggingLeft}
          className="w-1.5 bg-darkBorder hover:bg-blue-500 active:bg-blue-600 cursor-col-resize flex items-center justify-center shrink-0 group transition-colors"
          title="Drag to resize Challenge Panel"
        >
          <GripVertical size={10} className="text-gray-600 group-hover:text-white" />
        </div>

        {/* Middle Column: Monaco Code Editor & Resizable Output Console */}
        <div className="flex-1 flex flex-col bg-[#1e1e1e] overflow-hidden">
          <div className="bg-darkBg text-gray-400 px-4 py-2 text-xs flex justify-between items-center border-b border-darkBorder shrink-0">
            <span className="font-mono text-blue-400">main.py</span>
            <span className="text-[11px] text-gray-500">TactiTerm IDE</span>
          </div>

          {/* Code Editor */}
          <div className="flex-1 relative">
            <Editor
              height="100%"
              defaultLanguage={currentChallenge?.language.toLowerCase() || 'python'}
              language={currentChallenge?.language.toLowerCase() || 'python'}
              defaultValue=""
              value={code}
              theme="vs-dark"
              onMount={(_, monaco) => registerMonacoCompletions(monaco)}
              onChange={(val) => setCode(val || '')}
              options={{
                minimap: { enabled: false },
                fontSize: 13,
                automaticLayout: true,
                scrollBeyondLastLine: false,
                padding: { top: 12 },
                quickSuggestions: true,
                suggestOnTriggerCharacters: true,
              }}
            />
          </div>

          {/* Resizable Splitter Handle: Output Console */}
          <div
            onMouseDown={startDraggingOutput}
            className="h-1.5 bg-darkBorder hover:bg-blue-500 active:bg-blue-600 cursor-row-resize flex items-center justify-center shrink-0 group transition-colors"
            title="Drag up/down to resize Output Console"
          >
            <GripHorizontal size={10} className="text-gray-600 group-hover:text-white" />
          </div>

          {/* Scalable Output & Stdin Input Terminal Area */}
          <div
            style={{ height: `${outputHeight}px` }}
            className="border-t border-darkBorder bg-black/90 p-4 font-mono text-xs flex flex-col overflow-hidden shrink-0"
          >
            <div className="flex justify-between items-center text-gray-400 pb-2 mb-2 border-b border-gray-800 text-[11px] uppercase font-bold shrink-0">
              <div className="flex items-center gap-2">
                <Terminal size={14} className="text-blue-400" />
                <span>Output Console</span>
                {output.status === 'success' && <span className="text-green-400 lowercase font-normal">(clean)</span>}
                {output.status === 'error' && <span className="text-red-400 lowercase font-normal">(error)</span>}
              </div>
            </div>

            <pre className={`flex-1 overflow-y-auto whitespace-pre-wrap leading-relaxed ${
              output.status === 'error' ? 'text-red-400' : 'text-emerald-400'
            }`}>
              {output.text}
            </pre>

            {/* Interactive Stdin Input Bar */}
            <div className="mt-3 pt-3 border-t border-gray-800 flex gap-2 font-sans shrink-0">
              <input
                type="text"
                value={stdinText}
                onChange={(e) => setStdinText(e.target.value)}
                onKeyDown={handleKeyDownStdin}
                placeholder="Type program input (stdin) and hit Enter to run with input..."
                className="flex-1 bg-darkSurface border border-darkBorder rounded-lg px-3 py-1.5 text-xs text-gray-200 placeholder-gray-500 focus:outline-none focus:border-blue-500"
              />
              <button
                onClick={handleSendStdin}
                disabled={isRunning}
                className="px-3.5 py-1.5 bg-blue-600 hover:bg-blue-500 disabled:opacity-50 text-white font-semibold text-xs rounded-lg transition-all flex items-center gap-1.5 shadow-sm"
              >
                <Send size={13} />
                <span>Send Input</span>
              </button>
            </div>
          </div>
        </div>

        {/* Resizable Splitter Handle: Right Column */}
        {rightSidebarMode !== 'closed' && (
          <div
            onMouseDown={startDraggingRight}
            className="w-1.5 bg-darkBorder hover:bg-blue-500 active:bg-blue-600 cursor-col-resize flex items-center justify-center shrink-0 group transition-colors"
            title="Drag to resize Right Sidebar"
          >
            <GripVertical size={10} className="text-gray-600 group-hover:text-white" />
          </div>
        )}

        {/* Right Column Mode 1: Mentor Sidebar (Scalable Width) */}
        {rightSidebarMode === 'mentor' && (
          <div
            style={{ width: `${rightWidth}px` }}
            className="border-l border-darkBorder bg-darkSurface flex flex-col overflow-hidden shrink-0"
          >
            <div className="p-3 border-b border-darkBorder bg-darkBg flex justify-between items-center">
              <h2 className="flex items-center gap-2 font-bold text-amber-400 text-xs uppercase tracking-wider">
                <MessageSquare size={16} /> Mentor
              </h2>
              <button
                onClick={() => setRightSidebarMode('closed')}
                className="text-gray-400 hover:text-white text-xs px-2 py-0.5 rounded hover:bg-gray-800"
              >
                <X size={16} />
              </button>
            </div>

            {/* Mentor Guidance View */}
            <div className="flex-1 p-4 overflow-y-auto space-y-4">
              <div className="p-4 bg-darkBg border border-darkBorder rounded-xl shadow-inner">
                <MarkdownView content={guidance} />
              </div>
            </div>

            {/* Question Input Area */}
            <div className="p-4 border-t border-darkBorder bg-darkBg flex flex-col gap-2">
              <label className="text-[11px] font-bold text-gray-400 uppercase tracking-wider">
                Ask Question (Enter to Send):
              </label>
              <textarea
                value={userQuestion}
                onChange={(e) => setUserQuestion(e.target.value)}
                onKeyDown={handleKeyDownQuestion}
                placeholder="e.g. How should I structure my loop? Why is my variable returning None?"
                className="w-full h-20 bg-darkSurface border border-darkBorder rounded-lg p-2.5 text-xs text-gray-200 placeholder-gray-500 focus:outline-none focus:border-amber-500 resize-none font-sans"
              />
              <div className="flex gap-2">
                <button
                  onClick={() => handleAskMentor()}
                  disabled={isLoadingGuidance}
                  className="flex-1 py-2 bg-amber-600 hover:bg-amber-500 disabled:opacity-50 text-white font-semibold text-xs rounded-lg transition-all flex items-center justify-center gap-1.5 shadow-sm"
                >
                  <Send size={14} />
                  <span>Ask Mentor</span>
                </button>

                <button
                  onClick={handleCheckAnswer}
                  disabled={isLoadingGuidance || !code.trim()}
                  className="py-2 px-3 bg-emerald-700 hover:bg-emerald-600 disabled:opacity-50 text-white font-semibold text-xs rounded-lg transition-all flex items-center justify-center gap-1"
                  title="Check Answer"
                >
                  <Sparkles size={14} />
                  <span>Check</span>
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Right Column Mode 2: W3Schools-Style Handbook Sidebar (Scalable Width) */}
        {rightSidebarMode === 'handbook' && (
          <div
            style={{ width: `${rightWidth}px` }}
            className="border-l border-darkBorder bg-darkSurface flex flex-col overflow-hidden shrink-0"
          >
            <div className="p-3 border-b border-darkBorder bg-darkBg flex justify-between items-center">
              <h2 className="flex items-center gap-2 font-bold text-indigo-400 text-xs uppercase tracking-wider">
                <BookMarked size={16} /> W3Schools Reference ({currentChallenge?.language || 'Python'})
              </h2>
              <button
                onClick={() => setRightSidebarMode('closed')}
                className="text-gray-400 hover:text-white text-xs px-2 py-0.5 rounded hover:bg-gray-800"
              >
                <X size={16} />
              </button>
            </div>

            {/* Category Tabs & Search Bar */}
            <div className="p-3 border-b border-darkBorder bg-darkBg flex flex-col gap-2.5">
              <div className="flex bg-darkSurface p-1 rounded-xl border border-darkBorder">
                <button
                  onClick={() => setHandbookTab('functions')}
                  className={`flex-1 py-1.5 text-[11px] font-bold rounded-lg transition-all flex items-center justify-center gap-1.5 ${
                    handbookTab === 'functions'
                      ? 'bg-indigo-600 text-white shadow-sm'
                      : 'text-gray-400 hover:text-white'
                  }`}
                >
                  <Zap size={13} />
                  <span>Built-ins</span>
                </button>
                <button
                  onClick={() => setHandbookTab('subjects')}
                  className={`flex-1 py-1.5 text-[11px] font-bold rounded-lg transition-all flex items-center justify-center gap-1.5 ${
                    handbookTab === 'subjects'
                      ? 'bg-indigo-600 text-white shadow-sm'
                      : 'text-gray-400 hover:text-white'
                  }`}
                >
                  <BookOpen size={13} />
                  <span>Subjects</span>
                </button>
              </div>

              <div className="relative">
                <Search size={14} className="absolute left-2.5 top-2.5 text-gray-500" />
                <input
                  type="text"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  placeholder="Filter functions or topics..."
                  className="w-full bg-darkSurface border border-darkBorder rounded-lg pl-8 pr-3 py-1.5 text-xs text-gray-200 focus:outline-none focus:border-indigo-500 font-sans"
                />
              </div>
            </div>

            {/* Topic Catalog List */}
            <div className="p-3 border-b border-darkBorder bg-darkBg flex flex-col gap-1.5 max-h-48 overflow-y-auto">
              {filteredList.length === 0 ? (
                <p className="text-xs text-gray-500 italic p-2">No matching functions or topics found.</p>
              ) : (
                filteredList.map((item) => (
                  <button
                    key={item.id}
                    onClick={() => handleSelectHandbookTopic(item)}
                    className={`text-left p-2 rounded-lg text-xs transition-all border ${
                      selectedTopic?.id === item.id
                        ? 'bg-indigo-600/20 border-indigo-500/50 text-indigo-300 font-bold'
                        : 'bg-darkSurface border-darkBorder/50 text-gray-300 hover:bg-gray-800'
                    }`}
                  >
                    <div className="font-semibold flex items-center gap-1.5">
                      {handbookTab === 'functions' ? <Zap size={12} className="text-amber-400" /> : <BookOpen size={12} className="text-blue-400" />}
                      <span>{item.title}</span>
                    </div>
                    <div className="text-[10px] text-gray-400 font-normal line-clamp-1 mt-0.5">{item.desc}</div>
                  </button>
                ))
              )}
            </div>

            {/* Generated LLM W3Schools Reference Card View */}
            <div className="flex-1 p-4 overflow-y-auto">
              <div className="p-4 bg-darkBg border border-darkBorder rounded-xl shadow-inner">
                <MarkdownView content={handbookExample} />
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default Workspace;
