import { useState } from "react";
import { pairAndRegister, UiState } from "../lib/ipc";
import appIcon from "../assets/app-icon.png";

interface Props {
  onState: (s: UiState) => void;
}

/**
 * Pairing-Flow analog zur Mac-App: 6-stelliger Code aus der ReBreak-App
 * (Geräte → "Computer koppeln"), kein Passwort, kein Account-Formular.
 */
export default function LoginView({ onState }: Props) {
  const [code, setCode] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const submit = async () => {
    if (code.length !== 6 || busy) return;
    setBusy(true);
    setError(null);
    try {
      onState(await pairAndRegister(code));
    } catch (e) {
      setError(String(e));
      setCode("");
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="login">
      <img src={appIcon} alt="" />
      <h1>ReBreak Magic</h1>
      <p className="lead">
        Schütze diesen Windows-PC vor Glücksspielseiten. Öffne die
        ReBreak-App auf deinem Handy und erstelle unter{" "}
        <strong>Geräte → Computer koppeln</strong> einen Kopplungs-Code.
      </p>

      <input
        className="code-input"
        type="text"
        inputMode="numeric"
        autoFocus
        maxLength={6}
        placeholder="······"
        value={code}
        disabled={busy}
        onChange={(e) => setCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
        onKeyDown={(e) => e.key === "Enter" && submit()}
      />

      {error && <p className="error">{error}</p>}

      <button
        className="btn-primary"
        disabled={code.length !== 6 || busy}
        onClick={submit}
      >
        {busy ? "Wird gekoppelt …" : "Koppeln"}
      </button>

      <p className="hint">
        Der Code ist 10 Minuten gültig und kann nur einmal verwendet werden.
      </p>
    </div>
  );
}
