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

const logoSrc = `${process.env.PUBLIC_URL}/assets/logo.png`;

const LoginWrapper = styled(PageWrapper)`
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
`;

const LoginCard = styled.div`
  background: rgba(255,255,255,0.95);
  border-radius: 20px;
  padding: 48px 40px;
  box-shadow: 0 15px 35px rgba(168,230,207,0.3);
  width: 100%;
  max-width: 440px;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(168,230,207,0.3);
  text-align: center;
`;

const LogoWrap = styled.div`
  margin-bottom: 24px;
  img {
    width: 72px; height: 72px;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(129,199,132,0.3);
  }
`;

const Title = styled.h1`
  color: #2e7d32;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
`;

const Subtitle = styled.p`
  color: #666;
  font-size: 15px;
  margin-bottom: 32px;
  line-height: 1.6;
`;

const SSOButton = styled.a`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%);
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(129,199,132,0.3);

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(129,199,132,0.4);
  }
`;

const InfoRow = styled.div`
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #999;
  font-size: 13px;
`;

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 (
    <LoginWrapper>
      <LoginCard>
        <LogoWrap>
          <img src={logoSrc} alt="万象口袋" />
        </LogoWrap>
        <Title>欢迎使用万象口袋</Title>
        <Subtitle>
          使用萌芽统一账户登录，一个账号畅享所有萌芽系列应用
        </Subtitle>
        <SSOButton href={ssoUrl}>
          <FiLogIn size={20} />
          使用萌芽账户登录
        </SSOButton>
        <InfoRow>
          <FiShield size={14} />
          由萌芽账户认证中心提供安全认证
        </InfoRow>
      </LoginCard>
    </LoginWrapper>
  );
};

export default LoginPage;
