import ViewRealtime from "@/components/administrator/ViewRealtime/view.realtime";
import ViewsChart from "@/components/administrator/ViewsChart/views.chart";
import {
  getAnalytics,
  newestPost,
  popularPost,
  totalCategories,
  totalDraft,
  totalPost,
  totalPostPublished,
} from "@/models/analytics";
import React from "react";

import styles from "@/app/(Admin)/dashboard/dashboard.module.css";
import { description as defaultDesctription } from "@/config/default";

// icons
import { IoDocumentTextOutline, IoEyeOutline } from "react-icons/io5";
import { TbCategory2 } from "react-icons/tb";
import { RiDraftLine } from "react-icons/ri";
import { HiOutlineDocumentDuplicate } from "react-icons/hi2";
import { VscShare } from "react-icons/vsc";
import { getGeneralSettings } from "@/models/settings";

const Dashboard = async ({ searchParams }) => {
  const query = await searchParams;
  const viewchart = query?.viewchart ? JSON.parse(query.viewchart) : null;
  const data = await getAnalytics(viewchart?.timeline, viewchart?.year);

  const popularPostData = await popularPost();
  const newestPostData = await newestPost();

  let description = await getGeneralSettings();

  if (!description) description = defaultDesctription;

  const analyticsBox = await Promise.all(
    [
      {
        title: "Published Post",
        get: totalPostPublished,
        icon: <IoDocumentTextOutline className={styles.icon} />,
      },
      {
        title: "Draft Post",
        get: totalDraft,
        icon: <RiDraftLine className={styles.icon} />,
      },
      {
        title: "Total Post",
        get: totalPost,
        icon: <HiOutlineDocumentDuplicate className={styles.icon} />,
      },
      {
        title: "Total Categories",
        get: totalCategories,
        icon: <TbCategory2 className={styles.icon} />,
      },
    ].map(async (analytic) => {
      const value = await analytic.get();

      delete analytic.get;
      return { ...analytic, value };
    })
  );

  return (
    <>
      <div className={styles.header_container}>
        <div className={styles.header_title}>Dashboard {description.title}</div>
        <div className={styles.header_action}></div>
      </div>
      <div className={styles.container}>
        <div className={styles.analytic_box}>
          {analyticsBox.map((analytic, index) => (
            <div
              className={styles.analytic_box_item}
              key={index}>
              <div className={styles.item_icon}>{analytic.icon}</div>
              <div className={styles.item_data}>
                <div className={styles.item_data_title}>{analytic.title}</div>
                <div className={styles.item_data_value}>{analytic.value}</div>
              </div>
            </div>
          ))}
        </div>
        <div className={styles.analytic_charts}>
          <ViewsChart initialData={data} />
          {/* Realtime */}
          {/* <ViewRealtime /> */}

          {/* Popular post */}
          <div className={styles.analytic_table}>
            <div className={styles.header_container_table}>
              <div className={styles.header_title_table}>
                <p>
                  <span>Popular Post</span>
                </p>
                <p>Top 10 post with most views of all time</p>
              </div>
              <div className={styles.header_action}></div>
            </div>
            <div className={styles.body_container}>
              {popularPostData.length > 0 ? (
                <>
                  {popularPostData.map((item, index) => (
                    <div
                      className={styles.table_item}
                      key={index}>
                      <div className={styles.table_content}>
                        <p>{item.title}</p>
                        <span>{item.author.name}</span>
                      </div>
                      <div className={styles.table_action}>
                        <span>
                          <IoEyeOutline size={12} /> {item.views}
                        </span>
                        <div className={styles.action}>
                          <VscShare size={16} />
                        </div>
                      </div>
                    </div>
                  ))}
                </>
              ) : (
                <></>
              )}
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Dashboard;
