<template>
  <AppShell>
    <NSpin :show="store.loading">
      <div class="space-y-6">
        <!-- Header -->
        <div class="flex items-center justify-between">
          <h1 class="text-2xl font-semibold">
            项目
          </h1>
          <div class="flex items-center gap-4">
            <div class="flex items-center gap-2">
              <span class="text-sm text-gray-500">显示已归档</span>
              <NSwitch
                v-model:value="store.includeArchived"
                @update:value="store.refresh()"
              />
            </div>
            <NButton
              type="primary"
              @click="showCreate = true"
            >
              新建项目
            </NButton>
          </div>
        </div>

        <!-- Active projects grid -->
        <div
          v-if="store.activeItems.length > 0"
          class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"
        >
          <NCard
            v-for="p in store.activeItems"
            :key="p.id"
            class="cursor-pointer hover:shadow-md transition-shadow"
            @click="goProject(p.slug)"
          >
            <div class="space-y-2">
              <div class="flex items-center justify-between">
                <span class="font-medium">{{ p.name }}</span>
                <NTag
                  :type="p.visibility === 'private' ? 'warning' : 'info'"
                  size="small"
                >
                  {{ p.visibility === 'private' ? '私有' : '内部' }}
                </NTag>
              </div>
              <p class="text-sm text-gray-500 line-clamp-2">
                {{ p.description || '暂无描述' }}
              </p>
              <p class="text-xs text-gray-400 font-mono">
                {{ p.slug }}
              </p>
            </div>
          </NCard>
        </div>
        <div
          v-else-if="!store.loading"
          class="text-gray-400 text-sm"
        >
          暂无活跃项目。
        </div>

        <!-- Archived projects -->
        <template v-if="store.includeArchived && store.archivedItems.length > 0">
          <h2 class="text-base font-medium text-gray-500">
            已归档
          </h2>
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            <NCard
              v-for="p in store.archivedItems"
              :key="p.id"
              class="opacity-60 cursor-pointer hover:opacity-80 transition-opacity"
              @click="goProject(p.slug)"
            >
              <div class="space-y-2">
                <div class="flex items-center justify-between">
                  <span class="font-medium">{{ p.name }}</span>
                  <NTag size="small">
                    已归档
                  </NTag>
                </div>
                <p class="text-sm text-gray-500 line-clamp-2">
                  {{ p.description || '暂无描述' }}
                </p>
                <p class="text-xs text-gray-400 font-mono">
                  {{ p.slug }}
                </p>
              </div>
            </NCard>
          </div>
        </template>
      </div>
    </NSpin>

    <!-- Create project modal -->
    <NModal
      v-model:show="showCreate"
      preset="card"
      title="新建项目"
      class="w-full max-w-md"
    >
      <NForm @submit.prevent="onSubmit">
        <NFormItem label="Slug（URL 标识）">
          <NInput
            v-model:value="form.slug"
            placeholder="my-project"
          />
        </NFormItem>
        <NFormItem label="名称">
          <NInput
            v-model:value="form.name"
            placeholder="My Project"
          />
        </NFormItem>
        <NFormItem label="描述">
          <NInput
            v-model:value="form.description"
            type="textarea"
            :rows="3"
            placeholder="（可选）"
          />
        </NFormItem>
        <NFormItem label="可见性">
          <NRadioGroup v-model:value="form.visibility">
            <NRadio value="private">
              私有
            </NRadio>
            <NRadio value="internal">
              内部
            </NRadio>
          </NRadioGroup>
        </NFormItem>
        <div class="flex justify-end gap-2 mt-4">
          <NButton @click="showCreate = false">
            取消
          </NButton>
          <NButton
            type="primary"
            attr-type="submit"
            :loading="creating"
          >
            创建
          </NButton>
        </div>
      </NForm>
      <p
        v-if="createError"
        class="text-red-500 text-sm mt-2"
      >
        {{ createError }}
      </p>
    </NModal>
  </AppShell>
</template>

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

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

const showCreate = ref(false)
const creating = ref(false)
const createError = ref('')

const form = ref<{ slug: string; name: string; description: string; visibility: Visibility }>({
  slug: '',
  name: '',
  description: '',
  visibility: 'private',
})

onMounted(() => store.refresh())

function goProject(slug: string) {
  router.push({ name: 'project-home', params: { slug } })
}

async function onSubmit() {
  createError.value = ''
  if (!form.value.slug || !form.value.name) {
    createError.value = 'Slug 和名称不能为空'
    return
  }
  creating.value = true
  try {
    const p = await store.create({
      slug: form.value.slug,
      name: form.value.name,
      description: form.value.description || undefined,
      visibility: form.value.visibility,
    })
    showCreate.value = false
    form.value = { slug: '', name: '', description: '', visibility: 'private' }
    router.push({ name: 'project-home', params: { slug: p.slug } })
  } catch (e) {
    createError.value = e instanceof Error ? e.message : '创建失败'
  } finally {
    creating.value = false
  }
}
</script>
