import { Text } from "@fluentui/react-components";
import { SectionErrorBoundary } from "../components/SectionErrorBoundary";
import { useJailsPageStyles } from "./jails/jailsPageStyles";
import { JailOverviewSection } from "./jails/JailOverviewSection";
import { BanUnbanForm } from "./jails/BanUnbanForm";
import { IpLookupSection } from "./jails/IpLookupSection";
import { JailProvider, useJailContext } from "./jails/JailContext";
import { useActiveBans } from "../hooks/useActiveBans";

function JailsPageContent(): React.JSX.Element {
  const styles = useJailsPageStyles();
  const { jails } = useJailContext();
  const { banIp, unbanIp } = useActiveBans();

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

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

      <SectionErrorBoundary sectionName="Jail Overview">
        <JailOverviewSection />
      </SectionErrorBoundary>

      <SectionErrorBoundary sectionName="Ban/Unban Form">
        <BanUnbanForm jailNames={jailNames} onBan={banIp} onUnban={unbanIp} />
      </SectionErrorBoundary>

      <SectionErrorBoundary sectionName="IP Lookup">
        <IpLookupSection />
      </SectionErrorBoundary>
    </div>
  );
}

export function JailsPage(): React.JSX.Element {
  return (
    <JailProvider>
      <JailsPageContent />
    </JailProvider>
  );
}
