'use client';

import { useState, useCallback } from 'react';
import './style/login.css';
import VantaHaloBackground from '@/components/vanta-halo-background';

export default function Login() {
  const [isLoaded, setIsLoaded] = useState(false);

  const handleBackgroundLoaded = useCallback(() => {
    setIsLoaded(true);
  }, []);

  return (
    <div className="main-container login-page relative">
      {/* logo Movie Flow */}
      <div className='login-logo'>
        <span className="logo-heart">Movie Flow</span>
      </div>

      <div className="left-panel">
        <VantaHaloBackground onLoaded={handleBackgroundLoaded} />
      </div>
      <div className={`right-panel ${isLoaded ? 'fade-in' : 'invisible'}`}>
        <div className="auth-container">
          <div className="auth-header">
            <h2>登录</h2>
            <p>输入您的凭据以访问您的账户</p>
          </div>

          <form className="">
            <div className="mb-3">
              <label className="form-label">电子邮箱地址</label>
              <input placeholder="电子邮箱地址" required className="form-control" type="email" defaultValue="" />
            </div>
            <div className="mb-3">
              <label className="form-label">密码</label>
              <input placeholder="密码" required className="form-control" type="password" defaultValue="" />
              <div className="d-flex justify-content-end mt-1">
                <a className="auth-link small" href="/forgot-password" data-discover="true">忘记密码？</a>
              </div>
            </div>
            <button type="submit" className="w-full mt-4 btn btn-primary">登录</button>
            <div className="text-center mt-3">
              <p style={{ color: "rgba(255, 255, 255, 0.6)" }}>
                还没有账户？ <a className="auth-link" href="/signup" data-discover="true">注册</a>
              </p>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}