packages/client/src/components/layout/PanelLayout.tsx

import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
import Sidebar from './Sidebar';
import MultiFileEditor from '@/components/editor/MultiFileEditor';
import LivePreview from '@/components/preview/LivePreview';
import TerminalPanel from '@/components/terminal/TerminalPanel';
import AIChatPanel from '@/components/ai/AIChatPanel';
import { useEnvStore } from '@/stores/envStore';

interface PanelLayoutProps {
  layout: 'editor' | 'split' | 'preview';
}

function ResizeHandle({ direction = 'vertical' }: { direction?: 'vertical' | 'horizontal' }) {
  return (
    <PanelResizeHandle
      className={`group relative ${direction === 'vertical' ? 'w-1 hover:w-1.5' : 'h-1 hover:h-1.5'} bg-border/50 hover:bg-primary/30 transition-all`}
    >
      <div className={`absolute ${direction === 'vertical' ? 'inset-y-0 -left-0.5 -right-0.5' : 'inset-x-0 -top-0.5 -bottom-0.5'}`} />
    </PanelResizeHandle>
  );
}

export default function PanelLayout({ layout }: PanelLayoutProps) {
  const environment = useEnvStore((s) => s.environment);

  const renderSecondaryPanel = () => {
    if (environment === 'java' || environment === 'python') {
      return <TerminalPanel />;
    }
    return <LivePreview />;
  };

  return (
    <PanelGroup direction="horizontal" className="flex-1 min-h-0">
      {/* Left: Sidebar */}
      <Panel defaultSize={18} minSize={10} maxSize={25} collapsible>
        <Sidebar />
      </Panel>

      <ResizeHandle direction="vertical" />

      {/* Center: Editor + Preview */}
      <Panel defaultSize={52} minSize={30} className="flex flex-col overflow-hidden">
        {layout === 'editor' && <MultiFileEditor />}
        {layout === 'preview' && renderSecondaryPanel()}
        {layout === 'split' && (
          <PanelGroup direction="horizontal">
            <Panel defaultSize={50}>
              <MultiFileEditor />
            </Panel>
            <ResizeHandle direction="vertical" />
            <Panel defaultSize={50}>
              {renderSecondaryPanel()}
            </Panel>
          </PanelGroup>
        )}
      </Panel>

      <ResizeHandle direction="vertical" />

      {/* Right: AI Chat */}
      <Panel defaultSize={30} minSize={20} maxSize={40} collapsible>
        <AIChatPanel />
      </Panel>
    </PanelGroup>
  );
}