import { Text } from "@fluentui/react-components";
import { useJailsPageStyles } from "./jails/jailsPageStyles";
import { JailOverviewSection } from "./jails/JailOverviewSection";
import { BanUnbanForm } from "./jails/BanUnbanForm";
import { IpLookupSection } from "./jails/IpLookupSection";
import { useActiveBans } from "../hooks/useActiveBans";
import { useJails } from "../hooks/useJailList";

export function JailsPage(): React.JSX.Element {
  const styles = useJailsPageStyles();
  const { jails, total, loading, error, refresh, startJail, stopJail, setIdle, reloadJail, reloadAll } = useJails();
  const { banIp, unbanIp } = useActiveBans();

  const jailNames = jails.map((j) => j.name);

  return (
    <div className={styles.root}>
      <Text as="h1" size={700} weight="semibold">
        Jails
      </Text>

      <JailOverviewSection
        jails={jails}
        total={total}
        loading={loading}
        error={error}
        refresh={refresh}
        startJail={startJail}
        stopJail={stopJail}
        setIdle={setIdle}
        reloadJail={reloadJail}
        reloadAll={reloadAll}
      />

      <BanUnbanForm jailNames={jailNames} onBan={banIp} onUnban={unbanIp} />

      <IpLookupSection />
    </div>
  );
}
