<script setup>
import { computed, ref } from "vue";
import { useRouter } from "vue-router";
import { useAuth } from "../../composables/useAuth.js";

const router = useRouter();
const { user } = useAuth();

// Fake dashboard data (replace with API when endpoints exist).
const DUMMY_KPIS = {
  openTasks: 85,
  meetingsToday: 0,
  unreadNotes: 6,
  favoriteProjects: 3,
};

const DUMMY_URGENT_TASKS = [
  { id: 1, title: "Intake gesprek voeren", project: "SLIM AI Logistiek 2025" },
  {
    id: 2,
    title: "Screening rapport maken",
    project: "SLIM AI Logistiek 2025",
  },
  { id: 3, title: "Opdracht maken", project: "SLIM AI Logistiek 2025" },
];

const DUMMY_MEETINGS = [];

const DUMMY_NOTES = [
  {
    id: 1,
    title: "Intake gesprek met Jan Vermeer",
    excerpt:
      "Besproken: mogelijkheden voor WBSO subsidie en tijdlijn voor aanvraag. Actie: offerte binnen 2 werkdagen.",
  },
  {
    id: 2,
    title: "Eerste kennismakingsgesprek",
    excerpt:
      "Klant geïnteresseerd in EIA subsidie voor energiebesparende investering. Mogelijke investering: zonnepanelen, warmtepompen.",
  },
  {
    id: 3,
    title: "Kickoff meeting",
    excerpt:
      "Projectteam doorgenomen, deadlines en milestones afgestemd. Communicatie-afspraken vastgelegd.",
  },
];

const DUMMY_FAVORITES = [
  {
    id: 1,
    name: "SLIM AI Logistiek 2025",
    company: "TechStart BV",
    status: "Lead",
  },
  {
    id: 2,
    name: "SLIM Blockchain Supply Chain",
    company: "InnoBridge BV",
    status: "Aanvraag",
  },
  {
    id: 3,
    name: "SLIM Data Privacy Platform",
    company: "DataSolutions BV",
    status: "Aanvraag",
  },
];

const kpis = ref(DUMMY_KPIS);
const urgentTasks = ref(DUMMY_URGENT_TASKS);
const meetingsToday = ref(DUMMY_MEETINGS);
const notes = ref(DUMMY_NOTES);
const favoriteProjects = ref(DUMMY_FAVORITES);

const profileName = computed(() => {
  const u = user.value;
  if (!u) return "";

  if (u.name) return String(u.name);

  const parts = [u.first_name, u.last_name].filter(Boolean);
  if (parts.length) return parts.join(" ");

  if (u.email) return String(u.email);

  return "";
});

const todayLabel = computed(() => {
  try {
    return new Date().toLocaleDateString("nl-NL", {
      weekday: "long",
      day: "numeric",
      month: "long",
      year: "numeric",
    });
  } catch {
    return "";
  }
});

function goTo(path) {
  router.push({ path });
}
</script>

<template>
  <div class="min-h-0 flex flex-col gap-6">
    <div
      class="rounded-xl bg-surface-100 dark:bg-surface-800/80 p-5 flex flex-wrap items-start justify-between gap-4"
    >
      <div class="min-w-0 flex-1">
        <BaseTitle :level="1" class="m-0">
          Welkom terug{{ profileName ? ", " + profileName : "" }}
        </BaseTitle>
        <BaseSubtitle :level="4" muted class="!mb-0 mt-1">
          {{ todayLabel }}
        </BaseSubtitle>
      </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
      <BaseKpiCard
        title="Mijn taken"
        :value="kpis.openTasks"
        icon="clipboard"
        icon-bg-class="bg-amber-100 dark:bg-amber-900/40"
        icon-color-class="text-amber-600 dark:text-amber-400"
        @click="goTo('/tasks')"
      />
      <BaseKpiCard
        title="Afspraken vandaag"
        :value="kpis.meetingsToday"
        icon="calendar"
        icon-bg-class="bg-purple-100 dark:bg-purple-900/40"
        icon-color-class="text-purple-600 dark:text-purple-400"
      />
      <BaseKpiCard
        title="Ongelezen notities"
        :value="kpis.unreadNotes"
        icon="file-text"
        icon-bg-class="bg-yellow-100 dark:bg-yellow-900/40"
        icon-color-class="text-yellow-700 dark:text-yellow-300"
        @click="goTo('/notes')"
      />
      <BaseKpiCard
        title="Favoriete projecten"
        :value="kpis.favoriteProjects"
        icon="star"
        icon-bg-class="bg-blue-100 dark:bg-blue-900/40"
        icon-color-class="text-blue-600 dark:text-blue-400"
        @click="goTo('/projects')"
      />
    </div>

    <div
      class="grid grid-cols-1 lg:grid-cols-2 gap-6 flex-1 min-h-0 lg:auto-rows-fr lg:min-h-[calc(100vh-24rem)]"
    >
      <div
        class="rounded-xl border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-800 p-5 h-full flex flex-col"
      >
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center gap-2">
            <BaseIcon name="clipboard-check" class="text-surface-500" />
            <h3 class="m-0 text-base font-semibold">Mijn taken</h3>
          </div>
          <BaseTextButton
            label="Alles"
            icon="arrow-right"
            class="!px-0 text-sm"
            @click="goTo('/tasks')"
          />
        </div>
        <ul class="list-none p-0 m-0 flex-1 min-h-0 overflow-auto">
          <li
            v-for="t in urgentTasks"
            :key="t.id"
            class="flex items-center justify-between gap-2 py-2 border-b border-surface-200 dark:border-surface-700 last:border-b-0 hover:bg-surface-100/60 dark:hover:bg-surface-700/30 transition-colors cursor-pointer"
            @click="goTo('/tasks')"
          >
            <div class="flex min-w-0 items-center gap-2 flex-1">
              <BaseIcon
                name="exclamation-triangle"
                class="text-amber-500 text-sm"
              />
              <div class="min-w-0">
                <div class="font-medium truncate">{{ t.title }}</div>
                <div class="text-xs text-surface-500 truncate">
                  {{ t.project }}
                </div>
              </div>
            </div>
          </li>
          <li
            v-if="urgentTasks.length === 0"
            class="text-surface-500 text-sm py-4"
          >
            Geen urgente taken
          </li>
        </ul>
      </div>

      <div
        class="rounded-xl border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-800 p-5 h-full flex flex-col"
      >
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center gap-2">
            <BaseIcon name="calendar" class="text-surface-500" />
            <h3 class="m-0 text-base font-semibold">Outlook agenda</h3>
          </div>
          <BaseTextButton
            label="Alles"
            icon="arrow-right"
            class="!px-0 text-sm"
          />
        </div>
        <div
          v-if="meetingsToday.length === 0"
          class="text-sm text-surface-500 dark:text-surface-400 py-6 flex items-center justify-center gap-2 flex-1"
        >
          <BaseIcon name="calendar" class="text-surface-400" />
          Geen afspraken gepland
        </div>
        <ul v-else class="list-none p-0 m-0 flex-1 min-h-0 overflow-auto">
          <li
            v-for="m in meetingsToday"
            :key="m.id"
            class="flex items-center justify-between gap-2 py-2 border-b border-surface-200 dark:border-surface-700 last:border-b-0 hover:bg-surface-100/60 dark:hover:bg-surface-700/30 transition-colors cursor-pointer"
          >
            <div class="flex min-w-0 items-center gap-2 flex-1">
              <BaseIcon name="clock" class="text-surface-400 text-sm" />
              <div class="min-w-0">
                <div class="font-medium truncate">{{ m.title }}</div>
                <div class="text-xs text-surface-500 truncate">
                  {{ m.time }}
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div
        class="rounded-xl border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-800 p-5 h-full flex flex-col"
      >
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center gap-2">
            <BaseIcon name="file-text" class="text-surface-500" />
            <h3 class="m-0 text-base font-semibold">Notities</h3>
          </div>
          <BaseTextButton
            label="Alles"
            icon="arrow-right"
            class="!px-0 text-sm"
            @click="goTo('/notes')"
          />
        </div>
        <ul class="list-none p-0 m-0 flex-1 min-h-0 overflow-auto">
          <li
            v-for="n in notes.slice(0, 3)"
            :key="n.id"
            class="py-3 border-b border-surface-200 dark:border-surface-700 last:border-b-0 hover:bg-surface-100/60 dark:hover:bg-surface-700/30 transition-colors cursor-pointer"
            @click="goTo('/notes')"
          >
            <div
              class="font-medium text-sm text-surface-900 dark:text-surface-0"
            >
              {{ n.title }}
            </div>
            <div
              class="text-xs text-surface-500 dark:text-surface-400 mt-1 line-clamp-2"
            >
              {{ n.excerpt }}
            </div>
          </li>
          <li v-if="notes.length === 0" class="text-surface-500 text-sm py-4">
            Geen notities
          </li>
        </ul>
      </div>

      <div
        class="rounded-xl border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-800 p-5 h-full flex flex-col"
      >
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center gap-2">
            <BaseIcon name="star" class="text-surface-500" />
            <h3 class="m-0 text-base font-semibold">Projecten</h3>
          </div>
          <BaseTextButton
            label="Alles"
            icon="arrow-right"
            class="!px-0 text-sm"
            @click="goTo('/projects')"
          />
        </div>
        <ul class="list-none p-0 m-0 flex-1 min-h-0 overflow-auto">
          <li
            v-for="p in favoriteProjects"
            :key="p.id"
            class="flex items-center justify-between gap-2 py-2 border-b border-surface-200 dark:border-surface-700 last:border-b-0 hover:bg-surface-100/60 dark:hover:bg-surface-700/30 transition-colors cursor-pointer"
            @click="goTo('/projects')"
          >
            <div class="min-w-0 flex-1">
              <div class="font-medium truncate">{{ p.name }}</div>
              <div class="text-xs text-surface-500 truncate">
                {{ p.company }}
              </div>
            </div>
            <span class="text-xs font-medium text-surface-500 shrink-0">
              {{ p.status }}
            </span>
          </li>
          <li
            v-if="favoriteProjects.length === 0"
            class="text-surface-500 text-sm py-4"
          >
            Geen projecten
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
