import React, { useState, useEffect } from "react";
import axios from "axios";
import Navbar from "../../components/nav/Navbar.jsx";
import styles from "./Stats.module.css";

const Stats = () => {
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    const fetchCurrentUser = async () => {
      try {
        const response = await axios.get("http://localhost:8080/api/auth/me", {
          withCredentials: true,
        });
        setUserData(response.data);
      } catch (err) {
        setError("Не успеавме да ги вчитаме податоците за корисникот.");
        console.error("Auth error:", err);
      } finally {
        setLoading(false);
      }
    };

    fetchCurrentUser();
  }, []);

  if (loading) return <div className={styles.statsWrapper}>Вчитување...</div>;

  return (
    <>
      <Navbar />
      <div className={styles.statsWrapper}>
        <div className={styles.statsCard}>
          <h2 className={styles.statsHeader}>Мој Профил / Статистика</h2>

          {error ? (
            <p style={{ color: "red" }}>{error}</p>
          ) : (
            <>
              <div className={styles.infoGroup}>
                <span className={styles.label}>Ид:</span>
                <span className={styles.value}>{userData?.id}</span>
              </div>

              <div className={styles.infoGroup}>
                <span className={styles.label}>Е-пошта:</span>
                <span className={styles.value}>{userData?.email}</span>
              </div>
              <div className={styles.infoGroup}>
                <span className={styles.label}>Wallet:</span>
                <span className={styles.value}>{userData?.saved_wallet}</span>
              </div>

              <div className={styles.infoGroup}>
                <span className={styles.label}>Вашите улоги во системот:</span>
                <div>
                  {userData?.roles?.map((role, index) => (
                    <span key={index} className={styles.roleBadge}>
                      {role.authority || role}
                    </span>
                  ))}
                </div>
              </div>
            </>
          )}
        </div>
      </div>
    </>
  );
};

export default Stats;