import { type FormEvent, useState } from "react";
import { useLocation } from "wouter";
import BorderedContainer from "../components/BorderedContainer";
import InputText from "../components/InputText";
import SubmitButton from "../components/SubmitButton";
import { APP_NAME } from "../config";
import { useAuth } from "../hooks/useAuth";
import { usePageTitle } from "../hooks/usePageTitle";

export default function LoginPage() {
	usePageTitle(`Login | ${APP_NAME}`);

	const { login } = useAuth();
	const [, navigate] = useLocation();

	const [error, setError] = useState<string | null>(null);
	const [fieldErrors, setFieldErrors] = useState<{
		username?: string;
		password?: string;
	}>({});
	const [submitting, setSubmitting] = useState(false);

	async function handleSubmit(e: FormEvent<HTMLFormElement>) {
		e.preventDefault();
		const formData = new FormData(e.currentTarget);
		const username = String(formData.get("username"));
		const password = String(formData.get("password"));

		const errors: { username?: string; password?: string } = {};
		if (username === "") errors.username = "ユーザー名を入力してください";
		if (password === "") errors.password = "パスワードを入力してください";
		if (Object.keys(errors).length > 0) {
			setFieldErrors(errors);
			setError("ユーザー名またはパスワードが誤っています");
			return;
		}

		setSubmitting(true);
		setError(null);
		setFieldErrors({});

		try {
			await login(username, password);
			navigate("/dashboard");
		} catch (err) {
			setError(err instanceof Error ? err.message : "ログインに失敗しました");
		} finally {
			setSubmitting(false);
		}
	}

	return (
		<div className="min-h-screen bg-gray-100 flex items-center justify-center">
			<div className="mx-2">
				<BorderedContainer>
					<form onSubmit={handleSubmit} className="w-full max-w-sm p-2">
						<h2 className="text-2xl mb-6 text-center">
							fortee アカウントでログイン
						</h2>
						{error && <p className="text-brand-500 text-sm mb-4">{error}</p>}
						<div className="mb-4 flex flex-col gap-1">
							<label
								htmlFor="username"
								className="block text-sm font-medium text-gray-700"
							>
								ユーザー名
							</label>
							<InputText type="text" name="username" id="username" required />
							{fieldErrors.username && (
								<p className="text-red-500 text-sm">{fieldErrors.username}</p>
							)}
						</div>
						<div className="mb-6 flex flex-col gap-1">
							<label
								htmlFor="password"
								className="block text-sm font-medium text-gray-700"
							>
								パスワード
							</label>
							<InputText
								type="password"
								name="password"
								id="password"
								autoComplete="current-password"
								required
							/>
							{fieldErrors.password && (
								<p className="text-red-500 text-sm">{fieldErrors.password}</p>
							)}
						</div>
						<div className="flex justify-center">
							<SubmitButton type="submit" disabled={submitting}>
								{submitting ? "ログイン中..." : "ログイン"}
							</SubmitButton>
						</div>
					</form>
				</BorderedContainer>
			</div>
		</div>
	);
}
