import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

import { api } from "../api/client";
import { AppShell, Notice, TopBar } from "../components/AppShell";
import { Icon } from "../components/Icon";
import { ru } from "../content/ru";
import { useSession } from "../session/SessionContext";

// Anonymous means no identifying data, with the same screening and care path.
export function AnonymousSignIn() {
  const t = ru.anonymous;
  const navigate = useNavigate();
  const { signIn } = useSession();
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState(false);
  const [screening, setScreening] = useState<boolean | null>(null);

  useEffect(() => {
    let alive = true;
    api.patientCapabilities()
      .then((v) => { if (alive) setScreening(v.primary_screening); })
      .catch(() => { if (alive) setError(true); });
    return () => { alive = false; };
  }, []);

  const start = async () => {
    setBusy(true);
    setError(false);
    try {
      // No self-selected diagnosis: the common intake determines the follow-up modules.
      signIn(await api.signInAnonymous());
      navigate("/flow", { replace: true });
    } catch {
      setError(true);
      setBusy(false);
    }
  };

  return (
    <AppShell signedIn={false} focus>
      <div className="focus">
        <TopBar onBack={() => navigate("/")} />
        <div className="stack signin">
          <span className="tile-icon tile-icon--teal"><Icon name="lock" size={26} /></span>
          <h1 className="h1">{t.title}</h1>
          <p className="lead">{t.lead}</p>
          <Notice>{t.note}</Notice>
          {screening === false && <Notice>{t.unavailable}</Notice>}
          {error && <Notice tone="danger">{ru.common.networkError}</Notice>}
          <button type="button" className="btn btn--primary" disabled={busy} onClick={() => void start()}>
            {busy ? t.submitting : screening ? t.start : t.continue}
            <Icon name="chevronRight" size={20} />
          </button>
        </div>
      </div>
    </AppShell>
  );
}