---
import Card from "@/components/Card.astro";
import { ProfileForm } from "@/components/ProfileForm";
import type { User } from "@/types/schema";
import { getAllUsers, getOneUser } from "@/utils/auths";
import Layout from "@layouts/Layout.astro";
import { getAllMessages, getUnreadMessages } from "@utils/message";
import { navigate } from "astro:transitions/client";

// @ts-ignore
let user = Astro.locals.user as Partial<User>;

const getData = (res: "a_msg" | "u_msg" | "a_stf") => {
  try {
    if (res === "a_stf") return getAllUsers();
    if (res === "a_msg") return getAllMessages();
    if (res === "u_msg") return getUnreadMessages();
  } catch (error) {
    console.error({ error });
  }
};
const unread = await getData("u_msg");
const messages = await getData("a_msg");
const staffs = await getData("a_stf");
---

<Layout title="Dashboard">
  <section class="summary-cards my-[2rem]">
    <Card
      href="/dashboard/messages?tab=unread"
      title="New Messages"
      body={`${unread?.total ?? ""}`}
      className="bg-blue-700 hover:bg-opacity-80 transition-all duration-300 cursor-none text-white rounded-2xl"
    />
    <Card
      href="/dashboard/messages"
      title="Total Messages"
      body={`${messages?.total ?? ""}`}
      className="bg-blue-950 hover:bg-opacity-80 transition-all duration-300 cursor-none text-white rounded-2xl"
    />
    {
      user?.isAdmin && (
        <Card
          href="/dashboard/staffs"
          title="Total Staffs"
          body={`${staffs?.total ?? ""}`}
          className="bg-slate-950 hover:bg-opacity-80 transition-all duration-300 cursor-none text-white rounded-2xl"
        />
      )
    }
  </section>
  <section>
    <h3 class="font-semibold text-2xl uppercase">Profile</h3>
    <ProfileForm
      {...user}
      self={true}
      client:only="solid-js"
      onSuccess={async () => {
        navigate("/dashboard");
      }}
    />
  </section>
</Layout>