<script setup lang="ts">
import type { EditorSaveState } from '@easyflow-core/editor-ui';

withDefaults(
  defineProps<{
    column?: number;
    encoding?: string;
    language?: string;
    line?: number;
    lines?: number;
    mode?: 'code' | 'document';
    saveState?: EditorSaveState;
    sizeLabel?: string;
    wordCount?: number;
  }>(),
  {
    column: 1,
    encoding: 'utf8',
    language: 'Text',
    line: 1,
    lines: 1,
    mode: 'code',
    saveState: 'saved',
    sizeLabel: '0 B',
    wordCount: 0,
  },
);

const saveLabels: Record<EditorSaveState, string> = {
  dirty: '未保存',
  error: '保存失败',
  saved: '已保存',
  saving: '保存中',
};
</script>

<template>
  <footer class="editor-status-bar" aria-live="polite">
    <div v-if="mode === 'code'">
      <span>{{ language }}</span>
      <span>{{ encoding }}</span>
      <span>{{ sizeLabel }}</span>
    </div>
    <div v-else>
      <span>{{ wordCount }} 字</span>
    </div>
    <div>
      <span v-if="mode === 'code'">行 {{ line }}，列 {{ column }}</span>
      <span v-if="mode === 'code'">{{ lines }} 行</span>
      <span class="editor-status-bar__save" :class="`is-${saveState}`">
        {{ saveLabels[saveState] }}
      </span>
    </div>
  </footer>
</template>

<style scoped>
.editor-status-bar {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  padding: 0 12px;
  font-size: 11px;
  color: hsl(var(--text-muted));
  background: hsl(var(--surface-subtle));
  border-top: 1px solid hsl(var(--line-subtle));
}

.editor-status-bar > div {
  display: flex;
  gap: 12px;
}

.editor-status-bar__save.is-dirty,
.editor-status-bar__save.is-saving {
  color: hsl(var(--warning));
}

.editor-status-bar__save.is-error {
  color: hsl(var(--destructive));
}

@media (max-width: 640px) {
  .editor-status-bar > div:first-child span:not(:first-child),
  .editor-status-bar > div:last-child span:nth-child(2) {
    display: none;
  }
}
</style>
