"use client";

import React, { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";

export default function Profile() {
  const [isLoggedIn, setIsLoggedIn] = React.useState(false);
  const [userData, setUserData] = React.useState(null);
  const [points, setPoints] = useState(0);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  useEffect(() => {
    // 检查本地存储中是否有用户信息
    const storedUser = localStorage.getItem("user");
    const token = localStorage.getItem("token");

    if (storedUser && token) {
      setIsLoggedIn(true);
      setUserData(JSON.parse(storedUser));
    } else {
      setIsLoggedIn(false);
      setUserData(null);
    }
  }, []);

  useEffect(() => {
    const fetchUserPoints = async () => {
      try {
        const token = localStorage.getItem("token");
        if (!token) return;

        const res = await fetch("/api/user/points", {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        const data = await res.json();
        setPoints(data.points);
      } catch (error) {
        console.error("获取积分失败:", error);
      }
    };

    fetchUserPoints();
  }, []);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentImageIndex((prevIndex) => (prevIndex + 1) % 3);
    }, 3000);

    return () => clearInterval(timer);
  }, []);

  return (
    <div className="flex flex-col min-h-screen bg-gray-50">
      {/* 顶部用户信息区域 */}
      <div className="bg-yellow-400 p-8 rounded-b-3xl">
        {isLoggedIn && userData ? (
          <Link href="/user/profile" className="flex items-center gap-6">
            <Image
              src={
                userData.avatar ||
                "https://s2.loli.net/2025/02/11/miDGcVpHvQUzNwr.jpg"
              }
              alt="avatar"
              width={80}
              height={80}
              className="rounded-full"
            />
            <div>
              <h2 className="text-xl font-bold">{userData.username}</h2>
              <p className="text-sm text-gray-700 mt-2">查看个人资料</p>
            </div>
          </Link>
        ) : (
          <Link href="/login" className="flex items-center gap-6">
            <div className="w-[80px] h-[80px] bg-gray-200 rounded-full flex items-center justify-center">
              <svg
                className="w-10 h-10 text-gray-400"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
                />
              </svg>
            </div>
            <div>
              <h2 className="text-xl font-bold">登录/注册</h2>
              <p className="text-sm text-gray-700 mt-2">
                点击登录享受更多精彩信息
              </p>
            </div>
          </Link>
        )}
      </div>

      {/* 积分和优惠券信息区域 */}
      <div className="grid grid-cols-2 gap-4 p-4">
        <Link href="/checkin" className="bg-white rounded-lg p-4 text-center">
          <span className="text-xl font-bold">{points}</span>
          <p className="text-sm text-gray-500 mt-1">积分</p>
        </Link>
        <Link href="/coupon" className="bg-white rounded-lg p-4 text-center">
          <span className="text-xl font-bold">0</span>
          <p className="text-sm text-gray-500 mt-1">优惠券</p>
        </Link>
      </div>

      {/* 常用工具区域 */}
      <div className="p-4">
        <h3 className="text-lg font-bold mb-4">常用工具</h3>
        <div className="grid grid-cols-3 gap-4">
          <Link href="/address" className="flex flex-col items-center">
            <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-1">
              <svg
                className="w-6 h-6 text-green-600"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
                />
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
                />
              </svg>
            </div>
            <span className="text-sm">收货地址</span>
          </Link>

          <Link href="/coupon" className="flex flex-col items-center">
            <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-1">
              <svg
                className="w-6 h-6 text-purple-600"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"
                />
              </svg>
            </div>
            <span className="text-sm">优惠券</span>
          </Link>

          <Link href="/checkin" className="flex flex-col items-center">
            <div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-1">
              <svg
                className="w-6 h-6 text-orange-600"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
            </div>
            <span className="text-sm">签到</span>
          </Link>
        </div>
      </div>

      {/* 宠物相册区域 */}
      <div className="p-4">
        <div className="flex justify-between items-center mb-4">
          <h3 className="text-lg font-bold">推荐商品</h3>
        </div>

        <div className="relative w-full h-48 rounded-lg overflow-hidden">
          {[
            "https://s2.loli.net/2025/02/11/QCxNUXcDaPeRohE.png",
            "https://s2.loli.net/2025/02/11/FdX5giEp9DjGx4J.png",
            "https://s2.loli.net/2025/02/11/9zRiqkcn43BjHvp.png",
          ].map((url, index) => (
            <Link href="/tab" key={index}>
              <Image
                src={url}
                alt={`商品 ${index + 1}`}
                fill
                className={`object-cover transition-opacity duration-500 ${
                  index === currentImageIndex ? "opacity-100" : "opacity-0"
                }`}
              />
            </Link>
          ))}

          <div className="absolute bottom-2 left-0 right-0 flex justify-center gap-1">
            {[0, 1, 2].map((index) => (
              <div
                key={index}
                className={`w-1.5 h-1.5 rounded-full ${
                  index === currentImageIndex
                    ? "bg-yellow-400"
                    : "bg-white opacity-60"
                }`}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}