import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

/**
 * 회원 인증 상태 관리 훅.
 * - isLoggedIn: 로그인 여부
 * - member: 회원 정보
 * - requireLogin(redirectPath): 비회원이면 로그인 페이지로 이동
 */
export function useMemberAuth() {
  const navigate  = useNavigate();
  const [member, setMember]     = useState(null);
  const [loaded, setLoaded]     = useState(false);

  useEffect(() => {
    const token = localStorage.getItem('member_token');
    const user  = localStorage.getItem('member_user');
    if (token && user) {
      try { setMember(JSON.parse(user)); } catch { /* 손상된 데이터 무시 */ }
    }
    setLoaded(true);
  }, []);

  const logout = () => {
    localStorage.removeItem('member_token');
    localStorage.removeItem('member_user');
    setMember(null);
    navigate('/');
  };

  const requireLogin = (redirectPath = window.location.pathname) => {
    if (!member) {
      navigate(`/login?redirect=${encodeURIComponent(redirectPath)}`);
      return false;
    }
    return true;
  };

  return {
    member,
    isLoggedIn: !!member,
    loaded,
    logout,
    requireLogin,
  };
}

/**
 * 회원 전용 접근 보호 컴포넌트.
 * 비로그인 시 잠금 오버레이 표시.
 *
 * 사용:
 *   <MemberOnly feature="상담 신청">
 *     <ConsultForm />
 *   </MemberOnly>
 */
export function MemberOnly({ children, feature = '이 기능' }) {
  const { isLoggedIn, loaded } = useMemberAuth();
  const navigate = useNavigate();

  if (!loaded) return null;

  if (!isLoggedIn) {
    return (
      <div className="member-guard" style={{ position:'relative', minHeight:120 }}>
        {children}
        <div className="member-guard-overlay">
          <div className="member-guard-icon">🔒</div>
          <div className="member-guard-text">{feature}은 회원 전용입니다</div>
          <div className="member-guard-sub">로그인 후 이용하실 수 있습니다</div>
          <button
            onClick={() => navigate('/login')}
            style={{ marginTop:8, padding:'8px 24px', background:'#1a5fd8', color:'#fff',
                     border:'none', borderRadius:8, cursor:'pointer', fontWeight:600, fontSize:14 }}>
            로그인 / 회원가입
          </button>
        </div>
      </div>
    );
  }

  return children;
}