/* ============================================================
   主應用程式元件 — 外殼含視圖、狀態連接
   ============================================================ */

function editorViewFor(p) {
  if (!p) return 'pixel';
  if (p.type === 'block' || p.type === 'block3d') return 'block';
  if (p.type === 'creature') return 'creature';
  return 'pixel';
}

function App() {
  const [view, setView] = React.useState('home');
  const [project, setProject] = React.useState(null);
  const [user, setUser] = React.useState(null);
  const [showExplorer, setShowExplorer] = React.useState(false);
  const [tool, setTool] = React.useState('pencil');
  const [toasts, setToasts] = React.useState([]);
  const [saveLabel, setSaveLabel] = React.useState('未儲存');
  const [, forceUpdate] = React.useReducer(x => x + 1, 0);

  // 響應式布局狀態
  const [leftPanelCollapsed, setLeftPanelCollapsed] = React.useState(false);
  const [rightPanelCollapsed, setRightPanelCollapsed] = React.useState(false);

  // 觸控模式：自動偵測 + 手動切換
  const [touchMode, setTouchMode] = React.useState(() => {
    if (typeof window !== 'undefined') {
      return (navigator.maxTouchPoints > 0) ||
        matchMedia('(hover: none) and (pointer: coarse)').matches;
    }
    return false;
  });
  const [authRequest, setAuthRequest] = React.useState(null);

  React.useEffect(() => {
    CloudAuth.me().then((u) => {
      setUser(u);
      AppState.user = u;
    });
  }, []);

  // 訂閱 AppState 變更
  React.useEffect(() => {
    return subscribe(() => forceUpdate());
  }, []);

  // 同步專案到 AppState
  React.useEffect(() => {
    AppState.project = project;
    AppState.currentView = view;
    AppState.touchMode = touchMode;
  }, [project, view, touchMode]);

  // 監聽視窗大小變化（用於動態調整）
  React.useEffect(() => {
    const handleResize = () => {
      // 可在此處觸發各畫布的 resize
      window.triggerCanvasResize?.();
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  React.useEffect(() => {
    if (view !== 'block' && view !== 'creature') return undefined;
    const ping = () => window.dispatchEvent(new Event('mcstudio:resize'));
    const id = requestAnimationFrame(ping);
    const t = setTimeout(ping, 80);
    return () => {
      cancelAnimationFrame(id);
      clearTimeout(t);
    };
  }, [view]);

  // Toast 訂閱模式
  React.useEffect(() => {
    const check = setInterval(() => {
      if (AppState.toasts && AppState.toasts.length !== toasts.length) {
        setToasts([...AppState.toasts]);
      }
    }, 100);
    return () => clearInterval(check);
  }, [toasts.length]);

  const applyUser = (u) => {
    setUser(u);
    AppState.user = u;
  };

  const handleLogout = async () => {
    try { await CloudAuth.logout(); } catch (e) {}
    applyUser(null);
    setView('home');
    setProject(null);
    clearEditorState();
    showToast('已登出，雲端專案留在該帳號裡', 'info');
  };

  const saveToCloud = React.useCallback(async (silent) => {
    if (!AppState.user) {
      if (!silent) showToast('請先登入，草稿才會存進你的帳號', 'warning');
      return false;
    }
    const payload = serializeEditorState();
    if (!payload) {
      if (!silent) showToast('沒有可儲存的專案', 'warning');
      return false;
    }
    AppState.saving = true;
    setSaveLabel('儲存中…');
    try {
      const data = await CloudProjects.save(payload);
      AppState.dirty = false;
      if (data.project) {
        AppState.project = { ...AppState.project, ...data.project, cloud: true };
        setProject(prev => prev ? { ...prev, ...data.project, cloud: true } : data.project);
      }
      setSaveLabel('已存到帳號');
      if (!silent) showToast(`已存進帳號「${AppState.user.username}」`, 'success');
      return true;
    } catch (err) {
      setSaveLabel('儲存失敗');
      if (!silent) showToast(err.message || '儲存失敗', 'error');
      return false;
    } finally {
      AppState.saving = false;
    }
  }, []);

  React.useEffect(() => {
    if (view === 'home' || !user) return undefined;
    const timer = setInterval(() => {
      if (AppState.dirty && !AppState.saving) saveToCloud(true);
    }, 20000);
    return () => clearInterval(timer);
  }, [view, user, saveToCloud]);

  React.useEffect(() => {
    const onKey = (e) => {
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
        e.preventDefault();
        saveToCloud(false);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [saveToCloud]);

  const handleNewProject = (p) => {
    clearEditorState();
    if (p.type === 'gui' && typeof seedDefaultGui === 'function') {
      AppState.guiWidgets = seedDefaultGui(p.width, p.height);
      AppState.guiMode = true;
    }
    setProject(p);
    const v = editorViewFor(p);
    setView(v);
    setTool(v === 'pixel' ? 'pencil' : 'rotate');
    setSaveLabel('尚未上傳');
    const recents = loadRecentProjects();
    saveRecentProjects([p, ...recents.filter(x => x.id !== p.id)]);
    showToast(`已建立專案：${p.name}（存檔會進帳號 ${user?.username || ''}）`, 'success');
    setTimeout(() => saveToCloud(true), 400);
  };

  const handleOpenProject = async (p) => {
    if (!user) {
      showToast('請先登入你的帳號', 'warning');
      return;
    }
    showToast('正在從你的帳號載入…', 'info');
    try {
      const data = await CloudProjects.get(p.id);
      await hydrateEditorState(data.payload);
      const meta = data.project || p;
      setProject(meta);
      const v = editorViewFor(meta);
      setView(v);
      setTool(v === 'pixel' ? 'pencil' : 'rotate');
      setSaveLabel('已存到帳號');
      showToast(`已開啟：${meta.name}`, 'success');
    } catch (err) {
      showToast(err.message || '無法開啟專案', 'error');
    }
  };

  const handleDeleteProject = async (id) => {
    await CloudProjects.remove(id);
    showToast('已從這個帳號刪除', 'info');
  };

  const handleExport = () => {
    showToast('正在匯出...', 'info');
    window.triggerExport?.();
  };

  const handleSave = () => {
    saveToCloud(false);
  };

  const handleHome = () => {
    if (AppState.dirty && user) saveToCloud(true);
    setView('home');
  };

  const handleSwitchView = (newView) => {
    if (!project) {
      showToast('請先建立或開啟專案', 'warning');
      return;
    }
    if (newView === view) return;
    clearUndoStack();
    setView(newView);
    setTool(newView === 'pixel' ? 'pencil' : 'rotate');
    const labels = {
      pixel: '2D 像素編輯器',
      block: '3D 方塊編輯器',
      creature: '3D 生物編輯器',
    };
    showToast(`切換至 ${labels[newView] || newView}`, 'info');
  };

  const handleResetLayout = () => {
    setLeftPanelCollapsed(false);
    setRightPanelCollapsed(false);
    window.resetView?.();
    showToast('布局已重置', 'info');
  };

  const handleToggleTouchMode = () => {
    setTouchMode(v => !v);
    showToast(`已切換至 ${!touchMode ? '觸控' : '桌面'} 模式`, 'info');
  };

  // 決定視圖元件
  const isHome = view === 'home';

  // 視圖專用工具
  const viewTool = (view === 'block' || view === 'creature') ? 'rotate' : tool;

  const shellClassName = 'app-shell' + (touchMode ? ' touch-mode' : '');

  return React.createElement('div', { className: shellClassName },
    // 功能表列
    React.createElement(MenuBar, {
      view,
      onExport: handleExport,
      onSave: handleSave,
      onHome: handleHome,
      onSwitchView: handleSwitchView,
      project,
      onResetLayout: handleResetLayout,
      onToggleTouchMode: handleToggleTouchMode,
      touchMode,
      user,
      onLogin: () => {
        handleHome();
        setAuthRequest({ mode: 'login', t: Date.now() });
      },
      onLogout: handleLogout,
    }),

    // 首頁（全寬）
    isHome ? (
      React.createElement(HomeView, {
        onNewProject: handleNewProject,
        onOpenProject: handleOpenProject,
        onDeleteProject: handleDeleteProject,
        user,
        onAuth: applyUser,
        onLogout: handleLogout,
        authRequest,
        style: { gridColumn: '1 / -1' },
        touchMode,
      })
    ) : (
      React.createElement(React.Fragment, null,
        // 左側工具列
        React.createElement(Toolbar, {
          tool: viewTool,
          onToolChange: (t) => setTool(t),
          viewMode: view,
          onHome: handleHome,
        }),

        // 檔案總管面板（從左側工具列覆蓋彈出）
        showExplorer && React.createElement(ExplorerPanel, {
          view, project,
          onClose: () => setShowExplorer(false),
        }),

        // 主視圖區域（每個視圖管理自己的布局，包含右側面板）
        React.createElement('div', { className: 'view-content' },
          view === 'pixel' && React.createElement(PixelView, { key: project?.id + '-pixel', project, touchMode, rightPanelCollapsed, onToggleRightPanel: () => setRightPanelCollapsed(v => !v) }),
          view === 'block' && React.createElement(BlockView, { key: project?.id + '-block', project, touchMode, rightPanelCollapsed, onToggleRightPanel: () => setRightPanelCollapsed(v => !v) }),
          view === 'creature' && React.createElement(CreatureView, { key: project?.id + '-creature', project, touchMode, rightPanelCollapsed, onToggleRightPanel: () => setRightPanelCollapsed(v => !v) }),
        ),
      )
    ),

    // 狀態列
    !isHome && React.createElement('div', { className: 'status-bar' },
      React.createElement('div', { className: 'status-bar__left' },
        React.createElement('div', { className: 'status-item' },
          React.createElement('span', { className: 'status-item__label' }, '專案：'),
          project?.name || '未命名',
        ),
        React.createElement('div', { className: 'status-item' },
          React.createElement('span', { className: 'status-item__label' }, '類型：'),
          project ? ({ pixel: '2D像素', block: '3D方塊', creature: '3D生物', item: '物品', gui: '介面' }[project.type] || project.type) : '-',
        ),
        React.createElement('div', { className: 'status-item' },
          React.createElement('span', { className: 'status-item__label' }, '尺寸：'),
          project ? `${project.width}×${project.height}` : '-',
        ),
        React.createElement('div', { className: 'status-item' },
          React.createElement('span', { className: 'status-item__label' }, 'MC：'),
          project?.mcVersion || '-',
        ),
        React.createElement('div', { className: 'status-item' },
          React.createElement('span', { className: 'status-item__label' }, '游標：'),
          AppState.cursor ? `${AppState.cursor.x}, ${AppState.cursor.y}` : '-',
        ),
        AppState.guiSelectionLabel && React.createElement('div', { className: 'status-item' },
          React.createElement('span', { className: 'status-item__label' }, '元件：'),
          AppState.guiSelectionLabel,
        ),
      ),
      React.createElement('div', { className: 'status-bar__right' },
        React.createElement('div', { className: 'status-item' },
          React.createElement(SvgIcon, { name: 'Save', size: 10 }),
          ' ', saveLabel, user ? ` · ${user.username}` : '',
        ),
        React.createElement('div', { className: 'status-item' },
          React.createElement(SvgIcon, { name: 'Layers', size: 10 }),
          AppState.layers ? AppState.layers.length : (view === 'block' ? '6面' : '-'),
        ),
        React.createElement('div', { className: 'status-item' },
          'MC Studio v1.0',
        ),
      ),
    ),

    // 通知容器
    React.createElement('div', { className: 'toast-container' },
      toasts.map(t =>
        React.createElement('div', {
          key: t.id,
          className: 'toast toast--' + (t.type || 'info'),
        }, t.message)
      )
    ),
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(App));