import React, { useState } from 'react';
import { Avatar } from '../leads/leadUi';
import { useToast } from '../Toast';
import { compressImage, formatBytes } from '../../lib/imageCompress';

interface AvatarPickerProps {
  /** Data-URL oder externe URL; '' = kein Bild. */
  value: string;
  onChange: (value: string) => void;
  /** Fallback, solange kein Bild gesetzt ist. */
  initials: string;
  size?: 'sm' | 'md' | 'lg';
  removeLabel?: string;
}

/**
 * Foto-Upload mit Vorschau - genutzt fuer Kontakte und Benutzer. Das Bild wird
 * im Browser auf ein Quadrat verkleinert, bevor es hochgeladen wird; damit
 * bleiben die Data-URLs in der Datenbank klein.
 */
export const AvatarPicker: React.FC<AvatarPickerProps> = ({
  value,
  onChange,
  initials,
  size = 'lg',
  removeLabel = 'Foto entfernen',
}) => {
  const { addToast } = useToast();
  const [isBusy, setIsBusy] = useState(false);

  const handleUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    // Zuruecksetzen, damit dieselbe Datei nach einem Entfernen erneut gewaehlt
    // werden kann.
    event.target.value = '';
    if (!file) return;

    setIsBusy(true);
    try {
      const result = await compressImage(file);
      onChange(result.dataUrl);
      addToast(
        `Foto übernommen (${formatBytes(result.sourceBytes)} → ${formatBytes(result.resultBytes)}).`,
        'success'
      );
    } catch (err) {
      addToast(err instanceof Error ? err.message : 'Das Bild konnte nicht verarbeitet werden.', 'error');
    } finally {
      setIsBusy(false);
    }
  };

  return (
    <div className="flex flex-col items-center gap-3">
      <div className="group relative">
        <Avatar src={value || null} initials={initials} size={size} />
        <label
          className={`absolute inset-0 flex cursor-pointer items-center justify-center rounded-xl bg-ink-950/45 text-[10px] font-extrabold uppercase tracking-wider text-white transition ${
            isBusy ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
          }`}
        >
          {isBusy ? (
            <span className="h-5 w-5 animate-spin rounded-full border-2 border-white/40 border-t-white" />
          ) : (
            'Ändern'
          )}
          <input
            type="file"
            accept="image/*"
            disabled={isBusy}
            className="hidden"
            onChange={handleUpload}
          />
        </label>
      </div>
      {value && !isBusy && (
        <button
          type="button"
          onClick={() => onChange('')}
          className="text-[10px] font-bold uppercase tracking-wider text-ink-400 transition hover:text-red-600"
        >
          {removeLabel}
        </button>
      )}
    </div>
  );
};