// Avatar picker — emoji presets + custom photo upload

function AvatarPicker({ open, onClose, currentFace, currentImage, onSelectFace, onSelectImage }) {
  const fileRef = React.useRef(null);
  if (!open) return null;

  const handleUpload = (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (ev) => {
      onSelectImage(ev.target.result);
      onClose();
    };
    reader.readAsDataURL(file);
  };

  const emojis = ['😎', '🤓', '🙂', '🤩', '😊', '😤', '👩‍💻', '🧑‍💻', '🙋', '🚀', '🌟', '🦄'];

  return (
    <>
      <div className="avatar-picker-backdrop" onClick={onClose} />
      <div className="avatar-picker" role="dialog" aria-label="Choose your avatar">
        <div className="avatar-picker-header">
          <div className="avatar-picker-title">Choose your avatar</div>
          <button className="avatar-picker-close" onClick={onClose} aria-label="Close avatar picker">
            <Icon.Close />
          </button>
        </div>

        {/* Upload photo */}
        <button
          className="avatar-picker-upload"
          onClick={() => fileRef.current?.click()}
        >
          <div className="avatar-picker-upload-icon">
            {currentImage ? (
              <img src={currentImage} alt="" />
            ) : (
              <Icon.Upload />
            )}
          </div>
          <div className="avatar-picker-upload-text">
            <div>{currentImage ? 'Replace your photo' : 'Upload a photo'}</div>
            <div className="avatar-picker-upload-sub">PNG, JPG · used across your roadmap</div>
          </div>
        </button>
        <input
          ref={fileRef}
          type="file"
          accept="image/png,image/jpeg,image/webp"
          onChange={handleUpload}
          style={{ display: 'none' }}
          aria-label="Upload avatar photo"
        />

        <div className="avatar-picker-divider">or pick an emoji</div>

        <div className="avatar-picker-grid">
          {emojis.map((e) => (
            <button
              key={e}
              className={`avatar-picker-emoji ${currentFace === e && !currentImage ? 'active' : ''}`}
              onClick={() => { onSelectFace(e); onClose(); }}
              aria-label={`Select ${e} as your avatar`}
            >
              <span>{e}</span>
            </button>
          ))}
        </div>

        {currentImage && (
          <button
            className="avatar-picker-clear"
            onClick={() => { onSelectImage(null); onClose(); }}
          >
            Remove uploaded photo
          </button>
        )}
      </div>
    </>
  );
}

window.AvatarPicker = AvatarPicker;