import React, { useState } from "react"
import {
  FaCommentDots,
  FaUserFriends,
  FaBriefcase,
  FaFacebookF,
  FaTwitter,
  FaDribbble,
  FaSun,
  FaMoon,
  FaMedal
} from "react-icons/fa"

const ProfileCard = () => {
  const [darkMode, setDarkMode] = useState(false)
  const activityLevel = 87
  const isPremium = true

  let activityColor = ""
  let activityEmoji = ""
  let blocksToColor = 1
  let celebrationEmoji = ""

  if (activityLevel <= 24) {
    activityColor = "red-600"
    activityEmoji = "😞"
    blocksToColor = 1
  } else if (activityLevel <= 49) {
    activityColor = "orange-500"
    activityEmoji = "😐"
    blocksToColor = 2
  } else if (activityLevel <= 74) {
    activityColor = "yellow-400"
    activityEmoji = "🙂"
    blocksToColor = 3
  } else {
    activityColor = "emerald-500"
    activityEmoji = "😄"
    blocksToColor = 4
    celebrationEmoji = "🎉"
  }

  const colorMap = {
    "red-600": "#dc2626",
    "orange-500": "#f97316",
    "yellow-400": "#facc15",
    "emerald-500": "#10b981"
  }

  const getBlockStyle = (index) => ({
    backgroundColor: index < blocksToColor ? colorMap[activityColor] : (darkMode ? "#4b5563" : "#d1d5db")
  })

  const stats = [
    { label: "Játékok", value: 1256, icon: <FaCommentDots /> },
    { label: "Barátok", value: 8562, icon: <FaUserFriends /> },
    { label: "Győzelmek", value: 189, icon: <FaBriefcase /> },
    { label: "Badge-ek", value: 6, icon: <FaMedal /> }
  ]

  const badges = ["🏆", "🔥", "🎯", "🧠", "💎", "🚀"]

  return (
    <div className={`${darkMode ? "bg-gray-900" : "bg-gray-100"} min-h-screen flex flex-col justify-center items-center px-4 py-12 transition-colors duration-500`}>
      <div className={`relative max-w-sm w-full rounded-xl shadow-lg overflow-hidden border 
          ${darkMode ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}`}>

        <button
          onClick={() => setDarkMode(!darkMode)}
          className={`absolute top-4 right-4 p-2 rounded-full focus:outline-none 
            ${darkMode ? "bg-yellow-400 text-gray-900 hover:bg-yellow-300" : "bg-gray-800 text-yellow-400 hover:bg-gray-700"}`}
          aria-label="Toggle dark mode"
        >
          {darkMode ? <FaSun size={24} /> : <FaMoon size={24} />}
        </button>

        <div className="p-6 text-center space-y-6">
          <img
            src="https://i.pravatar.cc/150?img=12"
            alt="Avatar"
            className={`w-24 h-24 mx-auto rounded-full border-4 mb-4 ${darkMode ? "border-blue-700" : "border-blue-200"}`}
          />

          <div className="space-y-2">
            <h2 className={`text-xl font-semibold ${darkMode ? "text-gray-100" : "text-gray-800"}`}>
              BÉKAAAAA
            </h2>
            <div>
              <div className={`inline-block px-3 py-1 rounded-full text-xs font-semibold 
                ${darkMode
                  ? (isPremium ? "bg-green-600 text-white" : "bg-gray-600 text-gray-200")
                  : (isPremium ? "bg-green-200 text-green-800" : "bg-blue-200 text-blue-800")}`}>
                {isPremium ? "Premium Account" : "Free Account"}
              </div>
            </div>
            <p className={`text-sm ${darkMode ? "text-gray-400" : "text-gray-500"}`}>
              Active | Male | 23.05.1992
            </p>
          </div>

          <div className="flex justify-center items-center space-x-2">
            <p className={`text-sm font-medium flex items-center space-x-1`} style={{ color: colorMap[activityColor] }}>
              <span>Activity Level: {activityLevel}%</span>
              <span className="text-xl">{activityEmoji}</span>
              {celebrationEmoji && <span className="text-xl ml-1">{celebrationEmoji}</span>}
            </p>
          </div>

          <div className="flex justify-center space-x-1 mb-4">
            {[0, 1, 2, 3].map(i => (
              <div
                key={i}
                className="w-8 h-1 rounded-full"
                style={getBlockStyle(i)}
              />
            ))}
          </div>

          {/* Badge szekció */}
          <div className={`rounded-lg p-4 ${darkMode ? "bg-blue-900" : "bg-blue-200"}`}>
            <h3 className={`text-sm font-bold mb-2 ${darkMode ? "text-white" : "text-blue-800"}`}>Badge-ek</h3>
            <div className="flex justify-center flex-wrap gap-2">
              {badges.map((badge, i) => (
                <span key={i} className="text-xl">
                  {badge}
                </span>
              ))}
            </div>
          </div>

          {/* Statisztikák */}
          <div className={`flex flex-wrap justify-around items-center rounded-lg py-6 mt-4 text-white ${darkMode ? "bg-blue-700" : "bg-blue-500"}`}>
            {stats.map((s, i) => (
              <div key={i} className="text-center px-2 w-1/2 sm:w-1/4 mb-4">
                <div className="mb-1 flex justify-center">{s.icon}</div>
                <p className="text-sm font-semibold">{s.value}</p>
                <p className="text-xs">{s.label}</p>
              </div>
            ))}
          </div>

          <p className={`text-xs mb-4 ${darkMode ? "text-gray-400" : "text-gray-500"}`}>
            Gyere és játsz velünk!
          </p>

          <div className={`flex justify-center gap-6 text-2xl ${darkMode ? "text-blue-400" : "text-blue-600"}`}>
            <FaFacebookF className="cursor-pointer hover:text-blue-600" />
            <FaTwitter className="cursor-pointer hover:text-sky-400 hover:text-sky-500" />
            <FaDribbble className="cursor-pointer hover:text-pink-400" />
          </div>
        </div>
      </div>
    </div>
  )
}

export default ProfileCard


import UserProfile from "../../components/Userdetails/Userdetails.jsx"

