// FETCH API IN JAVASCRIPT

// The Fetch API provides a modern way to make HTTP requests in JavaScript.
// It returns a Promise and is used for fetching resources like data from APIs.
// Fetch makes asynchronous requests simpler compared to the old XMLHttpRequest.
// It supports all HTTP methods (GET, POST, PUT, DELETE, etc.)


// BASIC SYNTAX

// fetch(url, options)
//   .then(response => { ... })
//   .catch(error => { ... });
//
// - url → The endpoint you're requesting.
// - options → (optional) configuration object (method, headers, body, etc.)


// EXAMPLE 1: SIMPLE GET REQUEST


fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json()) // convert response to JSON
  .then(data => console.log("All Posts:", data))
  .catch(error => console.error(" Error:", error));


// WHAT HAPPENS HERE?

// 1. fetch() sends a request to the given URL.
// 2. The first .then() converts the response into a JavaScript object using response.json().
// 3. The second .then() gives access to the parsed data.
// 4. .catch() handles any network or parsing errors.


// EXAMPLE 2: MAKING A POST REQUEST (SENDING DATA)


fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'New Post',
    body: 'This is the body of the post',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => console.log("Created Post:", data))
  .catch(error => console.error("Error:", error));


// WHY USE JSON.STRINGIFY()?

// The body of a POST request must be in string format when sending JSON data.
// JSON.stringify() converts a JS object into a JSON string.


// EXAMPLE 3: USING ASYNC / AWAIT

// A cleaner and more readable way to handle fetch requests.

async function getUsers() {
  try {
    console.log("Fetching users...");
    const response = await fetch('https://jsonplaceholder.typicode.com/users');

    if (!response.ok) {
      throw new Error(`HTTP Error: ${response.status}`);
    }

    const users = await response.json();
    console.log("Users fetched successfully:", users);
  } catch (error) {
    console.error(" Fetch failed:", error);
  } finally {
    console.log("Fetch attempt finished!");
  }
}

getUsers();


// WHY USE ASYNC / AWAIT?

// - Makes code look synchronous and cleaner.
// - Easier to handle multiple async operations in sequence.
// - Works with try...catch for better error handling.


// EXAMPLE 4: PUT REQUEST (UPDATE DATA)


async function updatePost() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1', {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        title: 'Updated Title',
        body: 'This content has been updated',
        userId: 1
      })
    });

    const updatedPost = await response.json();
    console.log("Post Updated:", updatedPost);
  } catch (error) {
    console.error(" Error updating post:", error);
  }
}

updatePost();


// EXAMPLE 5: DELETE REQUEST


async function deletePost() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1', {
      method: 'DELETE'
    });

    if (response.ok) {
      console.log("Post deleted successfully!");
    } else {
      console.error(" Failed to delete post!");
    }
  } catch (error) {
    console.error(" Error:", error);
  }
}

deletePost();


// EXAMPLE 6: FETCH WITH CUSTOM HEADERS (E.G. AUTH TOKEN)


fetch('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
    'Accept': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => console.log(" Authorized Data:", data))
  .catch(error => console.error("Authorization Error:", error));


// EXAMPLE 7: HANDLING MULTIPLE FETCH REQUESTS

// Using Promise.all() to run requests in parallel.

const postsPromise = fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.json());
const usersPromise = fetch('https://jsonplaceholder.typicode.com/users').then(res => res.json());

Promise.all([postsPromise, usersPromise])
  .then(([posts, users]) => {
    console.log(" Posts:", posts.length);
    console.log("Users:", users.length);
  })
  .catch(error => console.error(" Error fetching data:", error));


// EXAMPLE 8: DISPLAYING DATA IN HTML (BASIC DEMO)
// You can use Fetch to populate HTML content dynamically.

async function displayPosts() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await response.json();

  // Create a simple list in the console (or DOM)
  console.log(" Displaying first 5 posts:");
  posts.slice(0, 5).forEach(post => {
    console.log(` ${post.title}`);
  });
}

displayPosts();