// [REQ F2]  Profil użytkownika – widok danych przez GraphQL (Apollo Client + SchemaLink)
// [REQ D3]  Apollo Client / GraphQL – zapytanie gql, useQuery z Apollo
import { useQuery } from '@apollo/client/react';
import { gql } from '@apollo/client/core';
import { User, Mail, Shield, Calendar, ClipboardList } from 'lucide-react';
import styles from './ProfileView.module.scss';

const GET_USER_PROFILE = gql`
  query GetUserProfile($id: ID!) {
    userProfile(id: $id) {
      id
      name
      email
      role
      joinedAt
      reservationsCount
      avatarUrl
    }
  }
`;

// The mock schema returns deterministic data regardless of ID.
const ProfileView = ({ userId = '1' }) => {
  const { data, loading, error } = useQuery(GET_USER_PROFILE, {
    variables: { id: userId },
  });

  if (loading) return <p className={styles['profile__state']}>Loading profile…</p>;
  if (error)   return <p className={[styles['profile__state'], styles['profile__state--error']].join(' ')}>Failed to load profile: {error.message}</p>;

  const p = data.userProfile;

  return (
    <div className={styles['profile']}>
      <div className={styles['profile__banner']}>
        <img src={p.avatarUrl} alt={p.name} className={styles['profile__avatar']} />
        <div>
          <h3 className={styles['profile__name']}>{p.name}</h3>
          <span className={[
            styles['profile__role-badge'],
            styles[`profile__role-badge--${p.role}`],
          ].join(' ')}>
            {p.role}
          </span>
        </div>
      </div>

      <ul className={styles['profile__list']}>
        <li className={styles['profile__item']}>
          <Mail size={15} className={styles['profile__item-icon']} />
          <span className={styles['profile__item-label']}>Email</span>
          <span className={styles['profile__item-value']}>{p.email}</span>
        </li>
        <li className={styles['profile__item']}>
          <Shield size={15} className={styles['profile__item-icon']} />
          <span className={styles['profile__item-label']}>Role</span>
          <span className={styles['profile__item-value']}>{p.role}</span>
        </li>
        <li className={styles['profile__item']}>
          <Calendar size={15} className={styles['profile__item-icon']} />
          <span className={styles['profile__item-label']}>Member since</span>
          <span className={styles['profile__item-value']}>{p.joinedAt}</span>
        </li>
        <li className={styles['profile__item']}>
          <ClipboardList size={15} className={styles['profile__item-icon']} />
          <span className={styles['profile__item-label']}>Total reservations</span>
          <span className={styles['profile__item-value']}>{p.reservationsCount}</span>
        </li>
      </ul>

      <p className={styles['profile__footer']}>
        <User size={12} /> Data served via Apollo Client + GraphQL mock (no backend)
      </p>
    </div>
  );
};

export default ProfileView;
