/**
 * 비밀번호 찾기 (PRD §3.5.4)
 * 수정사항-030-1: AuthLayout 사용 (TopAppBar 제공)
 */
import { useState } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { http } from '../lib/api';

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 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 Msg = styled.p`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  margin-top: 16px;
  font-size: 14px;
  color: var(--md3-on-surface);
  text-align: center;
  background: var(--md3-surface-container-highest);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--md3-outline-variant);
`;

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; }
`;

export default function FindPassword() {
  const [email, setEmail] = useState('');
  const [msg, setMsg] = useState('');

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setMsg('');
    try {
      const res = await http.post<{ message: string; devResetToken?: string }>('/api/auth/find-password', { email });
      setMsg(res.message + (res.devResetToken ? ` (개발용 토큰: ${res.devResetToken.slice(0, 20)}…)` : ''));
    } catch (err: any) {
      setMsg(err?.message ?? '요청에 실패했습니다.');
    }
  };

  return (
    <Page>
      <Card>
        <form onSubmit={onSubmit}>
          <Field type="email" placeholder="가입한 이메일" value={email} onChange={(e) => setEmail(e.target.value)} required />
          <div style={{ height: 8 }} />
          <SubmitBtn type="submit">재설정 안내 받기</SubmitBtn>
        </form>
        {msg && <Msg>{msg}</Msg>}
      </Card>
      <Footer>
        <Link to="/signin">로그인으로 돌아가기</Link>
      </Footer>
    </Page>
  );
}