"use client";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Link } from "@/i18n/routing";
import { Icon } from "@iconify/react/dist/iconify.js";
import QuestionsTable from "./components/questions-table";
import { useState } from "react";

interface statisticType {
  incomingTotal: number;
  createdTicketTotal: number;
  todayIncomingTotal: number;
}

export default function Questions() {
  const [statisticData, setStatisticData] = useState<statisticType>({
    incomingTotal: 0,
    createdTicketTotal: 0,
    todayIncomingTotal: 0,
  });
  return (
    <div>
      <SiteBreadcrumb />
      <div className="flex flex-col gap-4">
        <div className="flex flex-row gap-4">
          <div className="flex flex-col gap-4 w-[30%]">
            <div className="flex flex-row gap-10 bg-white rounded-sm px-10 py-6 items-center">
              <Icon icon="ion:ticket" width={56} />
              <div className="flex flex-col gap-3">
                <p className="text-3xl ">{statisticData.todayIncomingTotal}</p>
                <p className="text-sm">Pertanyaan hari ini</p>
              </div>
            </div>
            <div className="flex flex-row gap-10 bg-white rounded-sm px-10 py-6 items-center">
              <Icon icon="ion:ticket" width={56} />
              <div className="flex flex-col gap-3">
                <p className="text-3xl ">{statisticData.incomingTotal}</p>
                <p className="text-sm">Pertanyaan masuk</p>
              </div>
            </div>
            <div className="flex flex-row gap-10 bg-white rounded-sm px-10 py-6 items-center">
              <Icon icon="ion:ticket" width={56} />
              <div className="flex flex-col gap-3">
                <p className="text-3xl ">{statisticData.createdTicketTotal}</p>
                <p className="text-sm">Tiket dibuat</p>
              </div>
            </div>
          </div>
          <div className="w-[70%] bg-white py-6 px-10 rounded-sm flex flex-col gap-5 text-sm">
            <p>Pertanyaan masuk berdasarkan sumber:</p>
            <div className="grid grid-cols-2 gap-8 text-[#2563eb]">
              <Link
                href="/supervisor/communications/questions/emergency"
                className="flex items-center gap-3"
              >
                <Icon
                  icon="material-symbols:emergency-home-rounded"
                  width={24}
                  color="#2563eb"
                />
                Emergency Issue
              </Link>
              <Link
                href="/supervisor/communications/questions/email"
                className="flex items-center gap-3"
              >
                <Icon icon="ic:baseline-email" width={22} color="#2563eb" />
                Email
              </Link>
              {/* <Link
                href="/supervisor/communications/questions/facebook"
                className="flex items-center gap-3"
              >
                <Icon icon="dashicons:facebook" width={24} color="#2563eb" />
                Facebook
              </Link>
              <Link
                href="/supervisor/communications/questions/x"
                className="flex items-center gap-3"
              >
                <Icon icon="proicons:x-twitter" width={24} color="#2563eb" />X
              </Link>
              <Link
                href="/supervisor/communications/questions/instagram"
                className="flex items-center gap-3"
              >
                <Icon
                  icon="ant-design:instagram-filled"
                  width={24}
                  color="#2563eb"
                />
                Instagram
              </Link> */}
              <Link
                href="/supervisor/communications/questions/whatsapp"
                className="flex items-center gap-3"
              >
                <Icon icon="ri:whatsapp-fill" width={24} color="#2563eb" />
                Whatsapp
              </Link>
              {/* <Link
                href="/supervisor/communications/questions/youtube"
                className="flex items-center gap-3"
              >
                <Icon icon="mdi:youtube" width={24} color="#2563eb" />
                Youtube
              </Link> */}
              <Link
                href="/supervisor/communications/questions/inbox"
                className="flex items-center gap-3"
              >
                <Icon
                  icon="material-symbols:inbox"
                  width={24}
                  color="#2563eb"
                />
                Pesan Masuk
              </Link>
              <Link
                href="/supervisor/communications/questions/comment"
                className="flex items-center gap-3"
              >
                <Icon
                  icon="material-symbols-light:comment-rounded"
                  width={24}
                  color="#2563eb"
                />
                Komentar Konten
              </Link>
            </div>
          </div>
        </div>
        <QuestionsTable statisticData={(data) => setStatisticData(data)} />
      </div>
    </div>
  );
}