// 1. Basic HTTP GET Request
async function getProducts() {
  try {
    const res = await fetch('https://dummyjson.com/products?limit=3');
    
    // CRITICAL: Check if HTTP status is 200-299
    if (!res.ok) {
      throw new Error(`HTTP Error! Status: ${res.status}`);
    }
    
    const data = await res.json(); // Second await for parsing stream to JSON
    console.log("Products list:", data.products);
  } catch (error) {
    console.error("Network ya Server fail:", error.message);
  }
}

// 2. HTTP POST Request (Sending data to server)
async function createNewPost(postData) {
  try {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json' // Server ko batana ki data JSON me hai
      },
      body: JSON.stringify(postData) // Object ko string me convert karna
    });
    
    const result = await res.json();
    console.log("Created successfully with ID:", result.id);
  } catch (err) {
    console.error("POST request failed:", err);
  }
}

async function loadUserData(userId) {
  const spinner = document.getElementById('loading-spinner');
  const userCard = document.getElementById('user-card');
  const errorAlert = document.getElementById('error-box');

  // STEP 1: UI state - Start Loading
  spinner.style.display = 'block';
  errorAlert.style.display = 'none';

  try {
    // STEP 2: Make Network Request
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);

    // STEP 3: Validate Status
    if (!response.ok) {
      if (response.status === 404) throw new Error("User nahi mila (404 Not Found)!");
      throw new Error(`Server error (${response.status})`);
    }

    // STEP 4: Parse & Render Data
    const user = await response.json();
    userCard.innerHTML = `<h3>${user.name}</h3><p>📧 ${user.email}</p><p>🏢 ${user.company.name}</p>`;
  } catch (err) {
    // STEP 5: Handle Failures
    errorAlert.textContent = `❌ ${err.message}`;
    errorAlert.style.display = 'block';
  } finally {
    // STEP 6: ALWAYS stop the spinner (Success ya Error dono cases me!)
    spinner.style.display = 'none';
  }
}

async function loadProducts() {
  const statusEl = document.querySelector("#status");
  const container = document.querySelector("#product-grid");

  try {
    // 1. Loading State
    statusEl.textContent = "Loading catalog...";
    statusEl.classList.remove("hidden");

    // 2. Fetch network request
    const res = await fetch("https://dummyjson.com/products?limit=6");

    // Check for HTTP errors (404, 500)
    if (!res.ok) throw new Error(`HTTP Error ${res.status}`);

    const data = await res.json();

    // 3. Empty State check
    if (!data.products || data.products.length === 0) {
      statusEl.textContent = "No products found.";
      return;
    }

    // 4. Success State: Render items
    statusEl.classList.add("hidden");
    container.innerHTML = data.products.map(p => `
      <div class="card">
        <h3>${p.title}</h3>
        <p>Price: $${p.price}</p>
      </div>
    `).join("");

  } catch (error) {
    // 5. Error State
    statusEl.textContent = `Failed to load products: ${error.message}`;
    statusEl.classList.add("text-error");
  }
}

async function createNewPost(postData) {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(postData)
  });

  const created = await response.json();
  console.log("Created successfully with ID:", created.id);
}