<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import {
  GnButton,
  GnCard,
  GnCopyButton,
  GnEmptyState,
  GnInput,
  GnModal,
  GnPageHeader,
  GnSearchField,
  GnTextarea,
  GnToolbar,
  useToast,
} from "gnexus-ui-kit/vue";
import type { Project } from "@ltt/shared";
import * as api from "../api";
import AppShell from "../components/AppShell.vue";

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

const projects = ref<Project[]>([]);
const loading = ref(true);
const query = ref("");

const creating = ref(false);
const createOpen = ref(false);
const newName = ref("");
const newDescription = ref("");

const filtered = computed(() => {
  const q = query.value.trim().toLowerCase();
  if (!q) return projects.value;
  return projects.value.filter(
    (p) => p.name.toLowerCase().includes(q) || (p.description ?? "").toLowerCase().includes(q)
  );
});

onMounted(async () => {
  try {
    projects.value = await api.listProjects();
  } catch {
    toast.error({ title: t("common.error") });
  } finally {
    loading.value = false;
  }
});

async function createProject() {
  creating.value = true;
  try {
    const project = await api.createProject(newName.value, newDescription.value || null);
    projects.value.unshift(project);
    createOpen.value = false;
    newName.value = "";
    newDescription.value = "";
    toast.success({ title: t("projects.createTitle"), text: project.name });
  } catch {
    toast.error({ title: t("common.error") });
  } finally {
    creating.value = false;
  }
}
</script>

<template>
  <AppShell>
    <GnPageHeader :title="t('projects.title')" :subtitle="t('app.tagline')">
      <template #actions>
        <GnButton variant="accent" icon="ph-plus" @click="createOpen = true">
          {{ t("projects.create") }}
        </GnButton>
      </template>
    </GnPageHeader>

    <GnToolbar :title="t('projects.count', filtered.length)">
      <template #actions>
        <GnSearchField v-model="query" :placeholder="t('projects.search')" />
      </template>
    </GnToolbar>

    <GnEmptyState
      v-if="!loading && filtered.length === 0"
      icon="ph-folders"
      :title="t('projects.empty')"
      :text="t('projects.emptyHint')"
    >
      <template #actions>
        <GnButton variant="accent" icon="ph-plus" @click="createOpen = true">
          {{ t("projects.create") }}
        </GnButton>
      </template>
    </GnEmptyState>

    <div v-else-if="filtered.length" class="projects-grid">
      <GnCard v-for="project in filtered" :key="project.id" class="project-card">
        <div class="project-card-head">
          <h2 class="project-name">
            <RouterLink :to="`/p/${project.share_token}`">{{ project.name }}</RouterLink>
          </h2>
        </div>
        <p class="project-description">{{ project.description ?? "—" }}</p>
        <div class="project-card-actions">
          <GnButton variant="secondary" size="sm" icon="ph-arrow-right" @click="router.push(`/p/${project.share_token}`)">
            {{ t("projects.open") }}
          </GnButton>
          <GnCopyButton :text="api.projectShareUrl(project)" :label="t('projects.share')" />
        </div>
      </GnCard>
    </div>

    <GnModal v-model:open="createOpen" :title="t('projects.createTitle')">
      <form class="create-form" @submit.prevent="createProject">
        <GnInput v-model="newName" :label="t('projects.name')" icon="ph-folder-simple" required />
        <GnTextarea v-model="newDescription" :label="t('projects.description')" :rows="3" />
        <div class="create-form-actions">
          <GnButton variant="secondary" type="button" @click="createOpen = false">
            {{ t("projects.cancel") }}
          </GnButton>
          <GnButton type="submit" variant="accent" :loading="creating" :disabled="!newName.trim()">
            {{ t("projects.confirm") }}
          </GnButton>
        </div>
      </form>
    </GnModal>
  </AppShell>
</template>

<style scoped>
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.project-card {
  /* kit .card is width:max-content/max-width:340px — cards fill their grid cell */
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
}
.project-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.project-name {
  margin: 0;
  font-size: 16px;
}
.project-name a {
  color: inherit;
  text-decoration: none;
}
.project-name a:hover {
  color: var(--color-accent, #7aa2f7);
}
.project-description {
  margin: 0;
  font-size: 13px;
  opacity: 0.75;
  flex: 1;
}
.project-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.create-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.create-form > :deep(*) {
  width: 100%;
}
.create-form-actions {
  display: flex;
  justify-content: flex-end;
}
</style>