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

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

// A2 · Вход через ЕМИАС (демо: одноразовый код от врача или синтетический пациент)
export function EmiasSignIn() {
  const t = ru.emias;
  const navigate = useNavigate();
  const { signIn } = useSession();
  const [code, setCode] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [personas, setPersonas] = useState<DemoPersona[] | null>(null);

  useEffect(() => {
    api
      .demoPersonas()
      .then(setPersonas)
      .catch(() => setPersonas([]));
  }, []);

  const finish = (auth: AuthResult) => {
    signIn(auth);
    navigate("/flow", { replace: true });
  };

  const fail = (e: unknown) => {
    setError(e instanceof ApiError && e.status === 401 ? t.codeError : ru.common.networkError);
    setBusy(false);
  };

  const submit = async (e: FormEvent) => {
    e.preventDefault();
    if (!code.trim() || busy) return;
    setBusy(true);
    setError(null);
    try {
      finish(await api.signInEmias(code.trim()));
    } catch (err) {
      fail(err);
    }
  };

  const demo = async (persona: DemoPersona) => {
    setBusy(true);
    setError(null);
    try {
      finish(await api.signInEmiasDemo(persona.token));
    } catch (err) {
      fail(err);
    }
  };

  return (
    <AppShell signedIn={false} focus>
      <div className="focus">
        <TopBar onBack={() => navigate("/")} />
        <div className="split">
        <div className="split__lead">
        <header className="head">
          <span className="tile-icon tile-icon--teal">
            <Icon name="docPlus" size={26} />
          </span>
          <h1 className="h1">{t.title}</h1>
          <p className="lead">{t.lead}</p>
        </header>
        <Notice>{t.demoNotice}</Notice>
        </div>
        <div className="split__act">
        <form className="stack stack--sm" onSubmit={submit} noValidate>
          <label htmlFor="code" className="visually-hidden">
            {t.codeLabel}
          </label>
          <input
            id="code"
            className={error ? "code-input is-error" : "code-input"}
            value={code}
            onChange={(e) => setCode(e.target.value)}
            placeholder={t.codePlaceholder}
            autoComplete="one-time-code"
            autoCapitalize="characters"
            spellCheck={false}
            maxLength={32}
            aria-invalid={error ? true : undefined}
            aria-describedby={error ? "code-error" : undefined}
          />
          {error && (
            <div id="code-error" role="alert">
              <Notice tone="danger">{error}</Notice>
            </div>
          )}
          <button type="submit" className="btn btn--primary" disabled={busy || !code.trim()}>
            {busy ? t.submitting : t.submit}
          </button>
        </form>

        <div className="divider" role="separator">
          <span>{t.or}</span>
        </div>

        <section className="stack stack--sm" aria-labelledby="demo-title">
          <h2 id="demo-title" className="h3">
            {t.demoTitle}
          </h2>
          <p className="muted">{t.demoLead}</p>
          {personas?.map((p) => (
            <button key={p.token} type="button" className="row-card" onClick={() => demo(p)} disabled={busy}>
              <span className="avatar">{p.display_name.charAt(0)}</span>
              <span className="row-card__text">
                <span className="row-card__title">{p.display_name}</span>
                <span className="row-card__sub">{t.demoDay(p.therapy_day)}</span>
              </span>
              <Icon name="chevronRight" />
            </button>
          ))}
        </section>
        </div>
        </div>
      </div>
    </AppShell>
  );
}