"use client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import SiteBreadcrumb from "@/components/site-breadcrumb";

import CollaborationTable from "./collaboration/components/collabroation-table";
import EscalationTable from "./escalation/components/escalation-table";
import { useState } from "react";
import { Link, useRouter } from "@/i18n/routing";
import { PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import InternalTable from "./internal/components/internal-table";
import { useTranslations } from "next-intl";

const CommunicationPage = () => {
  const [tab, setTab] = useState("Pertanyaan Internal");
  const t = useTranslations("Communication");
  return (
    <div>
      <SiteBreadcrumb />
      <div className="w-full overflow-x-auto bg-slate-100 dark:bg-black p-4 rounded-sm space-y-3 border">
        <div className="flex justify-between py-3">
          <p className="text-lg font-bold">{tab}</p>
          {tab === "Pertanyaan Internal" && (
            <Link href="/admin/shared/communication/internal/create">
              <Button color="primary" size="md">
                <PlusIcon size={18} className="mr-2" />
                {t("new-question", { defaultValue: "New Question" })}
              </Button>
            </Link>
          )}
          {tab === "Kolaborasi" && (
            <Link href="/admin/shared/communication/collaboration/create">
              <Button color="primary" size="md">
                <PlusIcon size={18} className="mr-2" />
                {t("new-collaboration", { defaultValue: "New Collaboration" })}
              </Button>
            </Link>
          )}
        </div>
        <div className="flex flex-wrap gap-1 border-2 rounded-md w-fit mb-5">
          <Button
            rounded="md"
            onClick={() => setTab("Pertanyaan Internal")}
            className={`
                ${
                  tab === "Pertanyaan Internal"
                    ? "bg-black text-white "
                    : "bg-white text-black "
                }`}
          >
            {t("internal-questions", { defaultValue: "Internal Questions" })}
          </Button>
          <Button
            rounded="md"
            onClick={() => setTab("Eskalasi")}
            className={` hover:text-white
                ${
                  tab === "Eskalasi"
                    ? "bg-black text-white "
                    : "bg-white text-black "
                }`}
          >
            {t("escalation", { defaultValue: "Escalation" })}
          </Button>
          <Button
            rounded="md"
            onClick={() => setTab("Kolaborasi")}
            className={` hover:text-white
                ${
                  tab === "Kolaborasi"
                    ? "bg-black text-white "
                    : "bg-white text-black "
                }`}
          >
            {t("collaboration", { defaultValue: "Collaboration" })}
          </Button>
        </div>
        {tab === "Pertanyaan Internal" && <InternalTable />}
        {tab === "Eskalasi" && <EscalationTable />}
        {tab === "Kolaborasi" && <CollaborationTable />}
      </div>
    </div>
  );
};

export default CommunicationPage;