import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.css";
import NPEDCard from "../components/SettingForms/NPED/NPEDCard";
import SettingForms from "../components/SettingForms/SettingForms/SettingForms";
import NPEDHotlistCard from "../components/SettingForms/NPED/NPEDHotlistCard";
import WiFiCard from "../components/SettingForms/WiFi&Modem/WiFiCard";
import ModemCard from "../components/SettingForms/WiFi&Modem/ModemCard";
import SystemCard from "../components/SettingForms/System/SystemCard";
import { Toaster } from "sonner";
import { useNPEDAuth } from "../hooks/useNPEDAuth";
import SoundSettingsCard from "../components/SettingForms/Sound/SoundSettingsCard";
import SoundUploadCard from "../components/SettingForms/Sound/SoundUploadCard";
import NPEDCategoryPopup from "../components/PopupSettings/NPEDCategoryPopup";

const SystemSettings = () => {
  useNPEDAuth();

  return (
    <div className="m-4">
      <Tabs selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none">
        <TabList>
          <Tab>System</Tab>
          <Tab>Output</Tab>
          <Tab>Integrations</Tab>
          <Tab>WiFi and Modem</Tab>
          <Tab>Sound</Tab>
        </TabList>
        <TabPanel>
          <div className="flex flex-col space-y-3">
            <SystemCard />
          </div>
        </TabPanel>
        <TabPanel>
          <div className="flex flex-col space-y-3">
            <SettingForms />
          </div>
        </TabPanel>
        <TabPanel>
          <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full">
            <NPEDCard />
            <NPEDHotlistCard />
            <NPEDCategoryPopup />
          </div>
        </TabPanel>
        <TabPanel>
          <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-4 px-2 sm:px-4 lg:px-0 w-full">
            <WiFiCard />
            <ModemCard />
          </div>
        </TabPanel>
        <TabPanel>
          <div className="mx-auto grid grid-rows-2 sm:grid-cols-1 lg:grid-cols-8 gap-4 px-2 sm:px-4 lg:px-0 w-full">
            <SoundSettingsCard />
            <SoundUploadCard />
          </div>
        </TabPanel>
      </Tabs>
      <Toaster />
    </div>
  );
};

export default SystemSettings;