import React, { CSSProperties, useState } from "react";

import {
  useContext,
  PageContent,
  ModalBody,
  ModalContent,
  Button,
  CopyToClipboard,
} from "@multiplatform.one/connectkit";
import { useGpg } from "./useGpg";

// Sign-In With GPG screen: a connection-free, copy/paste flow rendered inside the SAME
// ConnectKit modal as the wallet screens. Reads everything from useGpg() (the consumer's
// GpgProvider supplies the backend-specific getNonce/onSign) — no keycloak knowledge here.
const textarea: CSSProperties = {
  width: "100%",
  boxSizing: "border-box",
  fontFamily: "var(--ck-font-family, monospace)",
  fontSize: 11,
  lineHeight: 1.4,
  padding: 8,
  borderRadius: "var(--ck-primary-button-border-radius, 12px)",
  border: "1px solid var(--ck-body-divider, #d3d3d3)",
  background: "var(--ck-body-background-secondary, #f6f7f9)",
  color: "var(--ck-body-color, inherit)",
  resize: "vertical",
};
const label: CSSProperties = {
  textAlign: "start",
  fontSize: 14,
  fontWeight: 500,
  margin: "4px 0",
};

const SignInWithGpg: React.FC = () => {
  const context = useContext();
  const { message, command, signIn, isLoading, isReady } = useGpg();
  const [pasted, setPasted] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  const onSubmit = async () => {
    setError(null);
    setBusy(true);
    try {
      await signIn(pasted);
      // A keycloak browser login navigates away; for API consumers, close the modal.
      setTimeout(() => context.setOpen(false), 1000);
    } catch (e) {
      setError(e instanceof Error ? e.message : "GPG sign-in failed");
      setBusy(false);
    }
  };

  return (
    <PageContent style={{ width: 320 }}>
      <ModalContent style={{ paddingBottom: 8, gap: 6 }}>
        <ModalBody style={label}>1. Sign the challenge in your terminal:</ModalBody>
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          <CopyToClipboard variant="button" string={command ?? ""}>
            Copy gpg command
          </CopyToClipboard>
          <CopyToClipboard variant="button" string={message ?? ""}>
            Copy message only
          </CopyToClipboard>
        </div>
        <textarea
          readOnly
          rows={4}
          value={message ?? (isLoading ? "Loading challenge…" : "")}
          style={textarea}
        />
        <ModalBody style={label}>2. Paste the full output below:</ModalBody>
        <textarea
          rows={6}
          value={pasted}
          onChange={(e) => setPasted(e.target.value)}
          placeholder="-----BEGIN PGP SIGNATURE----- … and your -----BEGIN PGP PUBLIC KEY BLOCK-----"
          style={textarea}
        />
        <Button onClick={onSubmit} disabled={!isReady || !pasted || busy} waiting={busy} arrow>
          Sign in
        </Button>
        {error && (
          <ModalBody
            style={{
              color: "var(--ck-body-color-danger, #c9190b)",
              fontSize: 13,
              textAlign: "start",
            }}
          >
            {error}
          </ModalBody>
        )}
      </ModalContent>
    </PageContent>
  );
};

export default SignInWithGpg;