'use client';

import Image from 'next/image';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import { useState } from 'react';

import { buildFrontendHandoffUrl, login, withNext } from '@/lib/auth-client';

export default function LoginPage() {
  const searchParams = useSearchParams();
  const nextPath = searchParams?.get('next') || '/';

  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setLoading(true);
    setError('');

    try {
      const response = await login(username, password);
      window.location.replace(buildFrontendHandoffUrl(response, nextPath));
    } catch (err) {
      setError(err instanceof Error ? err.message : '登录失败，请稍后重试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <main className="portal-page">
      <section className="portal-shell">
        <div className="portal-brand">
          <div className="portal-logo-lockup">
            <Image
              src="/boardware-logo.svg"
              alt="Boardware logo"
              width={128}
              height={128}
              className="portal-logo-image"
            />
          </div>
          <div className="portal-kicker">Auth Portal</div>
          <h1 className="portal-title">Boardware Agent Sandbox</h1>
          <p className="portal-copy">
            这个入口只负责鉴权。成功后会把你直接送到为你分配的专属实例 URL，后续前后端请求都留在那套容器里。
          </p>
          <div className="portal-notes">
            <div className="portal-note">
              <strong>容器边界</strong>
              登录注册先经过独立 auth portal，再跳到专属实例。一用户一套前后端容器不变。
            </div>
            <div className="portal-note">
              <strong>目标页面</strong>
              当前登录完成后将回到：<code>{nextPath}</code>
            </div>
          </div>
        </div>

        <div className="portal-panel">
          <div className="auth-card">
            <h1>登录</h1>
            <p>输入已有账号，认证完成后直接进入目标容器前端。</p>

            <form className="auth-form" onSubmit={handleSubmit}>
              <div className="field">
                <label htmlFor="username">用户名</label>
                <input
                  id="username"
                  value={username}
                  onChange={(event) => setUsername(event.target.value)}
                  autoComplete="username"
                  placeholder="例如：bwgdi"
                  required
                />
              </div>

              <div className="field">
                <label htmlFor="password">密码</label>
                <input
                  id="password"
                  type="password"
                  value={password}
                  onChange={(event) => setPassword(event.target.value)}
                  autoComplete="current-password"
                  placeholder="输入密码"
                  required
                />
              </div>

              <div className="error-text">{error}</div>

              <button className="primary-button" type="submit" disabled={loading}>
                {loading ? '登录中...' : '登录并进入容器'}
              </button>
            </form>

            <div className="auth-footer">
              还没有账号？ <Link href={withNext('/register', nextPath)}>去注册</Link>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}