/* ============================================================
   首頁 — 專案選擇與建立
   ============================================================ */

function HomeView({ onNewProject, onOpenProject, touchMode, user, onAuth, onLogout, onDeleteProject, authRequest }) {
  const [recent, setRecent] = React.useState([]);
  const [cloudProjects, setCloudProjects] = React.useState([]);
  const [showNewModal, setShowNewModal] = React.useState(false);
  const [showAuth, setShowAuth] = React.useState(false);
  const [authMode, setAuthMode] = React.useState('login');
  const [authUser, setAuthUser] = React.useState('');
  const [authPass, setAuthPass] = React.useState('');
  const [authError, setAuthError] = React.useState('');
  const [authBusy, setAuthBusy] = React.useState(false);
  const [pendingCreate, setPendingCreate] = React.useState(null);
  const [selectedType, setSelectedType] = React.useState(null);
  const [projectName, setProjectName] = React.useState('');
  const [mcVersion, setMcVersion] = React.useState('26.2');
  const [presetSize, setPresetSize] = React.useState(16);
  const [useCustomSize, setUseCustomSize] = React.useState(false);
  const [customWidth, setCustomWidth] = React.useState(16);
  const [customHeight, setCustomHeight] = React.useState(16);
  const [guiPreset, setGuiPreset] = React.useState('inventory');

  const loadCloud = React.useCallback(() => {
    if (!user) {
      setCloudProjects([]);
      return;
    }
    CloudProjects.list().then(setCloudProjects).catch(() => setCloudProjects([]));
  }, [user]);

  React.useEffect(() => {
    setRecent(loadRecentProjects());
    loadCloud();
  }, [loadCloud]);

  React.useEffect(() => {
    if (!authRequest) return;
    setAuthMode(authRequest.mode || 'login');
    setShowAuth(true);
  }, [authRequest]);

  const projectTypes = [
    { id: 'pixel', name: '2D 像素藝術', desc: '通用像素繪圖工作區', icon: 'Brush', size: 32 },
    { id: 'item', name: 'Minecraft 物品', desc: '物品圖示 16×16 起', icon: 'Image', size: 16 },
    { id: 'gui', name: 'Minecraft 介面', desc: 'GUI 元件庫：按鈕、槽、進度條', icon: 'Grid', size: 256 },
    { id: 'block', name: '方塊材質', desc: '六面方塊材質 + 3D 預覽', icon: 'Cube', size: 16 },
    { id: 'block3d', name: '3D 方塊模型', desc: '自訂方塊模型 JSON', icon: 'Cube', size: 16 },
    { id: 'creature', name: '3D 生物模型', desc: '生物、NPC、怪物建模', icon: 'Robot', size: 64 },
  ];

  const sizePresets = [8, 16, 32, 64, 128, 256];

  const handleCreate = () => {
    const guiSizes = { inventory: [256, 256], chest: [176, 166] };
    let w;
    let h;
    if (selectedType === 'gui') {
      if (guiPreset === 'custom') {
        w = customWidth;
        h = customHeight;
      } else {
        [w, h] = guiSizes[guiPreset] || [256, 256];
      }
    } else {
      w = useCustomSize ? customWidth : presetSize;
      h = useCustomSize ? customHeight : presetSize;
    }
    if (!projectName.trim()) {
      showToast('請輸入專案名稱', 'warning');
      return;
    }
    if (!user) {
      setPendingCreate(true);
      setShowAuth(true);
      setAuthMode('register');
      showToast('請先註冊或登入，專案會存在你的帳號裡', 'warning');
      return;
    }
    const project = {
      id: uid(),
      name: projectName,
      type: selectedType,
      mcVersion,
      width: w,
      height: h,
      createdAt: Date.now(),
      updatedAt: Date.now(),
      cloud: true,
    };
    setShowNewModal(false);
    onNewProject(project);
  };

  const submitAuth = async () => {
    setAuthError('');
    setAuthBusy(true);
    try {
      const fn = authMode === 'register' ? CloudAuth.register : CloudAuth.login;
      const data = await fn(authUser, authPass);
      onAuth && onAuth(data.user);
      setShowAuth(false);
      setAuthPass('');
      showToast(authMode === 'register' ? `帳號 ${data.user.username} 已建立` : `已登入 ${data.user.username}`, 'success');
      if (pendingCreate && selectedType) {
        setPendingCreate(false);
        setShowNewModal(true);
      }
    } catch (err) {
      setAuthError(err.message || '失敗');
    } finally {
      setAuthBusy(false);
    }
  };

  const openRecent = (p) => {
    onOpenProject(p);
  };

  const startNew = (typeId) => {
    const t = projectTypes.find(x => x.id === typeId);
    setSelectedType(typeId);
    setUseCustomSize(false);
    setProjectName('');
    if (t) {
      setPresetSize(t.size);
      setCustomWidth(t.size);
      setCustomHeight(t.size);
    }
    if (typeId === 'gui') setGuiPreset('inventory');
    if (!user) {
      setPendingCreate(true);
      setShowAuth(true);
      setAuthMode('register');
      showToast('先註冊／登入，這個專案只會存在你的帳號', 'info');
      return;
    }
    setShowNewModal(true);
  };

  return React.createElement('div', { className: 'home-view' + (user ? '' : ' home-view--no-sidebar') },
    React.createElement('div', { className: 'home-view__main' },
      React.createElement('div', { className: 'home-hero' },
        React.createElement('h1', { className: 'home-hero__title' },
          'MC ', React.createElement('span', null, 'Studio'),
        ),
        React.createElement('p', { className: 'home-hero__subtitle' },
          'Minecraft 素材與模型工作室 — 每個帳號各自保存未匯出的專案，互不相見'
        ),
      ),
      React.createElement('div', { className: 'home-section' },
        React.createElement('h2', { className: 'home-section__title' }, '建立新專案'),
        React.createElement('div', { className: 'new-project-grid' },
          projectTypes.map(t =>
            React.createElement('div', {
              key: t.id,
              className: 'project-type-card',
              onClick: () => startNew(t.id),
            },
              React.createElement('div', { className: 'project-type-card__icon' },
                React.createElement(SvgIcon, { name: t.icon, size: 24 }),
              ),
              React.createElement('div', { className: 'project-type-card__name' }, t.name),
              React.createElement('div', { className: 'project-type-card__desc' }, t.desc),
            )
          ),
        ),
      ),
      React.createElement('div', { className: 'home-section' },
        React.createElement('h2', { className: 'home-section__title' }, '快速開始'),
        React.createElement('div', { style: { display: 'flex', gap: '12px', flexWrap: 'wrap' } },
          React.createElement('button', {
            className: 'btn btn--primary',
            onClick: () => startNew('block'),
          },
            React.createElement(SvgIcon, { name: 'Cube', size: 14 }),
            ' 建立草地方塊',
          ),
          React.createElement('button', {
            className: 'btn btn--secondary',
            onClick: () => startNew('item'),
          },
            React.createElement(SvgIcon, { name: 'Image', size: 14 }),
            ' 建立物品材質',
          ),
          React.createElement('button', {
            className: 'btn btn--secondary',
            onClick: () => startNew('creature'),
          },
            React.createElement(SvgIcon, { name: 'Robot', size: 14 }),
            ' 建立生物模型',
          ),
        ),
      ),
    ),
    user && React.createElement('div', { className: 'home-view__sidebar' },
      React.createElement('div', { className: 'home-section' },
        React.createElement('h2', { className: 'home-section__title' },
          `${user.username} 的專案`
        ),
        cloudProjects.length === 0
          ? React.createElement('div', { className: 'cloud-empty' },
            '還沒有存檔。建立後按儲存即可。'
          )
          : React.createElement('div', { className: 'recent-projects-list' },
            cloudProjects.map(p => {
              const t = projectTypes.find(x => x.id === p.type) || projectTypes[0];
              return React.createElement('div', {
                key: p.id,
                className: 'recent-project-item',
                onClick: () => openRecent(p),
              },
                React.createElement('div', { className: 'recent-project-item__icon' },
                  React.createElement(SvgIcon, { name: t.icon, size: 16 }),
                ),
                React.createElement('div', { className: 'recent-project-item__info' },
                  React.createElement('div', { className: 'recent-project-item__name' }, p.name),
                  React.createElement('div', { className: 'recent-project-item__meta' },
                    `${t.name} · ${p.width}×${p.height}`
                  ),
                ),
                React.createElement('button', {
                  className: 'btn btn--ghost',
                  title: '從這個帳號刪除',
                  onClick: (e) => {
                    e.stopPropagation();
                    if (confirm(`刪除「${p.name}」？只有你的帳號看得到這份草稿。`)) {
                      onDeleteProject && onDeleteProject(p.id).then(loadCloud);
                    }
                  },
                }, '刪'),
              );
            })
          ),
      ),
    ),
    // 建立新專案對話框
    showNewModal && React.createElement('div', { className: 'modal-overlay', onClick: (e) => e.target.className === 'modal-overlay' && setShowNewModal(false) },
      React.createElement('div', { className: 'modal' },
        React.createElement('div', { className: 'modal__header' },
          React.createElement('span', { className: 'modal__title' }, '建立新專案'),
          React.createElement('button', { className: 'modal__close', onClick: () => setShowNewModal(false) },
            React.createElement(SvgIcon, { name: 'X', size: 14 }),
          ),
        ),
        React.createElement('div', { className: 'modal__body' },
          React.createElement('div', { className: 'form-row' },
            React.createElement('label', { className: 'form-row__label' }, '專案類型'),
            React.createElement('div', { style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } },
              projectTypes.map(t =>
                React.createElement('button', {
                  key: t.id,
                  className: 'size-preset' + (selectedType === t.id ? ' active' : ''),
                  style: { padding: '6px 12px' },
                  onClick: () => {
                    setSelectedType(t.id);
                    if (t.id === 'gui') setGuiPreset('inventory');
                  },
                }, t.name)
              ),
            ),
          ),
          React.createElement('div', { className: 'form-row' },
            React.createElement('label', { className: 'form-row__label' }, '專案名稱'),
            React.createElement('input', {
              type: 'text',
              className: 'form-input',
              placeholder: '輸入專案名稱...',
              value: projectName,
              onChange: (e) => setProjectName(e.target.value),
            }),
          ),
          React.createElement('div', { className: 'form-row' },
            React.createElement('label', { className: 'form-row__label' }, 'Minecraft 版本'),
            React.createElement('select', {
              className: 'form-select',
              value: mcVersion,
              onChange: (e) => setMcVersion(e.target.value),
            },
              MC_VERSIONS.map(v =>
                React.createElement('option', { key: v.id, value: v.id },
                  v.id === '26.2' ? '26.2（目前正式版）' : v.id
                )
              ),
            ),
          ),
          React.createElement('div', { className: 'form-row' },
            React.createElement('label', { className: 'form-row__label' }, '畫布尺寸'),
            selectedType === 'gui'
              ? React.createElement(React.Fragment, null,
                React.createElement('div', { className: 'size-presets' },
                  React.createElement('button', {
                    className: 'size-preset' + (guiPreset === 'inventory' ? ' active' : ''),
                    onClick: () => setGuiPreset('inventory'),
                  }, '256×256 背包'),
                  React.createElement('button', {
                    className: 'size-preset' + (guiPreset === 'chest' ? ' active' : ''),
                    onClick: () => setGuiPreset('chest'),
                  }, '176×166 箱子'),
                  React.createElement('button', {
                    className: 'size-preset' + (guiPreset === 'custom' ? ' active' : ''),
                    onClick: () => setGuiPreset('custom'),
                  }, '自訂'),
                ),
                guiPreset === 'custom' && React.createElement('div', {
                  style: { display: 'flex', gap: '8px', marginTop: '6px', alignItems: 'center' }
                },
                  React.createElement('input', {
                    type: 'number', className: 'form-input', style: { width: '100px' },
                    value: customWidth, min: 1, max: 512,
                    onChange: (e) => setCustomWidth(Math.max(1, Math.min(512, parseInt(e.target.value) || 1))),
                  }),
                  React.createElement('span', { style: { color: 'var(--text-muted)' } }, '×'),
                  React.createElement('input', {
                    type: 'number', className: 'form-input', style: { width: '100px' },
                    value: customHeight, min: 1, max: 512,
                    onChange: (e) => setCustomHeight(Math.max(1, Math.min(512, parseInt(e.target.value) || 1))),
                  }),
                  React.createElement('span', { style: { fontSize: '11px', color: 'var(--text-muted)' } }, '像素'),
                ),
              )
              : React.createElement(React.Fragment, null,
            React.createElement('div', { className: 'size-presets' },
              sizePresets.map(s =>
                React.createElement('button', {
                  key: s,
                  className: 'size-preset' + (!useCustomSize && presetSize === s ? ' active' : ''),
                  onClick: () => { setPresetSize(s); setUseCustomSize(false); },
                }, `${s}×${s}`)
              ),
              React.createElement('button', {
                className: 'size-preset' + (useCustomSize ? ' active' : ''),
                onClick: () => setUseCustomSize(true),
              }, '自訂'),
            ),
            useCustomSize && React.createElement('div', {
              style: { display: 'flex', gap: '8px', marginTop: '6px', alignItems: 'center' }
            },
              React.createElement('input', {
                type: 'number', className: 'form-input', style: { width: '100px' },
                value: customWidth, min: 1, max: 512,
                onChange: (e) => setCustomWidth(Math.max(1, Math.min(512, parseInt(e.target.value) || 1))),
              }),
              React.createElement('span', { style: { color: 'var(--text-muted)' } }, '×'),
              React.createElement('input', {
                type: 'number', className: 'form-input', style: { width: '100px' },
                value: customHeight, min: 1, max: 512,
                onChange: (e) => setCustomHeight(Math.max(1, Math.min(512, parseInt(e.target.value) || 1))),
              }),
              React.createElement('span', { style: { fontSize: '11px', color: 'var(--text-muted)' } }, '像素'),
            ),
              ),
          ),
        ),
        React.createElement('div', { className: 'modal__footer' },
          React.createElement('button', {
            className: 'btn btn--secondary',
            onClick: () => setShowNewModal(false),
          }, '取消'),
          React.createElement('button', {
            className: 'btn btn--primary',
            disabled: !selectedType || !projectName.trim(),
            onClick: handleCreate,
          }, '建立專案'),
        ),
      ),
    ),
    showAuth && React.createElement('div', {
      className: 'modal-overlay',
      onClick: (e) => e.target.className === 'modal-overlay' && setShowAuth(false),
    },
      React.createElement('div', { className: 'modal' },
        React.createElement('div', { className: 'modal__header' },
          React.createElement('span', { className: 'modal__title' },
            authMode === 'register' ? '註冊帳號' : '登入'
          ),
          React.createElement('button', { className: 'modal__close', onClick: () => setShowAuth(false) },
            React.createElement(SvgIcon, { name: 'X', size: 14 }),
          ),
        ),
        React.createElement('div', { className: 'modal__body' },
          React.createElement('p', { style: { fontSize: '12px', color: 'var(--text-secondary)', marginBottom: 12 } },
            '每個帳號的專案分開存放。登入後才能把還沒匯出的草稿存到網站。'
          ),
          React.createElement('div', { className: 'form-row' },
            React.createElement('label', { className: 'form-row__label' }, '帳號'),
            React.createElement('input', {
              type: 'text',
              className: 'form-input',
              autoComplete: 'username',
              value: authUser,
              onChange: (e) => setAuthUser(e.target.value),
              placeholder: '2–24 字，中英數皆可',
            }),
          ),
          React.createElement('div', { className: 'form-row' },
            React.createElement('label', { className: 'form-row__label' }, '密碼'),
            React.createElement('input', {
              type: 'password',
              className: 'form-input',
              autoComplete: authMode === 'register' ? 'new-password' : 'current-password',
              value: authPass,
              onChange: (e) => setAuthPass(e.target.value),
              placeholder: '至少 8 個字',
              onKeyDown: (e) => e.key === 'Enter' && submitAuth(),
            }),
          ),
          authError && React.createElement('div', { className: 'auth-error' }, authError),
        ),
        React.createElement('div', { className: 'modal__footer' },
          React.createElement('button', {
            className: 'btn btn--secondary',
            onClick: () => {
              setAuthMode(authMode === 'register' ? 'login' : 'register');
              setAuthError('');
            },
          }, authMode === 'register' ? '已有帳號？登入' : '沒有帳號？註冊'),
          React.createElement('button', {
            className: 'btn btn--primary',
            disabled: authBusy || !authUser.trim() || authPass.length < 8,
            onClick: submitAuth,
          }, authBusy ? '請稍候…' : (authMode === 'register' ? '註冊並進入' : '登入')),
        ),
      ),
    ),
  );
}

window.HomeView = HomeView;