import React from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Sparkles, RefreshCw, Smile, Timer as TimerIcon, CheckCircle2, AlertTriangle } from 'lucide-react';
import { useGuestTaskProgress } from '../hooks/useGuestTaskProgress';

interface Task {
  id: number;
  title: string;
  description: string;
  instructions: string;
  duration: number; // minutes
  emotion?: {
    slug: string;
    name: string;
  };
  is_completed: boolean;
}

type EmotionOption = {
  slug: string;
  name: string;
};

const TASK_PROGRESS_TARGET = 5;
const TIMER_VIBRATION = [0, 60, 120, 60];

export default function TaskPickerPage() {
  const { token } = useParams<{ token: string }>();
  const eventKey = token ?? '';
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();

  const { completedCount, markCompleted, isCompleted } = useGuestTaskProgress(eventKey);

  const [tasks, setTasks] = React.useState<Task[]>([]);
  const [currentTask, setCurrentTask] = React.useState<Task | null>(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState<string | null>(null);
  const [selectedEmotion, setSelectedEmotion] = React.useState<string>('all');
  const [timeLeft, setTimeLeft] = React.useState<number>(0);
  const [timerRunning, setTimerRunning] = React.useState(false);
  const [timeUp, setTimeUp] = React.useState(false);
  const [isFetching, setIsFetching] = React.useState(false);

  const recentTaskIdsRef = React.useRef<number[]>([]);
  const initialEmotionRef = React.useRef(false);

  const fetchTasks = React.useCallback(async () => {
    if (!eventKey) return;
    setIsFetching(true);
    setLoading(true);
    setError(null);
    try {
      const response = await fetch(`/api/v1/events/${encodeURIComponent(eventKey)}/tasks`);
      if (!response.ok) throw new Error('Aufgaben konnten nicht geladen werden.');
      const payload = await response.json();
      if (Array.isArray(payload)) {
        setTasks(payload);
      } else {
        setTasks([]);
      }
    } catch (err) {
      console.error('Failed to load tasks', err);
      setError(err instanceof Error ? err.message : 'Unbekannter Fehler');
      setTasks([]);
    } finally {
      setIsFetching(false);
      setLoading(false);
    }
    }, [eventKey]);

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

  React.useEffect(() => {
    if (initialEmotionRef.current) return;
    const queryEmotion = searchParams.get('emotion');
    if (queryEmotion) {
      setSelectedEmotion(queryEmotion);
    }
    initialEmotionRef.current = true;
  }, [searchParams]);

  const emotionOptions = React.useMemo<EmotionOption[]>(() => {
    const map = new Map<string, string>();
    tasks.forEach((task) => {
      if (task.emotion?.slug) {
        map.set(task.emotion.slug, task.emotion.name);
      }
    });
    return Array.from(map.entries()).map(([slugValue, name]) => ({ slug: tokenValue, name }));
  }, [tasks]);

  const filteredTasks = React.useMemo(() => {
    if (selectedEmotion === 'all') return tasks;
    return tasks.filter((task) => task.emotion?.token === selectedEmotion);
  }, [tasks, selectedEmotion]);

  const selectRandomTask = React.useCallback(
    (list: Task[]) => {
      if (!list.length) {
        setCurrentTask(null);
        return;
      }
      const avoidIds = recentTaskIdsRef.current;
      const available = list.filter((task) => !isCompleted(task.id));
      const base = available.length ? available : list;
      let candidates = base.filter((task) => !avoidIds.includes(task.id));
      if (!candidates.length) {
        candidates = base;
      }
      const chosen = candidates[Math.floor(Math.random() * candidates.length)];
      setCurrentTask(chosen);
      recentTaskIdsRef.current = [...avoidIds.filter((id) => id !== chosen.id), chosen.id].slice(-3);
    },
    [isCompleted]
  );

  React.useEffect(() => {
    if (!filteredTasks.length) {
      setCurrentTask(null);
      return;
    }
    if (!currentTask || !filteredTasks.some((task) => task.id === currentTask.id)) {
      selectRandomTask(filteredTasks);
      return;
    }
    const matchingTask = filteredTasks.find((task) => task.id === currentTask.id);
    const durationMinutes = matchingTask?.duration ?? currentTask.duration;
    setTimeLeft(durationMinutes * 60);
    setTimerRunning(false);
    setTimeUp(false);
  }, [filteredTasks, currentTask, selectRandomTask]);

  React.useEffect(() => {
    if (!currentTask) {
      setTimeLeft(0);
      setTimerRunning(false);
      setTimeUp(false);
      return;
    }
    setTimeLeft(currentTask.duration * 60);
    setTimerRunning(false);
    setTimeUp(false);
  }, [currentTask]);

  React.useEffect(() => {
    if (!timerRunning) return;
    if (timeLeft <= 0) {
      setTimerRunning(false);
      triggerTimeUp();
      return;
    }
    const tick = window.setInterval(() => {
      setTimeLeft((prev) => {
        if (prev <= 1) {
          window.clearInterval(tick);
          triggerTimeUp();
          return 0;
        }
        return prev - 1;
      });
    }, 1000);
    return () => window.clearInterval(tick);
  }, [timerRunning, timeLeft]);

  function triggerTimeUp() {
  const supportsVibration = typeof navigator !== 'undefined' && typeof navigator.vibrate === 'function';
  setTimerRunning(false);
  setTimeUp(true);
  if (supportsVibration) {
    try {
      navigator.vibrate(TIMER_VIBRATION);
    } catch (error) {
      console.warn('Vibration not permitted', error);
    }
  }
  window.setTimeout(() => setTimeUp(false), 4000);
  return;
}

  const formatTime = React.useCallback((seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = Math.max(0, seconds % 60);
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  }, []);

  const progressRatio = currentTask ? Math.min(1, completedCount / TASK_PROGRESS_TARGET) : 0;

  const handleSelectEmotion = (slugValue: string) => {
    setSelectedEmotion(slugValue);
    const next = new URLSearchParams(searchParams.toString());
    if (slugValue === 'all') {
      next.delete('emotion');
    } else {
      next.set('emotion', slugValue);
    }
    setSearchParams(next, { replace: true });
  };

  const handleNewTask = () => {
    selectRandomTask(filteredTasks);
  };

  const handleStartUpload = () => {
    if (!currentTask || !eventKey) return;
      if (!eventKey) return;
      navigate(`/e/${encodeURIComponent(eventKey)}/upload?task=${currentTask.id}&emotion=${currentTask.emotion?.slug || ''}`);
  };

  const handleMarkCompleted = () => {
    if (!currentTask) return;
    markCompleted(currentTask.id);
    selectRandomTask(filteredTasks);
  };

  const handleRetryFetch = () => {
    fetchTasks();
  };

  const handleTimerToggle = () => {
    if (!currentTask) return;
    if (timerRunning) {
      setTimerRunning(false);
      setTimeLeft(currentTask.duration * 60);
      setTimeUp(false);
    } else {
      if (timeLeft <= 0) {
        setTimeLeft(currentTask.duration * 60);
      }
      setTimerRunning(true);
      setTimeUp(false);
    }
  };

  const emptyState = !loading && (!filteredTasks.length || !currentTask);

  return (
    <div className="space-y-6">
      <header className="space-y-3">
        <div className="flex items-center justify-between gap-4">
          <h1 className="text-2xl font-semibold text-foreground">Aufgabe auswaehlen</h1>
          <Badge variant="secondary" className="whitespace-nowrap">
            Schon {completedCount} Aufgaben erledigt
          </Badge>
        </div>
        <div className="rounded-xl border bg-muted/40 p-4">
          <div className="flex items-center justify-between text-sm font-medium text-muted-foreground">
            <span>Auf dem Weg zum naechsten Erfolg</span>
            <span>
              {completedCount >= TASK_PROGRESS_TARGET
                ? 'Stark!'
                : `${Math.max(0, TASK_PROGRESS_TARGET - completedCount)} bis zum Badge`}
            </span>
          </div>
          <div className="mt-3 h-2 w-full rounded-full bg-muted">
            <div
              className="h-2 rounded-full bg-gradient-to-r from-pink-500 to-purple-500 transition-all"
              style={{ width: `${progressRatio * 100}%` }}
            />
          </div>
        </div>
        {emotionOptions.length > 0 && (
          <div className="flex flex-wrap gap-2">
            <EmotionChip
              active={selectedEmotion === 'all'}
              label="Alle Stimmungen"
              onClick={() => handleSelectEmotion('all')}
            />
            {emotionOptions.map((emotion) => (
              <EmotionChip
                key={emotion.slug}
                active={selectedEmotion === emotion.slug}
                label={emotion.name}
                onClick={() => handleSelectEmotion(emotion.slug)}
              />
            ))}
          </div>
        )}
      </header>

      {loading && (
        <div className="space-y-4">
          <SkeletonBlock />
          <SkeletonBlock />
        </div>
      )}

      {error && !loading && (
        <Alert variant="destructive">
          <AlertDescription className="flex items-center justify-between gap-3">
            <span>{error}</span>
            <Button variant="outline" size="sm" onClick={handleRetryFetch} disabled={isFetching}>
              Erneut versuchen
            </Button>
          </AlertDescription>
        </Alert>
      )}

      {emptyState && (
        <EmptyState
          hasTasks={Boolean(tasks.length)}
          onRetry={handleRetryFetch}
          emotionOptions={emotionOptions}
          onEmotionSelect={handleSelectEmotion}
        />
      )}

      {!emptyState && currentTask && (
        <div className="space-y-6">
          <article className="overflow-hidden rounded-2xl border bg-card">
            <div className="relative">
              <div className="flex aspect-video items-center justify-center bg-gradient-to-br from-pink-500/80 via-purple-500/60 to-indigo-500/60 text-white">
                <div className="text-center">
                  <Sparkles className="mx-auto mb-3 h-10 w-10" />
                  <p className="text-sm uppercase tracking-[.2em]">Deine Mission</p>
                  <h2 className="mt-2 text-2xl font-semibold">{currentTask.title}</h2>
                </div>
              </div>
              <div className="absolute right-3 top-3 flex flex-col items-end gap-2">
                <BadgeTimer
                  label="Countdown"
                  value={formatTime(timeLeft)}
                  tone={timerTone(timeLeft, currentTask.duration)}
                />
                {timeUp && (
                  <Badge variant="destructive" className="flex items-center gap-1">
                    <AlertTriangle className="h-3.5 w-3.5" />
                    Zeit abgelaufen!
                  </Badge>
                )}
              </div>
            </div>

            <div className="space-y-4 p-5">
              <div className="flex flex-wrap gap-2">
                <Badge variant="outline" className="flex items-center gap-2">
                  <TimerIcon className="h-4 w-4" />
                  {currentTask.duration} Min
                </Badge>
                {currentTask.emotion?.name && (
                  <Badge variant="outline" className="flex items-center gap-2">
                    <Smile className="h-4 w-4" />
                    {currentTask.emotion.name}
                  </Badge>
                )}
                {isCompleted(currentTask.id) && (
                  <Badge variant="secondary" className="flex items-center gap-2">
                    <CheckCircle2 className="h-4 w-4" />
                    Bereits erledigt
                  </Badge>
                )}
              </div>

              <p className="text-sm leading-relaxed text-muted-foreground">{currentTask.description}</p>

              {currentTask.instructions && (
                <div className="rounded-xl border border-dashed border-pink-200 bg-pink-50/60 p-4 text-sm font-medium text-pink-800 dark:border-pink-500/40 dark:bg-pink-500/10 dark:text-pink-100">
                  {currentTask.instructions}
                </div>
              )}

              <ul className="space-y-2 text-sm">
                <ChecklistItem text="Stimme dich auf die Aufgabe ein." />
                <ChecklistItem text="Hol dir dein Team oder Motiv ins Bild." />
                <ChecklistItem text="Halte Emotion und Aufgabe im Foto fest." />
              </ul>

              {timerRunning && currentTask.duration > 0 && (
                <div className="mt-4">
                  <div className="mb-1 flex items-center justify-between text-xs text-muted-foreground">
                    <span>Countdown</span>
                    <span>Restzeit: {formatTime(timeLeft)}</span>
                  </div>
                  <div className="h-2 w-full rounded-full bg-muted">
                    <div
                      className="h-2 rounded-full bg-gradient-to-r from-amber-400 to-rose-500 transition-all"
                      style={{
                        width: `${Math.max(0, Math.min(100, (timeLeft / (currentTask.duration * 60)) * 100))}%`,
                      }}
                    />
                  </div>
                </div>
              )}
            </div>
          </article>

          <div className="grid gap-3 sm:grid-cols-2">
            <Button onClick={handleStartUpload} className="h-14 text-base font-semibold">
              <span className="flex items-center justify-center gap-2">
                <Sparkles className="h-5 w-5" />
                Los geht's
              </span>
            </Button>
            <Button
              variant={timerRunning ? 'destructive' : 'outline'}
              onClick={handleTimerToggle}
              className="h-14 text-base"
            >
              <span className="flex items-center justify-center gap-2">
                <TimerIcon className="h-5 w-5" />
                {timerRunning ? 'Timer stoppen' : 'Timer starten'}
              </span>
            </Button>
          </div>

          <div className="grid gap-3 sm:grid-cols-2">
            <Button variant="secondary" onClick={handleMarkCompleted} className="h-12">
              <span className="flex items-center justify-center gap-2">
                <CheckCircle2 className="h-5 w-5" />
                Aufgabe erledigt
              </span>
            </Button>
            <Button variant="ghost" onClick={handleNewTask} className="h-12">
              <span className="flex items-center justify-center gap-2">
                <RefreshCw className="h-5 w-5" />
                Neue Aufgabe anzeigen
              </span>
            </Button>
          </div>
        </div>
      )}

      {!loading && !tasks.length && !error && (
        <Alert>
          <AlertDescription>Fuer dieses Event sind derzeit keine Aufgaben hinterlegt.</AlertDescription>
        </Alert>
      )}
    </div>
  );
}

function timerTone(timeLeft: number, durationMinutes: number) {
  const totalSeconds = Math.max(1, durationMinutes * 60);
  const ratio = timeLeft / totalSeconds;
  if (ratio > 0.5) return 'okay';
  if (ratio > 0.25) return 'warm';
  return 'hot';
}

function EmotionChip({ label, active, onClick }: { label: string; active: boolean; onClick: () => void }) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={`rounded-full border px-4 py-1 text-sm transition ${
        active
          ? 'border-pink-500 bg-pink-500 text-white shadow-sm'
          : 'border-border bg-background text-muted-foreground hover:border-pink-400 hover:text-foreground'
      }`}
    >
      {label}
    </button>
  );
}

function ChecklistItem({ text }: { text: string }) {
  return (
    <li className="flex items-start gap-2">
      <CheckCircle2 className="mt-0.5 h-4 w-4 text-emerald-500" />
      <span className="text-muted-foreground">{text}</span>
    </li>
  );
}

function BadgeTimer({ label, value, tone }: { label: string; value: string; tone: 'okay' | 'warm' | 'hot' }) {
  const toneClasses = {
    okay: 'bg-emerald-500/15 text-emerald-500 border-emerald-500/30',
    warm: 'bg-amber-500/15 text-amber-500 border-amber-500/30',
    hot: 'bg-rose-500/15 text-rose-500 border-rose-500/30',
  }[tone];
  return (
    <div className={`flex items-center gap-1 rounded-full border px-3 py-1 text-xs font-medium ${toneClasses}`}>
      <TimerIcon className="h-3.5 w-3.5" />
      <span>{label}</span>
      <span>{value}</span>
    </div>
  );
}

function SkeletonBlock() {
  return <div className="h-24 animate-pulse rounded-xl bg-muted/60" />;
}

function EmptyState({
  hasTasks,
  onRetry,
  emotionOptions,
  onEmotionSelect,
}: {
  hasTasks: boolean;
  onRetry: () => void;
  emotionOptions: EmotionOption[];
  onEmotionSelect: (slug: string) => void;
}) {
  return (
    <div className="flex flex-col items-center justify-center gap-4 rounded-2xl border border-dashed border-muted-foreground/30 bg-muted/20 p-8 text-center">
      <Smile className="h-12 w-12 text-pink-500" />
      <div className="space-y-2">
        <h2 className="text-xl font-semibold">Keine passende Aufgabe gefunden</h2>
        <p className="text-sm text-muted-foreground">
          {hasTasks
            ? 'Fuer deine aktuelle Stimmung gibt es gerade keine Aufgabe. Waehle eine andere Stimmung oder lade neue Aufgaben.'
            : 'Hier sind noch keine Aufgaben hinterlegt. Bitte versuche es spaeter erneut.'}
        </p>
      </div>
      {hasTasks && emotionOptions.length > 0 && (
        <div className="flex flex-wrap justify-center gap-2">
          {emotionOptions.map((emotion) => (
            <EmotionChip
              key={emotion.slug}
              label={emotion.name}
              active={false}
              onClick={() => onEmotionSelect(emotion.slug)}
            />
          ))}
        </div>
      )}
      <Button onClick={onRetry} variant="outline" className="mt-2">
        Aufgaben neu laden
      </Button>
    </div>
  );
}