<template>
    <div class="container mx-auto p-4 animate-fade-in">
        <div class="flex justify-between items-center mb-6">
            <div>
                <h1 class="text-3xl font-bold text-white mb-2">Projects</h1>
                <p class="text-slate-400">Manage your workspaces and teams</p>
            </div>
            <Button label="New Project" icon="pi pi-plus" @click="showCreateDialog = true" />
        </div>

        <div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <Skeleton v-for="i in 3" :key="i" height="150px" class="rounded-xl" />
        </div>

        <div v-else-if="projects.length === 0" class="text-center py-12 glass-panel rounded-xl">
            <i class="pi pi-folder-open text-6xl text-slate-600 mb-4"></i>
            <h3 class="text-xl font-semibold text-white mb-2">No Projects Yet</h3>
            <p class="text-slate-400 mb-6">Create your first project to get started</p>
            <Button label="Create Project" icon="pi pi-plus" @click="showCreateDialog = true" text />
        </div>

        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div v-for="project in projects" :key="project.id"
                class="glass-panel p-6 rounded-xl hover:bg-slate-800/50 transition-colors cursor-pointer group relative overflow-hidden"
                @click="goToProject(project.id)">
                <!-- Active Indicator -->
                <div v-if="currentProject?.id === project.id" class="absolute top-0 right-0 p-2">
                    <span
                        class="bg-green-500/20 text-green-400 text-xs px-2 py-1 rounded-full border border-green-500/30 font-medium">
                        Active
                    </span>
                </div>

                <h3 class="text-xl font-semibold text-white mb-2 group-hover:text-primary-400 transition-colors">
                    {{ project.name }}
                </h3>
                <p class="text-slate-400 text-sm mb-4 line-clamp-2">
                    {{ project.description || 'No description' }}
                </p>

                <div class="flex items-center justify-between mt-4 border-t border-slate-700/50 pt-4">
                    <div class="flex items-center text-slate-500 text-sm">
                        <i class="pi pi-users mr-2"></i>
                        <span>{{ project.members.length }} members</span>
                    </div>

                    <Button v-if="currentProject?.id !== project.id" icon="pi pi-check" label="Select" size="small"
                        severity="secondary" @click.stop="selectProject(project.id)" />
                </div>
            </div>
        </div>

        <!-- Create Project Dialog -->
        <Dialog v-model:visible="showCreateDialog" modal header="Create New Project"
            :style="{ width: '90vw', maxWidth: '500px' }">
            <div class="flex flex-col gap-4 pt-4">
                <div class="flex flex-col gap-2">
                    <label for="name" class="text-slate-300">Project Name</label>
                    <InputText id="name" v-model="newProject.name" autofocus />
                </div>
                <div class="flex flex-col gap-2">
                    <label for="description" class="text-slate-300">Description</label>
                    <Textarea id="description" v-model="newProject.description" rows="3" autoResize />
                </div>
            </div>
            <template #footer>
                <Button label="Cancel" text severity="secondary" @click="showCreateDialog = false" />
                <Button label="Create" icon="pi pi-check" @click="createProject" :loading="creating" />
            </template>
        </Dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useProjectsStore } from '@/stores/projectsStore';
import { storeToRefs } from 'pinia';
import Button from 'primevue/button';
import Dialog from 'primevue/dialog';
import InputText from 'primevue/inputtext';
import Textarea from 'primevue/textarea';
import Skeleton from 'primevue/skeleton';

const router = useRouter();
const projectsStore = useProjectsStore();
// Use storeToRefs for reactive state
const { projects, currentProject, loading } = storeToRefs(projectsStore);

const showCreateDialog = ref(false);
const creating = ref(false);
const newProject = ref({
    name: '',
    description: ''
});

onMounted(() => {
    projectsStore.fetchProjects();
});

const createProject = async () => {
    if (!newProject.value.name.trim()) return;

    creating.value = true;
    try {
        await projectsStore.createProject(newProject.value.name, newProject.value.description);
        showCreateDialog.value = false;
        newProject.value = { name: '', description: '' };
    } catch (error) {
        console.error(error);
    } finally {
        creating.value = false;
    }
};

const selectProject = (id) => {
    projectsStore.selectProject(id);
};

const goToProject = (id) => {
    router.push(`/projects/${id}`);
};
</script>
