"use client";
import dynamic from 'next/dynamic';
import { DashboardProvider, useDashboard } from './components/dashboard/dashboard-context';
import ChatPanel from './components/dashboard/chat-panel';
import CanvasSection from './components/dashboard/canvas-section';

const ConfigPanel = dynamic(
  () => import('./components/dashboard/config-panel'),
  { ssr: false }
);
const VoicePanel = dynamic(
  () => import('./components/dashboard/voice-panel'),
  { ssr: false }
);
const TrustModeConfirmModal = dynamic(
  () => import('./components/dashboard/trust-mode-confirm-modal'),
  { ssr: false }
);
const UpdateBanner = dynamic(
  () => import('./components/update-banner'),
  { ssr: false }
);

function DashboardShell() {
  const {
    chatHidden,
    setChatHidden,
    configOpen,
    trustModePromptOpen,
    trustModeBusy,
    confirmEnableTrustMode,
    cancelEnableTrustMode,
    voiceOpen,
  } = useDashboard();

  return (
    <main
      className={'visual-frame fresh-frame' + (chatHidden ? ' frame-chat-hidden' : '')}
      aria-label="madarX OS product"
    >
      <UpdateBanner />
      <ChatPanel />
      <CanvasSection />
      {chatHidden ? (
        <button
          type="button"
          className="chat-restore-bubble"
          onClick={() => setChatHidden(false)}
          title="Show chat panel"
          aria-label="Show chat panel"
        >
          <svg
            width={20}
            height={20}
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth={2}
            strokeLinecap="round"
            strokeLinejoin="round"
            aria-hidden="true"
          >
            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
          </svg>
        </button>
      ) : null}
      {configOpen ? <ConfigPanel /> : null}
      {trustModePromptOpen ? (
        <TrustModeConfirmModal
          open={trustModePromptOpen}
          busy={trustModeBusy}
          onConfirm={confirmEnableTrustMode}
          onCancel={cancelEnableTrustMode}
        />
      ) : null}
      {voiceOpen ? <VoicePanel /> : null}
    </main>
  );
}

export default function Dashboard() {
  return (
    <DashboardProvider>
      <DashboardShell />
    </DashboardProvider>
  );
}
