import React, { useState, useEffect } from 'react';
import { useParams, useLocation, useNavigate } from 'react-router-dom';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Heart, ChevronLeft, ChevronRight, X, Share2, MessageSquare, Copy } from 'lucide-react';
import { likePhoto, createPhotoShareLink } from '../services/photosApi';
import { useTranslation } from '../i18n/useTranslation';
import { useToast } from '../components/ToastHost';

type Photo = {
  id: number;
  file_path?: string;
  thumbnail_path?: string;
  likes_count?: number;
  created_at?: string;
  task_id?: number;
  task_title?: string;
};

type Task = { id: number; title: string };

interface Props {
  photos?: Photo[];
  currentIndex?: number;
  onClose?: () => void;
  onIndexChange?: (index: number) => void;
  token?: string;
}

export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexChange, token }: Props) {
  const params = useParams<{ token?: string; photoId?: string }>();
  const location = useLocation();
  const navigate = useNavigate();
  const photoId = params.photoId;
  const eventToken = params.token || token;
  const { t, locale } = useTranslation();
  const toast = useToast();

  const [standalonePhoto, setStandalonePhoto] = useState<Photo | null>(null);
  const [task, setTask] = useState<Task | null>(null);
  const [taskLoading, setTaskLoading] = useState(false);
  const [likes, setLikes] = useState<number>(0);
  const [liked, setLiked] = useState(false);
  const [shareSheet, setShareSheet] = useState<{ url: string | null; loading: boolean }>({
    url: null,
    loading: false,
  });

  // Determine mode and photo
  const isStandalone = !photos || photos.length === 0;
  const currentPhotos = isStandalone ? (standalonePhoto ? [standalonePhoto] : []) : photos || [];
  const currentIndexVal = isStandalone ? 0 : (currentIndex || 0);
  const photo = currentPhotos[currentIndexVal];

  // Fallback onClose for standalone
  const handleClose = onClose || (() => navigate(-1));

  // Fetch single photo for standalone mode
  useEffect(() => {
    if (isStandalone && photoId && !standalonePhoto && eventToken) {
      const fetchPhoto = async () => {
        try {
          const res = await fetch(`/api/v1/photos/${photoId}?locale=${encodeURIComponent(locale)}`, {
            headers: {
              Accept: 'application/json',
              'X-Locale': locale,
            },
          });
          if (res.ok) {
            const fetchedPhoto: Photo = await res.json();
            setStandalonePhoto(fetchedPhoto);
            // Check state for initial photo
            if (location.state?.photo) {
              setStandalonePhoto(location.state.photo);
            }
          } else {
            toast.push({ text: t('lightbox.errors.notFound'), type: 'error' });
          }
        } catch (err) {
          console.warn('Standalone photo load failed', err);
          toast.push({ text: t('lightbox.errors.loadFailed'), type: 'error' });
        }
      };

      fetchPhoto();
    }
  }, [isStandalone, photoId, eventToken, standalonePhoto, location.state, t, locale, toast]);

  // Update likes when photo changes
  React.useEffect(() => {
    if (photo) {
      setLikes(photo.likes_count ?? 0);
      // Check if liked from localStorage
      try {
        const raw = localStorage.getItem('liked-photo-ids');
        const likedIds = raw ? JSON.parse(raw) : [];
        setLiked(likedIds.includes(photo.id));
      } catch {
        setLiked(false);
      }
    }
  }, [photo]);

  const touchRef = React.useRef<HTMLDivElement>(null);
  const startX = React.useRef(0);
  const currentX = React.useRef(0);

  const handleTouchStart = (e: React.TouchEvent) => {
    startX.current = e.touches[0].clientX;
  };

  const handleTouchMove = (e: React.TouchEvent) => {
    if (!touchRef.current) return;
    currentX.current = e.touches[0].clientX;
    const deltaX = currentX.current - startX.current;
    touchRef.current.style.transform = `translateX(${deltaX}px)`;
  };

  const handleTouchEnd = () => {
    if (!touchRef.current) return;
    const deltaX = currentX.current - startX.current;
    const threshold = 50; // pixels

    touchRef.current.style.transform = 'translateX(0)';

    if (Math.abs(deltaX) > threshold) {
      if (deltaX > 0 && currentIndexVal > 0) {
        // Swipe right - previous
        onIndexChange?.(currentIndexVal - 1);
      } else if (deltaX < 0 && currentIndexVal < currentPhotos.length - 1) {
        // Swipe left - next
        onIndexChange?.(currentIndexVal + 1);
      }
    }
  };


  // Load task info if photo has task_id and event key is available
  React.useEffect(() => {
    if (!photo?.task_id || !eventToken) {
      setTask(null);
      setTaskLoading(false);
      return;
    }

    const taskId = photo.task_id;

    (async () => {
      setTaskLoading(true);
      try {
        const res = await fetch(
          `/api/v1/events/${encodeURIComponent(eventToken)}/tasks?locale=${encodeURIComponent(locale)}`,
          {
            headers: {
              Accept: 'application/json',
              'X-Locale': locale,
            },
          }
        );
        if (res.ok) {
          const tasks = (await res.json()) as Task[];
          const foundTask = tasks.find((t) => t.id === taskId);
          if (foundTask) {
            setTask({
              id: foundTask.id,
              title: foundTask.title || t('lightbox.fallbackTitle').replace('{id}', `${taskId}`)
            });
          } else {
            setTask({
              id: taskId,
              title: t('lightbox.unknownTitle').replace('{id}', `${taskId}`)
            });
          }
        } else {
          setTask({
            id: taskId,
            title: t('lightbox.unknownTitle').replace('{id}', `${taskId}`)
          });
        }
      } catch (error) {
        console.error('Failed to load task:', error);
        setTask({
          id: taskId,
          title: t('lightbox.unknownTitle').replace('{id}', `${taskId}`)
        });
      } finally {
        setTaskLoading(false);
      }
    })();
  }, [photo?.task_id, eventToken, t, locale]);

  async function onLike() {
    if (liked || !photo) return;
    setLiked(true);
    try {
      const count = await likePhoto(photo.id);
      setLikes(count);
      // Update localStorage
      try {
        const raw = localStorage.getItem('liked-photo-ids');
        const arr: number[] = raw ? JSON.parse(raw) : [];
        if (!arr.includes(photo.id)) {
          localStorage.setItem('liked-photo-ids', JSON.stringify([...arr, photo.id]));
        }
      } catch (storageError) {
        console.warn('Failed to persist liked photo IDs', storageError);
      }
    } catch (error) {
      console.error('Like failed:', error);
      setLiked(false);
    }
  }

  const shareTitle = photo?.task_title ?? task?.title ?? t('share.title', 'Geteiltes Foto');
  const shareText = t('share.shareText', { event: shareTitle || 'Fotospiel' });

  const WhatsAppIcon = (props: React.SVGProps<SVGSVGElement>) => (
    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden focusable="false" {...props}>
      <path
        fill="currentColor"
        d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"
      />
    </svg>
  );

  async function openShareSheet() {
    if (!photo || !eventToken) return;
    setShareSheet({ url: null, loading: true });
    try {
      const payload = await createPhotoShareLink(eventToken, photo.id);
      setShareSheet({ url: payload.url, loading: false });
    } catch (error) {
      console.error('share failed', error);
      toast.push({ text: t('share.error', 'Teilen fehlgeschlagen'), type: 'error' });
      setShareSheet({ url: null, loading: false });
    }
  }

  function shareWhatsApp(url?: string | null) {
    if (!url) return;
    const waUrl = `https://wa.me/?text=${encodeURIComponent(`${shareText} ${url}`)}`;
    window.open(waUrl, '_blank', 'noopener');
    setShareSheet({ url: null, loading: false });
  }

  function shareMessages(url?: string | null) {
    if (!url) return;
    const smsUrl = `sms:?&body=${encodeURIComponent(`${shareText} ${url}`)}`;
    window.open(smsUrl, '_blank', 'noopener');
    setShareSheet({ url: null, loading: false });
  }

  async function copyLink(url?: string | null) {
    if (!url) return;
    try {
      await navigator.clipboard?.writeText(url);
      toast.push({ text: t('share.copySuccess', 'Link kopiert!') });
    } catch {
      toast.push({ text: t('share.copyError', 'Link konnte nicht kopiert werden.'), type: 'error' });
    } finally {
      setShareSheet({ url: null, loading: false });
    }
  }

  function closeShareSheet() {
    setShareSheet({ url: null, loading: false });
  }

  function onOpenChange(open: boolean) {
    if (!open) handleClose();
  }

  return (
    <Dialog open={true} onOpenChange={onOpenChange}>
      <DialogContent hideClose className="max-w-5xl border-0 bg-black p-0 text-white">
        {/* Header with controls */}
        <div className="flex items-center justify-between p-2">
          <div className="flex items-center gap-2">
            <Button
              variant="secondary"
              size="sm"
              onClick={onLike}
              disabled={liked}
            >
              <Heart className={`mr-1 h-4 w-4 ${liked ? 'fill-red-400 text-red-400' : ''}`} />
              {likes}
            </Button>
            <Button
              variant="secondary"
              size="sm"
              onClick={openShareSheet}
              disabled={!eventToken || !photo}
            >
              <Share2 className="mr-1 h-4 w-4" />
              {t('share.button', 'Teilen')}
            </Button>
          </div>
          <div className="flex items-center gap-1">
            {currentIndexVal > 0 && (
              <Button
                variant="ghost"
                size="sm"
                onClick={() => onIndexChange?.(currentIndexVal - 1)}
                className="h-8 w-8 p-0"
              >
                <ChevronLeft className="h-4 w-4" />
              </Button>
            )}
            <Button
              variant="ghost"
              size="sm"
              onClick={onClose}
              className="h-8 w-8 p-0"
            >
              <X className="h-4 w-4" />
            </Button>
            {currentIndexVal < currentPhotos.length - 1 && (
              <Button
                variant="ghost"
                size="sm"
                onClick={() => onIndexChange?.(currentIndexVal + 1)}
                className="h-8 w-8 p-0"
              >
                <ChevronRight className="h-4 w-4" />
              </Button>
            )}
          </div>
        </div>

        {/* Task Info Overlay */}
        {task && (
          <div className="absolute bottom-4 left-4 right-4 z-20 bg-black/60 backdrop-blur-sm rounded-xl p-3 border border-white/20 max-w-md">
            <div className="text-sm">
              <div className="font-semibold mb-1 text-white">{t('lightbox.taskLabel')}: {task.title}</div>
              {taskLoading && (
                <div className="text-xs opacity-70 text-gray-300">{t('lightbox.loadingTask')}</div>
              )}
            </div>
          </div>
        )}

        {/* Photo Display */}
        <div
          ref={touchRef}
          className="flex items-center justify-center min-h-[60vh] p-4 relative overflow-hidden"
          onTouchStart={handleTouchStart}
          onTouchMove={handleTouchMove}
          onTouchEnd={handleTouchEnd}
        >
          <img
            src={photo?.file_path || photo?.thumbnail_path}
            alt={t('lightbox.photoAlt')
              .replace('{id}', `${photo?.id ?? ''}`)
              .replace(
                '{suffix}',
                photo?.task_title
                  ? t('lightbox.photoAltTaskSuffix').replace('{taskTitle}', photo.task_title)
                  : ''
              )}
            className="max-h-[80vh] max-w-full object-contain transition-transform duration-200"
            onError={(e) => {
              console.error('Image load error:', e);
              (e.target as HTMLImageElement).style.display = 'none';
            }}
          />
        </div>

        {/* Loading state for task */}
        {taskLoading && !task && (
          <div className="absolute top-4 left-4 right-4 z-20 bg-black/60 backdrop-blur-sm rounded-xl p-3 border border-white/20 max-w-md">
            <div className="text-sm text-center">
              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mx-auto mb-1"></div>
              <div className="text-xs opacity-70">{t('lightbox.loadingTask')}</div>
            </div>
          </div>
        )}

        {(shareSheet.url !== null || shareSheet.loading) && (
          <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm">
            <div className="w-full max-w-md rounded-t-3xl bg-white p-4 shadow-xl dark:bg-slate-900">
              <div className="mb-3 flex items-center justify-between">
                <div>
                  <p className="text-xs uppercase tracking-wide text-muted-foreground">
                    {t('share.title', 'Geteiltes Foto')}
                  </p>
                  <p className="text-sm font-semibold text-foreground">#{photo?.id}</p>
                </div>
                <button
                  type="button"
                  className="rounded-full border border-muted px-3 py-1 text-xs font-semibold"
                  onClick={closeShareSheet}
                >
                  {t('lightbox.close', 'Schließen')}
                </button>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <button
                  type="button"
                  className="flex items-center gap-2 rounded-2xl border border-muted bg-muted/40 px-3 py-3 text-left text-sm font-semibold transition hover:bg-muted/60"
                  onClick={() => {
                    if (!shareSheet.url) return;
                    const data: ShareData = {
                      title: shareTitle,
                      text: shareText,
                      url: shareSheet.url,
                    };
                    if (navigator.share && (!navigator.canShare || navigator.canShare(data))) {
                      navigator.share(data).catch(() => {});
                      setShareSheet({ url: null, loading: false });
                    } else {
                      void copyLink(shareSheet.url);
                    }
                  }}
                  disabled={shareSheet.loading}
                >
                  <Share2 className="h-4 w-4" />
                  <div>
                    <div>{t('share.button', 'Teilen')}</div>
                    <div className="text-xs text-muted-foreground">{t('share.title', 'Geteiltes Foto')}</div>
                  </div>
                </button>
                <button
                  type="button"
                  className="flex items-center gap-2 rounded-2xl border border-muted bg-emerald-50 px-3 py-3 text-left text-sm font-semibold text-emerald-700 transition hover:bg-emerald-100 dark:border-emerald-900/40 dark:bg-emerald-900/20 dark:text-emerald-200"
                  onClick={() => shareWhatsApp(shareSheet.url)}
                  disabled={shareSheet.loading}
                >
                  <WhatsAppIcon className="h-5 w-5" />
                  <div>
                    <div>{t('share.whatsapp', 'WhatsApp')}</div>
                    <div className="text-xs text-muted-foreground">{shareSheet.loading ? '…' : ''}</div>
                  </div>
                </button>
                <button
                  type="button"
                  className="flex items-center gap-2 rounded-2xl border border-muted bg-sky-50 px-3 py-3 text-left text-sm font-semibold text-sky-700 transition hover:bg-sky-100 dark:border-sky-900/40 dark:bg-sky-900/20 dark:text-sky-200"
                  onClick={() => shareMessages(shareSheet.url)}
                  disabled={shareSheet.loading}
                >
                  <MessageSquare className="h-5 w-5" />
                  <div>
                    <div>{t('share.imessage', 'Nachrichten')}</div>
                    <div className="text-xs text-muted-foreground">{shareSheet.loading ? '…' : ''}</div>
                  </div>
                </button>
                <button
                  type="button"
                  className="flex items-center gap-2 rounded-2xl border border-muted bg-muted/40 px-3 py-3 text-left text-sm font-semibold transition hover:bg-muted/60"
                  onClick={() => copyLink(shareSheet.url)}
                  disabled={shareSheet.loading}
                >
                  <Copy className="h-4 w-4" />
                  <div>
                    <div>{t('share.copyLink', 'Link kopieren')}</div>
                    <div className="text-xs text-muted-foreground">{shareSheet.loading ? t('share.loading', 'Lädt…') : ''}</div>
                  </div>
                </button>
              </div>
            </div>
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}