"use client";
import PageHeader from "@/components/PageHeder";
import ClientSyncList from "@/components/client-sync/client-sync-list";
import { clientSyncFilter } from "@/components/forms/schema/sync-filter";
import { usePermission } from "@/utils/auth/permission";
import dynamic from "next/dynamic";
import { FC, useState } from "react";
const FilterForm = dynamic(() => import("@/components/common/filter-form"));
const ClientSyncForm = dynamic(
  () => import("@/components/client-sync/client-auto-sync")
);

const ClientSyncContent: FC = () => {
  const [filterValue, setFilter] = useState<string | null>(null);
  const [client_count, setClientCount] = useState<number>(0);
  const [not_match_count, setNotMatchCount] = useState<number>(0);
  const [match_count, setMatchCount] = useState<number>(0);
  const [summary, setSummary] = useState<string>("");
  return (
    <>
      <div>
        <PageHeader>
          <div className="md:flex lg:flex justify-between !p-0">
            <div>
              <h2 className="text-xl font-semibold mt-1 mb-1">
                Mikrotik Client Sync
              </h2>
            </div>
            {usePermission("client-sync.load") && (
              <ClientSyncForm
                action_api={`/api/v1/client-sync`}
                action_type="sync"
              />
            )}
          </div>
        </PageHeader>
      </div>
      <hr />
      <div>
        <div className="block md:flex lg:flex justify-between  p-3">
          <div className="flex-1">{summary}</div>
          <div className="flex-1">
            <div className="flex gap-4">
              <div>Client: {client_count},</div>
              <div className="text-green-600">Match: {match_count},</div>
              <div className="text-red-500">Not Match: {not_match_count}</div>
            </div>
          </div>
        </div>
      </div>
      <hr />
      <div className="px-3 py-5">
        {usePermission("client-sync.all-sync") && (
          <ClientSyncForm
            action_api={`/api/v1/client-all-sync`}
            action_type="resolve"
          />
        )}
      </div>
      <div className="block border-t dark:border-t dark:border-gray-600">
        <FilterForm schema={clientSyncFilter} setFilter={setFilter} grids={6} />
      </div>
      <ClientSyncList
        filterValue={filterValue}
        setClientCount={setClientCount}
        setMatchCount={setMatchCount}
        setNotMatchCount={setNotMatchCount}
        setSummary={setSummary}
      />
    </>
  );
};

export default ClientSyncContent;