// XMLHttpRequest 기본 사용법
const xhr = new XMLHttpRequest();

// 요청 초기화: 메서드, URL, 비동기 여부
xhr.open('GET', 'https://api.example.com/data', true);

// 요청 완료 시 실행될 콜백
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log('받은 데이터:', data);
  }
};

// 에러 처리
xhr.onerror = function() {
  console.error('요청 실패!');
};

// 요청 전송
xhr.send();

// 가장 기본적인 Fetch 사용법
fetch('https://api.example.com/data')
  .then(response => {
    // response는 HTTP 응답 객체
    // 실제 데이터를 꺼내려면 .json() 호출 필요
    return response.json();
  })
  .then(data => {
    console.log('받은 데이터:', data);
  })
  .catch(error => {
    console.error('에러 발생:', error);
  });

// 올바른 에러 처리 방법
fetch('https://api.example.com/data')
  .then(response => {
    // response.ok는 status가 200-299일 때 true
    if (!response.ok) {
      throw new Error(`HTTP 에러! 상태코드: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('성공:', data);
  })
  .catch(error => {
    // 네트워크 에러 OR 위에서 throw한 에러 모두 처리
    console.error('에러:', error.message);
  });

// async/await 버전 — 훨씬 읽기 쉽지?
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    
    if (!response.ok) {
      throw new Error(`HTTP 에러! 상태코드: ${response.status}`);
    }
    
    const data = await response.json();
    console.log('받은 데이터:', data);
    return data;
    
  } catch (error) {
    console.error('에러 발생:', error.message);
  }
}

// 호출
fetchData();

// GET 요청 — 사용자 목록 가져오기
async function getUsers() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    
    if (!response.ok) throw new Error('서버 에러');
    
    const users = await response.json();
    users.forEach(user => {
      console.log(`이름: ${user.name}, 이메일: ${user.email}`);
    });
    
  } catch (error) {
    console.error('유저 목록 불러오기 실패:', error);
  }
}

getUsers();

// POST 요청 — 새 게시글 작성
async function createPost(title, body, userId) {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',                    // 메서드 지정
      headers: {
        'Content-Type': 'application/json',  // JSON 데이터 전송 명시
      },
      body: JSON.stringify({             // 객체를 JSON 문자열로 변환
        title: title,
        body: body,
        userId: userId
      })
    });
    
    if (!response.ok) throw new Error('게시글 생성 실패');
    
    const newPost = await response.json();
    console.log('새 게시글 생성됨:', newPost);
    console.log('생성된 ID:', newPost.id);
    
  } catch (error) {
    console.error('에러:', error);
  }
}

createPost('안녕하세요!', '첫 번째 게시글입니다.', 1);

// PATCH 요청 — 게시글 제목만 수정
async function updatePostTitle(postId, newTitle) {
  try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`, {
      method: 'PATCH',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        title: newTitle   // 제목만 변경
      })
    });
    
    if (!response.ok) throw new Error('수정 실패');
    
    const updatedPost = await response.json();
    console.log('수정된 게시글:', updatedPost);
    
  } catch (error) {
    console.error('수정 에러:', error);
  }
}

updatePostTitle(1, '수정된 제목입니다!');

// DELETE 요청 — 게시글 삭제
async function deletePost(postId) {
  try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`, {
      method: 'DELETE'
    });
    
    if (!response.ok) throw new Error('삭제 실패');
    
    // DELETE는 보통 빈 응답이나 204 No Content 반환
    console.log(`게시글 ${postId} 삭제 완료! ✅`);
    
  } catch (error) {
    console.error('삭제 에러:', error);
  }
}

deletePost(1);

// 재사용 가능한 API 클라이언트
const apiClient = {
  baseURL: 'https://api.example.com',
  
  // 공통 헤더 생성
  getHeaders() {
    return {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${localStorage.getItem('token') || ''}`
    };
  },
  
  // 공통 요청 처리
  async request(endpoint, options = {}) {
    const url = `${this.baseURL}${endpoint}`;
    const config = {
      headers: this.getHeaders(),
      ...options
    };
    
    const response = await fetch(url, config);
    
    if (!response.ok) {
      const errorData = await response.json().catch(() => ({}));
      throw new Error(errorData.message || `HTTP ${response.status}`);
    }
    
    // 204 No Content는 json() 호출 불필요
    if (response.status === 204) return null;
    
    return response.json();
  },
  
  // 편의 메서드들
  get(endpoint) {
    return this.request(endpoint);
  },
  
  post(endpoint, data) {
    return this.request(endpoint, {
      method: 'POST',
      body: JSON.stringify(data)
    });
  },
  
  put(endpoint, data) {
    return this.request(endpoint, {
      method: 'PUT',
      body: JSON.stringify(data)
    });
  },
  
  patch(endpoint, data) {
    return this.request(endpoint, {
      method: 'PATCH',
      body: JSON.stringify(data)
    });
  },
  
  delete(endpoint) {
    return this.request(endpoint, { method: 'DELETE' });
  }
};

// 사용 예시
const users = await apiClient.get('/users');
const newUser = await apiClient.post('/users', { name: '홍길동', age: 25 });
await apiClient.delete('/users/1');

// AbortController로 타임아웃 구현
async function fetchWithTimeout(url, options = {}, timeout = 5000) {
  const controller = new AbortController();
  
  // 지정된 시간 후 요청 취소
  const timeoutId = setTimeout(() => {
    controller.abort();
  }, timeout);
  
  try {
    const response = await fetch(url, {
      ...options,
      signal: controller.signal  // AbortController 연결
    });
    
    clearTimeout(timeoutId);  // 성공하면 타이머 취소
    
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return await response.json();
    
  } catch (error) {
    clearTimeout(timeoutId);
    
    if (error.name === 'AbortError') {
      throw new Error(`요청 타임아웃! ${timeout}ms 초과`);
    }
    throw error;
  }
}

// 5초 안에 응답 없으면 타임아웃
try {
  const data = await fetchWithTimeout('https://api.example.com/slow', {}, 5000);
  console.log(data);
} catch (error) {
  console.error(error.message);  // "요청 타임아웃! 5000ms 초과"
}

// 자동 재시도 fetch
async function fetchWithRetry(url, options = {}, maxRetries = 3) {
  let lastError;
  
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      const response = await fetch(url, options);
      
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      
      return await response.json();
      
    } catch (error) {
      lastError = error;
      console.log(`시도 ${attempt}/${maxRetries} 실패: ${error.message}`);
      
      if (attempt < maxRetries) {
        // 지수 백오프: 1초, 2초, 4초... 점점 늘어남
        const delay = Math.pow(2, attempt - 1) * 1000;
        console.log(`${delay}ms 후 재시도...`);
        await new Promise(resolve => setTimeout(resolve, delay));
      }
    }
  }
  
  throw new Error(`${maxRetries}번 시도 후 실패: ${lastError.message}`);
}

// 사용
try {
  const data = await fetchWithRetry('https://api.example.com/data');
  console.log('성공:', data);
} catch (error) {
  console.error('최종 실패:', error.message);
}