<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useToast } from 'gnexus-ui-kit/vue'
import { api, ApiError, type Project, type Tag, type Task } from '../api'
import { deadlineOverdue, gradeToPriority, priorityOptions, priorityToGrade, priorityLabel, priorityVariant, relevanceLabel, renderMarkdown, statusOptions } from '../taskui'
import QuickPrompt from '../components/QuickPrompt.vue'
import TaskCard from '../components/TaskCard.vue'
import TaskTree from '../components/TaskTree.vue'

defineOptions({ name: 'ProjectView' })

// Страница проекта: двухколоночная раскладка. Заметка, список задач с фильтрами
// и дерево — в основной колонке; статистика и параметры — в сайдбаре.
// Создание задачи здесь = createTask + PATCH project_id (TaskCreate не принимает
// project_id) — задача попадёт в стек на детализацию.

const route = useRoute()
const router = useRouter()
const { t } = useI18n()
const toast = useToast()

const projectId = computed(() => Number(route.params.id))
const project = ref<Project | null>(null)
const tasks = ref<Task[]>([])
const tags = ref<Tag[]>([])
const error = ref('')
const loading = ref(false)
const notFound = ref(false)

// Переключатель вида списка (карточки ↔ дерево)
const viewMode = ref<'list' | 'tree'>('list')

// Фильтры списка: статус, тег
const filters = ref({ status: '', tag_id: '' })

const filteredTasks = computed(() =>
  tasks.value.filter(
    (task) =>
      (!filters.value.status || task.status === filters.value.status) &&
      (!filters.value.tag_id || task.tags.some((tag) => String(tag.id) === filters.value.tag_id)),
  ),
)

// Статистика по всем задачам проекта (фильтры не влияют)
const stats = computed(() => {
  const list = tasks.value
  const open = list.filter((task) => task.status !== 'done' && task.status !== 'cancelled')
  return {
    total: list.length,
    done: list.filter((task) => task.status === 'done').length,
    inProgress: list.filter((task) => task.status === 'in_progress').length,
    toDo: list.filter((task) => task.status === 'to_do').length,
    overdue: open.filter((task) => deadlineOverdue(task)).length,
  }
})

const doneCount = computed(() => stats.value.done)

// Сайдбар «Статистика» — строка = иконка + термин + значение
const statRows = computed(() => {
  const s = stats.value
  const rows: { key: string; icon: string; term: string; value: string; warn?: boolean }[] = [
    { key: 'total', icon: 'ph-stack', term: t('projectPage.total'), value: String(s.total) },
    { key: 'done', icon: 'ph-check-circle', term: t('projectPage.doneN'), value: String(s.done) },
    { key: 'inProgress', icon: 'ph-circle-half', term: t('projectPage.inProgress'), value: String(s.inProgress) },
    { key: 'toDo', icon: 'ph-square', term: t('projectPage.toDo'), value: String(s.toDo) },
  ]
  if (s.overdue)
    rows.push({ key: 'overdue', icon: 'ph-alarm', term: t('projectPage.overdue'), value: String(s.overdue), warn: true })
  return rows
})

// Сайдбар «Параметры» проекта
const paramRows = computed(() => {
  const project0 = project.value
  if (!project0) return []
  const rows: { key: string; icon: string; term: string; value: string; warn?: boolean; badge?: string }[] = [
    {
      key: 'relevance',
      icon: 'ph-activity',
      term: t('projects.form.relevance'),
      value: relevanceLabel(project0.relevance_status),
    },
  ]
  if (project0.priority !== null)
    rows.push({
      key: 'priority',
      icon: 'ph-flag',
      term: t('projects.form.priority'),
      value: priorityLabel(project0.priority),
      badge: priorityVariant(project0.priority),
    })
  return rows
})

// Теги, используемые в задачах проекта, с количеством
const tagRows = computed(() => {
  const counts = new Map<string, number>()
  tasks.value.forEach((task) => task.tags.forEach((tag) => counts.set(tag.name, (counts.get(tag.name) ?? 0) + 1)))
  return [...counts.entries()].sort((a, b) => b[1] - a[1])
})

const noteHtml = computed(() => (project.value ? renderMarkdown(project.value.note) : ''))

async function load() {
  loading.value = true
  notFound.value = false
  error.value = ''
  try {
    project.value = await api.getProject(projectId.value)
    tasks.value = await api.listTasks({ project_id: projectId.value })
    tags.value = await api.listTags()
  } catch (e) {
    if (e instanceof ApiError && e.status === 404) {
      notFound.value = true
    } else {
      error.value = String(e)
    }
  } finally {
    loading.value = false
  }
}

onMounted(load)

// Правка проекта — drawer, как в списке проектов
const drawerOpen = ref(false)
const editForm = ref({
  name: '',
  relevance_status: 'active',
  priorityGrade: '' as string,
  note: '',
})
const showPreview = ref(false)

const relevanceOptions = computed(() =>
  ['active', 'paused', 'archived'].map((value) => ({ value, label: relevanceLabel(value) })),
)

const notePreview = computed(() => renderMarkdown(editForm.value.note))

function startEdit() {
  if (!project.value) return
  editForm.value = {
    name: project.value.name,
    relevance_status: project.value.relevance_status,
    priorityGrade: project.value.priority === null ? '' : priorityToGrade(project.value.priority),
    note: project.value.note,
  }
  showPreview.value = false
  drawerOpen.value = true
}

function closeDrawer() {
  drawerOpen.value = false
}

async function saveEdit() {
  if (!project.value) return
  try {
    await api.updateProject(project.value.id, {
      name: editForm.value.name,
      relevance_status: editForm.value.relevance_status,
      priority:
        editForm.value.priorityGrade === '' ? null : gradeToPriority(editForm.value.priorityGrade),
      note: editForm.value.note,
    })
    toast.success({ title: t('common.saved') })
    closeDrawer()
    await load()
  } catch (e) {
    toast.error({ title: t('common.error'), text: String(e) })
  }
}

const priorityOptionsWithNone = computed(() => [
  { value: '', label: t('common.none') },
  ...priorityOptions(),
])

async function setStatus(_task: Task, status: string) {
  error.value = ''
  try {
    await api.updateTask(_task.id, { status })
    await load()
  } catch (e) {
    error.value = String(e)
  }
}

// Удаление задачи — через подтверждение
const deleteTarget = ref<Task | null>(null)
const confirmOpen = ref(false)

function askDelete(task: Task) {
  deleteTarget.value = task
  confirmOpen.value = true
}

async function remove() {
  const task = deleteTarget.value
  if (!task) return
  confirmOpen.value = false
  try {
    await api.deleteTask(task.id)
    toast.success({ title: t('common.taskDeleted') })
    await load()
  } catch (e) {
    toast.error({ title: t('common.error'), text: String(e) })
  }
}

// Новая задача проекта: два запроса (create + PATCH); попадёт в стек на детализацию
const newTaskOpen = ref(false)

async function createTaskForProject(title: string) {
  newTaskOpen.value = false
  try {
    const created = await api.createTask(title)
    await api.updateTask(created.id, { project_id: projectId.value })
    toast.info({ title: t('projectPage.taskCreated') })
    await load()
  } catch (e) {
    toast.error({ title: t('common.error'), text: String(e) })
  }
}

const statusOptionsWithAny = computed(() => [
  { value: '', label: t('common.anyStatus') },
  ...statusOptions(),
])
</script>

<template>
  <section>
    <GnSkeleton v-if="loading && !project" type="block" stack :count="2" class="page-skeleton" />

    <GnEmptyState
      v-if="!loading && notFound"
      icon="ph-folder-simple"
      :title="t('projectPage.notFoundTitle')"
      :text="t('projectPage.notFoundText')"
    >
      <template #actions>
        <GnButton variant="primary" icon="ph-folders" @click="router.push('/projects')">
          {{ t('nav.projects') }}
        </GnButton>
      </template>
    </GnEmptyState>

    <template v-if="project">
      <GnPageHeader kicker="gntodo" :title="project.name">
        <template #meta>
          <GnBadge variant="info"><i class="ph ph-activity" aria-hidden="true" />
            {{ relevanceLabel(project.relevance_status) }}
          </GnBadge>
          <GnBadge v-if="project.priority !== null" :variant="priorityVariant(project.priority)">
            {{ priorityLabel(project.priority) }}
          </GnBadge>
          <GnBadge variant="neutral"><i class="ph ph-list-checks" aria-hidden="true" />
            {{ t('projectPage.taskCount', { n: tasks.length }) }}
          </GnBadge>
        </template>
        <template #actions>
          <GnButton variant="secondary" icon="ph-pencil-simple" @click="startEdit">
            {{ t('projects.edit') }}
          </GnButton>
          <GnButton variant="primary" icon="ph-plus" @click="newTaskOpen = true">
            {{ t('projectPage.newTask') }}
          </GnButton>
        </template>
      </GnPageHeader>

      <GnAlert v-if="error" variant="error">{{ error }}</GnAlert>

      <div class="project-grid">
        <div class="project-main">
          <!-- Заметка (Markdown: ссылки, контекст) -->
          <GnCard class="note-card">
            <template #title>
              <span class="card-title-icon"><i class="ph ph-notebook" aria-hidden="true" /></span>
              {{ t('projectPage.note') }}
            </template>
            <div v-if="project.note.trim()" class="md-view" v-html="noteHtml" />
            <p v-else class="muted">
              <i class="ph ph-note-blank" aria-hidden="true" />
              {{ t('projectPage.noteEmpty') }}
            </p>
          </GnCard>

          <!-- Прогресс: выполнено задач проекта -->
          <GnProgress
            class="progress"
            :value="doneCount"
            :max="Math.max(tasks.length, 1)"
            :label="t('projectPage.progress', { done: doneCount, total: tasks.length })"
          />

          <!-- Переключатель вида: список карточек или дерево -->
          <GnTabs
            v-model="viewMode"
            class="view-tabs"
            :items="[
              { id: 'list', label: t('projectPage.viewList') },
              { id: 'tree', label: t('projectPage.viewTree') },
            ]"
          />

          <!-- Фильтры списка -->
          <div class="filters">
            <GnSelect
              v-model="filters.status"
              :label="t('list.filterStatus')"
              icon="ph-funnel"
              :options="statusOptionsWithAny"
            />
            <GnSelect
              v-model="filters.tag_id"
              :label="t('list.filterTag')"
              icon="ph-tag"
              :options="[
                { value: '', label: t('common.any') },
                ...tags.map((tg) => ({ value: String(tg.id), label: tg.name })),
              ]"
            />
            <GnIconButton
              v-if="filters.status || filters.tag_id"
              class="filters-reset"
              icon="ph-x"
              :label="t('common.cancel')"
              @click="filters.status = ''; filters.tag_id = ''"
            />
          </div>

          <GnEmptyState
            v-if="filteredTasks.length === 0"
            icon="ph-magnifying-glass"
            :title="t('projectPage.emptyTitle')"
            :text="t('projectPage.emptyText')"
          />

          <div v-if="viewMode === 'list'" class="task-list">
            <TaskCard
              v-for="task in filteredTasks"
              :key="task.id"
              :task="task"
              :show-project="false"
              @status-change="setStatus"
              @delete="askDelete"
            />
          </div>

          <!-- Дерево подзадач проекта (альтернативный вид списка) -->
          <div v-else class="tree-section">
            <TaskTree
              :tasks="tasks"
              @status-change="setStatus"
              @add-subtask="newTaskOpen = true"
              @delete="askDelete"
            />
          </div>
        </div>

        <!-- Сайдбар: статистика, параметры, теги -->
        <aside class="project-side">
          <GnCard class="side-card">
            <template #title>
              <span class="card-title-icon"><i class="ph ph-chart-bar" aria-hidden="true" /></span>
              {{ t('projectPage.stats') }}
            </template>
            <div class="p-rows">
              <div v-for="row in statRows" :key="row.key" class="p-row" :class="{ warn: row.warn }">
                <i :class="`ph ${row.icon}`" aria-hidden="true" />
                <span class="p-term">{{ row.term }}</span>
                <span class="p-value">{{ row.value }}</span>
              </div>
            </div>
          </GnCard>

          <GnCard class="side-card">
            <template #title>
              <span class="card-title-icon"><i class="ph ph-list-dashes" aria-hidden="true" /></span>
              {{ t('task.fields') }}
            </template>
            <div class="p-rows">
              <div v-for="row in paramRows" :key="row.key" class="p-row">
                <i :class="`ph ${row.icon}`" aria-hidden="true" />
                <span class="p-term">{{ row.term }}</span>
                <GnBadge v-if="row.badge" :variant="row.badge">{{ row.value }}</GnBadge>
                <span v-else class="p-value">{{ row.value }}</span>
              </div>
            </div>
          </GnCard>

          <GnCard v-if="tagRows.length" class="side-card">
            <template #title>
              <span class="card-title-icon"><i class="ph ph-tag" aria-hidden="true" /></span>
              {{ t('stack.form.tags') }}
            </template>
            <div class="p-rows">
              <div v-for="[name, count] in tagRows" :key="name" class="p-row">
                <i class="ph ph-tag" aria-hidden="true" />
                <span class="p-value">{{ name }}</span>
                <GnBadge variant="neutral">{{ count }}</GnBadge>
              </div>
            </div>
          </GnCard>
        </aside>
      </div>
    </template>

    <QuickPrompt v-model:open="newTaskOpen" :title="t('projectPage.promptTask')" @confirm="createTaskForProject" />

    <GnDrawer v-model:open="drawerOpen" :title="project?.name || t('projects.edit')" position="right" @close="closeDrawer">
      <form class="edit-form" @submit.prevent="saveEdit">
        <GnInput v-model="editForm.name" :label="t('projects.form.name')" required />
        <GnSelect
          v-model="editForm.relevance_status"
          :label="t('projects.form.relevance')"
          icon="ph-activity"
          :options="relevanceOptions"
        />
        <GnSelect
          v-model="editForm.priorityGrade"
          :label="t('projects.form.priority')"
          icon="ph-flag"
          :options="priorityOptionsWithNone"
        />
        <GnTextarea v-model="editForm.note" :label="t('projects.form.note')" :rows="6" />
        <GnCheckbox v-model="showPreview" :label="t('projects.form.preview')" />
        <div v-if="showPreview" class="md-preview" v-html="notePreview" />
        <div class="form-actions">
          <GnButton type="submit" variant="success" icon="ph-check-circle">
            {{ t('common.save') }}
          </GnButton>
          <GnButton type="button" variant="secondary" class="btn-cancel" @click="closeDrawer">
            {{ t('common.cancel') }}
          </GnButton>
        </div>
      </form>
    </GnDrawer>

    <GnConfirmDialog
      v-model:open="confirmOpen"
      :title="t('common.confirmTitle')"
      :message="t('common.deleteConfirmTask', { title: deleteTarget?.title ?? '' })"
      :confirm-text="t('common.delete')"
      :cancel-text="t('common.cancel')"
      confirm-variant="danger"
      @confirm="remove"
    />
  </section>
</template>

<style scoped>
.page-skeleton {
  margin-bottom: 1rem;
}
/* Две колонки на широком экране: содержимое + сайдбар */
.project-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 960px) {
  .project-grid {
    grid-template-columns: 1fr;
  }
}
.project-main > * + *,
.project-side > * + * {
  margin-top: 1.5rem;
}
.card-title-icon {
  margin-right: 0.4rem;
  color: var(--accent, #7aa2f7);
}
.md-view {
  overflow-x: auto;
  font-size: 1.02rem;
  line-height: 1.65;
}
.p-rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.p-row {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  font-size: 0.95rem;
}
.p-row > i {
  flex: 0 0 1.25rem;
  text-align: center;
  color: var(--accent, #7aa2f7);
  font-size: 1.05em;
  align-self: center;
}
.p-term {
  color: var(--text-muted, #888);
  flex: 1 1 auto;
}
.p-value {
  flex: 0 0 auto;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.p-row.warn > i,
.p-row.warn .p-value {
  color: var(--danger, #f7768e);
}
.muted {
  color: var(--text-muted, #888);
  font-size: 0.9em;
}
.view-tabs {
  margin-bottom: 1rem;
}
/* фильтры: подписанные селекты в ряд, кнопка сброса прижата к низу */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}
.filters :deep(.form-group) {
  width: 14rem;
  margin-bottom: 0;
}
.filters :deep(.select-wrap) {
  margin-top: 0;
}
.filters-reset {
  margin-bottom: 0.25rem;
}
.task-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tree-section {
  margin-top: 0.5rem;
}
.edit-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.form-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.md-preview {
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  padding: 0.75rem;
  overflow-x: auto;
}
/* Отмена — без рамки, менее заметная, чем вторичная */
.btn-cancel {
  border-color: transparent;
  color: var(--text-muted, #888);
}
.btn-cancel:hover {
  border-color: transparent;
  color: var(--accent, #7aa2f7);
}
</style>