import React from 'react';
import { useParams, Link } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { fetchPhotoShare } from '../services/photosApi';
import { useTranslation } from '../i18n/useTranslation';
import { useToast } from '../components/ToastHost';
import { Loader2 } from 'lucide-react';

interface ShareResponse {
  slug: string;
  expires_at?: string;
  photo: {
    id: number;
    title?: string;
    likes_count?: number;
    emotion?: { name?: string; emoji?: string } | null;
    image_urls: { full: string; thumbnail: string };
  };
  event?: { id: number; name?: string | null } | null;
}

export default function SharedPhotoPage() {
  const { slug } = useParams<{ slug: string }>();
  const { t } = useTranslation();
  const toast = useToast();
  const [state, setState] = React.useState<{
    loading: boolean;
    error: string | null;
    data: ShareResponse | null;
  }>({ loading: true, error: null, data: null });

  React.useEffect(() => {
    let active = true;
    if (!slug) return;

    setState({ loading: true, error: null, data: null });
    fetchPhotoShare(slug)
      .then((data) => {
        if (!active) return;
        setState({ loading: false, error: null, data });
      })
      .catch((error: any) => {
        if (!active) return;
        setState({ loading: false, error: error?.message ?? t('share.error', 'Moment konnte nicht geladen werden.'), data: null });
      });

    return () => {
      active = false;
    };
  }, [slug, t]);

  const handleCopy = React.useCallback(async () => {
    try {
      await navigator.clipboard.writeText(window.location.href);
      toast.push({ text: t('share.copySuccess', 'Link kopiert!') });
    } catch {
      toast.push({ text: t('share.copyError', 'Link konnte nicht kopiert werden.'), type: 'error' });
    }
  }, [toast, t]);

  if (state.loading) {
    return (
      <div className="flex min-h-screen flex-col items-center justify-center gap-3 bg-gradient-to-br from-pink-50 to-white px-4 text-center">
        <Loader2 className="h-8 w-8 animate-spin text-pink-500" aria-hidden />
        <p className="text-sm text-muted-foreground">{t('share.loading', 'Moment wird geladen...')}</p>
      </div>
    );
  }

  if (state.error || !state.data) {
    return (
      <div className="flex min-h-screen flex-col items-center justify-center gap-4 bg-gradient-to-br from-pink-50 to-white px-6 text-center">
        <p className="text-lg font-semibold text-foreground">{t('share.expiredTitle', 'Link abgelaufen')}</p>
        <p className="text-sm text-muted-foreground max-w-md">{state.error ?? t('share.expiredDescription', 'Dieses Foto ist nicht mehr verfügbar.')}</p>
        <Button asChild>
          <Link to="/event">{t('share.openEvent', 'Event öffnen')}</Link>
        </Button>
      </div>
    );
  }

  const { data } = state;

  return (
    <div className="min-h-screen bg-gradient-to-b from-white via-pink-50 to-white px-4 py-8">
      <div className="mx-auto flex max-w-2xl flex-col gap-5">
        <div className="rounded-3xl border border-white/60 bg-white/80 p-6 text-center shadow">
          <p className="text-xs uppercase tracking-wide text-muted-foreground">{t('share.title', 'Geteiltes Foto')}</p>
          <h1 className="mt-2 text-2xl font-semibold text-foreground">{data.event?.name ?? t('share.defaultEvent', 'Ein besonderer Moment')}</h1>
          {data.photo.title && (
            <p className="mt-1 text-sm text-muted-foreground">{data.photo.title}</p>
          )}
        </div>

        <div className="overflow-hidden rounded-[32px] border border-white/60 bg-black">
          <img
            src={data.photo.image_urls.full}
            alt={data.photo.title ?? 'Foto'}
            className="h-full w-full object-cover"
            loading="lazy"
          />
        </div>

        {data.photo.emotion && (
          <p className="text-center text-sm text-muted-foreground">
            {data.photo.emotion.emoji} {data.photo.emotion.name}
          </p>
        )}

        <div className="flex flex-col gap-3 sm:flex-row sm:justify-center">
          <Button variant="secondary" onClick={handleCopy}>
            {t('share.copyLink', 'Link kopieren')}
          </Button>
          <Button asChild>
            <Link to="/event">{t('share.openEvent', 'Event öffnen')}</Link>
          </Button>
        </div>
      </div>
    </div>
  );
}