import React, { useRef } from 'react';
import { IonIcon } from '@ionic/react';
import { camera, personOutline } from 'ionicons/icons';

interface AvatarPickerProps {
  previewUrl: string | null;
  onFileChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  initials?: string;
  disabled?: boolean;
}

const AvatarPicker: React.FC<AvatarPickerProps> = ({
  previewUrl,
  onFileChange,
  initials,
  disabled = false,
}) => {
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleClick = () => {
    if (!disabled) {
      fileInputRef.current?.click();
    }
  };

  return (
    <div
      className="avatar-picker-container"
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        margin: '8px 0 4px',
      }}
    >
      <button
        type="button"
        aria-label={previewUrl ? 'Change photo' : 'Add photo'}
        onClick={handleClick}
        disabled={disabled}
        style={{
          position: 'relative',
          width: '96px',
          height: '96px',
          padding: 0,
          border: 'none',
          background: 'transparent',
          cursor: disabled ? 'not-allowed' : 'pointer',
          opacity: disabled ? 0.6 : 1,
        }}
      >
        <div
          className="avatar-preview-circle"
          style={{
            width: '88px',
            height: '88px',
            margin: '0 auto',
            borderRadius: '24px',
            backgroundColor: previewUrl
              ? 'transparent'
              : 'rgba(109,40,217,0.10)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            overflow: 'hidden',
          }}
        >
          {previewUrl ? (
            <img
              src={previewUrl}
              alt="Avatar preview"
              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
            />
          ) : initials ? (
            <span
              style={{ fontSize: '28px', fontWeight: '700', color: '#6d28d9' }}
            >
              {initials}
            </span>
          ) : (
            <IonIcon
              icon={personOutline}
              style={{ fontSize: '32px', color: '#6d28d9' }}
            />
          )}
        </div>

        <div
          style={{
            position: 'absolute',
            right: '0px',
            bottom: '0px',
            width: '36px',
            height: '36px',
            borderRadius: '12px',
            background: '#ffffff',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 8px 16px rgba(109, 40, 217, 0.15)',
          }}
        >
          <IonIcon
            icon={camera}
            style={{ fontSize: '20px', color: '#6d28d9' }}
          />
        </div>
      </button>
      <input
        ref={fileInputRef}
        type="file"
        accept="image/*"
        onChange={onFileChange}
        disabled={disabled}
        style={{ display: 'none' }}
      />
    </div>
  );
};

export default AvatarPicker;