import { useState } from "react";
import { useLocation } from "react-router-dom";

import { PageHeader } from "../components/page-header.jsx";
import { useSession } from "../providers/session-provider.jsx";

export default function AuthExamplePage() {
  const location = useLocation();
  const { sessionState, beginSignIn, signOut, recover } = useSession();
  const [pending, setPending] = useState(false);
  const [failed, setFailed] = useState(false);

  /** @param {() => Promise<unknown>} action */
  async function execute(action) {
    setPending(true);
    setFailed(false);
    try {
      await action();
    } catch {
      setFailed(true);
    } finally {
      setPending(false);
    }
  }

  return (
    <section className="ui-page">
      <PageHeader
        eyebrow="예제"
        title="인증 연동"
        description="스켈레톤은 자격 증명을 소유하지 않고 외부 인증 구현이 연결될 포트와 화면 상태만 제공합니다."
      />
      <section className="ui-panel auth-example" aria-labelledby="auth-state-title">
        <div>
          <h2 id="auth-state-title">현재 세션 상태</h2>
          <output className="session-status" data-state={sessionState}>
            {sessionState}
          </output>
        </div>
        <div className="button-row">
          <button
            className="ui-button"
            type="button"
            disabled={pending || sessionState === "integration-failed"}
            onClick={() =>
              void execute(() =>
                beginSignIn(`${location.pathname}${location.search}`),
              )
            }
          >
            로그인 시작
          </button>
          <button
            className="ui-button ui-button--secondary"
            type="button"
            disabled={pending || sessionState !== "authenticated"}
            onClick={() => void execute(signOut)}
          >
            로그아웃
          </button>
          <button
            className="ui-button ui-button--secondary"
            type="button"
            disabled={pending || sessionState !== "recovery-pending"}
            onClick={() => void execute(recover)}
          >
            세션 복구
          </button>
        </div>
        {sessionState === "integration-failed" ? (
          <p role="status">
            외부 인증 소유자가 연결되지 않았습니다. 런타임 호스트의 인증
            계약을 연결하세요.
          </p>
        ) : null}
        {failed ? <p role="alert">인증 작업을 완료하지 못했습니다.</p> : null}
      </section>
    </section>
  );
}