"use client";

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

interface Exercise {
  id: string;
  name: string;
  muscle_group: string;
  equipment: string;
  difficulty: string;
}

interface DayExercise {
  exercise_id: string;
  name: string;
  muscle_group: string;
  sets: number;
  reps: string;
  rest_seconds: number;
  order_index: number;
}

interface DayPlan {
  name: string;
  is_rest_day: boolean;
  exercises: DayExercise[];
}

interface WeekPlan {
  name: string;
  days: DayPlan[];
}

export default function PlanEditorPage() {
  const router = useRouter();
  const [step, setStep] = useState(1);
  const [planName, setPlanName] = useState("");
  const [planDescription, setPlanDescription] = useState("");
  const [totalWeeks, setTotalWeeks] = useState(4);
  const [daysPerWeek, setDaysPerWeek] = useState(3);
  const [weeks, setWeeks] = useState<WeekPlan[]>([]);
  const [exerciseLibrary, setExerciseLibrary] = useState<Exercise[]>([]);
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedMuscleGroup, setSelectedMuscleGroup] = useState("all");
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);

  useEffect(() => {
    document.title = "Create Custom Plan | Marich Wellness";
    fetchExerciseLibrary();
  }, []);

  useEffect(() => {
    if (step === 2 && weeks.length === 0) {
      initializeWeeks();
    }
  }, [step]);

  async function fetchExerciseLibrary() {
    try {
      const res = await fetch('/api/fitness/templates');
      if (res.ok) {
        const data = await res.json();
        // Extract unique exercises from all templates
        const exercises: Exercise[] = [];
        const seen = new Set<string>();
        
        for (const template of data.templates || []) {
          const detailRes = await fetch(`/api/fitness/templates/${template.id}`);
          if (detailRes.ok) {
            const detailData = await detailRes.json();
            const t = detailData.template;
            for (const week of t.weeks || []) {
              for (const day of week.days || []) {
                for (const ex of day.exercises || []) {
                  if (!seen.has(ex.exercise_id)) {
                    seen.add(ex.exercise_id);
                    exercises.push({
                      id: ex.exercise_id,
                      name: ex.name,
                      muscle_group: ex.muscle_group,
                      equipment: ex.equipment,
                      difficulty: ex.difficulty,
                    });
                  }
                }
              }
            }
          }
        }
        setExerciseLibrary(exercises);
      }
    } catch (err) {
      console.error('Failed to load exercise library:', err);
    } finally {
      setIsLoading(false);
    }
  }

  function initializeWeeks() {
    const dayNames = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
    const newWeeks: WeekPlan[] = [];
    
    for (let w = 0; w < totalWeeks; w++) {
      const days: DayPlan[] = [];
      for (let d = 0; d < 7; d++) {
        const isWorkoutDay = d < daysPerWeek;
        days.push({
          name: dayNames[d],
          is_rest_day: !isWorkoutDay,
          exercises: [],
        });
      }
      newWeeks.push({
        name: `Week ${w + 1}`,
        days,
      });
    }
    
    setWeeks(newWeeks);
  }

  function addExerciseToDay(weekIndex: number, dayIndex: number, exercise: Exercise) {
    setWeeks(prev => {
      const updated = [...prev];
      const day = updated[weekIndex].days[dayIndex];
      day.exercises.push({
        exercise_id: exercise.id,
        name: exercise.name,
        muscle_group: exercise.muscle_group,
        sets: 3,
        reps: "10-12",
        rest_seconds: 60,
        order_index: day.exercises.length + 1,
      });
      return updated;
    });
  }

  function removeExerciseFromDay(weekIndex: number, dayIndex: number, exerciseIndex: number) {
    setWeeks(prev => {
      const updated = [...prev];
      updated[weekIndex].days[dayIndex].exercises.splice(exerciseIndex, 1);
      return updated;
    });
  }

  function updateExerciseDetail(weekIndex: number, dayIndex: number, exerciseIndex: number, field: string, value: any) {
    setWeeks(prev => {
      const updated = [...prev];
      const ex = updated[weekIndex].days[dayIndex].exercises[exerciseIndex];
      (ex as any)[field] = value;
      return updated;
    });
  }

  function toggleRestDay(weekIndex: number, dayIndex: number) {
    setWeeks(prev => {
      const updated = [...prev];
      const day = updated[weekIndex].days[dayIndex];
      day.is_rest_day = !day.is_rest_day;
      if (day.is_rest_day) {
        day.exercises = [];
      }
      return updated;
    });
  }

  async function handleSavePlan() {
    if (!planName.trim()) {
      alert('Please enter a plan name');
      return;
    }

    setIsSaving(true);
    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 as a custom program
      const res = await fetch('/api/fitness/programs', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          user_id: email,
          name: planName,
          description: planDescription || `Custom ${daysPerWeek}-day, ${totalWeeks}-week program`,
          is_active: true,
          is_custom: true,
          source: 'custom',
        }),
      });

      if (res.ok) {
        router.push('/fitness-planner/my-plans');
      } else {
        const data = await res.json();
        alert(data.error || 'Failed to save plan');
      }
    } catch (err: any) {
      alert('Error: ' + err.message);
    } finally {
      setIsSaving(false);
    }
  }

  const filteredExercises = exerciseLibrary.filter(ex => {
    const matchesSearch = ex.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         ex.muscle_group.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesMuscle = selectedMuscleGroup === "all" || ex.muscle_group === selectedMuscleGroup;
    return matchesSearch && matchesMuscle;
  });

  const muscleGroups = [...new Set(exerciseLibrary.map(e => e.muscle_group))].sort();

  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 Editor...</p>
        </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-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" className="text-zinc-400 hover:text-emerald-600 transition-colors">
            <span className="material-symbols-outlined text-2xl">close</span>
          </Link>
        </div>
      </nav>

      <main className="max-w-7xl mx-auto px-6 pb-32">
        {/* Step Indicator */}
        <div className="flex items-center gap-4 mb-12">
          {[1, 2, 3].map((s) => (
            <div key={s} className="flex items-center gap-4">
              <div className={`w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm transition-all ${
                step >= s ? 'bg-emerald-900 text-white' : 'bg-zinc-100 dark:bg-zinc-800 text-zinc-400'
              }`}>
                {s}
              </div>
              {s < 3 && <div className={`w-16 h-0.5 ${step > s ? 'bg-emerald-900' : 'bg-zinc-200 dark:bg-zinc-700'}`} />}
            </div>
          ))}
        </div>

        {/* Step 1: Plan Details */}
        {step === 1 && (
          <div className="max-w-2xl mx-auto space-y-8">
            <h1 className="text-5xl font-serif text-emerald-900 dark:text-emerald-50 italic">Create Your Plan</h1>
            <p className="text-black dark:text-white font-serif italic text-lg">Define the structure of your custom workout program.</p>

            <div className="space-y-6">
              <div>
                <label className="block text-xs font-bold uppercase tracking-widest text-zinc-400 mb-2">Plan Name</label>
                <input
                  type="text"
                  value={planName}
                  onChange={(e) => setPlanName(e.target.value)}
                  placeholder="e.g., My Custom Strength Program"
                  className="w-full px-6 py-4 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 text-emerald-900 dark:text-emerald-50 placeholder:text-zinc-300 focus:outline-none focus:border-emerald-600 transition-colors"
                />
              </div>

              <div>
                <label className="block text-xs font-bold uppercase tracking-widest text-zinc-400 mb-2">Description (optional)</label>
                <textarea
                  value={planDescription}
                  onChange={(e) => setPlanDescription(e.target.value)}
                  placeholder="Brief description of your program..."
                  rows={3}
                  className="w-full px-6 py-4 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 text-emerald-900 dark:text-emerald-50 placeholder:text-zinc-300 focus:outline-none focus:border-emerald-600 transition-colors resize-none"
                />
              </div>

              <div className="grid grid-cols-2 gap-6">
                <div>
                  <label className="block text-xs font-bold uppercase tracking-widest text-zinc-400 mb-2">Total Weeks</label>
                  <select
                    value={totalWeeks}
                    onChange={(e) => setTotalWeeks(parseInt(e.target.value))}
                    className="w-full px-6 py-4 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 text-emerald-900 dark:text-emerald-50 focus:outline-none focus:border-emerald-600 transition-colors"
                  >
                    {[2, 4, 6, 8, 12].map(w => (
                      <option key={w} value={w}>{w} weeks</option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-xs font-bold uppercase tracking-widest text-zinc-400 mb-2">Days Per Week</label>
                  <select
                    value={daysPerWeek}
                    onChange={(e) => setDaysPerWeek(parseInt(e.target.value))}
                    className="w-full px-6 py-4 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 text-emerald-900 dark:text-emerald-50 focus:outline-none focus:border-emerald-600 transition-colors"
                  >
                    {[2, 3, 4, 5, 6].map(d => (
                      <option key={d} value={d}>{d} days</option>
                    ))}
                  </select>
                </div>
              </div>
            </div>

            <button
              onClick={() => setStep(2)}
              className="w-full py-5 bg-emerald-900 text-white font-bold uppercase tracking-widest text-sm hover:bg-emerald-800 transition-all"
            >
              Next: Build Program
            </button>
          </div>
        )}

        {/* Step 2: Build Program */}
        {step === 2 && (
          <div className="space-y-12">
            <div className="flex items-center justify-between">
              <div>
                <h1 className="text-5xl font-serif text-emerald-900 dark:text-emerald-50 italic">Build Your Program</h1>
                <p className="text-black dark:text-white font-serif italic text-lg mt-2">
                  Add exercises to each day. Click a day to expand and edit.
                </p>
              </div>
              <button
                onClick={() => setStep(3)}
                className="px-8 py-4 bg-emerald-900 text-white font-bold uppercase tracking-widest text-sm hover:bg-emerald-800 transition-all"
              >
                Review & Save
              </button>
            </div>

            {/* Exercise Library Sidebar */}
            <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
              <div className="lg:col-span-1 space-y-4">
                <div className="bg-white dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-800 p-4 space-y-4">
                  <h3 className="text-xs font-bold uppercase tracking-widest text-zinc-400">Exercise Library</h3>
                  <input
                    type="text"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    placeholder="Search exercises..."
                    className="w-full px-4 py-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 text-sm focus:outline-none focus:border-emerald-600"
                  />
                  <select
                    value={selectedMuscleGroup}
                    onChange={(e) => setSelectedMuscleGroup(e.target.value)}
                    className="w-full px-4 py-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 text-sm focus:outline-none focus:border-emerald-600"
                  >
                    <option value="all">All Muscle Groups</option>
                    {muscleGroups.map(mg => (
                      <option key={mg} value={mg}>{mg}</option>
                    ))}
                  </select>
                  <div className="max-h-96 overflow-y-auto space-y-1">
                    {filteredExercises.map((ex) => (
                      <button
                        key={ex.id}
                        onClick={() => {
                          // Add to first non-rest day of first week
                          for (let w = 0; w < weeks.length; w++) {
                            for (let d = 0; d < weeks[w].days.length; d++) {
                              if (!weeks[w].days[d].is_rest_day) {
                                addExerciseToDay(w, d, ex);
                                return;
                              }
                            }
                          }
                        }}
                        className="w-full text-left px-3 py-2 text-sm hover:bg-emerald-50 dark:hover:bg-emerald-900/20 transition-colors rounded"
                      >
                        <p className="font-bold text-emerald-900 dark:text-emerald-50">{ex.name}</p>
                        <p className="text-xs text-zinc-400">{ex.muscle_group} · {ex.equipment}</p>
                      </button>
                    ))}
                  </div>
                </div>
              </div>

              {/* Week/Day Structure */}
              <div className="lg:col-span-3 space-y-8">
                {weeks.map((week, wi) => (
                  <div key={wi} className="bg-white dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-800">
                    <div className="p-4 border-b border-zinc-100 dark:border-zinc-800">
                      <h3 className="font-bold text-emerald-900 dark:text-emerald-50">{week.name}</h3>
                    </div>
                    <div className="divide-y divide-zinc-50 dark:divide-zinc-800/50">
                      {week.days.map((day, di) => (
                        <div key={di} className="p-4">
                          <div className="flex items-center justify-between mb-2">
                            <div className="flex items-center gap-3">
                              <span className="text-sm font-bold text-emerald-900 dark:text-emerald-50">{day.name}</span>
                              {day.is_rest_day && (
                                <span className="text-[10px] font-bold uppercase tracking-widest text-emerald-600">Rest</span>
                              )}
                            </div>
                            <button
                              onClick={() => toggleRestDay(wi, di)}
                              className={`text-xs font-bold uppercase tracking-widest px-3 py-1 border transition-all ${
                                day.is_rest_day
                                  ? 'border-emerald-600 text-emerald-600 hover:bg-emerald-600 hover:text-white'
                                  : 'border-zinc-200 text-zinc-400 hover:border-emerald-600'
                              }`}
                            >
                              {day.is_rest_day ? 'Make Active' : 'Make Rest'}
                            </button>
                          </div>

                          {!day.is_rest_day && (
                            <div className="space-y-2">
                              {day.exercises.map((ex, ei) => (
                                <div key={ei} className="flex items-center gap-3 bg-zinc-50 dark:bg-zinc-800/50 p-3">
                                  <span className="text-xs text-zinc-400 font-bold w-6">{ei + 1}.</span>
                                  <div className="flex-1">
                                    <p className="text-sm font-bold text-emerald-900 dark:text-emerald-50">{ex.name}</p>
                                    <div className="flex gap-4 mt-1">
                                      <input
                                        type="number"
                                        value={ex.sets}
                                        onChange={(e) => updateExerciseDetail(wi, di, ei, 'sets', parseInt(e.target.value) || 0)}
                                        className="w-16 px-2 py-1 text-xs bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 text-center"
                                        placeholder="Sets"
                                      />
                                      <input
                                        type="text"
                                        value={ex.reps}
                                        onChange={(e) => updateExerciseDetail(wi, di, ei, 'reps', e.target.value)}
                                        className="w-20 px-2 py-1 text-xs bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 text-center"
                                        placeholder="Reps"
                                      />
                                      <input
                                        type="number"
                                        value={ex.rest_seconds}
                                        onChange={(e) => updateExerciseDetail(wi, di, ei, 'rest_seconds', parseInt(e.target.value) || 0)}
                                        className="w-20 px-2 py-1 text-xs bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 text-center"
                                        placeholder="Rest (s)"
                                      />
                                    </div>
                                  </div>
                                  <button
                                    onClick={() => removeExerciseFromDay(wi, di, ei)}
                                    className="text-zinc-300 hover:text-red-500 transition-colors"
                                  >
                                    <span className="material-symbols-outlined text-lg">remove_circle</span>
                                  </button>
                                </div>
                              ))}
                              <button
                                onClick={() => {
                                  // Focus the exercise library search
                                  setSearchQuery("");
                                }}
                                className="text-xs text-emerald-600 font-bold uppercase tracking-widest hover:underline mt-2"
                              >
                                + Add Exercise
                              </button>
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* Step 3: Review & Save */}
        {step === 3 && (
          <div className="max-w-2xl mx-auto space-y-8">
            <h1 className="text-5xl font-serif text-emerald-900 dark:text-emerald-50 italic">Review Your Plan</h1>
            
            <div className="bg-white dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-800 p-8 space-y-6">
              <div className="space-y-2">
                <p className="text-xs text-zinc-400 font-bold uppercase tracking-widest">Plan Name</p>
                <p className="text-2xl font-bold text-emerald-900 dark:text-emerald-50">{planName}</p>
              </div>
              
              {planDescription && (
                <div className="space-y-2">
                  <p className="text-xs text-zinc-400 font-bold uppercase tracking-widest">Description</p>
                  <p className="text-zinc-600 dark:text-zinc-300">{planDescription}</p>
                </div>
              )}

              <div className="flex gap-8">
                <div>
                  <p className="text-xs text-zinc-400 font-bold uppercase tracking-widest">Duration</p>
                  <p className="text-lg font-bold text-emerald-900 dark:text-emerald-50">{totalWeeks} weeks</p>
                </div>
                <div>
                  <p className="text-xs text-zinc-400 font-bold uppercase tracking-widest">Frequency</p>
                  <p className="text-lg font-bold text-emerald-900 dark:text-emerald-50">{daysPerWeek} days/week</p>
                </div>
                <div>
                  <p className="text-xs text-zinc-400 font-bold uppercase tracking-widest">Total Workouts</p>
                  <p className="text-lg font-bold text-emerald-900 dark:text-emerald-50">{totalWeeks * daysPerWeek}</p>
                </div>
              </div>

              <div className="border-t border-zinc-100 dark:border-zinc-800 pt-6">
                <p className="text-xs text-zinc-400 font-bold uppercase tracking-widest mb-4">Week Overview</p>
                <div className="space-y-3">
                  {weeks.map((week, wi) => (
                    <div key={wi} className="flex items-center gap-4">
                      <span className="text-sm font-bold text-emerald-900 dark:text-emerald-50 w-20">{week.name}</span>
                      <div className="flex gap-1">
                        {week.days.map((day, di) => (
                          <div
                            key={di}
                            className={`w-8 h-8 rounded flex items-center justify-center text-[10px] font-bold ${
                              day.is_rest_day
                                ? 'bg-zinc-100 dark:bg-zinc-800 text-zinc-300'
                                : day.exercises.length > 0
                                ? 'bg-emerald-100 text-emerald-700'
                                : 'bg-orange-100 text-orange-600'
                            }`}
                            title={`${day.name}: ${day.is_rest_day ? 'Rest' : day.exercises.length + ' exercises'}`}
                          >
                            {day.is_rest_day ? 'R' : day.exercises.length}
                          </div>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div className="flex gap-4">
              <button
                onClick={() => setStep(2)}
                className="flex-1 py-4 border-2 border-zinc-200 dark:border-zinc-700 text-zinc-500 font-bold uppercase tracking-widest text-sm hover:border-emerald-600 transition-all"
              >
                Back to Edit
              </button>
              <button
                onClick={handleSavePlan}
                disabled={isSaving}
                className="flex-1 py-4 bg-emerald-900 text-white font-bold uppercase tracking-widest text-sm hover:bg-emerald-800 transition-all disabled:opacity-50"
              >
                {isSaving ? 'Saving...' : 'Save Plan'}
              </button>
            </div>
          </div>
        )}
      </main>
    </div>
  );
}