/**
 * Jail detail page.
 *
 * Fetches and displays the full configuration and state of a single jail
 * identified by the `:name` route parameter.
 */

import { Button, MessageBar, MessageBarBody, Spinner, Text } from "@fluentui/react-components";
import { ArrowLeftRegular } from "@fluentui/react-icons";
import { Link, useParams } from "react-router-dom";
import { useJailDetail } from "../hooks/useJailDetail";
import { useJailBannedIps } from "../hooks/useJailBannedIps";
import { BannedIpsSection } from "../components/jail/BannedIpsSection";
import { JailInfoSection } from "./jail/JailInfoSection";
import { PatternsSection } from "./jail/PatternsSection";
import { BantimeEscalationSection } from "./jail/BantimeEscalationSection";
import { IgnoreListSection } from "./jail/IgnoreListSection";
import { useJailDetailPageStyles } from "./jail/jailDetailPageStyles";

export function JailDetailPage(): React.JSX.Element {
  const styles = useJailDetailPageStyles();
  const { name = "" } = useParams<{ name: string }>();
  const { jail, ignoreList, ignoreSelf, loading, error, refresh, addIp, removeIp, toggleIgnoreSelf, start, stop, reload, setIdle } =
    useJailDetail(name);
  const {
    items,
    total,
    page,
    pageSize,
    search,
    loading: bannedLoading,
    error: bannedError,
    opError,
    refresh: refreshBanned,
    setPage,
    setPageSize,
    setSearch,
    unban,
  } = useJailBannedIps(name);

  if (loading && !jail) {
    return (
      <div className={styles.centred}>
        <Spinner label={`Loading jail ${name}…`} />
      </div>
    );
  }

  if (error) {
    return (
      <div className={styles.root}>
        <Link to="/jails" style={{ textDecoration: "none" }}>
          <Button appearance="subtle" icon={<ArrowLeftRegular />}>
            Back to Jails
          </Button>
        </Link>
        <MessageBar intent="error">
          <MessageBarBody>Failed to load jail {name}: {error}</MessageBarBody>
        </MessageBar>
      </div>
    );
  }

  if (!jail) return <></>;

  return (
    <div className={styles.root}>
      <div className={styles.breadcrumb}>
        <Link to="/jails" style={{ textDecoration: "none" }}>
          <Button appearance="subtle" size="small" icon={<ArrowLeftRegular />}>
            Jails
          </Button>
        </Link>
        <Text size={200} style={{ color: "var(--colorNeutralForeground3)" }}>
          /
        </Text>
        <Text size={200} className={styles.mono}>
          {name}
        </Text>
      </div>

      <JailInfoSection jail={jail} onRefresh={refresh} onStart={start} onStop={stop} onReload={reload} onSetIdle={setIdle} />
      <BannedIpsSection
        items={items}
        total={total}
        page={page}
        pageSize={pageSize}
        search={search}
        loading={bannedLoading}
        error={bannedError}
        opError={opError}
        onSearch={setSearch}
        onPageChange={setPage}
        onPageSizeChange={setPageSize}
        onRefresh={refreshBanned}
        onUnban={unban}
      />
      <PatternsSection jail={jail} />
      <BantimeEscalationSection jail={jail} />
      <IgnoreListSection
        jailName={name}
        ignoreList={ignoreList}
        ignoreSelf={ignoreSelf}
        onAdd={addIp}
        onRemove={removeIp}
        onToggleIgnoreSelf={toggleIgnoreSelf}
      />
    </div>
  );
}