import React from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { Camera, Loader2, Sparkles, Trash2, AlertTriangle, ShoppingCart } from 'lucide-react';

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import toast from 'react-hot-toast';
import { AddonsPicker } from '../components/Addons/AddonsPicker';
import { AddonSummaryList } from '../components/Addons/AddonSummaryList';
import { getAddonCatalog, getEvent, type EventAddonCatalogItem, type EventAddonSummary } from '../api';

import { AdminLayout } from '../components/AdminLayout';
import { createEventAddonCheckout, deletePhoto, featurePhoto, getEventPhotos, TenantPhoto, unfeaturePhoto } from '../api';
import { isAuthError } from '../auth/tokens';
import { getApiErrorMessage, isApiError } from '../lib/apiError';
import { buildLimitWarnings, type EventLimitSummary } from '../lib/limitWarnings';
import { useTranslation } from 'react-i18next';
import { ADMIN_EVENTS_PATH, ADMIN_EVENT_VIEW_PATH } from '../constants';

export default function EventPhotosPage() {
  const params = useParams<{ slug?: string }>();
  const [searchParams] = useSearchParams();
  const slug = params.slug ?? searchParams.get('slug') ?? null;
  const navigate = useNavigate();
  const { t } = useTranslation('management');
  const { t: tCommon } = useTranslation('common');
  const translateLimits = React.useCallback(
    (key: string, options?: Record<string, unknown>) => tCommon(`limits.${key}`, options),
    [tCommon]
  );

  const [photos, setPhotos] = React.useState<TenantPhoto[]>([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState<string | undefined>(undefined);
  const [busyId, setBusyId] = React.useState<number | null>(null);
  const [limits, setLimits] = React.useState<EventLimitSummary | null>(null);
  const [addons, setAddons] = React.useState<EventAddonCatalogItem[]>([]);
  const [catalogError, setCatalogError] = React.useState<string | undefined>(undefined);
  const [searchParams, setSearchParams] = React.useState(() => new URLSearchParams(window.location.search));
  const [eventAddons, setEventAddons] = React.useState<EventAddonSummary[]>([]);

  const load = React.useCallback(async () => {
    if (!slug) {
      setLoading(false);
      return;
    }
    setLoading(true);
    setError(undefined);
    try {
      const [photoResult, eventData, catalog] = await Promise.all([
        getEventPhotos(slug),
        getEvent(slug),
        getAddonCatalog(),
      ]);
      setPhotos(photoResult.photos);
      setLimits(photoResult.limits ?? null);
      setEventAddons(eventData.addons ?? []);
      setAddons(catalog);
      setCatalogError(undefined);
    } catch (err) {
      if (!isAuthError(err)) {
        setError(getApiErrorMessage(err, 'Fotos konnten nicht geladen werden.'));
      }
    } finally {
      setLoading(false);
    }
  }, [slug]);

  React.useEffect(() => {
    load();
  }, [load]);

  React.useEffect(() => {
    const success = searchParams.get('addon_success');
    if (success && slug) {
      toast(translateLimits('addonApplied', { defaultValue: 'Add-on angewendet. Limits aktualisieren sich in Kürze.' }));
      void load();
      const params = new URLSearchParams(searchParams);
      params.delete('addon_success');
      setSearchParams(params);
      navigate(window.location.pathname, { replace: true });
    }
  }, [searchParams, slug, load, navigate, translateLimits]);

  async function handleToggleFeature(photo: TenantPhoto) {
    if (!slug) return;
    setBusyId(photo.id);
    try {
      const updated = photo.is_featured
        ? await unfeaturePhoto(slug, photo.id)
        : await featurePhoto(slug, photo.id);
      setPhotos((prev) => prev.map((entry) => (entry.id === photo.id ? updated : entry)));
    } catch (err) {
      if (!isAuthError(err)) {
        setError(getApiErrorMessage(err, 'Feature-Aktion fehlgeschlagen.'));
      }
    } finally {
      setBusyId(null);
    }
  }

  async function handleDelete(photo: TenantPhoto) {
    if (!slug) return;
    setBusyId(photo.id);
    try {
      await deletePhoto(slug, photo.id);
      setPhotos((prev) => prev.filter((entry) => entry.id !== photo.id));
    } catch (err) {
      if (!isAuthError(err)) {
        setError(getApiErrorMessage(err, 'Foto konnte nicht entfernt werden.'));
      }
    } finally {
      setBusyId(null);
    }
  }

  if (!slug) {
    return (
      <AdminLayout title="Fotos moderieren" subtitle="Bitte wähle ein Event aus der Übersicht." actions={null}>
        <Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
          <CardContent className="p-6 text-sm text-slate-600">
            Kein Slug in der URL gefunden. Kehre zur Event-Liste zurück und wähle dort ein Event aus.
            <Button className="mt-4" onClick={() => navigate(ADMIN_EVENTS_PATH)}>
              Zurück zur Liste
            </Button>
          </CardContent>
        </Card>
      </AdminLayout>
    );
  }

  const actions = (
    <Button
      variant="outline"
      onClick={() => slug && navigate(ADMIN_EVENT_VIEW_PATH(slug))}
      className="border-pink-200 text-pink-600 hover:bg-pink-50"
    >
      Zurück zum Event
    </Button>
  );

  return (
    <AdminLayout
      title={t('photos.moderation.title', 'Fotos moderieren')}
      subtitle={t('photos.moderation.subtitle', 'Setze Highlights oder entferne unpassende Uploads.')}
      actions={actions}
    >
      {error && (
        <Alert variant="destructive">
          <AlertTitle>{t('photos.alerts.errorTitle', 'Aktion fehlgeschlagen')}</AlertTitle>
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

      <LimitWarningsBanner limits={limits} translate={translateLimits} eventSlug={slug} addons={addons} />

      {eventAddons.length > 0 && (
        <Card className="mb-6 border-0 bg-white/85 shadow-lg shadow-slate-100/50">
          <CardHeader>
            <CardTitle className="text-base font-semibold text-slate-900">{t('events.sections.addons.title', 'Add-ons & Upgrades')}</CardTitle>
            <CardDescription>{t('events.sections.addons.description', 'Zusätzliche Kontingente für dieses Event.')}</CardDescription>
          </CardHeader>
          <CardContent>
            <AddonSummaryList addons={eventAddons} t={(key, fallback) => t(key as any, fallback)} />
          </CardContent>
        </Card>
      )}

      <Card className="border-0 bg-white/85 shadow-xl shadow-sky-100/60">
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
            <Camera className="h-5 w-5 text-sky-500" /> {t('photos.gallery.title', 'Galerie')}
          </CardTitle>
          <CardDescription className="text-sm text-slate-600">
            {t('photos.gallery.description', 'Klick auf ein Foto, um es hervorzuheben oder zu löschen.')}
          </CardDescription>
        </CardHeader>
        <CardContent>
          {loading ? (
            <GallerySkeleton />
          ) : photos.length === 0 ? (
            <EmptyGallery
              title={t('photos.gallery.emptyTitle', 'Noch keine Fotos vorhanden')}
              description={t('photos.gallery.emptyDescription', 'Motiviere deine Gäste zum Hochladen - hier erscheint anschließend die Galerie.')}
            />
          ) : (
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
              {photos.map((photo) => (
                <div key={photo.id} className="rounded-2xl border border-white/80 bg-white/90 p-3 shadow-sm">
                  <div className="relative overflow-hidden rounded-xl">
                    <img src={photo.thumbnail_url ?? photo.url ?? undefined} alt={photo.original_name ?? 'Foto'} className="aspect-square w-full object-cover" />
                    {photo.is_featured && (
                      <span className="absolute left-3 top-3 rounded-full bg-pink-500/90 px-3 py-1 text-xs font-semibold text-white shadow">
                        Featured
                      </span>
                    )}
                  </div>
                  <div className="mt-3 flex flex-col gap-2 text-sm text-slate-700">
                    <div className="flex items-center justify-between text-xs text-slate-500">
                      <span>Likes: {photo.likes_count}</span>
                      <span>Uploader: {photo.uploader_name ?? 'Unbekannt'}</span>
                    </div>
                    <div className="flex flex-wrap gap-2">
                      <Button
                        size="sm"
                        variant="outline"
                        className="border-fuchsia-200 text-fuchsia-700 hover:bg-fuchsia-50"
                        onClick={() => handleToggleFeature(photo)}
                        disabled={busyId === photo.id}
                      >
                        {busyId === photo.id ? <Loader2 className="h-4 w-4 animate-spin" /> : <Sparkles className="h-4 w-4" />}
                        {photo.is_featured ? 'Featured entfernen' : 'Als Highlight setzen'}
                      </Button>
                      <Button
                        size="sm"
                        variant="destructive"
                        onClick={() => handleDelete(photo)}
                        disabled={busyId === photo.id}
                      >
                        {busyId === photo.id ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
                        Löschen
                      </Button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </AdminLayout>
  );
}

function LimitWarningsBanner({
  limits,
  translate,
  eventSlug,
  addons,
}: {
  limits: EventLimitSummary | null;
  translate: (key: string, options?: Record<string, unknown>) => string;
  eventSlug: string | null;
  addons: EventAddonCatalogItem[];
}) {
  const warnings = React.useMemo(() => buildLimitWarnings(limits, translate), [limits, translate]);
  const [busyScope, setBusyScope] = React.useState<string | null>(null);

  const handleCheckout = React.useCallback(
    async (scopeOrKey: 'photos' | 'gallery' | string) => {
      if (!eventSlug) return;
      const scope = scopeOrKey === 'gallery' || scopeOrKey === 'photos' ? scopeOrKey : (scopeOrKey.includes('gallery') ? 'gallery' : 'photos');
      setBusyScope(scope);
      const addonKey = scopeOrKey === 'photos' || scopeOrKey === 'gallery'
        ? (() => {
            const fallbackKey = scope === 'photos' ? 'extra_photos_500' : 'extend_gallery_30d';
            const candidates = addons.filter((addon) => addon.price_id && addon.key.includes(scope === 'photos' ? 'photos' : 'gallery'));
            return candidates[0]?.key ?? fallbackKey;
          })()
        : scopeOrKey;
      try {
        const currentUrl = window.location.origin + window.location.pathname;
        const successUrl = `${currentUrl}?addon_success=1`;
        const checkout = await createEventAddonCheckout(eventSlug, {
          addon_key: addonKey,
          quantity: 1,
          success_url: successUrl,
          cancel_url: currentUrl,
        });
        if (checkout.checkout_url) {
          window.location.href = checkout.checkout_url;
        }
      } catch (err) {
        toast(getApiErrorMessage(err, 'Checkout fehlgeschlagen.'));
      } finally {
        setBusyScope(null);
      }
    },
    [eventSlug, addons],
  );

  if (!warnings.length) {
    return null;
  }

  return (
    <div className="mb-6 space-y-2">
      {warnings.map((warning) => (
        <Alert
          key={warning.id}
          variant={warning.tone === 'danger' ? 'destructive' : 'default'}
          className={warning.tone === 'warning' ? 'border-amber-400/40 bg-amber-50 text-amber-900' : undefined}
        >
          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <AlertDescription className="flex items-center gap-2 text-sm">
              <AlertTriangle className="h-4 w-4" />
              {warning.message}
            </AlertDescription>
            {warning.scope === 'photos' || warning.scope === 'gallery' ? (
              <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => { void handleCheckout(warning.scope as 'photos' | 'gallery'); }}
                  disabled={busyScope === warning.scope}
                >
                  <ShoppingCart className="mr-2 h-4 w-4" />
                  {warning.scope === 'photos'
                    ? translate('buyMorePhotos', { defaultValue: 'Mehr Fotos freischalten' })
                    : translate('extendGallery', { defaultValue: 'Galerie verlängern' })}
                </Button>
                <div className="text-xs text-slate-500">
                  <AddonsPicker
                    addons={addons}
                    scope={warning.scope as 'photos' | 'gallery'}
                    onCheckout={(key) => { void handleCheckout(key); }}
                    busy={busyScope === warning.scope}
                    t={(key, fallback) => translate(key, { defaultValue: fallback })}
                  />
                </div>
              </div>
            ) : null}
          </div>
        </Alert>
      ))}
    </div>
  );
}

function GallerySkeleton() {
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
      {Array.from({ length: 6 }).map((_, index) => (
        <div key={index} className="aspect-square animate-pulse rounded-2xl bg-gradient-to-r from-white/40 via-white/60 to-white/40" />
      ))}
    </div>
  );
}

function EmptyGallery({ title, description }: { title: string; description: string }) {
  return (
    <div className="flex flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-sky-200 bg-white/70 p-10 text-center">
      <div className="rounded-full bg-sky-100 p-3 text-sky-600 shadow-inner shadow-sky-200/80">
        <Camera className="h-5 w-5" />
      </div>
      <h3 className="text-lg font-semibold text-slate-900">{title}</h3>
      <p className="text-sm text-slate-600">{description}</p>
    </div>
  );
}