import { LogoVariant, MAX_LOGO_EDGE, PondBranding } from '@dorfteich/shared';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';

import { CropField } from '../branding/CropField';
import { canvasToPngFile, drawCrop } from '../branding/crop';
import { logoUrl } from '../branding/use-branding';
import { FormError, FormSuccess } from '../components/forms';
import { apiDelete, apiGet, apiPostForm } from '../lib/api';

const FAVICON_SIZES = [32, 180] as const;

/**
 * A pond's own logo and favicon (issue #307).
 *
 * Reuses the instance screen's crop control rather than growing a second,
 * drag-only one: the uploader here is an ordinary Pond Admin, and the
 * keyboard operability is not theirs to lose.
 */
export function PondBrandingSection({ pondId }: { pondId: string }): React.JSX.Element {
  const { t } = useTranslation('branding');
  const queryClient = useQueryClient();

  const branding = useQuery({
    queryKey: ['pond', pondId, 'branding'],
    queryFn: () => apiGet<PondBranding>(`/ponds/${pondId}/branding`),
  });
  const view = branding.data;

  const refresh = async (): Promise<void> => {
    await queryClient.invalidateQueries({ queryKey: ['pond', pondId, 'branding'] });
  };

  return (
    <div className="branding pond-branding">
      <p>{t('pond.intro')}</p>
      <p>{t('pond.quotaNote')}</p>

      <PondLogoSlot
        variant="light"
        pondId={pondId}
        asset={view?.logo ?? null}
        onChanged={refresh}
      />
      <PondLogoSlot
        variant="dark"
        pondId={pondId}
        asset={view?.logoDark ?? null}
        onChanged={refresh}
      />
      {view?.logo && !view.logoDark && (
        // Advisory, exactly as on the instance screen: a pond that uploads
        // only a light logo shows THAT logo in dark mode — it does not borrow
        // the instance's dark one. Nothing is blocked.
        <p className="branding__warning" role="note">
          <span aria-hidden="true">⚠ </span>
          {t('pond.darkMissing')}
        </p>
      )}

      <PondFaviconSlot pondId={pondId} present={Boolean(view?.favicon)} onChanged={refresh} />
    </div>
  );
}

function PondLogoSlot({
  pondId,
  variant,
  asset,
  onChanged,
}: {
  pondId: string;
  variant: LogoVariant;
  asset: { hash: string; width: number; height: number } | null;
  onChanged: () => Promise<void>;
}): React.JSX.Element {
  const { t } = useTranslation('branding');
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const [done, setDone] = useState(false);

  const upload = useMutation({
    mutationFn: async () => {
      const canvas = canvasRef.current;
      if (!canvas) throw new Error('no image');
      const form = new FormData();
      form.append('file', await canvasToPngFile(canvas, `logo-${variant}.png`));
      return apiPostForm<PondBranding>(`/ponds/${pondId}/branding/logo?variant=${variant}`, form);
    },
    onSuccess: async () => {
      setDone(true);
      await onChanged();
    },
  });

  const reset = useMutation({
    mutationFn: () => apiDelete(`/ponds/${pondId}/branding/logo?variant=${variant}`),
    onSuccess: async () => {
      setDone(false);
      await onChanged();
    },
  });

  return (
    <div className="branding__slot" data-pond-logo-variant={variant}>
      <h3>{t(`admin.logo.${variant}`)}</h3>
      <FormError error={upload.error ?? reset.error} />
      <FormSuccess message={done ? t('admin.logo.saved') : null} />
      {asset ? (
        <div className="branding__current">
          <img
            src={logoUrl(variant, asset.hash, pondId)}
            alt={t('admin.logo.currentAlt')}
            className={`branding__preview branding__preview--${variant}`}
          />
          <p>{t('admin.logo.current', { width: asset.width, height: asset.height })}</p>
          {/* A real, labelled control — not an empty file field standing in
              for "remove". */}
          <button
            type="button"
            className="button button--outline"
            onClick={() => reset.mutate()}
            disabled={reset.isPending}
          >
            {t('pond.reset')}
          </button>
        </div>
      ) : (
        <p>{t('pond.inherited')}</p>
      )}
      <CropField
        idPrefix={`pond-logo-${variant}`}
        square={false}
        maxEdge={MAX_LOGO_EDGE}
        onChange={(canvas) => {
          canvasRef.current = canvas;
          setDone(false);
        }}
      />
      <button
        type="button"
        className="button"
        onClick={() => upload.mutate()}
        disabled={upload.isPending}
      >
        {t('admin.logo.submit')}
      </button>
      <p role="status">{upload.isPending ? t('admin.uploading') : ''}</p>
    </div>
  );
}

function PondFaviconSlot({
  pondId,
  present,
  onChanged,
}: {
  pondId: string;
  present: boolean;
  onChanged: () => Promise<void>;
}): React.JSX.Element {
  const { t } = useTranslation('branding');
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const [done, setDone] = useState(false);

  const upload = useMutation({
    mutationFn: async () => {
      const source = canvasRef.current;
      if (!source) throw new Error('no image');
      const form = new FormData();
      for (const size of FAVICON_SIZES) {
        const scratch = document.createElement('canvas');
        drawCrop(
          source,
          { x: 0, y: 0, width: source.width, height: source.height },
          { width: size, height: size },
          scratch,
        );
        form.append(`png-${size}`, await canvasToPngFile(scratch, `favicon-${size}.png`));
      }
      return apiPostForm<PondBranding>(`/ponds/${pondId}/branding/favicon`, form);
    },
    onSuccess: async () => {
      setDone(true);
      await onChanged();
    },
  });

  const reset = useMutation({
    mutationFn: () => apiDelete(`/ponds/${pondId}/branding/favicon`),
    onSuccess: async () => {
      setDone(false);
      await onChanged();
    },
  });

  return (
    <div className="branding__slot" data-branding-slot="pond-favicon">
      <h3>{t('admin.favicon.title')}</h3>
      <p>{t('pond.faviconHint')}</p>
      <FormError error={upload.error ?? reset.error} />
      <FormSuccess message={done ? t('admin.favicon.saved') : null} />
      <p>{present ? t('admin.favicon.present') : t('pond.inherited')}</p>
      {present && (
        <button
          type="button"
          className="button button--outline"
          onClick={() => reset.mutate()}
          disabled={reset.isPending}
        >
          {t('pond.reset')}
        </button>
      )}
      <CropField
        idPrefix="pond-favicon"
        square
        maxEdge={180}
        onChange={(canvas) => {
          canvasRef.current = canvas;
          setDone(false);
        }}
      />
      <button
        type="button"
        className="button"
        onClick={() => upload.mutate()}
        disabled={upload.isPending}
      >
        {t('admin.favicon.submit')}
      </button>
      <p role="status">{upload.isPending ? t('admin.uploading') : ''}</p>
    </div>
  );
}