import { useState, useEffect } from "react";

interface Task {
  id: number;
  title: string;
  completed: boolean;
}

export function TaskListBad() {
  const [tasks, setTasks] = useState<Task[]>([
    { id: 1, title: "Вивчити React", completed: true },
    { id: 2, title: "Опанувати TypeScript", completed: false },
    { id: 3, title: "Побудувати проєкт", completed: false },
  ]);

  // ❌ Погано: обчислюємо відфільтровані задачі у окремому стані через ефект
  const [activeTasks, setActiveTasks] = useState<Task[]>([]);

  useEffect(() => {
    const filtered = tasks.filter((task) => !task.completed);
    setActiveTasks(filtered);
  }, [tasks]); // Ефект запускається при кожній зміні tasks

  return (
    <div>
      <h3>Активні задачі ({activeTasks.length})</h3>
      <ul>
        {activeTasks.map((task) => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>
    </div>
  );
}

import { useState } from "react";

interface Task {
  id: number;
  title: string;
  completed: boolean;
}

export function TaskListGood() {
  const [tasks, setTasks] = useState<Task[]>([
    { id: 1, title: "Вивчити React", completed: true },
    { id: 2, title: "Опанувати TypeScript", completed: false },
    { id: 3, title: "Побудувати проєкт", completed: false },
  ]);

  // ✅ Правильно: обчислюємо на льоту під час рендерингу
  const activeTasks = tasks.filter((task) => !task.completed);

  return (
    <div>
      <h3>Активні задачі ({activeTasks.length})</h3>
      <ul>
        {activeTasks.map((task) => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>
    </div>
  );
}

import { useState, useEffect } from "react";

interface User {
  id: number;
  name: string;
  email: string;
}

interface ProfileFormProps {
  userId: number;
  users: User[];
}

export function ProfileFormBad({ userId, users }: ProfileFormProps) {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  // ❌ Погано: синхронізуємо стан форми через ефект при зміні userId
  useEffect(() => {
    const user = users.find((u) => u.id === userId);
    if (user) {
      setName(user.name);
      setEmail(user.email);
    }
  }, [userId, users]);

  return (
    <form>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <button type="submit">Зберегти</button>
    </form>
  );
}

import { useState } from "react";

interface User {
  id: number;
  name: string;
  email: string;
}

interface ProfileFormProps {
  userId: number;
  users: User[];
}

function ProfileFormGood({ userId, users }: ProfileFormProps) {
  const user = users.find((u) => u.id === userId)!;
  
  // ✅ Початковий стан встановлюється один раз при монтуванні
  const [name, setName] = useState(user.name);
  const [email, setEmail] = useState(user.email);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log("Збереження:", { userId, name, email });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Ім'я:
        <input value={name} onChange={(e) => setName(e.target.value)} />
      </label>
      <label>
        Email:
        <input value={email} onChange={(e) => setEmail(e.target.value)} />
      </label>
      <button type="submit">Зберегти</button>
    </form>
  );
}

// Батьківський компонент передає key={userId}
export function ProfileEditor() {
  const [selectedUserId, setSelectedUserId] = useState(1);
  
  const users: User[] = [
    { id: 1, name: "Олена Коваленко", email: "olena@example.com" },
    { id: 2, name: "Андрій Мельник", email: "andriy@example.com" },
    { id: 3, name: "Марія Шевченко", email: "maria@example.com" },
  ];

  return (
    <div>
      <select
        value={selectedUserId}
        onChange={(e) => setSelectedUserId(Number(e.target.value))}
      >
        {users.map((user) => (
          <option key={user.id} value={user.id}>
            {user.name}
          </option>
        ))}
      </select>

      {/* ✅ Зміна key повністю перестворює компонент без useEffect! */}
      <ProfileFormGood key={selectedUserId} userId={selectedUserId} users={users} />
    </div>
  );
}

import { useState, useEffect } from "react";

export function ProductCardBad() {
  const [isInCart, setIsInCart] = useState(false);

  // ❌ Погано: робимо мережевий запит у ефекті
  useEffect(() => {
    if (isInCart) {
      fetch("/api/cart", {
        method: "POST",
        body: JSON.stringify({ productId: 123 }),
      });
    }
  }, [isInCart]);

  return (
    <button onClick={() => setIsInCart(true)}>
      Додати до кошика
    </button>
  );
}

import { useState } from "react";

export function ProductCardGood() {
  const [isInCart, setIsInCart] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const handleAddToCart = async (): Promise<void> => {
    setIsLoading(true);

    try {
      await fetch("/api/cart", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ productId: 123 }),
      });

      setIsInCart(true);
    } catch (error) {
      console.error("Помилка додавання до кошика:", error);
      alert("Не вдалося додати товар до кошика");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <button onClick={handleAddToCart} disabled={isInCart || isLoading}>
      {isLoading ? "Додавання..." : isInCart ? "У кошику ✓" : "Додати до кошика"}
    </button>
  );
}

import { useState, useEffect } from "react";

interface SearchInputProps {
  onChange: (value: string) => void;
}

export function SearchInputBad({ onChange }: SearchInputProps) {
  const [query, setQuery] = useState("");

  // ❌ Погано: викликаємо колбек у ефекті
  useEffect(() => {
    onChange(query);
  }, [query, onChange]);

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Пошук..."
    />
  );
}

import { useState } from "react";

interface SearchInputProps {
  onChange: (value: string) => void;
}

export function SearchInputGood({ onChange }: SearchInputProps) {
  const [query, setQuery] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
    const newValue = e.target.value;
    setQuery(newValue);
    
    // ✅ Правильно: викликаємо колбек безпосередньо в обробнику
    onChange(newValue);
  };

  return (
    <input
      value={query}
      onChange={handleChange}
      placeholder="Пошук..."
    />
  );
}

interface SearchInputProps {
  value: string;
  onChange: (value: string) => void;
}

export function SearchInputSimple({ value, onChange }: SearchInputProps) {
  return (
    <input
      value={value}
      onChange={(e) => onChange(e.target.value)}
      placeholder="Пошук..."
    />
  );
}