import { useStore } from '../../store';
import { TiptapEditor } from './TiptapEditor';
import { MoreActions } from './MoreActions';
import { BookOpen } from 'lucide-react';
import type { SaveState } from '../../store';

function saveLabel(s: SaveState): string {
  if (s === 'saving') return '保存中…';
  if (s === 'error') return '保存失败';
  return '已保存';
}

export function Editor() {
  const currentPath = useStore(s => s.currentPath);
  const title = useStore(s => s.title);
  const saveState = useStore(s => s.saveState);
  if (!currentPath) {
    // B档-8：空状态引导
    return (
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ textAlign: 'center', color: 'var(--text-tertiary)' }}>
          <div style={{ marginBottom: 14, opacity: 0.55 }}><BookOpen size={42} strokeWidth={1.4} /></div>
          <div style={{ fontSize: 15, color: 'var(--text-secondary)', marginBottom: 6 }}>从左侧选择一篇笔记，或新建文档开始</div>
          <div style={{ fontSize: 12, opacity: 0.7 }}>支持 Markdown · 代码高亮 · 公式 · 知识图谱</div>
        </div>
      </div>
    );
  }
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <div style={{ padding: '6px 16px', borderBottom: '1px solid var(--control-border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span>{title} <span style={{ opacity: 0.4, fontSize: 12 }}>{currentPath}</span></span>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ fontSize: 12, opacity: saveState === 'error' ? 1 : 0.5, color: saveState === 'error' ? '#f88' : 'inherit' }}>{saveLabel(saveState)}</span>
          <MoreActions />
        </div>
      </div>
      <TiptapEditor />
    </div>
  );
}