/**
 * @fileoverview React component for PlaygroundViewer.jsx
 * 
 * @module pages.Playground.components.PlaygroundViewer
 */

import React, { useState } from "react";
import { PanelGroup, Panel, PanelResizeHandle } from "react-resizable-panels";
import CodeViewer from "./CodeViewer";
import PlaygroundConsole from "./PlaygroundConsole";

const ResizeHandle = ({ theme }) => {
  return (
    <PanelResizeHandle
      className={`h-3 flex items-center justify-center cursor-row-resize transition-colors duration-200 group ${
        theme === "light"
          ? "bg-gray-200 hover:bg-gray-300"
          : "bg-gray-700 hover:bg-gray-600"
      }`}
    >
      <div className="flex flex-row gap-1 items-center justify-center">
        <span
          className={`block w-1 h-1 rounded-full transition-colors duration-200 ${
            theme === "light"
              ? "bg-gray-500 group-hover:bg-gray-700"
              : "bg-gray-400 group-hover:bg-gray-200"
          }`}
        />
        <span
          className={`block w-1 h-1 rounded-full transition-colors duration-200 ${
            theme === "light"
              ? "bg-gray-500 group-hover:bg-gray-700"
              : "bg-gray-400 group-hover:bg-gray-200"
          }`}
        />
        <span
          className={`block w-1 h-1 rounded-full transition-colors duration-200 ${
            theme === "light"
              ? "bg-gray-500 group-hover:bg-gray-700"
              : "bg-gray-400 group-hover:bg-gray-200"
          }`}
        />
      </div>
    </PanelResizeHandle>
  );
};

const PlaygroundViewer = ({
  generatedCode,
  output,
  onClearConsole,
  theme = "light",
}) => {
  const [activeTab, setActiveTab] = useState("javascript");

  const tabs = [
    { id: "javascript", label: "JavaScript", icon: "JS" },
    { id: "python", label: "Python", icon: "PY" },
  ];

  const renderContent = () => {
    switch (activeTab) {
      case "javascript":
        return (
          <CodeViewer
            code={generatedCode.javascript}
            language="javascript"
            title="JavaScript"
            theme={theme}
          />
        );

      case "python":
        return (
          <CodeViewer
            code={generatedCode.python}
            language="python"
            title="Python"
            theme={theme}
          />
        );

      default:
        return null;
    }
  };

  return (
    <div
      className={`flex flex-col h-full transition-colors duration-300 ${theme === "light" ? "bg-white" : "bg-[#1e1e1e]"}`}
    >
      <div
        className={`flex p-0 gap-0.5 transition-all duration-300 ${theme === "light" ? "bg-gray-100 border-b border-gray-300" : "bg-[#252526] border-b border-gray-700"}`}
      >
        {tabs.map((tab) => (
          <button
            key={tab.id}
            className={`flex items-center gap-1.5 px-4 py-2.5 bg-transparent border-none cursor-pointer text-[13px] font-medium transition-all duration-200 ${
              activeTab === tab.id
                ? `border-b-2 border-highlight ${theme === "light" ? "text-black bg-white" : "text-white bg-[#1e1e1e]"}`
                : `border-b-2 border-transparent ${theme === "light" ? "text-gray-600 hover:bg-gray-200 hover:text-gray-800" : "text-gray-500 hover:bg-[#2a2a2a] hover:text-gray-300"}`
            }`}
            onClick={() => setActiveTab(tab.id)}
            title={tab.label}
          >
            <span className="text-sm">{tab.icon}</span>
            <span className="font-sans">{tab.label}</span>
          </button>
        ))}
      </div>

      <div className="flex-1 overflow-hidden flex flex-col">
        <PanelGroup direction="vertical">
          <Panel defaultSize={50} minSize={25}>
            <div className="h-full overflow-hidden" data-tour="code-viewer">
              {renderContent()}
            </div>
          </Panel>

          <ResizeHandle theme={theme} />

          <Panel defaultSize={50} minSize={25}>
            <div className="h-full overflow-hidden" data-tour="console">
              <PlaygroundConsole
                output={output}
                onClear={onClearConsole}
                theme={theme}
              />
            </div>
          </Panel>
        </PanelGroup>
      </div>
    </div>
  );
};

export default PlaygroundViewer;
