import { useState, useEffect } from 'react';

// ===== APIデータfetch例 =====
function UserList() {
  // 入力: なし (マウント時に自動実行)
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 処理: マウント時に一度だけ実行 ([]依存性)
    async function fetchUsers() {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await response.json();
      setUsers(data);
      setLoading(false);
    }
    fetchUsers();
  }, []);  // ← 空配列: マウント時に一度だけ

  // 出力: ローディング中 or ユーザーリスト
  if (loading) return <p>読み込み中...</p>;
  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

// ===== タイマー + クリーンアップ例 =====
function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    // 処理: 1秒ごとにカウント増加
    const timer = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);

    // クリーンアップ: コンポーネントアンマウント時にタイマーを削除 (メモリリーク防止)
    return () => clearInterval(timer);
  }, []);  // マウント時に一度だけ設定

  return <p>経過時間: {seconds}秒</p>;
}

// ✅ ベストプラクティス: React 19 + 2025パターン
const UserProfile = ({ userId }: { userId: string }) => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const abortController = new AbortController();
    
    const loadUser = async () => {
      try {
        setLoading(true);
        setError(null);
        
        // AbortControllerで競合状態を解決
        const userData = await fetchUser(userId, {
          signal: abortController.signal
        });
        
        // コンポーネントがアンマウントされたか、別のリクエストが開始された場合は中断
        if (!abortController.signal.aborted) {
          setUser(userData);
        }
      } catch (err) {
        if (!abortController.signal.aborted) {
          setError('ユーザー情報の読み込みに失敗しました。');
        }
      } finally {
        if (!abortController.signal.aborted) {
          setLoading(false);
        }
      }
    };

    loadUser();

    // クリーンアップ関数: コンポーネントアンマウントまたはuserId変更時に実行
    return () => {
      abortController.abort();
    };
  }, [userId]); // userId依存性を明示

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  return <div>{user?.name}</div>;
};

// ✅ 2025 高度なパターン: カスタムHook + Suspense互換
function useAsyncData<T>(fetchFn: () => Promise<T>, deps: any[]) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    let cancelled = false;
    
    const loadData = async () => {
      try {
        setLoading(true);
        setError(null);
        
        const result = await fetchFn();
        
        if (!cancelled) {
          setData(result);
          setLoading(false);
        }
      } catch (err) {
        if (!cancelled) {
          setError(err as Error);
          setLoading(false);
        }
      }
    };

    loadData();

    return () => {
      cancelled = true;
    };
  }, deps);

  return { data, loading, error };
}

// 使用例
const UserProfile = ({ userId }: { userId: string }) => {
  const { data: user, loading, error } = useAsyncData(
    () => fetchUser(userId),
    [userId]
  );

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return <div>{user?.name}</div>;
};