"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-4 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>

          <Link href="/contact" className="flex flex-col items-center">
            <div className="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center mb-1">
              <svg
                className="w-6 h-6"
                viewBox="0 0 1024 1024"
                fill="#0d9488"
                stroke="currentColor"
              >
                <path d="M927.616 465.6C923.328 236.704 745.888 51.808 528 51.808h-32c-217.888 0-395.328 184.896-399.616 413.76C58.112 487.744 32 528.672 32 576v64c0 70.592 57.408 128 128 128s128-57.408 128-128v-64a128.064 128.064 0 0 0-126.784-127.872C173.728 262.688 318.912 115.808 496 115.808h32c177.12 0 322.272 146.88 334.784 332.32A128.064 128.064 0 0 0 736 576v64c0 57.792 38.72 106.176 91.392 122.016a337.504 337.504 0 0 1-191.936 124.48A79.712 79.712 0 0 0 560 832a80 80 0 1 0 0 160 79.68 79.68 0 0 0 67.872-38.112 402.432 402.432 0 0 0 278.24-193.6C955.968 742.816 992 695.776 992 640v-64c0-47.328-26.112-88.256-64.384-110.4zM224 576v64c0 35.296-28.704 64-64 64s-64-28.704-64-64v-64c0-35.296 28.704-64 64-64s64 28.704 64 64z m704 64c0 34.304-27.2 62.176-61.12 63.712l-2.496-1.184c-0.224 0.512-0.576 0.928-0.8 1.408A64 64 0 0 1 800 640v-64c0-35.296 28.704-64 64-64s64 28.704 64 64v64z"></path>
              </svg>
            </div>
            <span className="text-sm">联系客服</span>
          </Link>

          <Link href="/about" className="flex flex-col items-center">
            <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-1">
              <svg
                className="w-6 h-6"
                viewBox="0 0 1229 1024"
                fill="#2563eb"
                stroke="currentColor"
              >
                <path
                  d="M727.59 511.004C817.748 467.99 880.387 375.63 880.387 268.53 880.387 120.549 761.052 0.147 614.391 0.147S348.4 120.549 348.4 268.53c0 107.098 62.674 199.46 152.792 242.474-224.396 55.89-328.166 277.36-328.166 485.41 0 14.89 11.962 26.876 26.643 26.876 14.76 0 26.68-12.027 26.68-26.876 0-214.47 121.399-445.341 388.01-445.341 266.604 0 388.004 230.871 388.004 445.341 0 14.89 11.96 26.876 26.678 26.876 14.721 0 26.643-12.027 26.643-26.876 0.074-208.051-103.656-429.522-328.093-485.41M401.72 268.53c0-118.315 95.37-214.583 212.67-214.583 117.297 0 212.675 96.268 212.675 214.583 0 118.276-95.376 214.511-212.675 214.511-117.301 0-212.67-96.235-212.67-214.511"
                  p-id="5242"
                ></path>
                <path
                  d="M289.591 493.675c12.114-1.162 21.894-10.48 23.806-22.626 1.877-12.147-4.674-24.098-15.868-28.931-5.364-2.321-130.794-58.097-120.828-189.135C188.124 103.764 349.2 85.703 356.177 84.966c14.607-1.428 25.34-14.541 23.924-29.32-1.38-14.812-14.225-25.601-29.058-24.25C277.56 38.475 135.42 93.01 123.5 248.847c-7.324 96.924 44.313 166.582 95.411 207.43-88.82 31.206-234.37 119.899-216.354 364.072 1.034 14.118 12.728 24.947 26.523 24.947 0.692 0 1.347 0 2.039-0.077 14.68-1.121 25.719-14.041 24.607-28.854-21.62-293.563 223.52-321.686 233.865-322.69M1105.17 248.848C1093.283 93.05 951.185 38.513 877.702 31.397c-14.76-1.318-27.679 9.477-29.06 24.213-1.415 14.773 9.355 27.928 24 29.356 6.86 0.655 167.9 17.87 179.358 167.978 10.01 131.04-115.456 186.853-120.708 189.098-11.23 4.797-17.787 16.667-15.952 28.812 1.803 12.146 11.615 21.581 23.73 22.781 10.43 1.009 255.568 29.125 233.95 322.655-1.111 14.813 9.926 27.726 24.608 28.848 0.69 0.083 1.345 0.083 2.033 0.083 13.8 0 25.494-10.792 26.527-24.947 18.052-244.097-127.497-332.79-216.354-363.997 51.1-40.923 102.77-110.505 95.336-207.43z"
                  p-id="5243"
                ></path>
              </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>
  );
}
