<template>
    <Card :variant="isPinned ? 'elevated' : 'outlined'" :color="list.archived_at ? 'neutral' : 'primary'"
        :class="['list-card', `view-mode-${viewMode}`, { 'archived': list.archived_at }]" :interactive="true"
        @click="$emit('open', list)">
        <div class="card-content">
            <!-- Card Header -->
            <div class="card-header">
                <div class="header-main">
                    <div class="header-icon" :class="`type-${list.type || 'custom'}`">
                        <BaseIcon :name="listIcon" />
                    </div>
                    <div class="header-text">
                        <h4 class="list-name">{{ list.name }}</h4>
                        <p class="last-activity">{{ lastActivity }}</p>
                    </div>
                </div>
                <div class="header-actions">
                    <Menu as="div" class="relative">
                        <MenuButton as="template">
                            <Button variant="ghost" size="sm" class="action-button">
                                <BaseIcon name="heroicons:ellipsis-vertical-20-solid" />
                            </Button>
                        </MenuButton>
                        <transition enter-active-class="transition duration-100 ease-out"
                            enter-from-class="transform scale-95 opacity-0"
                            enter-to-class="transform scale-100 opacity-100"
                            leave-active-class="transition duration-75 ease-in"
                            leave-from-class="transform scale-100 opacity-100"
                            leave-to-class="transform scale-95 opacity-0">
                            <MenuItems class="action-menu">
                                <MenuItem v-if="!list.archived_at" v-slot="{ active }">
                                <button :class="['menu-item', { 'active': active }]" @click.stop="$emit('edit', list)">
                                    <BaseIcon name="heroicons:pencil-20-solid" />
                                    <span>Edit</span>
                                </button>
                                </MenuItem>
                                <MenuItem v-slot="{ active }">
                                <button :class="['menu-item', { 'active': active }]"
                                    @click.stop="$emit('archive', list)">
                                    <BaseIcon
                                        :name="list.archived_at ? 'heroicons:archive-box-arrow-down' : 'heroicons:archive-box-x-mark'" />
                                    <span>{{ list.archived_at ? 'Unarchive' : 'Archive' }}</span>
                                </button>
                                </MenuItem>
                                <MenuItem v-slot="{ active }">
                                <button :class="['menu-item', 'danger', { 'active': active }]"
                                    @click.stop="$emit('delete', list)">
                                    <BaseIcon name="heroicons:trash-20-solid" />
                                    <span>Delete</span>
                                </button>
                                </MenuItem>
                            </MenuItems>
                        </transition>
                    </Menu>
                </div>
            </div>

            <!-- List Preview -->
            <div class="list-preview" v-if="list.items && list.items.length > 0">
                <ul class="preview-items">
                    <li v-for="item in list.items.slice(0, 3)" :key="item.id" class="preview-item">
                        <BaseIcon :name="item.is_complete ? 'heroicons:check-circle-20-solid' : 'heroicons:circle'"
                            :class="['item-icon', { 'completed': item.is_complete }]" />
                        <span :class="{ 'completed-text': item.is_complete }">{{ item.name }}</span>
                    </li>
                </ul>
                <div v-if="list.items.length > 3" class="more-items">
                    +{{ list.items.length - 3 }} more
                </div>
            </div>
            <p v-else class="empty-preview">
                No items in this list yet.
            </p>

            <!-- Card Footer -->
            <div class="card-footer">
                <div class="progress-bar" v-if="completionPercentage > 0">
                    <div class="progress-fill" :style="{ width: `${completionPercentage}%` }"></div>
                </div>
                <div class="footer-meta">
                    <span class="item-count">{{ list.items.length }} items</span>
                    <span class="completion-status">{{ completionPercentage }}% complete</span>
                </div>
            </div>
        </div>
    </Card>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { formatDistanceToNow, parseISO } from 'date-fns'
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
import type { List } from '@/types/list'
import { Card, Button } from '@/components/ui'
import BaseIcon from '@/components/BaseIcon.vue'

const props = defineProps<{
    list: List
    viewMode: 'grid' | 'list'
    isPinned?: boolean
}>()

defineEmits<{
    (e: 'open', list: List): void
    (e: 'edit', list: List): void
    (e: 'archive', list: List): void
    (e: 'delete', list: List): void
}>()

const listIcon = computed(() => {
    if (props.list.type === 'shopping') return 'heroicons:shopping-cart-20-solid'
    if (props.list.type === 'todo') return 'heroicons:check-circle-20-solid'
    return 'heroicons:list-bullet-20-solid'
})

const lastActivity = computed(() => {
    const date = props.list.updated_at || props.list.created_at
    if (!date) return 'No activity yet'
    return `Updated ${formatDistanceToNow(parseISO(date), { addSuffix: true })}`
})

const completionPercentage = computed(() => {
    if (!props.list.items || props.list.items.length === 0) return 0
    const completedCount = props.list.items.filter(item => item.is_complete).length
    return Math.round((completedCount / props.list.items.length) * 100)
})
</script>

<style scoped>
.list-card {
    @apply transition-all duration-micro ease-micro;
}

.list-card.archived {
    @apply opacity-60 hover:opacity-100;
}

.card-content {
    @apply flex flex-col h-full;
}

.card-header {
    @apply flex items-start justify-between;
}

.header-main {
    @apply flex items-start gap-3;
}

.header-icon {
    @apply w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0;
}

.header-icon.type-shopping {
    @apply bg-success-100 text-success-600 dark:bg-success-900/50 dark:text-success-400;
}

.header-icon.type-todo {
    @apply bg-primary-100 text-primary-600 dark:bg-primary-900/50 dark:text-primary-400;
}

.header-icon.type-custom {
    @apply bg-warning-100 text-warning-600 dark:bg-warning-900/50 dark:text-warning-400;
}

.header-text {
    @apply space-y-1;
}

.list-name {
    @apply font-semibold text-text-primary;
}

.last-activity {
    @apply text-xs text-text-secondary;
}

.action-menu {
    @apply absolute right-0 mt-2 w-48 origin-top-right;
    @apply bg-surface-elevated rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none;
    @apply z-10;
}

.menu-item {
    @apply flex items-center w-full px-3 py-2 text-sm gap-3;
}

.menu-item.active {
    @apply bg-surface-hover;
}

.menu-item.danger {
    @apply text-error-600 dark:text-error-400;
}

.menu-item.danger.active {
    @apply bg-error-50 dark:bg-error-900/50;
}

.list-preview {
    @apply my-4 flex-1;
}

.preview-items {
    @apply space-y-2;
}

.preview-item {
    @apply flex items-center gap-2 text-sm text-text-secondary;
}

.item-icon {
    @apply w-4 h-4;
}

.item-icon.completed {
    @apply text-success-500;
}

.completed-text {
    @apply line-through text-text-tertiary;
}

.more-items {
    @apply text-xs text-text-tertiary mt-2;
}

.empty-preview {
    @apply text-sm text-text-secondary my-4 flex-1 text-center py-4;
}

.card-footer {
    @apply space-y-2 pt-4 border-t border-border-primary;
}

.progress-bar {
    @apply h-1.5 bg-surface-soft rounded-full overflow-hidden;
}

.progress-fill {
    @apply h-full bg-success-500 rounded-full transition-all duration-medium;
}

.footer-meta {
    @apply flex justify-between text-xs text-text-secondary;
}
</style>