"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 RecentActivity from "./routine-task/recent-activity";
import CompanyTable from "./routine-task/routine-task-table";
import TaskTable from "../task/components/task-table";
import PressConferenceTable from "../schedule/press-release/components/pressrilis-table";
import BlogTable from "../blog/components/blog-table";
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";

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

  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"
              >
                Tugas Rutin
              </TabsTrigger>
              <TabsTrigger
                value="task"
                className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
              >
                Penugasan
              </TabsTrigger>
              <TabsTrigger
                value="schedule"
                className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
              >
                Jadwal
              </TabsTrigger>
              <TabsTrigger
                value="indeks"
                className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
              >
                Indeks
              </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={"Hasil unggah disetujui hari ini"}
                        total="3,564"
                        className="bg-info/10 border-none shadow-none"
                      />
                      <StatisticsBlock
                        title={"Hasil unggah direvisi hari ini"}
                        total="564"
                        className="bg-warning/10 border-none shadow-none"
                        chartColor="#FB8F65"
                      />
                      <StatisticsBlock
                        title={"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">
                      {"Total Produksi Konten"}
                    </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">{"Table"}</CardTitle>
                    <DashboardDropdown />
                  </CardHeader>
                  <CardContent className="p-0">
                    <CompanyTable />
                  </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">
                        Table Penugasan
                      </div>
                      <div>
                        <Button color="primary" className="text-white">
                          <UploadIcon />
                          Buat Penugasan
                        </Button>
                      </div>
                    </div>
                  </Card>
                  <CardContent className="p-0">
                    <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-row justify-between items-center">
                      <div className="flex-1 text-xl font-medium text-default-900">
                        Table Indeks
                      </div>
                      <div>
                        <Button color="primary" className="text-white">
                          <UploadIcon />
                          Tambah Indeks
                        </Button>
                      </div>
                    </div>
                  </Card>
                  <CardContent className="p-0">
                    <BlogTable />
                  </CardContent>
                </Card>
              </div>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
};

export default DashboardPage;