import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { LucideBoxSelect } from "lucide-react";

export default function ExecutiveDashboard() {
  // const downloadReport = async () => {
  //   // const formattedDate = `${reportDate.year}-${String(
  //   //   reportDate.month
  //   // ).padStart(2, "0")}-${String(reportDate.day).padStart(2, "0")}`;
  //   // const resLogin = await tableauSignin();
  //   // const token = resLogin?.data.data?.credentials?.token;
  //   // const resCover = await tableauViewImage(
  //   //   token,
  //   //   "1df3df4a-0457-4483-a8e1-160f70e7834f",
  //   //   formattedDate
  //   // );
  //   // const resTotalLink = await tableauViewImage(
  //   //   token,
  //   //   "8f902032-a6eb-4083-817a-57350f509b75",
  //   //   formattedDate
  //   // );
  //   // const resCount = await tableauViewImage(
  //   //   token,
  //   //   "11b2fe3c-f853-4156-800e-43342bf8e5ce",
  //   //   formattedDate
  //   // );
  //   // const resCoverCommentTwitter = await tableauViewImage(
  //   //   token,
  //   //   "28183e0b-80d0-428d-8684-2cbb572e97b3",
  //   //   formattedDate,
  //   //   2
  //   // );
  //   // const resCoverCommentTiktok = await tableauViewImage(
  //   //   token,
  //   //   "28183e0b-80d0-428d-8684-2cbb572e97b3",
  //   //   formattedDate,
  //   //   3
  //   // );
  //   // const resCoverCommentFacebook = await tableauViewImage(
  //   //   token,
  //   //   "28183e0b-80d0-428d-8684-2cbb572e97b3",
  //   //   formattedDate,
  //   //   4
  //   // );
  //   // const resCoverCommentInstagram = await tableauViewImage(
  //   //   token,
  //   //   "28183e0b-80d0-428d-8684-2cbb572e97b3",
  //   //   formattedDate,
  //   //   5
  //   // );
  //   // const resCoverCommentYoutube = await tableauViewImage(
  //   //   token,
  //   //   "28183e0b-80d0-428d-8684-2cbb572e97b3",
  //   //   formattedDate,
  //   //   6
  //   // );
  //   // const resCommentTwitter = await tableauViewImage(
  //   //   token,
  //   //   "9a6d05ed-dea7-4a93-b709-82d0dab4790d",
  //   //   formattedDate,
  //   //   2
  //   // );
  //   // const resCommentTiktok = await tableauViewImage(
  //   //   token,
  //   //   "9a6d05ed-dea7-4a93-b709-82d0dab4790d",
  //   //   formattedDate,
  //   //   3
  //   // );
  //   // const resCommentFacebook = await tableauViewImage(
  //   //   token,
  //   //   "9a6d05ed-dea7-4a93-b709-82d0dab4790d",
  //   //   formattedDate,
  //   //   4
  //   // );
  //   // const resCommentInstagram = await tableauViewImage(
  //   //   token,
  //   //   "9a6d05ed-dea7-4a93-b709-82d0dab4790d",
  //   //   formattedDate,
  //   //   5
  //   // );
  //   // const resCommentYoutube = await tableauViewImage(
  //   //   token,
  //   //   "9a6d05ed-dea7-4a93-b709-82d0dab4790d",
  //   //   formattedDate,
  //   //   6
  //   // );
  //   // const blobCover = new Blob([resCover.data], { type: "image/png" });
  //   // const blobTotalLink = new Blob([resTotalLink.data], { type: "image/png" });
  //   // const blobCount = new Blob([resCount.data], { type: "image/png" });
  //   // const blobCoverCommentTwitter = new Blob([resCoverCommentTwitter.data], {
  //   //   type: "image/png",
  //   // });
  //   // const blobCoverCommentTiktok = new Blob([resCoverCommentTiktok.data], {
  //   //   type: "image/png",
  //   // });
  //   // const blobCoverCommentFacebook = new Blob([resCoverCommentFacebook.data], {
  //   //   type: "image/png",
  //   // });
  //   // const blobCoverCommentInstagram = new Blob(
  //   //   [resCoverCommentInstagram.data],
  //   //   { type: "image/png" }
  //   // );
  //   // const blobCoverCommentYoutube = new Blob([resCoverCommentYoutube.data], {
  //   //   type: "image/png",
  //   // });
  //   // const blobCommentTwitter = new Blob([resCommentTwitter.data], {
  //   //   type: "image/png",
  //   // });
  //   // const blobCommentTiktok = new Blob([resCommentTiktok.data], {
  //   //   type: "image/png",
  //   // });
  //   // const blobCommentFacebook = new Blob([resCommentFacebook.data], {
  //   //   type: "image/png",
  //   // });
  //   // const blobCommentInstagram = new Blob([resCommentInstagram.data], {
  //   //   type: "image/png",
  //   // });
  //   // const blobCommentYoutube = new Blob([resCommentYoutube.data], {
  //   //   type: "image/png",
  //   // });
  //   // await pdfGenerator([
  //   //   blobCover,
  //   //   blobTotalLink,
  //   //   blobCount,
  //   //   blobCoverCommentTwitter,
  //   //   blobCommentTwitter,
  //   //   blobCoverCommentTiktok,
  //   //   blobCommentTiktok,
  //   //   blobCoverCommentFacebook,
  //   //   blobCommentFacebook,
  //   //   blobCoverCommentInstagram,
  //   //   blobCommentInstagram,
  //   //   blobCoverCommentYoutube,
  //   //   blobCommentYoutube,
  //   // ]);
  // };

  return (
    <div>
      <SiteBreadcrumb />
      <Dialog>
        <DialogTrigger asChild>
          <Button variant="outline">Download Report</Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Download Report</DialogTitle>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="w-full">
              <Label>Date</Label>
              <Input
                type="date"
                // value={dateFilter}
                // onChange={(e) => setDateFilter(e.target.value)}
                className="w-full"
              />
            </div>
          </div>
          <DialogFooter>
            <Button
              type="submit"
              // onClick={downloadReport}
            >
              Download
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
      <div className="mt-3 flex flex-row gap-3 justify-center">
        <Card className="rounded-sm w-4/12 h-[500px] p-3">
          <div className="flex flex-row justify-between">
            <p className="text-base font-semibold">
              Upload konten hari ini Polda
            </p>
            <LucideBoxSelect />
          </div>
        </Card>
        <Card className="rounded-sm w-4/12 p-3">
          <div className="flex flex-row justify-between">
            <p className="text-base font-semibold">
              Upload konten hari ini Satker
            </p>
            <LucideBoxSelect />
          </div>
        </Card>
        <Card className="rounded-sm w-4/12 p-3">
          <div className="flex flex-row justify-between">
            <p className="text-base font-semibold">
              Upload konten hari ini Polres
            </p>
            <LucideBoxSelect />
          </div>
        </Card>
      </div>
      <div className="w-full mt-3">
        <Card className="rounded-sm p-3 h-[300px]">
          <div className="flex flex-row justify-between">
            <p className="text-base font-semibold">Konten Paling Populer</p>
            <LucideBoxSelect />
          </div>
        </Card>
      </div>
      <div className="w-full mt-3">
        <Card className="rounded-sm p-3 h-[300px]">
          <div className="flex flex-row justify-between">
            <p className="text-base font-semibold">
              Heatmap Konten Dengan Interaksi
            </p>
            <p className="text-base font-semibold">
              Heatmap Kategori Dengan Interaksi
            </p>
            <LucideBoxSelect />
          </div>
        </Card>
      </div>
      <div className="w-full mt-3">
        <Card className="rounded-sm p-3 h-[300px]">
          <div className="flex flex-row justify-between">
            <p className="text-base font-semibold">Emergency Issue</p>
            <LucideBoxSelect />
          </div>
        </Card>
      </div>
    </div>
  );
}