"use client";
import StudioSidebar from "./StudioSidebar";
import StudioEditor from "./StudioEditor";
import StudioRightPanel from "./StudioRightPanel";
import StudioBottomPanel from "./StudioBottomPanel";
import StudioNetworkViz from "./StudioNetworkViz";
import { useState } from "react";
import { toast } from "sonner";

export default function StudioLayout({ children }: { children?: React.ReactNode }) {
  const [platform, setPlatform] = useState("Roblox");
  const [actionsOpen, setActionsOpen] = useState(false);

  const handlePlatformChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setPlatform(e.target.value);
    toast.success(`Platform changed to ${e.target.value}`);
  };

  const handleAction = (action: string) => {
    toast.info(`${action} action triggered!`);
    setActionsOpen(false);
  };

  return (
    <div className="ide-container">
      {/* Title Bar */}
      <div className="title-bar" style={{ position: 'relative', zIndex: 10 }}>
        <div className="flex items-center w-full gap-4">
          <div className="logo-small">AETHEX STUDIO</div>
          <div className="project-name">Project: <span>AeThex Terminal</span></div>
          <div className="flex items-center gap-3 ml-6">
            <span className="text-xs">Platform:</span>
            <select
              className="bg-[#22242A] text-xs px-3 py-1 rounded border border-blue-500 focus:ring-2 focus:ring-blue-400"
              value={platform}
              onChange={handlePlatformChange}
            >
              <option>Roblox</option>
              <option>Web</option>
              <option>Mobile</option>
              <option>Desktop</option>
            </select>
          </div>
          <div className="group relative">
            <button
              className="px-3 py-1 text-xs bg-gray-700 rounded hover:bg-gray-800 flex items-center gap-1"
              tabIndex={0}
              aria-label="Actions"
              onClick={() => setActionsOpen((v) => !v)}
            >
              <span>Actions</span>
              <svg className="w-3 h-3 ml-1" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" /></svg>
            </button>
            {actionsOpen && (
              <div className="absolute right-0 mt-2 w-32 bg-[#23272F] border border-border rounded shadow-lg z-50">
                <button className="block w-full text-left px-4 py-2 text-xs hover:bg-blue-600" onClick={() => handleAction('Save')}>Save</button>
                <button className="block w-full text-left px-4 py-2 text-xs hover:bg-green-600" onClick={() => handleAction('Run')}>Run</button>
                <button className="block w-full text-left px-4 py-2 text-xs hover:bg-gray-600" onClick={() => handleAction('Export')}>Export</button>
                <button className="block w-full text-left px-4 py-2 text-xs hover:bg-gray-600" onClick={() => handleAction('Settings')}>Settings</button>
              </div>
            )}
          </div>
          {/* Legend */}
          <div className="flex items-center gap-4 ml-auto">
            <span className="flex items-center gap-1 text-xs"><span className="w-2 h-2 rounded-full bg-red-500 inline-block"></span> Foundation</span>
            <span className="flex items-center gap-1 text-xs"><span className="w-2 h-2 rounded-full bg-blue-500 inline-block"></span> Corporation</span>
            <span className="flex items-center gap-1 text-xs"><span className="w-2 h-2 rounded-full bg-yellow-400 inline-block"></span> Labs</span>
          </div>
        </div>
      </div>
      <div className="main-content">
        <div className="sidebar"><StudioSidebar /></div>
        <div className="editor-area"><StudioEditor /></div>
        <div className="right-panel"><StudioRightPanel /></div>
      </div>
      <div className="bottom-panel"><StudioBottomPanel /></div>
      <div className="network-viz"><StudioNetworkViz /></div>
      {children}
    </div>
  );
}