<script setup lang="ts">
import { computed } from 'vue'
import type { FileChange } from '@/types/git'

const props = defineProps<{
  staged: FileChange[]
  unstaged: FileChange[]
  untracked: string[]
  selectedFile?: string | null
}>()

const emit = defineEmits<{
  select: [path: string, staged: boolean]
}>()

function getStatusIcon(status: string) {
  const icons: Record<string, { icon: string; class: string }> = {
    added: { icon: 'A', class: 'status-added' },
    modified: { icon: 'M', class: 'status-modified' },
    deleted: { icon: 'D', class: 'status-deleted' },
    renamed: { icon: 'R', class: 'status-renamed' },
    untracked: { icon: '?', class: 'status-untracked' }
  }
  return icons[status] || { icon: '?', class: '' }
}

const hasChanges = computed(() => {
  return props.staged.length > 0 || props.unstaged.length > 0 || props.untracked.length > 0
})
</script>

<template>
  <div class="file-tree">
    <div v-if="!hasChanges" class="empty-state">
      Sin cambios
    </div>

    <!-- Staged changes -->
    <div v-if="staged.length > 0" class="section">
      <div class="section-header">
        <span class="section-icon staged">●</span>
        Staged ({{ staged.length }})
      </div>
      <div
        v-for="file in staged"
        :key="'staged-' + file.path"
        :class="['file-item', { selected: selectedFile === file.path }]"
        @click="emit('select', file.path, true)"
      >
        <span :class="['status-icon', getStatusIcon(file.status).class]">
          {{ getStatusIcon(file.status).icon }}
        </span>
        <span class="file-name">{{ file.path }}</span>
      </div>
    </div>

    <!-- Unstaged changes -->
    <div v-if="unstaged.length > 0" class="section">
      <div class="section-header">
        <span class="section-icon unstaged">●</span>
        Unstaged ({{ unstaged.length }})
      </div>
      <div
        v-for="file in unstaged"
        :key="'unstaged-' + file.path"
        :class="['file-item', { selected: selectedFile === file.path }]"
        @click="emit('select', file.path, false)"
      >
        <span :class="['status-icon', getStatusIcon(file.status).class]">
          {{ getStatusIcon(file.status).icon }}
        </span>
        <span class="file-name">{{ file.path }}</span>
      </div>
    </div>

    <!-- Untracked files -->
    <div v-if="untracked.length > 0" class="section">
      <div class="section-header">
        <span class="section-icon untracked">●</span>
        Untracked ({{ untracked.length }})
      </div>
      <div
        v-for="path in untracked"
        :key="'untracked-' + path"
        :class="['file-item', { selected: selectedFile === path }]"
        @click="emit('select', path, false)"
      >
        <span :class="['status-icon', 'status-untracked']">?</span>
        <span class="file-name">{{ path }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.file-tree {
  font-size: 13px;
}

.empty-state {
  color: var(--text-muted);
  text-align: center;
  padding: 1rem;
}

.section {
  margin-bottom: 1rem;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.section-icon {
  font-size: 8px;
}

.section-icon.staged {
  color: #22c55e;
}

.section-icon.unstaged {
  color: #eab308;
}

.section-icon.untracked {
  color: var(--text-muted);
}

.file-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s;
}

.file-item:hover {
  background: var(--bg-hover);
}

.file-item.selected {
  background: var(--accent);
  background: rgba(99, 102, 241, 0.15);
}

.status-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  border-radius: 3px;
}

.status-added {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.status-modified {
  background: rgba(234, 179, 8, 0.2);
  color: #eab308;
}

.status-deleted {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.status-renamed {
  background: rgba(168, 85, 247, 0.2);
  color: #a855f7;
}

.status-untracked {
  background: rgba(161, 161, 170, 0.2);
  color: var(--text-muted);
}

.file-name {
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
