// 이 파일이 하는 일: 아이디 찾기 / 비밀번호를 잊었을 때 안내를 탭 두 개로 제공한다.
// - 아이디 찾기: 이름 → POST /api/auth/find-id → 마스킹된 아이디 목록(me****1)
// - 비밀번호를 잊었어요: 안내만 (무인증 재설정은 보안 문제로 제거 — 아래 ForgotPasswordTab 주석 참고)
// 로그인 전에 쓰는 페이지라 Layout(상단 메뉴) 바깥에 렌더링된다.
import { useState } from 'react';
import { Link, Navigate } from 'react-router-dom';
import { useAuth } from '../AuthContext';
import client from '../api/client';

// ---------- 탭 1: 아이디 찾기 ----------
function FindIdTab() {
  const [name, setName] = useState('');
  // null = 아직 조회 안 함, [] = 조회했지만 결과 없음, [...] = 찾은 아이디들.
  // 학습 포인트: "조회 전"과 "결과 0건"은 다른 상태다. null과 빈 배열로 구분하면
  // "아직 아무것도 안 했는데 '없어요'라고 뜨는" 어색한 화면을 피할 수 있다.
  const [foundIds, setFoundIds] = useState(null);
  const [error, setError] = useState('');
  const [submitting, setSubmitting] = useState(false);

  async function handleSubmit(e) {
    e.preventDefault();
    setError('');
    setFoundIds(null);
    if (!name.trim()) {
      setError('이름을 입력해 주세요.');
      return;
    }
    setSubmitting(true);
    try {
      const res = await client.post('/auth/find-id', { name: name.trim() });
      // 서버 응답: { usernames: ["st*****1", ...] } — 아이디를 가려서(마스킹) 준다.
      // 학습 포인트: 마스킹은 서버가 한다. 프론트가 가리면 원본이 이미 브라우저까지 온 뒤라
      // 개발자도구로 그냥 보인다 — "가리기"는 반드시 데이터를 보내는 쪽에서 해야 한다.
      setFoundIds(res.data.usernames || []);
    } catch {
      setError('조회 중 문제가 생겼어요. 잠시 후 다시 시도해 주세요.');
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <div className="field">
        <label htmlFor="find-name">가입할 때 쓴 이름</label>
        <input
          id="find-name"
          className="input"
          value={name}
          onChange={(e) => setName(e.target.value)}
          autoComplete="name"
          required
        />
      </div>
      {error && <p className="error-text">{error}</p>}
      <button
        className="btn btn-primary"
        type="submit"
        disabled={submitting}
        style={{ width: '100%', justifyContent: 'center' }}
      >
        {submitting ? '찾는 중...' : '아이디 찾기'}
      </button>

      {/* 조회 결과 영역. foundIds가 null이 아닐 때만 보여준다. */}
      {foundIds !== null && (
        <div
          style={{
            background: 'var(--primary-soft)',
            borderRadius: 10,
            padding: '10px 14px',
            marginTop: 14,
          }}
        >
          {foundIds.length === 0 ? (
            <p className="muted" style={{ fontSize: 14 }}>
              이 이름으로 가입된 계정이 없어요.
            </p>
          ) : (
            <>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--primary)' }}>
                찾은 아이디 (일부만 표시)
              </div>
              {/* 같은 이름으로 여러 계정이 있을 수 있어 목록으로 보여준다. */}
              <ul style={{ paddingLeft: 20 }}>
                {foundIds.map((id) => (
                  <li key={id} style={{ fontWeight: 700 }}>
                    {id}
                  </li>
                ))}
              </ul>
            </>
          )}
        </div>
      )}
    </form>
  );
}

// ---------- 탭 2: 비밀번호를 잊었을 때 ----------
// 여기 있던 "아이디+이름 입력하면 비밀번호 재설정" 폼은 보안 검토 후 제거했다.
//
// 학습 포인트 — 왜 없앴나? 이 앱의 실제 취약점이었기 때문이다.
//   1) 옆 탭(아이디 찾기)이 이름만으로 아이디를 알려주고,
//   2) 이 폼이 아이디+이름만으로 비밀번호를 바꿔 줬다.
//   → 둘을 이으면 "이름만 아는 사람"이 남의 계정을 통째로 가져갈 수 있었다.
//     실제로 {"name":"멘토"} 요청 두 번이면 멘토 권한이 넘어갔다.
//
// 기능 하나하나는 "학습용 단순화"였지만, 조합되니 인증이 사라졌다.
// 그래서 (1) 아이디는 마스킹하고 (2) 이 폼은 없애고, 대신 두 길을 만들었다:
//   - 비밀번호를 아는 사람: 로그인 후 [비밀번호 변경] (현재 비밀번호 확인)
//   - 정말 잊은 사람: 멘토가 대신 재설정 (사람이 얼굴을 보고 확인 = 훌륭한 인증)
// 편의를 조금 잃었지만, 그 편의가 계정 탈취의 문이었다.
function ForgotPasswordTab() {
  return (
    <div>
      <p style={{ fontWeight: 700, marginBottom: 8 }}>비밀번호를 잊으셨나요?</p>
      <p className="muted" style={{ fontSize: 14, lineHeight: 1.7 }}>
        <strong>멘토에게 요청하세요.</strong> 멘토가 새 비밀번호로 재설정해 드립니다.
        <br />
        비밀번호가 기억난다면 로그인한 뒤 <strong>[비밀번호 변경]</strong> 메뉴에서 직접 바꿀 수 있어요.
      </p>

      <div className="tip" style={{ marginTop: 14 }}>
        <b>왜 여기서 바로 못 바꾸나요?</b> 예전엔 아이디와 이름만 넣으면 바로 바뀌었어요.
        그런데 이름은 비밀이 아니죠 — 옆 사람도, 사실은 누구나 알 수 있어요. 그래서 남의 계정을
        가져갈 수 있는 문이 됐고, 보안 점검에서 발견해 닫았습니다. 이 앱의 <strong>방화벽</strong>·
        <strong>무선 보안</strong> 코스에서 배우는 내용이 실제로 우리 코드에 적용된 사례예요.
      </div>

      <Link
        to="/login"
        className="btn btn-primary"
        style={{ width: '100%', justifyContent: 'center', marginTop: 14 }}
      >
        로그인하러 가기
      </Link>
    </div>
  );
}

export default function FindAccountPage() {
  const { user } = useAuth();
  // 현재 열려 있는 탭: 'find-id' 또는 'reset-password'
  const [tab, setTab] = useState('find-id');

  // 이미 로그인했다면 계정을 찾을 이유가 없으니 대시보드로.
  if (user) {
    return <Navigate to="/" replace />;
  }

  return (
    <div
      style={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 20,
      }}
    >
      <div className="card" style={{ width: '100%', maxWidth: 380 }}>
        <div style={{ textAlign: 'center', marginBottom: 20 }}>
          <div className="topnav-logo" style={{ fontSize: 18 }}>
            AWESOMEDEV <span>수습 플랫폼</span>
          </div>
          <p className="muted" style={{ fontSize: 14, marginTop: 6 }}>
            아이디·비밀번호 찾기
          </p>
        </div>

        {/* 학습 포인트: "탭"은 사실 상태값 하나(tab)와 조건부 렌더링이 전부다.
            라이브러리 없이 useState 한 줄로 만들 수 있다. */}
        <div className="tabs">
          <button
            type="button"
            className={`tab${tab === 'find-id' ? ' active' : ''}`}
            onClick={() => setTab('find-id')}
          >
            아이디 찾기
          </button>
          <button
            type="button"
            className={`tab${tab === 'reset-password' ? ' active' : ''}`}
            onClick={() => setTab('reset-password')}
          >
            비밀번호를 잊었어요
          </button>
        </div>

        {tab === 'find-id' ? <FindIdTab /> : <ForgotPasswordTab />}

        <p className="muted" style={{ textAlign: 'center', fontSize: 14, marginTop: 16 }}>
          <Link to="/login">로그인으로 돌아가기</Link>
        </p>
      </div>
    </div>
  );
}
