/**
 * User profile page.
 *
 * ✅ YOUR CODE - Safe to modify, will not be overwritten.
 * This file was generated once by Prism and is yours to customize.
 */

import React from 'react';
import type { JSX } from 'react';
import { Link } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

interface UserProfile {
  {{ username_field }}: string;
{% if username_field != 'email' %}  email?: string;
{% endif %}
  roles?: string | string[];
}

export default function ProfilePage(): JSX.Element {
  const { user: rawUser } = useAuth();
  const user = rawUser as UserProfile | null;

  if (!user) {
    return (
      <div className="page-container">
        <div className="card p-8 text-center">
          <p className="text-muted">Loading profile...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="page-container">
      <header className="page-header">
        <h1 className="page-title">Profile</h1>
        <p className="page-subtitle">Your account information</p>
      </header>

      <div className="card p-6 space-y-6">
        <div className="flex items-center gap-4">
          <div className="w-16 h-16 bg-surface-sunken rounded-full flex items-center justify-center">
            <span className="text-2xl font-semibold text-muted-foreground">
              {(user.{{ username_field }} || 'U').charAt(0).toUpperCase()}
            </span>
          </div>
          <div>
            <h2 className="text-lg font-semibold text-foreground">
              {user.{{ username_field }} || 'User'}
            </h2>
            {user.roles && (
              <p className="text-sm text-muted">
                {Array.isArray(user.roles)
                  ? user.roles.join(', ')
                  : user.roles}
              </p>
            )}
          </div>
        </div>

        <div className="border-t border-border pt-4 space-y-3">
          <div className="flex justify-between">
            <span className="text-sm text-muted">{{ username_field | capitalize }}</span>
            <span className="text-sm text-foreground">{user.{{ username_field }} || '—'}</span>
          </div>
{% if username_field == 'username' %}
          <div className="flex justify-between">
            <span className="text-sm text-muted">Email</span>
            <span className="text-sm text-foreground">{user.email || '—'}</span>
          </div>
{% endif %}
        </div>

        <div className="border-t border-border pt-4">
          <Link to="/settings" className="btn-secondary">
            Account settings
          </Link>
        </div>
      </div>
    </div>
  );
}
