import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { Page } from './_util';
import { useTranslation } from '../i18n/useTranslation';
import { fetchPendingUploadsSummary, type PendingUpload } from '../services/pendingUploadsApi';
import { Button } from '@/components/ui/button';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Image as ImageIcon, Loader2, RefreshCcw } from 'lucide-react';
import { useEventBranding } from '../context/EventBrandingContext';

export default function UploadQueuePage() {
  const { t, locale } = useTranslation();
  const { token } = useParams<{ token?: string }>();
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  const { branding } = useEventBranding();
  const bodyFont = branding.typography?.body ?? branding.fontFamily ?? undefined;
  const [pending, setPending] = useState<PendingUpload[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const showSuccess = searchParams.get('uploaded') === 'true';
  const buttonStyle = branding.buttons?.style ?? 'filled';
  const linkColor = branding.buttons?.linkColor ?? branding.secondaryColor;
  const radius = branding.buttons?.radius ?? 12;

  const formatter = useMemo(
    () => new Intl.DateTimeFormat(locale, { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' }),
    [locale],
  );

  const formatTimestamp = useCallback((value?: string | null) => {
    if (!value) {
      return t('pendingUploads.card.justNow');
    }
    const date = new Date(value);
    if (Number.isNaN(date.getTime())) {
      return t('pendingUploads.card.justNow');
    }
    return formatter.format(date);
  }, [formatter, t]);

  const loadPendingUploads = useCallback(async () => {
    if (!token) return;
    try {
      setLoading(true);
      setError(null);
      const result = await fetchPendingUploadsSummary(token, 12);
      setPending(result.items);
    } catch (err) {
      console.error('Pending uploads load failed', err);
      setError(t('pendingUploads.error'));
    } finally {
      setLoading(false);
    }
  }, [t, token]);

  useEffect(() => {
    if (!token) return;
    loadPendingUploads();
  }, [loadPendingUploads, token]);

  const emptyState = !loading && pending.length === 0;

  return (
    <Page title={t('pendingUploads.title')}>
      <div className="space-y-4" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
        <p className="text-sm text-muted-foreground">{t('pendingUploads.subtitle')}</p>

        {showSuccess && (
          <Alert className="border-amber-300/70 bg-amber-50/80 text-amber-900 dark:border-amber-400/40 dark:bg-amber-500/10 dark:text-amber-50">
            <AlertDescription>
              <p className="text-sm font-semibold">{t('pendingUploads.successTitle')}</p>
              <p className="text-xs">{t('pendingUploads.successBody')}</p>
            </AlertDescription>
          </Alert>
        )}

        {error && (
          <Alert variant="destructive">
            <AlertDescription className="text-sm">{error}</AlertDescription>
          </Alert>
        )}

        <div className="flex flex-wrap items-center gap-2">
          <Button
            size="sm"
            onClick={() => {
              if (token) {
                navigate(`/e/${encodeURIComponent(token)}/upload`);
              }
            }}
            style={buttonStyle === 'outline'
              ? { borderRadius: radius, background: 'transparent', color: linkColor, border: `1px solid ${linkColor}` }
              : { borderRadius: radius }}
          >
            {t('pendingUploads.cta')}
          </Button>
          <Button
            size="sm"
            variant="secondary"
            onClick={loadPendingUploads}
            disabled={loading}
            style={buttonStyle === 'outline'
              ? { borderRadius: radius, background: 'transparent', color: linkColor, border: `1px solid ${linkColor}` }
              : { borderRadius: radius }}
          >
            <RefreshCcw className="mr-2 h-4 w-4" />
            {t('pendingUploads.refresh')}
          </Button>
        </div>

        {loading ? (
          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            <Loader2 className="h-4 w-4 animate-spin" />
            {t('pendingUploads.loading', 'Lade Uploads...')}
          </div>
        ) : (
          <div className="grid gap-3">
            {pending.map((photo) => (
              <div
                key={photo.id}
                className="flex items-center gap-3 rounded-xl border border-white/10 bg-white/90 p-3 shadow-sm dark:border-white/10 dark:bg-white/5"
              >
                <div className="h-16 w-16 overflow-hidden rounded-lg bg-slate-200/70 dark:bg-white/10">
                  {photo.thumbnail_url ? (
                    <img src={photo.thumbnail_url} alt="" className="h-full w-full object-cover" />
                  ) : (
                    <div className="flex h-full w-full items-center justify-center text-slate-500 dark:text-white/50">
                      <ImageIcon className="h-6 w-6" />
                    </div>
                  )}
                </div>
                <div className="flex-1">
                  <p className="text-sm font-semibold">{t('pendingUploads.card.pending')}</p>
                  <p className="text-xs text-muted-foreground">
                    {t('pendingUploads.card.uploadedAt').replace('{time}', formatTimestamp(photo.created_at))}
                  </p>
                </div>
              </div>
            ))}

            {emptyState && (
              <div className="rounded-2xl border border-dashed border-white/20 bg-white/80 p-6 text-center text-sm text-muted-foreground dark:border-white/10 dark:bg-white/5">
                <p className="font-semibold text-foreground">{t('pendingUploads.emptyTitle')}</p>
                <p className="mt-2 text-xs text-muted-foreground">{t('pendingUploads.emptyBody')}</p>
              </div>
            )}
          </div>
        )}
      </div>
    </Page>
  );
}