/**
 * 로그인 (PRD §3.5.1) — Google / Apple / Email
 * 수정사항-030-1: AuthLayout 사용 (TopAppBar 제공), 하단 메뉴 없음
 */
import { useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import styled from 'styled-components';
import { http } from '../lib/api';
import { useAuthStore, User } from '../store/auth';
import { buildSocialToken } from '../lib/social';

const Page = styled.div`
  display: flex;
  flex-direction: column;
  min-height: auto;
`;

const AdBannerWrapper = styled.div`
  width: 100%;
  max-width: 480px;
  height: 60px;
  background: var(--md3-surface-container-highest);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 12px;
  color: var(--md3-on-surface-variant);
  margin-bottom: 16px;
`;

const Card = styled.div`
  background: var(--md3-surface);
  border-radius: 16px;
  padding: 24px 20px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  border: 1px solid var(--md3-outline-variant);
`;

const SocialBtn = styled.button`
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--md3-surface);
  border: 1px solid var(--md3-outline);
  border-radius: 12px;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--md3-on-surface);
  cursor: pointer;
  transition: all 0.15s;

  &:hover {
    background: var(--md3-surface-container-highest);
  }

  &:active {
    transform: scale(0.98);
  }
`;

const SocialIcon = styled.img`
  width: 20px;
  height: 20px;
  object-fit: contain;
`;

const Divider = styled.div`
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--md3-on-surface-variant);
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 13px;

  &::before, &::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--md3-outline-variant);
  }
`;

const Field = styled.input`
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--md3-outline);
  border-radius: 12px;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 15px;
  color: var(--md3-on-surface);
  background: var(--md3-surface);
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;

  &::placeholder {
    color: var(--md3-on-surface-variant);
    opacity: 0.6;
  }

  &:focus {
    outline: none;
    border-color: var(--md3-primary);
    box-shadow: 0 0 0 3px var(--md3-primary-container);
  }
`;

const Error = styled.p`
  color: var(--md3-error, #e74c3c);
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 13px;
  margin: 4px 0 12px;
  text-align: center;
`;

const SubmitBtn = styled.button`
  width: 100%;
  padding: 14px;
  background: var(--md3-primary);
  color: var(--md3-on-primary);
  border: none;
  border-radius: 12px;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.1s;

  &:hover {
    background: var(--md3-primary-container);
    color: var(--md3-primary);
  }

  &:active {
    transform: scale(0.98);
  }
`;

const Footer = styled.div`
  margin-top: 24px;
  text-align: center;
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 13px;
  color: var(--md3-on-surface-variant);

  a {
    color: var(--md3-primary);
    font-weight: 600;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
`;

const FooterLink = styled.div`
  margin-top: 12px;
`;

interface LoginResponse {
  accessToken: string;
  refreshToken: string;
  user: User;
}

export default function SignIn() {
  const nav = useNavigate();
  const location = useLocation() as { state?: { from?: string } };
  const setAuth = useAuthStore((s) => s.setAuth);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const after = (from?: string) => {
    if (!useAuthStore.getState().user?.nickname) return nav('/signup/profile');
    nav(from && from !== '/signin' ? from : '/home');
  };

  const doLogin = async (body: { email: string; password: string }) => {
    const res = await http.post<LoginResponse>('/api/auth/login', body);
    setAuth(res.accessToken, res.refreshToken, res.user);
    after(location.state?.from);
  };

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    try {
      await doLogin({ email, password });
    } catch (err: any) {
      setError(err?.message ?? '로그인에 실패했습니다.');
    }
  };

  const onGoogle = async () => {
    try {
      const res = await http.post<LoginResponse>('/api/auth/google', {
        idToken: buildSocialToken('GOOGLE', 'mock.google@gmail.com'),
      });
      setAuth(res.accessToken, res.refreshToken, res.user);
      after(location.state?.from);
    } catch (err: any) {
      setError(err?.message ?? 'Google 로그인에 실패했습니다.');
    }
  };

  const onApple = async () => {
    try {
      const res = await http.post<LoginResponse>('/api/auth/apple', {
        idToken: buildSocialToken('APPLE', 'mock.apple@icloud.com'),
      });
      setAuth(res.accessToken, res.refreshToken, res.user);
      after(location.state?.from);
    } catch (err: any) {
      setError(err?.message ?? 'Apple 로그인에 실패했습니다.');
    }
  };

  return (
    <Page>
      <AdBannerWrapper>Google Ads Banner</AdBannerWrapper>
      <Card>
        <SocialBtn onClick={onGoogle}>
          <SocialIcon src="/images/google_icon.png" alt="Google" />
          Google로 시작
        </SocialBtn>
        <SocialBtn onClick={onApple}>
          <SocialIcon src="/images/apple_icon.png" alt="Apple" />
          Apple로 시작
        </SocialBtn>

        <Divider>또는 이메일로 로그인</Divider>

        <form onSubmit={onSubmit}>
          <Field
            type="email"
            placeholder="이메일"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
          />
          <Field
            type="password"
            placeholder="비밀번호"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
          />
          {error && <Error>{error}</Error>}
          <SubmitBtn type="submit">로그인</SubmitBtn>
        </form>
      </Card>

      <Footer>
        아직 회원이 아니신가요? <Link to="/signup">회원가입</Link>
        <FooterLink>
          <Link to="/find-password">비밀번호 찾기</Link>
        </FooterLink>
      </Footer>
    </Page>
  );
}