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 (
      <div style={{ minHeight: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#94a3b8' }}>
        <span>로딩 중...</span>
      </div>
    );
  }

  if (!isLoggedIn) {
    return (
      <div style={{
        minHeight: 260, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', padding: '40px 24px',
        background: '#f8fafc', borderRadius: 12, border: '1px solid #e2e8f0',
        margin: '20px 0', textAlign: 'center', gap: 12,
      }}>
        <div style={{ fontSize: 40 }}>🔒</div>
        <div style={{ fontSize: 16, fontWeight: 700, color: '#1e293b' }}>
          로그인 또는 회원가입을 하셔야 사용할 수 있는 기능입니다.
        </div>
        <div style={{ fontSize: 14, color: '#64748b' }}>
          {feature} 서비스는 회원 전용입니다.
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 8 }}>
          <button
            onClick={() => navigate('/login')}
            style={{ padding: '10px 28px', background: '#1a5fd8', color: '#fff',
                     border: 'none', borderRadius: 8, cursor: 'pointer', fontWeight: 700, fontSize: 14 }}>
            로그인
          </button>
          <button
            onClick={() => navigate('/login?tab=register')}
            style={{ padding: '10px 28px', background: '#fff', color: '#1a5fd8',
                     border: '2px solid #1a5fd8', borderRadius: 8, cursor: 'pointer', fontWeight: 700, fontSize: 14 }}>
            회원가입
          </button>
        </div>
      </div>
    );
  }

  return children;
}
