import { useState, useEffect } from 'react';

import { useLoaderData, useNavigate } from 'react-router-dom';

import axios from 'axios';

 

const Fruits = () => {

  const response = useLoaderData() as { data: Fruit[] };

  const fruits = response.data;

 

  const [fruitIndex, setFruitIndex] = useState(0);

  const [fruitsState, setFruitsState] = useState<Fruit[]>(fruits); // ✅ 管理可变状态

  const currentFruit = fruitsState[fruitIndex];

 

  // 同步初始数据（防止 loader data 变化时状态不一致）

  useEffect(() => {

    setFruitsState(fruits);

  }, [fruits]);

 

  const handlePreviousFruit = () => {

    setFruitIndex(prev => (prev === 0 ? fruitsState.length - 1 : prev - 1));

  };

 

  const handleNextFruit = () => {

    setFruitIndex(prev => (prev >= fruitsState.length - 1 ? 0 : prev + 1));

  };

 

  const handleLike = async (id: number, isCurrentlyLiked: boolean) => {

    try {

      if (isCurrentlyLiked) {

        // 取消点赞：DELETE 请求

        await axios.delete(`/api/v1/fruits?id=${id}`);

      } else {

        // 点赞：POST 请求

        await axios.post(`/api/v1/fruits`, { id, isLiked: true });

      }

 

      // ✅ 关键：立即更新本地状态，保证 UI 实时响应

      setFruitsState(prev =>

        prev.map(fruit =>

          fruit.id === id ? { ...fruit, isLiked: !isCurrentlyLiked } : fruit

        )

      );

 

      // ✅ 可选：若当前展示的正是该水果，也可同步更新 currentFruit（但由 fruitsState 驱动更可靠）

    } catch (error) {

      console.error('点赞操作失败:', error);

      // 可添加 toast 提示或错误回滚逻辑

    }

  };

 

  return (

    <div className="fruit-carousel">

      <div className="fruit-info">

        <p>

          {' '}

          {`Do I like ${currentFruit.name}? ${currentFruit.isLiked ? '✅ yes' : '❌ no'}`}

        </p>

        <button

          onClick={() => handleLike(currentFruit.id, currentFruit.isLiked)}

          disabled={!currentFruit} // 防止空状态点击

        >

          {currentFruit.isLiked ? 'Unlike' : 'Like'}

        </button>

      </div>

 

      <div className="carousel-nav">

        <button onClick={handlePreviousFruit}>← Previous</button>

        <span className="indicator">

          {fruitIndex + 1} / {fruitsState.length}

        </span>

        <button onClick={handleNextFruit}>Next →</button>

      </div>

    </div>

  );

};

 

// 类型定义（推荐补充）

type Fruit = {

  id: number;

  name: string;

  isLiked: boolean;

};

 

export default Fruits;