"use client";

import { StatisticsBlock } from "@/components/blocks/statistics-block";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import DashboardDropdown from "@/components/dashboard-dropdown";
import { useTranslations } from "next-intl";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";
import { UploadIcon } from "lucide-react";

import Cookies from "js-cookie";
import { useEffect } from "react";
import { getCookiesDecrypt } from "@/lib/utils";
import DashboardVisualization from "@/components/visualization/dashboard-viz";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import TaskTable from "../contributor/task/components/task-table";
import PressConferenceTable from "../contributor/schedule/press-release/components/pressrilis-table";
import BlogTable from "../contributor/blog/components/blog-table";
import ContentTable from "./routine-task/components/content-table";
import RecentActivity from "./routine-task/components/recent-activity";
import { Link } from "@/components/navigation";
import ReportTable from "../contributor/report/components/report-table";

const DashboardPage = () => {
  const t = useTranslations("AnalyticsDashboard");
  const roleId = getCookiesDecrypt("urie");
  const levelNumber = Number(getCookiesDecrypt("ulne"));

  return Number(roleId) == 2 || Number(roleId) == 11 || Number(roleId) == 12 ? (
    <div>
      <SiteBreadcrumb />
      <DashboardVisualization />
    </div>
  ) : (
    <div>
      <div className="my-3">
        <Tabs defaultValue="routine-task" className="w-full">
          <Card className="py-3 px-2 my-4">
            <TabsList className="flex-wrap">
              <TabsTrigger
                value="routine-task"
                className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
              >
                {t("task-routine", { defaultValue: "Task Routine" })}
              </TabsTrigger>
              <TabsTrigger
                value="task"
                className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
              >
                {t("task", { defaultValue: "Task" })}
              </TabsTrigger>
              <TabsTrigger
                value="schedule"
                className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
              >
                {t("schedule", { defaultValue: "Schedule" })}
              </TabsTrigger>
              {levelNumber !== 3 && (
                <>
                  <TabsTrigger
                    value="indeks"
                    className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
                  >
                    {t("indeks", { defaultValue: "Indeks" })}
                  </TabsTrigger>

                  <TabsTrigger
                    value="report"
                    className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
                  >
                    {t("report", { defaultValue: "Report" })}
                  </TabsTrigger>
                </>
              )}
            </TabsList>
          </Card>
          <TabsContent value="routine-task">
            <div className="grid grid-cols-12 items-center gap-5 mb-5">
              <div className="2xl:col-span-12 lg:col-span-12 col-span-12">
                <Card>
                  <CardContent className="p-4">
                    <div className="grid md:grid-cols-3   gap-4">
                      <StatisticsBlock
                        title={t("Hasil_unggah_disetujui_hari_ini", {
                          defaultValue: "Hasil Unggah Disetujui Hari Ini",
                        })}
                        total="3,564"
                        className="bg-info/10 border-none shadow-none"
                      />
                      <StatisticsBlock
                        title={t("Hasil_unggah_direvisi_hari_ini", {
                          defaultValue: "Hasil Unggah Direvisi Hari Ini",
                        })}
                        total="564"
                        className="bg-warning/10 border-none shadow-none"
                        chartColor="#FB8F65"
                      />
                      <StatisticsBlock
                        title={t("Hasil_unggah_ditolak_hari_ini", {
                          defaultValue: "Hasil Unggah Ditolak Hari Ini",
                        })}
                        total="+5.0%"
                        className="bg-primary/10 border-none shadow-none"
                        chartColor="#2563eb"
                      />
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
            <div className="grid grid-cols-12 gap-5">
              <div className="lg:col-span-4 col-span-12">
                <Card>
                  <CardHeader className="flex flex-row items-center">
                    <CardTitle className="flex-1 text-lg">
                      {t("Total-Content-Production", {
                        defaultValue: "Total  Content  Production",
                      })}
                    </CardTitle>
                    <DashboardDropdown />
                  </CardHeader>
                  <CardContent>
                    <RecentActivity />
                  </CardContent>
                </Card>
              </div>
              <div className="lg:col-span-8 col-span-12">
                <Card>
                  <CardHeader className="flex flex-row items-center">
                    <CardTitle className="flex-1">
                      {t("tabel", { defaultValue: "Tabel" })}
                    </CardTitle>
                    {/* <DashboardDropdown /> */}
                  </CardHeader>
                  <CardContent className="p-0">
                    <ContentTable />
                  </CardContent>
                </Card>
              </div>
            </div>
          </TabsContent>
          <TabsContent value="task">
            <div className="grid grid-cols-12 gap-5">
              <div className="lg:col-span-12 col-span-12">
                <Card>
                  <Card className="py-4 px-3">
                    <div className="flex flex-row justify-between items-center">
                      <div className="flex-1 text-xl font-medium text-default-900">
                        Tabel Penugasan
                      </div>
                      {Number(levelNumber) !== 3 && (
                        <div className="flex-none">
                          <Link href="/contributor/task/create">
                            <Button color="primary" className="text-white">
                              <UploadIcon size={18} className="mr-2" />
                              {t("create-task", {
                                defaultValue: "Create Task",
                              })}
                            </Button>
                          </Link>
                        </div>
                      )}
                      {/* <div>
                        <Link href={"/contributor/task/create"}>
                          <Button color="primary" className="text-white">
                            <UploadIcon />
                            Buat Penugasan
                          </Button>
                        </Link>
                      </div> */}
                    </div>
                  </Card>
                  <CardContent className="p-0 mt-3">
                    <TaskTable />
                  </CardContent>
                </Card>
              </div>
            </div>
          </TabsContent>
          <TabsContent value="schedule">
            <div className="grid grid-cols-12 gap-5">
              <div className="lg:col-span-12 col-span-12">
                <Card>
                  <CardContent className="p-0 ">
                    <PressConferenceTable />
                  </CardContent>
                </Card>
              </div>
            </div>
          </TabsContent>
          <TabsContent value="indeks">
            <div className="grid grid-cols-12 gap-5">
              <div className="lg:col-span-12 col-span-12">
                <Card>
                  {/* <Card className="py-4 px-3">
                    <div className="flex flex-col md:flex-row md:justify-between md:items-center lg:flex-row lg:justify-between lg:items-center">
                      <div className="flex-1 text-xl font-medium text-default-900 mb-2">
                        Table Indeks
                      </div>
                      <div>
                        <Link href={"/contributor/blog/create"}>
                          <Button color="primary" className="text-white">
                            <UploadIcon />
                            Tambah Indeks
                          </Button>
                        </Link>
                      </div>
                    </div>
                  </Card> */}
                  <CardContent className="p-0 mt-3">
                    <BlogTable />
                  </CardContent>
                </Card>
              </div>
            </div>
          </TabsContent>
          <TabsContent value="report">
            <div className="grid grid-cols-12 gap-5">
              <div className="lg:col-span-12 col-span-12">
                <Card>
                  <CardContent className="p-0 mt-3">
                    <ReportTable />
                  </CardContent>
                </Card>
              </div>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
};

export default DashboardPage;