<template>
    <div
        class="min-h-screen bg-slate-50 dark:bg-slate-950 font-sans text-slate-900 dark:text-slate-200 selection:bg-blue-100 dark:selection:bg-blue-900 pb-12 transition-colors duration-300">

        <div class="container mx-auto max-w-7xl px-4 py-8 md:py-12">
            <div class="grid grid-cols-1 md:grid-cols-12 gap-8 lg:gap-12">

                <div class="md:col-span-4 lg:col-span-3 flex flex-col gap-6">

                    <div
                        class="bg-white dark:bg-slate-900 rounded-2xl p-6 shadow-sm border border-slate-200 dark:border-slate-800 transition-colors duration-300">
                        <div class="flex flex-col items-center text-center">
                            <div class="relative inline-block mb-4">
                                <div
                                    class="h-32 w-32 rounded-full border-4 border-white dark:border-slate-800 bg-slate-100 dark:bg-slate-800 overflow-hidden shadow-md ring-1 ring-slate-200 dark:ring-slate-700">
                                    <img :src="userProfile.avatarUrl" :alt="userProfile.name"
                                        class="h-full w-full object-cover transition-transform hover:scale-105">
                                </div>
                                <div class="absolute bottom-2 right-2 h-5 w-5 rounded-full border-[3px] border-white dark:border-slate-900 shadow-sm"
                                    :class="userProfile.is_active ? 'bg-emerald-500' : 'bg-gray-400'"
                                    title="Online Status" />
                            </div>

                            <h1 class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight">{{
                                userProfile.name }}
                            </h1>
                            <p
                                class="text-sm font-semibold text-slate-500 dark:text-slate-400 mb-6 uppercase tracking-wide">
                                {{ userProfile.role }}
                            </p>

                            <div class="w-full space-y-3">
                                <button
                                    class="w-full py-2.5 px-4 bg-slate-900 dark:bg-blue-600 hover:bg-slate-800 dark:hover:bg-blue-500 text-white font-medium rounded-lg text-sm transition-all shadow-sm active:scale-95 cursor-pointer"
                                    @click=" activeTab = 'settings'">
                                    Edit Profile
                                </button>
                            </div>
                        </div>

                        <div class="mt-8 pt-6 border-t border-slate-100 dark:border-slate-800 space-y-4">
                            <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
                                <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                </svg>
                                <span class="truncate">{{ userProfile.email }}</span>
                            </div>
                            <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
                                <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                                </svg>
                                <span>Polytechnic of Leiria</span>
                            </div>
                            <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
                                <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                </svg>
                                <span>Joined {{ formattedDate }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div
                            class="bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 text-center hover:border-slate-300 dark:hover:border-slate-700 transition-colors">
                            <div class="text-2xl font-bold text-slate-900 dark:text-white">{{ totalCitations }}</div>
                            <div
                                class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-1">
                                Citations
                            </div>
                        </div>
                        <div
                            class="bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 text-center hover:border-slate-300 dark:hover:border-slate-700 transition-colors">
                            <div class="text-2xl font-bold text-slate-900 dark:text-white">{{
                                userProfile.publications.length
                            }}</div>
                            <div
                                class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-1">
                                Papers
                            </div>
                        </div>
                    </div>
                </div>

                <div class="md:col-span-8 lg:col-span-9 space-y-6">

                    <div
                        class="bg-white dark:bg-slate-900 p-1.5 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm flex gap-1 overflow-x-auto transition-colors">
                        <button
                            :class="activeTab === 'overview' ? 'bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm ring-1 ring-black/5 dark:ring-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800'"
                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-semibold cursor-pointer transition-colors"
                            @click="activeTab = 'overview'">
                            Overview
                        </button>
                        <button
                            :class="activeTab === 'activity' ? 'bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm ring-1 ring-black/5 dark:ring-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800'"
                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-medium transition-colors cursor-pointer"
                            @click="activeTab = 'activity'">
                            Activity Log
                        </button>
                        <button
                            :class="activeTab === 'settings' ? 'bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm ring-1 ring-black/5 dark:ring-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800'"
                            class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-medium transition-colors cursor-pointer"
                            @click="activeTab = 'settings'">
                            Settings
                        </button>
                    </div>

                    <Transition mode="out-in" enter-active-class="transition duration-300 ease-out"
                        enter-from-class="transform opacity-0 translate-y-2"
                        enter-to-class="transform opacity-100 translate-y-0"
                        leave-active-class="transition duration-200 ease-in"
                        leave-from-class="transform opacity-100 translate-y-0"
                        leave-to-class="transform opacity-0 translate-y-2">
                        <div v-if="activeTab === 'overview'" key="overview" class="space-y-6">
                            <div
                                class="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 transition-colors">
                                <h2
                                    class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-3">
                                    Biography</h2>
                                <p class="text-slate-700 dark:text-slate-300 leading-relaxed text-sm">
                                    {{ userProfile.biography }}
                                </p>
                            </div>

                            <div class="flex items-center justify-between pt-2 px-1">
                                <h2 class="text-lg font-bold text-slate-900 dark:text-white flex items-center gap-2">
                                    Recent Publications
                                    <span
                                        class="bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-xs font-bold px-2 py-0.5 rounded-full">
                                        {{ userProfile.publications.length }}
                                    </span>
                                </h2>
                            </div>

                            <div class="flex flex-col gap-4">
                                <div v-if="userProfile.publications.length === 0"
                                    class="relative overflow-hidden rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50 p-12 text-center hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 group">

                                    <div
                                        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 bg-blue-500/10 dark:bg-blue-400/10 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />

                                    <div class="relative z-10 flex flex-col items-center">
                                        <div
                                            class="mb-4 p-4 bg-white dark:bg-slate-800 rounded-full shadow-sm ring-1 ring-slate-100 dark:ring-slate-700 group-hover:scale-110 group-hover:ring-blue-200 dark:group-hover:ring-blue-800 transition-all duration-300">
                                            <svg class="w-8 h-8 text-blue-500 dark:text-blue-400" fill="none"
                                                viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                            </svg>
                                        </div>

                                        <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1">
                                            No publications yet
                                        </h3>
                                        <p
                                            class="text-slate-500 dark:text-slate-400 text-sm max-w-xs mx-auto mb-6 leading-relaxed">
                                            Your profile is looking a little empty. Share your research with the
                                            community to start building your portfolio.
                                        </p>

                                        <button
                                            class="inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30 transform active:scale-95 transition-all duration-200 cursor-pointer"
                                            @click="goToCreatePost()">
                                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M12 4v16m8-8H4" />
                                            </svg>
                                            Submit your first paper
                                        </button>
                                    </div>
                                </div>

                                <div v-for="pub in userProfile.publications" :key="pub.id"
                                    class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 hover:shadow-md hover:border-blue-300 dark:hover:border-blue-700 transition-all duration-200 group relative">
                                    <div class="flex justify-between items-start gap-4 mb-2">
                                        <h3 class="text-base font-bold text-slate-900 dark:text-slate-100">{{ pub.title
                                        }}</h3>
                                        <span
                                            class="shrink-0 px-2.5 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 text-xs font-bold border border-slate-200 dark:border-slate-700">
                                            {{ pub.publishedYear }}
                                        </span>
                                    </div>
                                    <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed line-clamp-2">
                                        {{ pub.abstract }}</p>
                                    <div
                                        class="mt-4 pt-4 border-t border-slate-50 dark:border-slate-800 flex flex-wrap items-center gap-4 text-xs font-medium">
                                        <span
                                            class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border border-blue-100 dark:border-blue-800/50">
                                            {{ pub.field }}
                                        </span>
                                        <span>{{ pub.citations }} Citations</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div v-else-if="activeTab === 'activity'" key="activity" class="space-y-4">
                            <h2 class="text-lg font-bold text-slate-900 dark:text-white px-1">User History</h2>

                            <div v-if="activityLog.length === 0"
                                class="text-center py-12 border border-dashed border-slate-200 dark:border-slate-800 rounded-xl">
                                <p class="text-slate-500">No activity recorded.</p>
                            </div>

                            <div
                                class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 overflow-hidden">
                                <div v-for="(item, index) in activityLog" :key="item.id"
                                    class="p-4 flex gap-4 border-b border-slate-100 dark:border-slate-800 last:border-0 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors">

                                    <div class="flex flex-col items-center min-w-[80px] text-center pt-1">
                                        <span class="text-xs font-bold text-slate-500 uppercase">
                                            {{ new Date(item.timestamp).toLocaleDateString('en-US', {
                                                month: 'short',
                                                day: 'numeric'
                                            }) }}
                                        </span>
                                        <span class="text-[10px] text-slate-400">
                                            {{ new Date(item.timestamp).toLocaleTimeString([], {
                                                hour: '2-digit',
                                                minute: '2-digit'
                                            }) }}
                                        </span>
                                    </div>

                                    <div class="flex-1">
                                        <div class="flex items-center gap-2 mb-1">
                                            <span
                                                class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide"
                                                :class="{
                                                    'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400': item.action.includes('UPLOAD'),
                                                    'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400': item.action.includes('COMMENT'),
                                                    'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400': item.action.includes('RATED') || item.action.includes('CORRECT'),
                                                    'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400': item.action.includes('TAG')
                                                }">
                                                {{ item.action.replace('_', ' ') }}
                                            </span>
                                            <span class="text-xs text-slate-400 font-medium">{{ item.target_type }} #{{
                                                item.target_id }}</span>
                                        </div>
                                        <p class="text-sm text-slate-700 dark:text-slate-300">
                                            {{ item.details }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div v-else-if="activeTab === 'settings'" key="settings"
                            class="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 transition-colors">
                            <h2
                                class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-3">
                                Settings</h2>
                            <p class="text-sm text-slate-600 dark:text-slate-400">
                                Nothing here but chickens! Settings coming soon.
                            </p>
                        </div>
                    </Transition>

                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from "~/stores/auth-store.js";
import { storeToRefs } from "pinia";

// --- Config & Store ---
const config = useRuntimeConfig();
const api = config.public.apiBase;
const authStore = useAuthStore();
const { token } = storeToRefs(authStore);
const router = useRouter();

// --- Interfaces ---

interface Tag {
    id: number;
    name: string;
}

// Matches response from EP12 (/api/v1/publications/my-submissions) [cite: 296]
interface ApiPublication {
    id: number;
    title: string;
    authors: string[];
    publication_date: string;
    type: string;
    rating: number; // Mapping this to citations for the UI
    comment_count: number;
    attached_file?: string;
    tags: Tag[];
    abstract?: string;
}

// Matches your UI requirements
interface UIPublication {
    id: number;
    title: string;
    abstract: string;
    publishedDate: string;
    publishedYear: string;
    citations: number;
    field: string;
}


// --- State ---
const loading = ref(true);
const activeTab = ref('overview'); // State to control visible tab
const activityLog = ref<ActivityItem[]>([]); // Store history data

const userProfile = ref({
    id: 0,
    name: 'Loading...',
    email: '',
    role: '',
    is_active: false,
    avatarUrl: '',
    biography: 'No biography provided.',
    joinDate: new Date().toISOString(),
    publications: [] as any[]
});

// --- API Actions ---

// Fetch Tags (EP23) - To populate the select box
async function fetchTags() {
    if (!token.value) return;
    try {
        const data = await $fetch<Tag[]>(`${api}/tags`, {
            method: 'GET',
            headers: { Authorization: `Bearer ${token.value}` }
        });
        availableTags.value = data || [];
    } catch (e) {
        console.error("Failed to fetch tags", e);
    }
}

// --- Computed ---
const totalCitations = computed(() =>
    userProfile.value.publications.reduce((sum, pub) => sum + (pub.citations || 0), 0)
);

const formattedDate = computed(() => {
    return new Date(userProfile.value.joinDate).toLocaleDateString('en-US', {
        month: 'long',
        year: 'numeric'
    });
});

// --- API Actions ---

// 1. Fetch Activity Log (EP06)
async function fetchActivityHistory() {
    if (!token.value) return;

    try {
        // GET /api/v1/me/history
        const data = await $fetch<ActivityItem[]>(`${api}/me/history`, {
            method: 'GET',
            headers: { Authorization: `Bearer ${token.value}` }
        });
        activityLog.value = data;
    } catch (error) {
        console.error("Error fetching history:", error);
    }
}

// 2. Fetch Main Profile Data (EP03 & EP12)
async function fetchProfileData() {
    if (!token.value) return;
    loading.value = true;

    try {
        // Fetch User Details
        const userData = await $fetch(`${api}/users/me`, {
            method: 'GET',
            headers: { Authorization: `Bearer ${token.value}` }
        });

        // Fetch Publications
        // const publicationsData = await $fetch(`${api}/publications/my-submissions`, {
        //    method: 'GET',
        //    headers: { Authorization: `Bearer ${token.value}` }
        // });

        // Map Data
        userProfile.value = {
            ...userProfile.value,
            id: userData.id,
            name: userData.name,
            email: userData.email,
            role: userData.role,
            is_active: userData.is_active,
            avatarUrl: `https://ui-avatars.com/api/?name=${encodeURIComponent(userData.name)}&background=0D8ABC&color=fff`
        };

        userProfile.value.publications = (publicationsData as any[]).map(pub => {
            const pubDate = new Date(pub.publication_date);
            return {
                id: pub.id,
                title: pub.title,
                abstract: pub.abstract || 'No abstract available.',
                publishedDate: pubDate.toLocaleDateString(),
                publishedYear: pubDate.getFullYear().toString(),
                citations: pub.rating || 0,
                field: pub.tags && pub.tags.length > 0 ? pub.tags[0].name : 'General'
            };
        });

    } catch (error) {
        console.error("Error fetching profile:", error);
    } finally {
        loading.value = false;
    }
}

// --- Redirects ---
const goToCreatePost = () => {
    console.log("Navigating to create post modal...");
    router.push({
        path: '/',
        query: { openCreatePostModal: 'true' }
    });
};

// --- Lifecycle ---
onMounted(() => {
    fetchProfileData();
    fetchActivityHistory(); // Fetch history on mount
});
</script>
