import { useState } from "react";
import {
  Badge,
  Button,
  Field,
  Input,
  MessageBar,
  MessageBarBody,
  Spinner,
  Text,
} from "@fluentui/react-components";
import { SearchRegular } from "@fluentui/react-icons";
import { useCommonSectionStyles } from "../../components/commonStyles";
import { useJailsPageStyles } from "./jailsPageStyles";
import { useIpLookup } from "../../hooks/useJails";

export function IpLookupSection(): React.JSX.Element {
  const styles = useJailsPageStyles();
  const sectionStyles = useCommonSectionStyles();
  const cardStyles = useCommonSectionStyles();
  const { result, loading, error, lookup, clear } = useIpLookup();
  const [inputVal, setInputVal] = useState("");

  const handleLookup = (): void => {
    if (inputVal.trim()) {
      lookup(inputVal.trim());
    }
  };

  return (
    <div className={sectionStyles.section}>
      <div className={sectionStyles.sectionHeader}>
        <Text as="h2" size={500} weight="semibold">
          IP Lookup
        </Text>
      </div>

      <div className={styles.formRow}>
        <div className={styles.formField}>
          <Field label="IP Address">
            <Input
              placeholder="e.g. 1.2.3.4 or 2001:db8::1"
              value={inputVal}
              onChange={(_, d) => {
                setInputVal(d.value);
                clear();
              }}
              onKeyDown={(e) => {
                if (e.key === "Enter") handleLookup();
              }}
            />
          </Field>
        </div>
        <Button
          appearance="primary"
          icon={loading ? <Spinner size="tiny" /> : <SearchRegular />}
          onClick={handleLookup}
          disabled={loading || !inputVal.trim()}
        >
          Look up
        </Button>
      </div>

      {error && (
        <MessageBar intent="error">
          <MessageBarBody>{error}</MessageBarBody>
        </MessageBar>
      )}

      {result && (
        <div className={`${cardStyles.section} ${styles.lookupResult}`}>
          <div className={styles.lookupRow}>
            <Text className={styles.lookupLabel}>IP:</Text>
            <Text className={styles.mono}>{result.ip}</Text>
          </div>

          <div className={styles.lookupRow}>
            <Text className={styles.lookupLabel}>Currently banned in:</Text>
            {result.currently_banned_in.length === 0 ? (
              <Badge appearance="tint" color="success">
                not banned
              </Badge>
            ) : (
              <div style={{ display: "flex", flexWrap: "wrap", gap: "4px" }}>
                {result.currently_banned_in.map((j) => (
                  <Badge key={j} appearance="filled" color="danger">
                    {j}
                  </Badge>
                ))}
              </div>
            )}
          </div>

          {result.geo && (
            <>
              {result.geo.country_name && (
                <div className={styles.lookupRow}>
                  <Text className={styles.lookupLabel}>Country:</Text>
                  <Text>
                    {result.geo.country_name}
                    {result.geo.country_code ? ` (${result.geo.country_code})` : ""}
                  </Text>
                </div>
              )}
              {result.geo.org && (
                <div className={styles.lookupRow}>
                  <Text className={styles.lookupLabel}>Organisation:</Text>
                  <Text>{result.geo.org}</Text>
                </div>
              )}
              {result.geo.asn && (
                <div className={styles.lookupRow}>
                  <Text className={styles.lookupLabel}>ASN:</Text>
                  <Text className={styles.mono}>{result.geo.asn}</Text>
                </div>
              )}
            </>
          )}
        </div>
      )}
    </div>
  );
}
