/**
 * 회원가입 (Email 전용, PRD §3.5.2) — 이메일/비밀번호(8~15, 영문+숫자+특수)/이름
 * 수정사항-030-1: AuthLayout 사용 (TopAppBar 제공), 비밀번호 확인 필드 추가,
 *                     토큰 캡처 및 자동 로그인 추가 (SignIn.tsx 패턴 준수)
 */
import { useState } from 'react';
import { Link, useNavigate, useLocation } from 'react-router-dom';
import styled from 'styled-components';
import { http } from '../lib/api';
import { useAuthStore, User } from '../store/auth';

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

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 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 Hint = styled.p`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 12px;
  color: var(--md3-on-surface-variant);
  margin: -6px 0 12px;
`;

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

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.p`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 13px;
  color: var(--md3-on-surface-variant);
  text-align: center;
  margin-top: 24px;

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

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

export default function SignUp() {
  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 [confirmPassword, setConfirmPassword] = useState('');
  const [name, setName] = 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 onSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');

    if (password !== confirmPassword) {
      setError('비밀번호가 일치하지 않습니다.');
      return;
    }

    try {
      const res = await http.post<SignupResponse>('/api/auth/signup', { email, password, name });
      setAuth(res.accessToken, res.refreshToken, res.user);
      after(location.state?.from);
    } catch (err: any) {
      setError(err?.message ?? '회원가입에 실패했습니다.');
    }
  };

  return (
    <Page>
      <Card>
        <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 />
          <Hint>8~15자, 영문·숫자·특수문자를 모두 포함해야 합니다.</Hint>
          <Field
            type="password"
            placeholder="비밀번호 확인"
            value={confirmPassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
            required
          />
          <Field type="text" placeholder="이름" value={name} onChange={(e) => setName(e.target.value)} required />
          {error && <Error>{error}</Error>}
          <SubmitBtn type="submit">가입하기</SubmitBtn>
        </form>
      </Card>
      <Footer>
        이미 계정이 있으신가요? <Link to="/signin">로그인</Link>
      </Footer>
    </Page>
  );
}