/** One-field start: nickname (pre-filled suggestion) + start button; Discord as secondary (docs/05 §1). */
import { useState } from 'react';
import { nicknameError, normalizeNickname, suggestNickname } from '@bg/shared/lite';
import { api, discordLoginUrl } from '../net/api';
import { useSession } from '../store/session';

export function NicknameForm({
  next,
  submitLabel = '이 이름으로 시작하기',
  onDone,
  showDiscord = true,
}: {
  next: string;
  submitLabel?: string;
  onDone?: () => void;
  /** The login page shows its own big Discord button, so it hides this one. */
  showDiscord?: boolean;
}) {
  const [nick, setNick] = useState(() => suggestNickname());
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const discord = useSession((s) => s.discordEnabled);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    const n = normalizeNickname(nick);
    const err = nicknameError(n);
    if (err) return setError(err);
    setBusy(true);
    try {
      const r = await api.guest(n);
      useSession.getState().setMe(r.me);
      await useSession.getState().refresh();
      onDone?.();
    } catch (ex) {
      setError((ex as Error).message);
    } finally {
      setBusy(false);
    }
  };

  return (
    <form className="stack" onSubmit={submit}>
      <label className="field">
        내 이름(닉네임)
        <input
          className="input"
          value={nick}
          onChange={(e) => {
            setNick(e.target.value);
            setError(null);
          }}
          onFocus={(e) => e.target.select()}
          maxLength={20}
          autoComplete="nickname"
          enterKeyHint="go"
        />
      </label>
      {error && <p className="field-error">{error}</p>}
      <button className="btn btn-primary btn-block" disabled={busy}>
        {busy ? '잠시만요…' : submitLabel}
      </button>
      {discord && showDiscord && (
        <a className="btn btn-secondary btn-block" href={discordLoginUrl(next)}>
          디스코드로 로그인
        </a>
      )}
      <GuestWarning />
      <p className="muted small">이름은 나중에 언제든 바꿀 수 있어요.</p>
    </form>
  );
}

/** Guests are deleted with their records a day after they leave the site (docs/05 §4). */
export function GuestWarning() {
  const discord = useSession((s) => s.discordEnabled);
  return (
    <p className="guest-warning small" role="note">
      ⚠️ 게스트는 기록이 오래 저장되지 않아요. 사이트에 들어오지 않은 채 하루가 지나면 계정과 기록이 모두 지워져요.
      {discord && ' 기록을 남기려면 디스코드로 로그인해 주세요.'}
    </p>
  );
}