import { escapeHtml } from "../lib/html.ts";
import { t } from "../lib/i18n/index.ts";
import { type LayoutOptions, layout } from "./layout.ts";
import {
	errorBanner,
	inputClass,
	primaryButtonClass,
	THEME,
} from "./theme/index.ts";

interface LoginOptions extends LayoutOptions {
	error?: string;
	handleValue?: string;
}

export function loginPage(options?: LoginOptions): string {
	const locale = options?.locale ?? "en";
	const msg = t(locale);

	const errorHtml = errorBanner(options?.error);
	const handleValue = options?.handleValue ?? "";

	return layout(
		msg.login.heading,
		`
    <div class="max-w-sm mx-auto mt-12">
      <h1 class="text-2xl font-bold ${THEME.text} mb-2">${msg.login.heading}</h1>
      <p class="text-sm ${THEME.textMuted} mb-6">${msg.login.description}</p>
      ${errorHtml}
      <form method="POST" action="/login" class="space-y-4">
        <div>
          <label for="handle" class="block text-sm font-medium ${THEME.textSecondary} mb-1">${msg.login.handleLabel}</label>
          <input
            id="handle"
            name="handle"
            type="text"
            value="${escapeHtml(handleValue)}"
            required
            class="${inputClass}"
            placeholder="${msg.login.handlePlaceholder}"
            autofocus
          >
        </div>
        <button type="submit" class="${primaryButtonClass} w-full">${msg.nav.login}</button>
      </form>
    </div>
  `,
		{ ...options, noindex: true },
	);
}