<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Arquivo: src/features/documents/components/DocumentCard.vue
| Card reutilizavel de documento — thumbnail, nome, tipo, data, tags, acoes.
|--------------------------------------------------------------------------
-->
<script setup>
import { computed } from 'vue'

const props = defineProps({
    doc: { type: Object, required: true },
    selected: { type: Boolean, default: false }
})

const emit = defineEmits(['preview', 'download', 'edit', 'delete', 'share', 'sign'])

// ── Helpers ──────────────────────────────────────────────────

const mimeIcon = computed(() => {
    const m = String(props.doc.mime_type || '')
    if (m.startsWith('image/')) return 'pi pi-image'
    if (m === 'application/pdf') return 'pi pi-file-pdf'
    if (m.includes('word') || m.includes('document')) return 'pi pi-file-word'
    if (m.includes('excel') || m.includes('sheet')) return 'pi pi-file-excel'
    return 'pi pi-file'
})

const mimeColor = computed(() => {
    const m = String(props.doc.mime_type || '')
    if (m.startsWith('image/')) return 'bg-purple-500/10 text-purple-500'
    if (m === 'application/pdf') return 'bg-red-500/10 text-red-500'
    if (m.includes('word')) return 'bg-blue-500/10 text-blue-500'
    if (m.includes('excel')) return 'bg-green-500/10 text-green-500'
    return 'bg-gray-500/10 text-gray-500'
})

const tipoLabel = computed(() => {
    const map = {
        laudo: 'Laudo', receita: 'Receita', exame: 'Exame',
        termo_assinado: 'Termo', relatorio_externo: 'Relatório',
        identidade: 'Identidade', convenio: 'Convênio',
        declaracao: 'Declaração', atestado: 'Atestado',
        recibo: 'Recibo', outro: 'Outro'
    }
    return map[props.doc.tipo_documento] || 'Documento'
})

const formattedSize = computed(() => {
    const b = props.doc.tamanho_bytes
    if (!b) return '—'
    if (b < 1024) return b + ' B'
    if (b < 1024 * 1024) return (b / 1024).toFixed(1) + ' KB'
    return (b / (1024 * 1024)).toFixed(1) + ' MB'
})

const formattedDate = computed(() => {
    const d = props.doc.uploaded_at
    if (!d) return '—'
    return new Date(d).toLocaleDateString('pt-BR', { day: '2-digit', month: 'short', year: 'numeric' })
})

const isImage = computed(() => String(props.doc.mime_type || '').startsWith('image/'))

const menuItems = computed(() => [
    { label: 'Visualizar', icon: 'pi pi-eye', command: () => emit('preview', props.doc) },
    { label: 'Baixar', icon: 'pi pi-download', command: () => emit('download', props.doc) },
    { label: 'Editar', icon: 'pi pi-pencil', command: () => emit('edit', props.doc) },
    { label: 'Compartilhar', icon: 'pi pi-share-alt', command: () => emit('share', props.doc) },
    { label: 'Assinar', icon: 'pi pi-check-square', command: () => emit('sign', props.doc) },
    { separator: true },
    { label: 'Excluir', icon: 'pi pi-trash', class: 'text-red-500', command: () => emit('delete', props.doc) }
])
</script>

<template>
    <div
        class="group relative flex items-start gap-3 p-3 rounded-lg border transition-all cursor-pointer"
        :class="[
            selected
                ? 'border-primary bg-primary/5'
                : 'border-[var(--surface-border)] hover:border-[var(--surface-400)] hover:bg-[var(--surface-hover)]'
        ]"
        @click="emit('preview', doc)"
    >
        <!-- Icone / Thumbnail -->
        <div class="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" :class="mimeColor">
            <i :class="mimeIcon" class="text-lg" />
        </div>

        <!-- Info -->
        <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2">
                <span class="text-sm font-medium truncate">{{ doc.nome_original }}</span>
                <span
                    v-if="doc.enviado_pelo_paciente"
                    class="text-[0.65rem] px-1.5 py-0.5 rounded-full bg-amber-500/10 text-amber-600 whitespace-nowrap"
                >
                    paciente
                </span>
                <span
                    v-if="doc.status_revisao === 'pendente'"
                    class="text-[0.65rem] px-1.5 py-0.5 rounded-full bg-orange-500/10 text-orange-600 whitespace-nowrap"
                >
                    pendente
                </span>
            </div>

            <div class="flex items-center gap-2 mt-0.5 text-xs text-[var(--text-color-secondary)]">
                <span>{{ tipoLabel }}</span>
                <span class="opacity-30">|</span>
                <span>{{ formattedSize }}</span>
                <span class="opacity-30">|</span>
                <span>{{ formattedDate }}</span>
            </div>

            <!-- Tags -->
            <div v-if="doc.tags?.length" class="flex flex-wrap gap-1 mt-1.5">
                <span
                    v-for="tag in doc.tags"
                    :key="tag"
                    class="text-[0.65rem] px-1.5 py-0.5 rounded-full border border-[var(--surface-border)] text-[var(--text-color-secondary)]"
                >
                    {{ tag }}
                </span>
            </div>
        </div>

        <!-- Menu de acoes -->
        <div class="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
            <Button
                icon="pi pi-ellipsis-v"
                text
                rounded
                size="small"
                class="!w-7 !h-7"
                @click.stop="$refs.menu.toggle($event)"
            />
            <Menu ref="menu" :model="menuItems" :popup="true" />
        </div>

        <!-- Badges de visibilidade -->
        <div class="absolute top-2 right-2 flex gap-1" v-if="doc.compartilhado_portal || doc.compartilhado_supervisor">
            <i
                v-if="doc.compartilhado_portal"
                class="pi pi-user text-[0.6rem] p-1 rounded-full bg-blue-500/10 text-blue-500"
                v-tooltip.top="'Visível no portal do paciente'"
            />
            <i
                v-if="doc.compartilhado_supervisor"
                class="pi pi-eye text-[0.6rem] p-1 rounded-full bg-teal-500/10 text-teal-500"
                v-tooltip.top="'Compartilhado com supervisor'"
            />
        </div>
    </div>
</template>
