import { useMutation } from '@tanstack/react-query';
import { useState } from 'react';
import { useErrorText } from '../../shared/lib/errors';
import { useUploadsApi } from './queries';
import { useTranslation } from 'react-i18next';
import { Button, Dialog, Field, FormError } from '../../shared/ui/ui';
import s from '../../pages/page.module.css';
export function BatchEditDialog({ batchId, onClose, onSaved }: { batchId: string; onClose: () => void; onSaved: () => void }) {
  const { t } = useTranslation(['admin', 'common']);
  const api = useUploadsApi();
  const errorText = useErrorText();
  const [artist, setArtist] = useState('');
  const [album, setAlbum] = useState('');
  const [year, setYear] = useState('');
  const [cover, setCover] = useState<string | null | undefined>(undefined);
  const save = useMutation({
    mutationFn: () => api.updateBatch(batchId, {
      ...(artist.trim() ? { artist: artist.trim() } : {}),
      ...(album.trim() ? { album: album.trim() } : {}),
      ...(year.trim() ? { year: Number.parseInt(year, 10) } : {}),
      ...(cover !== undefined ? { cover_base64: cover } : {}),
    }),
    onSuccess: onSaved,
  });
  const pickCover = (file: File | undefined) => {
    if (!file) {
      setCover(undefined);
      return;
    }
    const reader = new FileReader();
    reader.onload = () => {
      const data = String(reader.result ?? '');
      const comma = data.indexOf(',');
      setCover(comma >= 0 ? data.slice(comma + 1) : data);
    };
    reader.readAsDataURL(file);
  };
  return (
    <Dialog
      title={t('uploads.batch_edit_title')}
      onClose={onClose}
      footer={
        <>
          <Button variant="ghost" onClick={onClose}>
            {t('common:form.cancel')}
          </Button>
          <Button variant="primary" busy={save.isPending} onClick={() => save.mutate()}>
            {t('uploads.save')}
          </Button>
        </>
      }
    >
      <div className={s.sessions}>
        <p className={s.note}>{t('uploads.batch_edit_hint')}</p>
        <Field label={t('uploads.meta_artist')} value={artist} onChange={setArtist} maxLength={500} />
        <Field label={t('uploads.meta_album')} value={album} onChange={setAlbum} maxLength={500} />
        <Field label={t('uploads.meta_year')} value={year} inputMode="numeric" onChange={setYear} />
        <label className={s.sessions}>
          <span>{t('uploads.batch_cover')}</span>
          <input type="file" accept="image/jpeg,image/png,image/webp" onChange={(e) => pickCover(e.target.files?.[0])} />
        </label>
        <Button variant="ghost" onClick={() => setCover(null)}>
          {t('uploads.batch_cover_clear')}
        </Button>
        <FormError>{save.error ? errorText(save.error) : null}</FormError>
      </div>
    </Dialog>
  );
}