"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 Day {
  id: string;
  day_number: number;
  day_name: string;
  name: string;
  is_rest_day: number;
  exercises?: Exercise[];
}

interface Week {
  id: string;
  week_number: number;
  focus: string;
  name: string;
  days: Day[];
}

interface Template {
  id: string;
  name: string;
  description: string;
  long_description: string;
  level: string;
  goal: string;
  days_per_week: number;
  total_weeks: number;
  estimated_calories_per_week: number;
  equipment_needed: string;
  who_is_for: string;
  weeks: Week[];
}

interface ExerciseTracking {
  setsDone: number;
  repsDone: number;
  completed: boolean;
  hours: number;
  minutes: number;
}

const LEVEL_COLORS: Record<string, string> = {
  beginner: "bg-emerald-100 text-emerald-700 border-emerald-200",
  intermediate: "bg-blue-100 text-blue-700 border-blue-200",
  advanced: "bg-orange-100 text-orange-700 border-orange-200",
};

const LEVEL_BADGE: Record<string, string> = {
  beginner: "Beginner",
  intermediate: "Intermediate",
  advanced: "Advanced",
};

function capitalize(str: string): string {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

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

  const [template, setTemplate] = useState<Template | null>(null);
  const [activeWeek, setActiveWeek] = useState(1);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [isSaved, setIsSaved] = useState(false);
  const [isActive, setIsActive] = useState(false);
  const [tracking, setTracking] = useState<Record<string, ExerciseTracking>>({});
  const [selectedExercises, setSelectedExercises] = useState<Set<string>>(new Set());
  const [workoutDays, setWorkoutDays] = useState<number>(3);
  const [saveMessage, setSaveMessage] = useState<string | null>(null);
  const [isSaving, setIsSaving] = useState(false);

  useEffect(() => {
    document.title = "Program Detail | Marich Wellness";
    fetchTemplate();
    checkUserProgram();
  }, [templateId]);

  useEffect(() => {
    if (template) {
      gsap.from(".detail-section", {
        opacity: 0,
        y: 20,
        stagger: 0.1,
        duration: 0.5,
        ease: "power3.out",
      });
    }
  }, [template, activeWeek]);

  async function fetchTemplate() {
    try {
      const res = await fetch(`/api/fitness/templates/${templateId}`);
      if (!res.ok) throw new Error('Template not found');
      const data = await res.json();
      setTemplate(data.template);
    } catch (err: any) {
      setError(err.message);
    } finally {
      setIsLoading(false);
    }
  }

  async function checkUserProgram() {
    try {
      const profileRes = await fetch('/api/user/profile');
      if (profileRes.ok) {
        const profileData = await profileRes.json();
        const email = profileData?.profile?.user_email;
        if (email) {
          const programsRes = await fetch(`/api/fitness/programs?userId=${encodeURIComponent(email)}`);
          if (programsRes.ok) {
            const programsData = await programsRes.json();
            const saved = (programsData.programs || []).find((p: any) => p.template_id === templateId);
            if (saved) {
              setIsSaved(true);
              if (saved.is_active) setIsActive(true);
            }
          }
        }
      }
    } catch (err) {}
  }

  async function handleSaveProgram() {
    if (!template) return;
    try {
      const profileRes = await fetch('/api/user/profile');
      if (!profileRes.ok) {
        alert('Please complete the fitness questionnaire first.');
        router.push('/fitness-planner');
        return;
      }
      const profileData = await profileRes.json();
      const email = profileData?.profile?.user_email;
      if (!email) {
        alert('Please complete the fitness questionnaire first.');
        router.push('/fitness-planner');
        return;
      }

      const res = await fetch('/api/fitness/programs', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          user_id: email,
          template_id: template.id,
          name: template.name,
          description: template.description,
          is_active: true,
          source: 'template',
        }),
      });

      if (res.ok) {
        setIsSaved(true);
        setIsActive(true);
        // Navigate to the first day's workout execution page
        const firstWeek = template.weeks[0];
        if (firstWeek) {
          const firstDay = firstWeek.days.find(d => !d.is_rest_day);
          if (firstDay) {
            router.push(`/fitness-planner/day/${firstDay.id}`);
          } else {
            router.push('/fitness-planner/dashboard');
          }
        } else {
          router.push('/fitness-planner/dashboard');
        }
      } else {
        const data = await res.json();
        alert(data.error || 'Failed to save program');
      }
    } catch (err: any) {
      alert('Error: ' + err.message);
    }
  }

  async function handleSaveWorkout() {
    if (!template) return;
    setIsSaving(true);
    setSaveMessage(null);
    try {
      const profileRes = await fetch('/api/user/profile');
      if (!profileRes.ok) {
        alert('Please complete the fitness questionnaire first.');
        router.push('/fitness-planner');
        return;
      }
      const profileData = await profileRes.json();
      const email = profileData?.profile?.user_email;
      if (!email) {
        alert('Please complete the fitness questionnaire first.');
        router.push('/fitness-planner');
        return;
      }

      // Save workout days setting
      await fetch('/api/fitness/progress', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          user_id: email,
          week_number: activeWeek,
          day_number: 1,
          completed: 0,
          exercises_done: 0,
          sets_done: 0,
          duration_minutes: 0,
          notes: `workout_days:${workoutDays}`,
        }),
      });

      setSaveMessage('Workout configuration saved successfully!');
      setTimeout(() => setSaveMessage(null), 3000);
    } catch (err: any) {
      setSaveMessage('Failed to save: ' + err.message);
      setTimeout(() => setSaveMessage(null), 3000);
    } finally {
      setIsSaving(false);
    }
  }

  function updateTracking(exerciseId: string, updates: Partial<ExerciseTracking>) {
    setTracking(prev => ({
      ...prev,
      [exerciseId]: {
        ...prev[exerciseId] || { setsDone: 0, repsDone: 0, completed: false, hours: 0, minutes: 0 },
        ...updates,
      },
    }));
  }

  function toggleComplete(exerciseId: string) {
    setTracking(prev => {
      const current = prev[exerciseId] || { setsDone: 0, repsDone: 0, completed: false, hours: 0, minutes: 0 };
      return {
        ...prev,
        [exerciseId]: { ...current, completed: !current.completed },
      };
    });
  }

  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-base">Loading Program...</p>
        </div>
      </div>
    );
  }

  if (error || !template) {
    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 || 'Program not found'}</p>
          <Link href="/fitness-planner/library" className="px-6 py-3 bg-emerald-900 text-white font-bold uppercase tracking-widest text-base inline-block">
            Back to Library
          </Link>
        </div>
      </div>
    );
  }

  const currentWeek = template.weeks.find(w => w.week_number === activeWeek) || template.weeks[0];
  const totalDays = template.days_per_week * template.total_weeks;

  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-7xl 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-7xl mx-auto px-6 pb-32">
        {/* Hero Section */}
        <div className="detail-section mb-16">
          <div className="flex flex-wrap items-start justify-between gap-6 mb-8">
            <div className="space-y-4 max-w-3xl">
              <div className="flex items-center gap-3 flex-wrap">
                <span className={`text-base font-bold uppercase tracking-widest px-3 py-1.5 border ${LEVEL_COLORS[template.level] || LEVEL_COLORS.beginner}`}>
                  {LEVEL_BADGE[template.level] || template.level}
                </span>
                <span className="text-base text-black dark:text-white font-bold uppercase tracking-widest">{template.total_weeks} weeks</span>
                <span className="text-base text-black dark:text-white font-bold uppercase tracking-widest">{template.days_per_week}x/week</span>
                <span className="text-base text-black dark:text-white font-bold uppercase tracking-widest">{totalDays} total days</span>
              </div>
              <h1 className="text-3xl md:text-5xl font-serif text-emerald-900 dark:text-emerald-50 italic tracking-tight leading-none">
                {template.name}
              </h1>
              <p className="text-2xl text-black dark:text-white font-serif italic leading-relaxed">
                {template.description}
              </p>
            </div>

            <div className="flex gap-3">
              {isActive ? (
                <Link
                  href="/fitness-planner/dashboard"
                  className="px-8 py-4 bg-emerald-600 text-white font-bold uppercase tracking-widest text-base hover:bg-emerald-500 transition-all inline-flex items-center gap-2"
                >
                  <span className="material-symbols-outlined text-base">check</span>
                  Active — Go to Dashboard
                </Link>
              ) : isSaved ? (
                <button
                  onClick={handleSaveProgram}
                  className="px-8 py-4 bg-emerald-900 text-white font-bold uppercase tracking-widest text-base hover:bg-emerald-800 transition-all"
                >
                  Set as Active Program
                </button>
              ) : (
                <button
                  onClick={handleSaveProgram}
                  className="px-8 py-4 bg-emerald-900 text-white font-bold uppercase tracking-widest text-base hover:bg-emerald-800 transition-all"
                >
                  Start This Program
                </button>
              )}
            </div>
          </div>

          {/* Program Details Grid */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
            <div className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 p-6 space-y-2">
              <span className="material-symbols-outlined text-emerald-600 text-3xl">track_changes</span>
              <h4 className="font-bold uppercase tracking-wider text-lg text-black dark:text-white">Goals</h4>
              <p className="text-lg font-medium text-emerald-900 dark:text-emerald-50 font-serif italic">
                {template.goal}
              </p>
            </div>
            <div className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 p-6 space-y-2">
              <span className="material-symbols-outlined text-emerald-600 text-3xl">fitness_center</span>
              <h4 className="font-bold uppercase tracking-wider text-lg text-black dark:text-white">Equipment</h4>
              <p className="text-lg font-medium text-emerald-900 dark:text-emerald-50 font-serif italic">
                {template.equipment_needed}
              </p>
            </div>
            <div className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 p-6 space-y-2">
              <span className="material-symbols-outlined text-emerald-600 text-3xl">group</span>
              <h4 className="font-bold uppercase tracking-wider text-lg text-black dark:text-white">Who Its For</h4>
              <p className="text-lg font-medium text-emerald-900 dark:text-emerald-50 font-serif italic">
                {template.who_is_for}
              </p>
            </div>
          </div>

          {/* Long Description */}
          {template.long_description && (
            <div className="prose prose-zinc dark:prose-invert max-w-none mb-12">
              <p className="text-lg text-black dark:text-white leading-relaxed">{template.long_description}</p>
            </div>
          )}
        </div>

        {/* Week Navigation */}
        <div className="detail-section mb-12">
          <h2 className="text-3xl font-serif text-emerald-900 dark:text-emerald-50 italic mb-6 font-bold">Program Structure</h2>
          <div className="flex gap-2 overflow-x-auto pb-2">
            {template.weeks.map((week) => (
              <button
                key={week.id}
                onClick={() => setActiveWeek(week.week_number)}
                className={`px-6 py-3 font-bold uppercase tracking-widest text-base whitespace-nowrap transition-all ${
                  activeWeek === week.week_number
                    ? "bg-emerald-900 text-white shadow-lg"
                    : "bg-white dark:bg-zinc-900 text-black dark:text-white border border-zinc-200 dark:border-zinc-700 hover:border-emerald-600"
                }`}
              >
                {week.focus || `Week ${week.week_number}`}
              </button>
            ))}
          </div>
        </div>

        {/* Workout Days Setting */}
        <div className="detail-section mb-8">
          <div className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 p-6 flex flex-wrap items-center justify-between gap-4">
            <div className="flex items-center gap-4">
              <span className="material-symbols-outlined text-emerald-600 text-3xl">calendar_view_week</span>
              <div>
                <h3 className="font-bold text-lg text-emerald-900 dark:text-emerald-50">Workout Days in the Week</h3>
                <p className="text-base text-black dark:text-white">Set how many days per week you want to train</p>
              </div>
            </div>
            <div className="flex items-center gap-3">
              <input
                type="number"
                min="1"
                max="7"
                value={workoutDays}
                onChange={(e) => setWorkoutDays(Math.min(7, Math.max(1, parseInt(e.target.value) || 1)))}
                className="w-20 px-3 py-2 border border-zinc-200 dark:border-zinc-700 rounded bg-white dark:bg-zinc-800 text-lg text-zinc-800 dark:text-zinc-200 font-bold text-center focus:outline-none focus:ring-2 focus:ring-emerald-500"
              />
              <span className="text-base text-black dark:text-white font-medium">days</span>
              <button
                onClick={handleSaveWorkout}
                disabled={isSaving}
                className="px-6 py-2.5 bg-emerald-900 text-white font-bold uppercase tracking-widest text-base hover:bg-emerald-800 transition-all disabled:opacity-50"
              >
                {isSaving ? 'Saving...' : 'Save Workout'}
              </button>
            </div>
          </div>
          {saveMessage && (
            <div className={`mt-2 px-4 py-2 text-base font-bold uppercase tracking-widest ${saveMessage.includes('successfully') ? 'bg-emerald-100 text-emerald-800' : 'bg-red-100 text-red-800'}`}>
              {saveMessage}
            </div>
          )}
        </div>

        {/* Week Days */}
        {currentWeek && (
          <div className="detail-section space-y-6">
            {currentWeek.days.map((day) => (
              <div
                key={day.id}
                className="bg-white dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-800 overflow-hidden"
              >
                {/* Day Header */}
                <div className="p-6 border-b border-zinc-100 dark:border-zinc-800 flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    <span className="w-10 h-10 rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 flex items-center justify-center font-bold text-base">
                      {day.day_number}
                    </span>
                    <div>
                      <h3 className="font-bold text-lg text-emerald-900 dark:text-emerald-50">
                        Day-{day.day_number}: {day.day_name}
                      </h3>
                      {day.is_rest_day ? (
                        <span className="text-base text-emerald-600 font-bold uppercase tracking-widest">Rest Day</span>
                      ) : (
                        <span className="text-base text-black dark:text-white font-bold uppercase tracking-widest">
                          {(day.exercises || []).length} exercises
                        </span>
                      )}
                    </div>
                  </div>
                  
                </div>

                {/* Day Exercises Tracking Table */}
                {!day.is_rest_day && day.exercises && day.exercises.length > 0 && (
                  <div className="overflow-x-auto">
                    <div className="min-w-[1000px]">
                      {/* Table Header */}
                      <div className="grid grid-cols-[0.5fr_2fr_0.7fr_0.7fr_1fr_0.9fr_0.9fr_0.9fr_1.2fr] gap-2 px-6 py-3 bg-zinc-50 dark:bg-zinc-800/30 border-b border-zinc-100 dark:border-zinc-800">
                        <span className="text-base font-bold uppercase tracking-wider text-black dark:text-white text-center">Select</span>
                        <span className="text-base font-bold uppercase tracking-wider text-black dark:text-white">Exercise</span>
                        <span className="text-base font-bold uppercase tracking-wider text-black dark:text-white">Sets</span>
                        <span className="text-base font-bold uppercase tracking-wider text-black dark:text-white">Reps</span>
                        <span className="text-base font-bold uppercase tracking-wider text-black dark:text-white">Body Part</span>
                        <span className="text-base font-bold uppercase tracking-wider text-black dark:text-white">Sets Done</span>
                        <span className="text-base font-bold uppercase tracking-wider text-black dark:text-white">Reps Done</span>
                        <span className="text-base font-bold uppercase tracking-wider text-black dark:text-white">Complete</span>
                        <span className="text-base font-bold uppercase tracking-wider text-black dark:text-white">Time Taken</span>
                      </div>

                      {/* Exercise Rows (scrollable) */}
                      <div className="max-h-[280px] overflow-y-auto">
                        {day.exercises.map((exercise) => {
                          const track = tracking[exercise.id] || { setsDone: 0, repsDone: 0, completed: false, hours: 0, minutes: 0 };
                          return (
                            <div
                              key={exercise.id}
                              className={`grid grid-cols-[0.5fr_2fr_0.7fr_0.7fr_1fr_0.9fr_0.9fr_0.9fr_1.2fr] gap-2 px-6 py-3 items-center border-b border-zinc-200 dark:border-zinc-700 ${
                                track.completed ? "bg-emerald-50/50 dark:bg-emerald-900/10" : ""
                              }`}
                            >
                              {/* Checkbox */}
                              <div className="flex items-center justify-center">
                                <input
                                  type="checkbox"
                                  checked={selectedExercises.has(exercise.id)}
                                  onChange={() => {
                                    setSelectedExercises(prev => {
                                      const next = new Set(prev);
                                      if (next.has(exercise.id)) {
                                        next.delete(exercise.id);
                                      } else {
                                        next.add(exercise.id);
                                      }
                                      return next;
                                    });
                                  }}
                                  className="w-4 h-4 rounded border-zinc-300 dark:border-zinc-600 text-emerald-600 focus:ring-emerald-500 cursor-pointer"
                                  aria-label={`Select ${exercise.name}`}
                                />
                              </div>

                              {/* Exercise Name */}
                              <div className="flex items-center gap-3">
                                <span className="w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 text-black dark:text-white flex items-center justify-center text-base font-bold shrink-0">
                                  {exercise.order_index}
                                </span>
                                <p className={`text-base font-semibold text-emerald-900 dark:text-emerald-50 ${track.completed ? "line-through opacity-60" : ""}`}>
                                  {exercise.name}
                                </p>
                              </div>

                              {/* Sets */}
                              <p className="text-base text-black dark:text-white">{exercise.sets > 0 ? exercise.sets : '-'}</p>

                              {/* Reps */}
                              <p className="text-base text-black dark:text-white">{exercise.reps && exercise.reps !== '0' ? exercise.reps : '-'}</p>

                              {/* Body Part */}
                              <p className="text-base text-black dark:text-white">{capitalize(exercise.muscle_group)}</p>

                              {/* Sets Done */}
                              <div>
                                <input
                                  type="number"
                                  min="0"
                                  value={track.setsDone || ""}
                                  onChange={(e) => updateTracking(exercise.id, { setsDone: parseInt(e.target.value) || 0 })}
                                  className="w-[70px] px-2 py-1.5 border border-zinc-200 dark:border-zinc-700 rounded bg-white dark:bg-zinc-800 text-base text-zinc-800 dark:text-zinc-200 focus:outline-none focus:ring-1 focus:ring-emerald-500"
                                  aria-label={`Sets completed for ${exercise.name}`}
                                />
                              </div>

                              {/* Reps Done */}
                              <div>
                                <input
                                  type="number"
                                  min="0"
                                  value={track.repsDone || ""}
                                  onChange={(e) => updateTracking(exercise.id, { repsDone: parseInt(e.target.value) || 0 })}
                                  className="w-[70px] px-2 py-1.5 border border-zinc-200 dark:border-zinc-700 rounded bg-white dark:bg-zinc-800 text-base text-zinc-800 dark:text-zinc-200 focus:outline-none focus:ring-1 focus:ring-emerald-500"
                                  aria-label={`Reps completed for ${exercise.name}`}
                                />
                              </div>

                              {/* Complete Button */}
                              <div>
                                <button
                                  onClick={() => toggleComplete(exercise.id)}
                                  className={`px-3 py-1.5 text-base font-bold uppercase tracking-widest rounded transition-all ${
                                    track.completed
                                      ? "bg-emerald-600 text-white"
                                      : "bg-zinc-100 dark:bg-zinc-800 text-black dark:text-white border border-zinc-200 dark:border-zinc-700 hover:border-emerald-600"
                                  }`}
                                  aria-label={track.completed ? `Mark ${exercise.name} as incomplete` : `Mark ${exercise.name} as complete`}
                                >
                                  {track.completed ? "✓ Done" : "Mark Done"}
                                </button>
                              </div>

                              {/* Time Taken */}
                              <div className="flex items-center gap-1">
                                <input
                                  type="number"
                                  min="0"
                                  value={track.hours || ""}
                                  onChange={(e) => updateTracking(exercise.id, { hours: parseInt(e.target.value) || 0 })}
                                  className="w-[55px] px-2 py-1.5 border border-zinc-200 dark:border-zinc-700 rounded bg-white dark:bg-zinc-800 text-base text-zinc-800 dark:text-zinc-200 focus:outline-none focus:ring-1 focus:ring-emerald-500"
                                  aria-label={`Hours taken for ${exercise.name}`}
                                />
                                <span className="text-base text-black dark:text-white font-medium">h</span>
                                <input
                                  type="number"
                                  min="0"
                                  max="59"
                                  value={track.minutes || ""}
                                  onChange={(e) => updateTracking(exercise.id, { minutes: parseInt(e.target.value) || 0 })}
                                  className="w-[55px] px-2 py-1.5 border border-zinc-200 dark:border-zinc-700 rounded bg-white dark:bg-zinc-800 text-base text-zinc-800 dark:text-zinc-200 focus:outline-none focus:ring-1 focus:ring-emerald-500"
                                  aria-label={`Minutes taken for ${exercise.name}`}
                                />
                                <span className="text-base text-black dark:text-white font-medium">min</span>
                              </div>
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  </div>
                )}

                {/* Rest Day */}
                {day.is_rest_day && (
                  <div className="p-6 text-center">
                    <span className="material-symbols-outlined text-3xl text-black dark:text-white mb-2">self_care</span>
                    <p className="text-black dark:text-white font-serif italic text-base">Recovery day — focus on mobility and nutrition</p>
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </main>
    </div>
  );
}