import { Link } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'

type Props = { onClose: () => void }

function ProfileField({ label, value }: { label: string; value: string }) {
  return (
    <div className="profile-modal-row">
      <div className="profile-modal-dt">{label}</div>
      <p className="profile-modal-dd">{value || '—'}</p>
    </div>
  )
}

export function ProfileModal({ onClose }: Props) {
  const { user } = useAuth()

  return (
    <div className="modal-overlay" role="dialog" aria-modal aria-labelledby="profile-modal-title">
      <div className="modal-box modal-box--profile">
        <h2 id="profile-modal-title">Profile</h2>
        {!user ? (
          <>
            <p className="profile-modal-lead">
              You’re not signed in. Profile details appear here after you create an account or sign in
              (the same information you enter on registration: email and name).
            </p>
            <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end', flexWrap: 'wrap' }}>
              <Link to="/auth" className="btn btn-primary" onClick={onClose}>
                Sign in / Create account
              </Link>
              <button type="button" className="btn btn-secondary" onClick={onClose}>
                Close
              </button>
            </div>
          </>
        ) : (
          <>
            <p className="profile-modal-lead">
              Information stored with your account (from sign-up and saved on the server). Your password
              is never shown.
            </p>
            <div className="profile-modal-details">
              <ProfileField label="Email" value={user.email} />
              <ProfileField label="First name" value={user.firstName} />
              <ProfileField label="Last name" value={user.lastName} />
              <div className="profile-modal-row">
                <div className="profile-modal-dt">Account ID</div>
                <p className="profile-modal-dd profile-modal-dd--mono">{user.id}</p>
              </div>
            </div>
            <p className="profile-modal-hint">
              To change your name, email, or password, open <strong>Account</strong> from the menu.
            </p>
            <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end' }}>
              <button type="button" className="btn btn-secondary" onClick={onClose}>
                Close
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  )
}