<template>
  <AppShell>
    <NSpin :show="store.loading">
      <div
        v-if="store.current"
        class="space-y-6"
      >
        <!-- Header -->
        <div class="flex items-center justify-between">
          <div class="space-y-1">
            <div class="flex items-center gap-3">
              <h1 class="text-2xl font-semibold">
                {{ store.current.name }}
              </h1>
              <NTag
                :type="store.current.visibility === 'private' ? 'warning' : 'info'"
                size="small"
              >
                {{ store.current.visibility === 'private' ? '私有' : '内部' }}
              </NTag>
              <NTag
                v-if="store.current.archived_at"
                size="small"
              >
                已归档
              </NTag>
            </div>
            <p class="text-gray-500 text-sm font-mono">
              {{ store.current.slug }}
            </p>
          </div>
          <NButton @click="openEdit">
            编辑
          </NButton>
        </div>

        <!-- Description -->
        <p
          v-if="store.current.description"
          class="text-gray-600"
        >
          {{ store.current.description }}
        </p>

        <!-- Nav buttons -->
        <div class="flex gap-3">
          <NButton
            type="primary"
            @click="goRequirements"
          >
            需求列表
          </NButton>
          <NButton @click="goIssues">
            Issue 列表
          </NButton>
          <NButton @click="goWorkspaces">
            工作区
          </NButton>
        </div>
      </div>

      <div
        v-else-if="!store.loading"
        class="text-gray-400 text-sm"
      >
        项目不存在或无权访问。
      </div>
    </NSpin>

    <!-- Edit project modal -->
    <NModal
      v-model:show="showEdit"
      preset="card"
      title="编辑项目"
      class="w-full max-w-md"
    >
      <NForm @submit.prevent="onEditSubmit">
        <NFormItem label="名称">
          <NInput
            v-model:value="editForm.name"
            placeholder="My Project"
          />
        </NFormItem>
        <NFormItem label="描述">
          <NInput
            v-model:value="editForm.description"
            type="textarea"
            :rows="3"
            placeholder="（可选）"
          />
        </NFormItem>
        <NFormItem label="可见性">
          <NRadioGroup v-model:value="editForm.visibility">
            <NRadio value="private">
              私有
            </NRadio>
            <NRadio value="internal">
              内部
            </NRadio>
          </NRadioGroup>
        </NFormItem>
        <div class="flex justify-end gap-2 mt-4">
          <NButton @click="showEdit = false">
            取消
          </NButton>
          <NButton
            type="primary"
            attr-type="submit"
            :loading="saving"
          >
            保存
          </NButton>
        </div>
      </NForm>
      <p
        v-if="editError"
        class="text-red-500 text-sm mt-2"
      >
        {{ editError }}
      </p>
    </NModal>
  </AppShell>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  NButton,
  NTag,
  NSpin,
  NModal,
  NForm,
  NFormItem,
  NInput,
  NRadio,
  NRadioGroup,
} from 'naive-ui'
import AppShell from '@/layouts/AppShell.vue'
import { useProjectsStore } from '@/stores/projects'
import { projectsApi, type Visibility } from '@/api/projects'

const store = useProjectsStore()
const route = useRoute()
const router = useRouter()

const slug = route.params.slug as string

onMounted(() => store.load(slug))

// ---- Edit modal ----
const showEdit = ref(false)
const saving = ref(false)
const editError = ref('')
const editForm = ref<{ name: string; description: string; visibility: Visibility }>({
  name: '',
  description: '',
  visibility: 'private',
})

function openEdit() {
  if (!store.current) return
  editForm.value = {
    name: store.current.name,
    description: store.current.description,
    visibility: store.current.visibility,
  }
  editError.value = ''
  showEdit.value = true
}

async function onEditSubmit() {
  editError.value = ''
  if (!editForm.value.name.trim()) {
    editError.value = '名称不能为空'
    return
  }
  saving.value = true
  try {
    await projectsApi.update(slug, {
      name: editForm.value.name,
      description: editForm.value.description,
      visibility: editForm.value.visibility,
    })
    showEdit.value = false
    await store.load(slug)
  } catch (e) {
    editError.value = e instanceof Error ? e.message : '保存失败'
  } finally {
    saving.value = false
  }
}

function goRequirements() {
  router.push({ name: 'requirement-list', params: { slug } })
}

function goIssues() {
  router.push({ name: 'issue-list', params: { slug } })
}

function goWorkspaces() {
  router.push({ name: 'workspace-list', params: { slug } })
}
</script>
