import React from 'react';
import { FiLogIn, FiShield } from 'react-icons/fi';
import { ENV_CONFIG } from '../config/env';
import { PageWrapper } from '../styles/shared';

const logoSrc = '/assets/logo.png';

const LoginPage = () => {
  const callbackUrl = `${window.location.origin}/auth/callback`;
  const ssoUrl = `${ENV_CONFIG.AUTH_URL}/?redirect_uri=${encodeURIComponent(callbackUrl)}&client_id=${ENV_CONFIG.CLIENT_ID}&client_name=${encodeURIComponent(ENV_CONFIG.CLIENT_NAME)}`;

  return (
    <PageWrapper className="flex items-center justify-center p-5">
      <div
        className={[
          'bg-white/95 rounded-[20px] px-10 py-12 sm:px-8',
          'shadow-[0_15px_35px_rgba(168,230,207,0.3)]',
          'w-full max-w-[440px]',
          'backdrop-blur-[15px] border border-[rgba(168,230,207,0.3)]',
          'text-center',
        ].join(' ')}
      >
        <div className="mb-6">
          <img
            src={logoSrc}
            alt="万象口袋"
            className="w-[72px] h-[72px] rounded-2xl shadow-[0_4px_16px_rgba(129,199,132,0.3)]"
          />
        </div>
        <h1 className="text-[#2e7d32] text-[28px] font-bold mb-2">欢迎使用万象口袋</h1>
        <p className="text-gray-500 text-[15px] mb-8 leading-relaxed">
          使用萌芽统一账户登录，一个账号畅享所有萌芽系列应用
        </p>
        <a
          href={ssoUrl}
          className={[
            'inline-flex items-center justify-center gap-2.5',
            'w-full px-6 py-4',
            'bg-gradient-to-br from-[#81c784] to-[#66bb6a]',
            'text-white no-underline',
            'border-none rounded-[14px] text-[17px] font-semibold cursor-pointer',
            'transition-all duration-300',
            'shadow-[0_4px_20px_rgba(129,199,132,0.3)]',
            'hover:-translate-y-0.5 hover:shadow-[0_8px_30px_rgba(129,199,132,0.4)]',
          ].join(' ')}
        >
          <FiLogIn size={20} />
          使用萌芽账户登录
        </a>
        <div className="mt-6 flex items-center justify-center gap-1.5 text-gray-400 text-sm">
          <FiShield size={14} />
          由萌芽账户认证中心提供安全认证
        </div>
      </div>
    </PageWrapper>
  );
};

export default LoginPage;