import { Spinner } from "../ui/spinner";
import { Icon } from "../ui/icon";
import { Card, CardBody } from '../ui/wp-card';
import { DismissibleAlert } from '../ui/dismissible-alert';
import { Flex, FlexItem } from '../ui/flex';
import { Camera, PlusCircle, XCircle, ImageIcon as image } from 'lucide-react';
import './PhotoAttachment.css';
import { PersonBadge } from '../ui/person-badge';
import { Attachment } from 'fhir/r4';
import { ChangeEvent, useState, useRef } from 'react';
import { usePhotoUploadService } from '../../services/PhotoUploadService';
import { usePhotoUrl } from '../../hooks/usePhotoUrl';

interface PhotoAttachmentProps {
    photo?: Attachment;
    description?: string;
    cover?: boolean;
    compact?: boolean;
    onPhotoChange: (photo: Attachment | undefined) => void;
    disabled?: boolean;
    display?: boolean;
    uploadType?: string;
    initialsFor?: string;
}

const PhotoAttachment = ({
                             photo,
                             description,
                             cover = false,
                             compact = false,
                             onPhotoChange,
                             disabled = false,
                             display = false,
                             uploadType = 'profile-picture',
                             initialsFor
                         }: PhotoAttachmentProps) => {
    const [error, setError] = useState<string | null>(null);
    const [uploading, setUploading] = useState(false);
    const fileInputRef = useRef<HTMLInputElement>(null);
    const { uploadPhoto } = usePhotoUploadService();
    const { url: imageUrl } = usePhotoUrl(photo);

    const handleFileSelect = () => {
        if (fileInputRef.current) {
            fileInputRef.current.click();
        }
    };

    const onFileSelected = async (event: ChangeEvent<HTMLInputElement>) => {
        setError(null);

        if (!event.target.files?.[0]) return;
        const file = event.target.files[0];

        if (!file.type.startsWith('image/')) {
            setError('Selected file is not an image.');
            return;
        }

        setUploading(true);
        try {
            const { key, contentType, size } = await uploadPhoto(file, uploadType);

            const newPhoto: Attachment = {
                // Named by key only: the server fills the bytes once this exact upload scans clean.
                contentType,
                url: key,
                title: file.name,
                size,
                creation: new Date().toISOString()
            };

            onPhotoChange(newPhoto);
        } catch (err) {
            setError('Failed to upload the image. Please try again.');
            console.error('Error uploading image:', err);
        } finally {
            setUploading(false);
        }

        if (event.target.value) {
            event.target.value = '';
        }
    };

    const removePhoto = () => {
        onPhotoChange(undefined);
    };

    const isDisabled = disabled || uploading;

    return (
        <Card className={`photo-attachment ${cover ? 'is-cover' : ''}${compact ? ' is-compact' : ''}`}>
            {!photo && cover ? (
                <div className="photo-attachment__placeholder">
                    {uploading ? (
                        <Spinner />
                    ) : (
                        <Icon icon={image} size={48} />
                    )}
                    <p className="photo-attachment__placeholder-text">{display ? 'No photo available' : 'Upload a photo of the service'}</p>
                    {/* `btn-icon-overlay` is what keeps these glyphs at the 32px they render today —
                        see the rule in index.css. The BEM class still carries all the geometry (the
                        40px disc, the absolute placement, the white fill); every one of its
                        declarations is `!important`, so it survives the move to a native button
                        untouched and only the icon size needed a home in the btn vocabulary. */}
                    {!display && (
                        <button type="button"
                                className="btn btn-icon-overlay photo-attachment__upload-button"
                                onClick={handleFileSelect}
                                title={uploading ? 'Uploading...' : 'Add photo'}
                                aria-label={uploading ? 'Uploading...' : 'Add photo'}
                                disabled={isDisabled}>
                            <PlusCircle />
                        </button>
                    )}
                </div>
            ) : (
                <>
                    <div className={cover ? 'photo-attachment__cover-wrapper' : 'photo-attachment__image-wrapper'}>
                        {uploading ? (
                            <div className="photo-attachment__uploading">
                                <Spinner />
                            </div>
                        ) : !photo && initialsFor ? (
                            <PersonBadge name={initialsFor} className="photo-attachment__initials"/>
                        ) : (
                            <img src={imageUrl}
                                 alt={photo?.title || 'Attachment'}
                                 className="photo-attachment__image"/>
                        )}

                        {!display && !cover && (
                            <button type="button"
                                    className={`btn ${compact ? 'btn-icon' : 'btn-icon-overlay'} photo-attachment__upload-button`}
                                    onClick={handleFileSelect}
                                    title={uploading ? 'Uploading...' : 'Change photo'}
                                    aria-label={uploading ? 'Uploading...' : 'Change photo'}
                                    disabled={isDisabled}>
                                {compact ? <Camera /> : <PlusCircle />}
                            </button>
                        )}

                        {!display && photo && !cover && (
                            <button type="button"
                                    className={`btn ${compact ? 'btn-icon' : 'btn-icon-overlay'} photo-attachment__delete-button`}
                                    onClick={removePhoto}
                                    title="Remove photo"
                                    aria-label="Remove photo"
                                    disabled={isDisabled}>
                                <XCircle />
                            </button>
                        )}
                    </div>

                    {!display && cover && (
                        <div className="photo-attachment__cover-controls">
                            <Flex justify="flex-end">
                                <FlexItem>
                                    <button type="button"
                                            className="btn btn-icon-overlay photo-attachment__delete-button"
                                            onClick={removePhoto}
                                            title="Remove photo"
                                            aria-label="Remove photo"
                                            disabled={isDisabled}>
                                        <XCircle />
                                    </button>
                                </FlexItem>
                                <FlexItem>
                                    <button type="button"
                                            className="btn btn-icon-overlay photo-attachment__upload-button"
                                            onClick={handleFileSelect}
                                            title={uploading ? 'Uploading...' : 'Change photo'}
                                            aria-label={uploading ? 'Uploading...' : 'Change photo'}
                                            disabled={isDisabled}>
                                        <PlusCircle />
                                    </button>
                                </FlexItem>
                            </Flex>
                        </div>
                    )}
                </>
            )}

            <CardBody className="photo-attachment__body">
                <input type="file"
                       ref={fileInputRef}
                       onChange={onFileSelected}
                       accept="image/*"
                       className="photo-attachment__file-input"/>

                {error && (
                    <DismissibleAlert status="error" onDismiss={() => setError(null)}>
                        {error}
                    </DismissibleAlert>
                )}

                {description && (
                    <p className="photo-attachment__description">{description}</p>
                )}
            </CardBody>
        </Card>
    );
};

export default PhotoAttachment;