"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
import gsap from "gsap";

interface Exercise {
  id: string;
  exercise_id: string;
  name: string;
  muscle_group: string;
  equipment: string;
  difficulty: string;
  instructions: string;
  pro_tips: string;
  common_mistakes: string;
  is_bodyweight: number;
  is_cardio: number;
  image_url: string | null;
  video_url: string | null;
  sets: number;
  reps: string;
  rest_seconds: number;
  order_index: number;
}

interface DayData {
  id: string;
  day_number: number;
  day_name: string;
  name: string;
  is_rest_day: number;
  week_id: string;
  exercises: Exercise[];
}

export default function DayWorkoutPage() {
  const params = useParams();
  const router = useRouter();
  const dayId = params.dayId as string;

  const [day, setDay] = useState<DayData | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [expandedExercise, setExpandedExercise] = useState<string | null>(null);

  useEffect(() => {
    document.title = "Daily Workout | Marich Wellness";
    fetchDayData();
  }, [dayId]);

  useEffect(() => {
    if (day) {
      gsap.from(".exercise-card", {
        opacity: 0,
        y: 20,
        stagger: 0.08,
        duration: 0.5,
        ease: "power3.out",
      });
    }
  }, [day]);

  async function fetchDayData() {
    try {
      // Fetch day exercises via the template API
      // We need to find which template this day belongs to
      // For now, we'll use a direct approach: fetch all templates and find the day
      const res = await fetch('/api/fitness/templates');
      if (!res.ok) throw new Error('Failed to load workout data');
      const data = await res.json();
      
      // Find the day across all templates
      for (const template of data.templates || []) {
        const templateDetail = await fetch(`/api/fitness/templates/${template.id}`);
        if (templateDetail.ok) {
          const detailData = await templateDetail.json();
          const t = detailData.template;
          for (const week of t.weeks || []) {
            for (const d of week.days || []) {
              if (d.id === dayId) {
                setDay(d);
                return;
              }
            }
          }
        }
      }
      throw new Error('Day not found');
    } catch (err: any) {
      setError(err.message);
    } finally {
      setIsLoading(false);
    }
  }

  if (isLoading) {
    return (
      <div className="min-h-screen bg-surface-container-lowest dark:bg-zinc-950 flex items-center justify-center">
        <div className="text-center space-y-4">
          <div className="w-12 h-12 border-4 border-emerald-100 border-t-emerald-600 rounded-full animate-spin mx-auto"></div>
          <p className="text-emerald-600 font-bold uppercase tracking-widest text-xs">Loading Workout...</p>
        </div>
      </div>
    );
  }

  if (error || !day) {
    return (
      <div className="min-h-screen bg-surface-container-lowest dark:bg-zinc-950 flex items-center justify-center">
        <div className="text-center space-y-4">
          <p className="text-red-500 font-serif italic text-xl">{error || 'Workout not found'}</p>
          <Link href="/fitness-planner/library" className="px-6 py-3 bg-emerald-900 text-white font-bold uppercase tracking-widest text-xs inline-block">
            Back to Library
          </Link>
        </div>
      </div>
    );
  }

  if (day.is_rest_day) {
    return (
      <div className="min-h-screen bg-surface-container-lowest dark:bg-zinc-950 flex items-center justify-center">
        <div className="text-center space-y-6 max-w-md">
          <span className="material-symbols-outlined text-8xl text-emerald-200">self_care</span>
          <h1 className="text-4xl font-serif text-emerald-900 dark:text-emerald-50 italic">Rest Day</h1>
          <p className="text-black dark:text-white font-serif italic text-lg">{day.day_name}</p>
          <p className="text-black dark:text-white">Take time to recover. Focus on mobility, stretching, and proper nutrition.</p>
          <Link href="/fitness-planner/library" className="px-8 py-4 bg-emerald-900 text-white font-bold uppercase tracking-widest text-xs inline-block hover:bg-emerald-800 transition-all">
            Back to Programs
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-surface-container-lowest dark:bg-zinc-950">
      {/* Navigation */}
      <nav className="px-6 py-8 flex justify-between items-center max-w-4xl mx-auto w-full">
        <Link href="/" className="text-2xl font-serif text-emerald-900 dark:text-emerald-50 italic">
          Marich Wellness
        </Link>
        <div className="flex items-center gap-6">
          <Link href="/fitness-planner/dashboard" className="text-black dark:text-white hover:text-emerald-600 transition-colors">
            <span className="material-symbols-outlined text-2xl">arrow_back</span>
          </Link>
        </div>
      </nav>

      <main className="max-w-4xl mx-auto px-6 pb-32">
        {/* Day Header */}
        <div className="mb-12 space-y-4">
          <div className="flex items-center gap-3">
            <span className="w-12 h-12 rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 flex items-center justify-center font-bold text-lg">
              {day.day_number}
            </span>
            <div>
              <p className="text-xs text-black dark:text-white font-bold uppercase tracking-widest">Day {day.day_number}</p>
              <h1 className="text-4xl md:text-5xl font-serif text-emerald-900 dark:text-emerald-50 italic tracking-tight">
                {day.day_name}
              </h1>
            </div>
          </div>
          <p className="text-black dark:text-white font-serif italic">
            {day.exercises.length} exercises · Complete all sets with proper form
          </p>
        </div>

        {/* Start Workout Button - links to program page with workout mode */}
        <Link
          href={`/fitness-planner/program/${dayId}?mode=workout`}
          className="block w-full mb-12 py-5 bg-emerald-900 text-white text-center font-bold uppercase tracking-widest text-sm hover:bg-emerald-800 transition-all shadow-lg hover:shadow-xl"
        >
          Start Workout
        </Link>

        {/* Exercise List */}
        <div className="space-y-6">
          {day.exercises
            .sort((a, b) => a.order_index - b.order_index)
            .map((exercise) => (
              <div
                key={exercise.id}
                className="exercise-card bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 overflow-hidden"
              >
                {/* Exercise Header */}
                <button
                  onClick={() => setExpandedExercise(expandedExercise === exercise.id ? null : exercise.id)}
                  className="w-full p-6 flex items-center justify-between text-left hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors"
                >
                  <div className="flex items-center gap-4">
                    <span className="w-8 h-8 rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 flex items-center justify-center font-bold text-xs">
                      {exercise.order_index}
                    </span>
                    <div>
                      <h3 className="font-bold text-emerald-900 dark:text-emerald-50">
                        {exercise.name}
                      </h3>
                      <p className="text-xs text-black dark:text-white">
                        {exercise.sets > 0 ? exercise.sets : '-'} × {exercise.reps && exercise.reps !== '0' ? exercise.reps : '-'} · {exercise.muscle_group}
                      </p>
                    </div>
                  </div>
                  <div className="flex items-center gap-4">
                    <span className="text-xs text-black dark:text-white font-bold uppercase tracking-widest">
                      {exercise.rest_seconds}s rest
                    </span>
                    <span className="material-symbols-outlined text-black dark:text-white transition-transform duration-300"
                      style={{ transform: expandedExercise === exercise.id ? 'rotate(180deg)' : 'rotate(0deg)' }}
                    >
                      expand_more
                    </span>
                  </div>
                </button>

                {/* Exercise Details */}
                {expandedExercise === exercise.id && (
                  <div className="px-6 pb-6 space-y-6 border-t border-zinc-100 dark:border-zinc-800 pt-6">
                    {/* Equipment & Difficulty Tags */}
                    <div className="flex flex-wrap gap-2">
                      <span className="text-[10px] uppercase tracking-widest font-bold px-2 py-1 bg-zinc-50 dark:bg-zinc-800 text-black dark:text-white border border-zinc-100 dark:border-zinc-700">
                        {exercise.equipment}
                      </span>
                      <span className="text-[10px] uppercase tracking-widest font-bold px-2 py-1 bg-zinc-50 dark:bg-zinc-800 text-black dark:text-white border border-zinc-100 dark:border-zinc-700">
                        {exercise.difficulty}
                      </span>
                      {exercise.is_bodyweight ? (
                        <span className="text-[10px] uppercase tracking-widest font-bold px-2 py-1 bg-emerald-50 text-emerald-600 border border-emerald-200">
                          Bodyweight
                        </span>
                      ) : null}
                      {exercise.is_cardio ? (
                        <span className="text-[10px] uppercase tracking-widest font-bold px-2 py-1 bg-orange-50 text-orange-600 border border-orange-200">
                          Cardio
                        </span>
                      ) : null}
                    </div>

                    {/* Instructions */}
                    {exercise.instructions && (
                      <div>
                        <h4 className="text-xs font-bold uppercase tracking-widest text-black dark:text-white mb-2">Instructions</h4>
                        <p className="text-sm text-black dark:text-white leading-relaxed whitespace-pre-line">
                          {exercise.instructions}
                        </p>
                      </div>
                    )}

                    {/* Pro Tips */}
                    {exercise.pro_tips && (
                      <div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-100 dark:border-emerald-800/30 p-4">
                        <h4 className="text-xs font-bold uppercase tracking-widest text-emerald-600 mb-1">Pro Tip</h4>
                        <p className="text-sm text-emerald-800 dark:text-emerald-200 leading-relaxed">
                          {exercise.pro_tips}
                        </p>
                      </div>
                    )}

                    {/* Common Mistakes */}
                    {exercise.common_mistakes && (
                      <div className="bg-orange-50 dark:bg-orange-900/20 border border-orange-100 dark:border-orange-800/30 p-4">
                        <h4 className="text-xs font-bold uppercase tracking-widest text-orange-600 mb-1">Common Mistakes</h4>
                        <p className="text-sm text-orange-800 dark:text-orange-200 leading-relaxed">
                          {exercise.common_mistakes}
                        </p>
                      </div>
                    )}

                    {/* Set Details */}
                    <div className="bg-zinc-50 dark:bg-zinc-800/50 p-4">
                    <div className="grid grid-cols-3 gap-4 text-center">
                        <div>
                          <p className="text-2xl font-bold text-emerald-900 dark:text-emerald-50">{exercise.sets > 0 ? exercise.sets : '-'}</p>
                          <p className="text-sm font-bold uppercase tracking-widest text-black dark:text-white">Sets</p>
                        </div>
                        <div>
                          <p className="text-2xl font-bold text-emerald-900 dark:text-emerald-50">{exercise.reps && exercise.reps !== '0' ? exercise.reps : '-'}</p>
                          <p className="text-sm font-bold uppercase tracking-widest text-black dark:text-white">Reps</p>
                        </div>
                        <div>
                          <p className="text-2xl font-bold text-emerald-900 dark:text-emerald-50">{exercise.rest_seconds}s</p>
                          <p className="text-sm font-bold uppercase tracking-widest text-black dark:text-white">Rest</p>
                        </div>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            ))}
        </div>

        {/* Bottom CTA */}
        <div className="mt-12">
          <Link
            href={`/fitness-planner/program/${dayId}?mode=workout`}
            className="block w-full py-5 bg-emerald-900 text-white text-center font-bold uppercase tracking-widest text-sm hover:bg-emerald-800 transition-all shadow-lg hover:shadow-xl"
          >
            Start Workout
          </Link>
        </div>
      </main>
    </div>
  );
}