// 同期処理：上から順番に実行される
console.log("1. 開始");
console.log("2. 処理中...");
console.log("3. 完了");
// 出力順: 1 → 2 → 3

// 非同期処理：setTimeoutは後回しにされる
console.log("1. 開始");

setTimeout(() => {
  console.log("2. 非同期処理完了");
}, 1000);

console.log("3. 次の処理");
// 出力順: 1 → 3 → 2（2は1秒後に出力される）

// ユーザー情報を取得 → 注文を取得 → 商品を取得...
getUser(userId, function(user) {
  getOrders(user.id, function(orders) {
    getOrderDetail(orders[0].id, function(detail) {
      getProduct(detail.productId, function(product) {
        console.log(product.name);
        // さらにネストが続く...
      }, function(err) {
        console.error("商品取得エラー:", err);
      });
    }, function(err) {
      console.error("注文詳細取得エラー:", err);
    });
  }, function(err) {
    console.error("注文一覧取得エラー:", err);
  });
}, function(err) {
  console.error("ユーザー取得エラー:", err);
});

// Promiseの作成
const myPromise = new Promise((resolve, reject) => {
  // 非同期処理をここに書く
  const success = true;

  if (success) {
    resolve("処理が成功しました");  // fulfilled状態にする
  } else {
    reject(new Error("処理が失敗しました"));  // rejected状態にする
  }
});

// Promiseの使用
myPromise
  .then((result) => {
    // fulfilledの時に実行される
    console.log(result);  // "処理が成功しました"
  })
  .catch((error) => {
    // rejectedの時に実行される
    console.error(error.message);
  })
  .finally(() => {
    // 成功・失敗に関わらず必ず実行される
    console.log("処理が完了しました");
  });

function fetchUserData(userId) {
  return new Promise((resolve, reject) => {
    // XMLHttpRequestによる通信（レガシーな方法）
    const xhr = new XMLHttpRequest();
    xhr.open("GET", `/api/users/${userId}`);

    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(new Error(`HTTP Error: ${xhr.status}`));
      }
    };

    xhr.onerror = () => reject(new Error("ネットワークエラー"));
    xhr.send();
  });
}

// 使用例
fetchUserData(1)
  .then(user => console.log(user.name))
  .catch(err => console.error("取得失敗:", err.message));

// コールバック地獄だったコードをPromiseチェーンで書き直す
getUser(userId)
  .then(user => getOrders(user.id))
  .then(orders => getOrderDetail(orders[0].id))
  .then(detail => getProduct(detail.productId))
  .then(product => {
    console.log(product.name);
  })
  .catch(err => {
    // どの段階のエラーもここで一括キャッチ
    console.error("エラー:", err.message);
  });

// 値を変換しながらチェーンする
fetch("/api/users/1")
  .then(response => {
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();  // Promiseを返す
  })
  .then(user => {
    console.log(user.name);
    return user.name.toUpperCase();  // 普通の値を返す
  })
  .then(upperName => {
    console.log(upperName);  // 大文字に変換された名前
  })
  .catch(err => {
    console.error("エラー:", err.message);
  });

// 3つのAPIを同時に呼ぶ
const userPromise = fetch("/api/users/1").then(r => r.json());
const postsPromise = fetch("/api/posts?userId=1").then(r => r.json());
const settingsPromise = fetch("/api/settings").then(r => r.json());

Promise.all([userPromise, postsPromise, settingsPromise])
  .then(([user, posts, settings]) => {
    // 3つすべてが成功した時だけ実行される
    console.log("ユーザー:", user.name);
    console.log("投稿数:", posts.length);
    console.log("テーマ:", settings.theme);
  })
  .catch(err => {
    // 1つでも失敗したらここに来る
    console.error("いずれかのAPIが失敗:", err.message);
  });

// タイムアウト付きfetch
function fetchWithTimeout(url, timeoutMs) {
  const fetchPromise = fetch(url);

  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => reject(new Error("タイムアウト")), timeoutMs);
  });

  // 先に確定した方が結果になる
  return Promise.race([fetchPromise, timeoutPromise]);
}

fetchWithTimeout("/api/slow-endpoint", 3000)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error(err.message));  // "タイムアウト"

const promises = [
  fetch("/api/users/1").then(r => r.json()),
  fetch("/api/users/999").then(r => {
    if (!r.ok) throw new Error("Not Found");
    return r.json();
  }),
  fetch("/api/users/2").then(r => r.json()),
];

Promise.allSettled(promises).then(results => {
  results.forEach((result, i) => {
    if (result.status === "fulfilled") {
      console.log(`#${i} 成功:`, result.value.name);
    } else {
      console.log(`#${i} 失敗:`, result.reason.message);
    }
  });
});
// #0 成功: Alice
// #1 失敗: Not Found
// #2 成功: Bob

// Promiseチェーン版
function getUserData(userId) {
  return getUser(userId)
    .then(user => getOrders(user.id))
    .then(orders => getOrderDetail(orders[0].id))
    .then(detail => getProduct(detail.productId));
}

// async/await版（同じ処理）
async function getUserData(userId) {
  const user = await getUser(userId);
  const orders = await getOrders(user.id);
  const detail = await getOrderDetail(orders[0].id);
  const product = await getProduct(detail.productId);
  return product;
}

async function fetchUserProfile(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);

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

    const user = await response.json();
    console.log("ユーザー名:", user.name);
    return user;
  } catch (error) {
    console.error("取得失敗:", error.message);
    return null;  // デフォルト値を返す
  } finally {
    console.log("API呼び出し完了");
  }
}

async function loadDashboard(userId) {
  // 悪い例：順番に実行される（遅い）
  // const user = await fetchUser(userId);
  // const posts = await fetchPosts(userId);
  // const notifications = await fetchNotifications(userId);

  // 良い例：並行に実行される（速い）
  const [user, posts, notifications] = await Promise.all([
    fetchUser(userId),
    fetchPosts(userId),
    fetchNotifications(userId),
  ]);

  return { user, posts, notifications };
}

const userIds = [1, 2, 3, 4, 5];

// 逐次実行（順番に処理したい場合）
async function fetchUsersSequential(ids) {
  const users = [];
  for (const id of ids) {
    const user = await fetchUser(id);
    users.push(user);
  }
  return users;
}

// 並行実行（順番を気にしない場合）
async function fetchUsersParallel(ids) {
  const users = await Promise.all(
    ids.map(id => fetchUser(id))
  );
  return users;
}