import React, { useMemo, useState } from "react";
import {
  ChevronRight,
  CalendarDays,
  Dumbbell,
  Flame,
  Home,
  LineChart,
  PlayCircle,
  Search,
  Sparkles,
  Target,
  Trophy,
  Plus,
  Clock3,
  Activity,
  BookOpen,
  Save,
} from "lucide-react";
import {
  ResponsiveContainer,
  LineChart as ReLineChart,
  Line,
  XAxis,
  YAxis,
  Tooltip,
  CartesianGrid,
} from "recharts";

const weeklyPlan = [
  { day: "Maandag", type: "football", title: "Voetbal", accent: "emerald" },
  { day: "Dinsdag", type: "push", title: "Gym • Push", accent: "rose" },
  { day: "Woensdag", type: "football", title: "Voetbal", accent: "emerald" },
  { day: "Donderdag", type: "legs", title: "Gym • Benen", accent: "amber" },
  { day: "Vrijdag", type: "pull", title: "Gym • Pull", accent: "sky" },
  { day: "Zaterdag", type: "football", title: "Wedstrijd", accent: "violet" },
  { day: "Zondag", type: "optional", title: "Optioneel herstel / lichte gym", accent: "slate" },
];

const workoutLibrary = {
  football: {
    title: "Full Body Light",
    subtitle: "Licht, atletisch en slim rondom voetbalbelasting.",
    note: "Gebruik dit als een korte onderhouds-workout: technisch strak, weinig spierpijn, en niet tot falen.",
    exercises: [
      {
        name: "Goblet Squat",
        sets: "2-3 × 8-10",
        reps: "8-10",
        video: "https://www.youtube.com/results?search_query=goblet+squat+how+to",
        explanation:
          "Goede full-body start voor benen en core zonder zware vermoeidheid. Denk aan houding, diepe controle en rustige herhalingen.",
        tips: ["Hou je borst trots", "Zak gecontroleerd", "Blijf uit de pijnzone"],
      },
      {
        name: "Push-Up",
        sets: "2-3 × 8-15",
        reps: "8-15",
        video: "https://www.youtube.com/results?search_query=push+up+how+to",
        explanation:
          "Simpele horizontale duw om borst en triceps bij te houden. Jeff-achtig principe: kwaliteit boven ego, volle range of motion.",
        tips: ["Strakke plank positie", "Ellebogen licht schuin", "Rustig zakken"],
      },
      {
        name: "Cable Row / Band Row",
        sets: "2-3 × 10-12",
        reps: "10-12",
        video: "https://www.youtube.com/results?search_query=seated+cable+row+how+to",
        explanation:
          "Een lichte trekbeweging houdt je rug actief en helpt houding en schouderbalans, zonder je wedstrijdbewegingen te slopen.",
        tips: ["Schouderbladen naar achter", "Niet gooien met je romp", "Voel de stretch"],
      },
      {
        name: "Plank",
        sets: "2-3 × 30-45 sec",
        reps: "30-45 sec",
        video: "https://www.youtube.com/results?search_query=plank+how+to",
        explanation:
          "Core-stabiliteit helpt bij sport, sprinten en contactmomenten. Houd dit kort en strak.",
        tips: ["Ribben omlaag", "Bilspieren aanspannen", "Geen doorgezakte onderrug"],
      },
    ],
  },
  push: {
    title: "Push",
    subtitle: "Borst, schouders en triceps met focus op progressieve overload.",
    note: "Start met compounds, eindig met isolatie. Werk met gecontroleerde uitvoeringen en noteer je gewicht per set.",
    exercises: [
      {
        name: "Barbell Bench Press",
        sets: "3-4 × 5-8",
        reps: "5-8",
        video: "https://www.youtube.com/results?search_query=barbell+bench+press+how+to",
        explanation:
          "Jeff Nippard-stijl hoofdbeweging voor borstkracht en massa. Stabiele setup, volledige controle en alleen load verhogen als je techniek strak blijft.",
        tips: ["Schouderbladen vast", "Bar naar borst met controle", "Explosief omhoog"],
      },
      {
        name: "Incline Dumbbell Press",
        sets: "3 × 8-10",
        reps: "8-10",
        video: "https://www.youtube.com/results?search_query=incline+dumbbell+press+how+to",
        explanation:
          "Pakt bovenborst en voorste schouderkop goed mee. Houd spanning constant en gebruik een incline die je goed voelt.",
        tips: ["Elleboog onder controle", "Diepe stretch", "Geen zwaaien"],
      },
      {
        name: "Seated Shoulder Press",
        sets: "3 × 6-10",
        reps: "6-10",
        video: "https://www.youtube.com/results?search_query=seated+shoulder+press+how+to",
        explanation:
          "Sterke verticale press voor delts en triceps. Ga niet maximaal forceren; laat de reps technisch netjes blijven.",
        tips: ["Core aangespannen", "Ribben laag", "Volledige maar veilige ROM"],
      },
      {
        name: "Lateral Raises",
        sets: "3 × 12-20",
        reps: "12-20",
        video: "https://www.youtube.com/results?search_query=lateral+raise+how+to",
        explanation:
          "Zijschouders reageren vaak goed op hogere reps en goede spanning. Hier wil je strakke herhalingen, geen ego.",
        tips: ["Elleboog iets hoger", "Rustig omlaag", "Voel de zijkant van je schouder"],
      },
      {
        name: "Cable Tricep Pushdown",
        sets: "3 × 10-15",
        reps: "10-15",
        video: "https://www.youtube.com/results?search_query=cable+tricep+pushdown+how+to",
        explanation:
          "Goede isolatie voor extra tricepsvolume. Fixeer je ellebogen en knijp onderin even hard aan.",
        tips: ["Ellebogen stil", "Volledig strekken", "Niet leunen"],
      },
    ],
  },
  legs: {
    title: "Benen",
    subtitle: "Sterke benen voor voetbal en spiergroei, maar slim gedoseerd.",
    note: "Leg day moet je beter maken, niet slopen. Gebruik kwaliteit, volledige controle en geen slordige reps.",
    exercises: [
      {
        name: "Back Squat",
        sets: "3-4 × 4-8",
        reps: "4-8",
        video: "https://www.youtube.com/results?search_query=back+squat+how+to",
        explanation:
          "De grote compound voor quads, glutes en core. Jeff-achtig principe: eerst techniek, dan pas gewicht.",
        tips: ["Voeten stevig", "Controle in de diepte", "Romp strak"],
      },
      {
        name: "Romanian Deadlift",
        sets: "3 × 6-10",
        reps: "6-10",
        video: "https://www.youtube.com/results?search_query=romanian+deadlift+how+to",
        explanation:
          "Top voor hamstrings en glutes. Denk aan hip hinge en houd de bar dicht langs je lichaam.",
        tips: ["Knieën licht gebogen", "Heupen naar achter", "Niet rond trekken met je onderrug"],
      },
      {
        name: "Leg Press",
        sets: "3 × 10-15",
        reps: "10-15",
        video: "https://www.youtube.com/results?search_query=leg+press+how+to",
        explanation:
          "Veel quad volume met minder techniekstress dan squat. Perfect als extra hypertrophy-prikkel.",
        tips: ["Heupen op de bank", "Volledige controle", "Niet te kort bewegen"],
      },
      {
        name: "Leg Curl",
        sets: "3 × 10-15",
        reps: "10-15",
        video: "https://www.youtube.com/results?search_query=leg+curl+how+to",
        explanation:
          "Hamstring-isolatie helpt balans en blessurepreventie. Hou de reps strak en gecontroleerd.",
        tips: ["Volledige stretch", "Bovenin knijpen", "Geen heupen gooien"],
      },
      {
        name: "Standing Calf Raise",
        sets: "3-4 × 12-20",
        reps: "12-20",
        video: "https://www.youtube.com/results?search_query=standing+calf+raise+how+to",
        explanation:
          "Kuiten reageren vaak goed op hogere reps en grote stretch. Neem hier je tijd en gebruik volledige range.",
        tips: ["Onderin diep", "Bovenin hard aanspannen", "Rustig tempo"],
      },
    ],
  },
  pull: {
    title: "Pull",
    subtitle: "Rug, achterste schouders en biceps.",
    note: "Combineer een verticale trek met horizontale trek en eindig met rear delts en biceps.",
    exercises: [
      {
        name: "Pull-ups / Lat Pulldown",
        sets: "3-4 × 6-10",
        reps: "6-10",
        video: "https://www.youtube.com/results?search_query=pull+up+how+to+lat+pulldown+how+to",
        explanation:
          "Sterke vertikale trek voor lats. Kies de variant waarmee je strak en progressief kunt trainen.",
        tips: ["Ellebogen naar je heupen", "Volledige stretch", "Niet zwaaien"],
      },
      {
        name: "Barbell Row",
        sets: "3 × 6-10",
        reps: "6-10",
        video: "https://www.youtube.com/results?search_query=barbell+row+how+to",
        explanation:
          "Sterke horizontale trek voor rugmassa. Houd je torso stabiel en trek consistent.",
        tips: ["Hinge vastzetten", "Trek naar onderbuik", "Geen momentum"],
      },
      {
        name: "Seated Cable Row",
        sets: "3 × 8-12",
        reps: "8-12",
        video: "https://www.youtube.com/results?search_query=seated+cable+row+how+to",
        explanation:
          "Fijne oefening voor constante spanning. Goed voor extra rugvolume met een gecontroleerde uitvoering.",
        tips: ["Lang uitrekken", "Middenrug voelen", "Elke rep strak"],
      },
      {
        name: "Face Pull",
        sets: "3 × 12-20",
        reps: "12-20",
        video: "https://www.youtube.com/results?search_query=face+pull+how+to",
        explanation:
          "Rear delt- en schoudergezondheidsoefening. Licht gewicht, goede lijn en nette reps.",
        tips: ["Trek naar ooghoogte", "Ellebogen hoog", "Rustig terug"],
      },
      {
        name: "Dumbbell Curl",
        sets: "3 × 8-12",
        reps: "8-12",
        video: "https://www.youtube.com/results?search_query=dumbbell+bicep+curl+how+to",
        explanation:
          "Klassieke biceps-builder. Hou de schouders rustig en maak de volledige beweging af.",
        tips: ["Ellebogen stil", "Volledige extensie", "Niet gooien"],
      },
    ],
  },
  optional: {
    title: "Herstel / lichte gym",
    subtitle: "Alleen doen als je fris bent.",
    note: "Deze dag is optioneel. Denk aan mobility, core, licht bovenlichaam of zwakke punten.",
    exercises: [
      {
        name: "Mobility Flow",
        sets: "10-15 min",
        reps: "-",
        video: "https://www.youtube.com/results?search_query=mobility+flow+warm+up",
        explanation: "Maak je lichaam los en herstel sneller. Houd het licht en rustig.",
        tips: ["Adem rustig", "Werk door de heupen en enkels", "Geen intensiteit"],
      },
      {
        name: "Core Circuit",
        sets: "2-3 rondes",
        reps: "8-15",
        video: "https://www.youtube.com/results?search_query=core+workout+basic",
        explanation: "Korte core-sessie voor stabiliteit en sportcontrole. Compact en niet slopend.",
        tips: ["Kwaliteit boven volume", "Rustig tempo", "Blijf gecontroleerd"],
      },
    ],
  },
};

const tabs = [
  { id: "home", label: "Home", icon: Home },
  { id: "schema", label: "Schema", icon: CalendarDays },
  { id: "progress", label: "Progress", icon: LineChart },
];

const accentMap = {
  emerald: "from-emerald-500/20 to-emerald-400/5 border-emerald-400/20",
  rose: "from-rose-500/20 to-rose-400/5 border-rose-400/20",
  amber: "from-amber-500/20 to-amber-400/5 border-amber-400/20",
  sky: "from-sky-500/20 to-sky-400/5 border-sky-400/20",
  violet: "from-violet-500/20 to-violet-400/5 border-violet-400/20",
  slate: "from-slate-500/20 to-slate-400/5 border-white/10",
};

export default function App() {
  const [tab, setTab] = useState("home");
  const [selectedDay, setSelectedDay] = useState(weeklyPlan[1]);
  const [selectedExercise, setSelectedExercise] = useState("Barbell Bench Press");
  const [entries, setEntries] = useState([
    { exercise: "Barbell Bench Press", weight: 70, reps: 8, date: "2026-03-18", day: "Dinsdag" },
    { exercise: "Back Squat", weight: 90, reps: 5, date: "2026-03-19", day: "Donderdag" },
    { exercise: "Pull-ups / Lat Pulldown", weight: 55, reps: 8, date: "2026-03-20", day: "Vrijdag" },
  ]);

  const selectedWorkout = workoutLibrary[selectedDay.type];
  const selectedExercises = selectedWorkout.exercises;

  const allExerciseNames = useMemo(() => {
    const names = [];
    Object.values(workoutLibrary).forEach((group) => {
      group.exercises.forEach((ex) => names.push(ex.name));
    });
    return names;
  }, []);

  const saveLog = (exercise, weight, reps, day) => {
    if (!weight || !reps) return;
    setEntries((prev) => [
      {
        exercise,
        weight: Number(weight),
        reps: Number(reps),
        date: new Date().toISOString().slice(0, 10),
        day,
      },
      ...prev,
    ]);
  };

  const weeklyStats = useMemo(() => {
    const totalSets = entries.length;
    const avgWeight = totalSets ? Math.round(entries.reduce((sum, e) => sum + e.weight, 0) / totalSets) : 0;
    const bestEntry = entries.reduce((best, current) => (current.weight * current.reps > best.weight * best.reps ? current : best), entries[0] || { weight: 0, reps: 0, exercise: "-" });
    return { totalSets, avgWeight, bestEntry };
  }, [entries]);

  const totalVolumeByDate = useMemo(() => {
    const grouped = {};
    entries.forEach((e) => {
      if (!grouped[e.date]) grouped[e.date] = 0;
      grouped[e.date] += e.weight * e.reps;
    });
    return Object.entries(grouped)
      .sort(([a], [b]) => a.localeCompare(b))
      .map(([date, volume], index) => ({ date, volume, idx: index + 1 }));
  }, [entries]);

  const selectedExerciseProgress = useMemo(() => {
    return entries
      .filter((e) => e.exercise === selectedExercise)
      .sort((a, b) => a.date.localeCompare(b.date))
      .map((e, index) => ({
        session: index + 1,
        weight: e.weight,
        reps: e.reps,
        date: e.date,
        volume: e.weight * e.reps,
      }));
  }, [entries, selectedExercise]);

  const recentLogs = useMemo(() => entries.slice(0, 8), [entries]);

  const dayColorClass = accentMap[selectedDay.accent] || accentMap.slate;

  return (
    <div className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(59,130,246,0.25),_transparent_28%),linear-gradient(to_bottom,_#020617,_#0f172a)] text-white">
      <div className="mx-auto flex min-h-screen max-w-7xl flex-col px-4 pb-24 pt-4 md:px-6 lg:px-8">
        <header className="mb-4 rounded-[28px] border border-white/10 bg-white/5 p-4 shadow-2xl backdrop-blur-xl">
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div>
              <div className="flex items-center gap-2 text-xs uppercase tracking-[0.3em] text-white/45">
                <Sparkles className="h-3.5 w-3.5" />
                Training dashboard
              </div>
              <h1 className="mt-1 text-2xl font-semibold md:text-3xl">Voetbal + Gym App</h1>
              <p className="mt-1 text-sm text-white/65">Overzichtelijk schema, duidelijke oefeningsuitleg en progress-tracking in één app.</p>
            </div>
            <div className="rounded-full border border-white/10 bg-black/20 px-4 py-2 text-sm text-white/75">
              Jeff Nippard geïnspireerd
            </div>
          </div>
        </header>

        <main className="flex-1">
          {tab === "home" && (
            <div className="space-y-5">
              <section className="grid gap-4 xl:grid-cols-[1.2fr_0.8fr]">
                <div className="rounded-[28px] border border-white/10 bg-white/5 p-5 shadow-xl backdrop-blur-xl md:p-6">
                  <div className="flex items-center gap-3">
                    <div className="rounded-2xl bg-white/10 p-3">
                      <Flame className="h-6 w-6" />
                    </div>
                    <div>
                      <h2 className="text-xl font-semibold md:text-2xl">Deze week in één oogopslag</h2>
                      <p className="text-sm text-white/65">Je week is verdeeld zodat voetbal en kracht elkaar zo min mogelijk in de weg zitten.</p>
                    </div>
                  </div>

                  <div className="mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
                    <KpiCard label="Logs" value={String(weeklyStats.totalSets)} icon={Save} />
                    <KpiCard label="Gem. gewicht" value={`${weeklyStats.avgWeight} kg`} icon={Dumbbell} />
                    <KpiCard label="Beste set" value={weeklyStats.bestEntry?.exercise || "-"} icon={Trophy} />
                    <KpiCard label="Focus" value="Progressie" icon={Target} />
                  </div>

                  <div className="mt-5 rounded-[24px] border border-white/10 bg-black/20 p-4">
                    <div className="flex items-center gap-2 text-sm font-medium text-white/85">
                      <Activity className="h-4 w-4" />
                      Korte uitleg
                    </div>
                    <p className="mt-2 text-sm leading-6 text-white/65">
                      De app gebruikt een duidelijke weekindeling: voetbaldagen krijgen een lichte full-body sessie, de gymdagen krijgen een echte push / legs / pull-opbouw, en progress wordt gelogd per oefening.
                    </p>
                  </div>
                </div>

                <div className="rounded-[28px] border border-white/10 bg-white/5 p-5 shadow-xl backdrop-blur-xl md:p-6">
                  <div className="flex items-center justify-between gap-3">
                    <div>
                      <h2 className="text-xl font-semibold">Vandaag / volgende training</h2>
                      <p className="text-sm text-white/65">Tik op een dag om het detailplan te openen.</p>
                    </div>
                    <Clock3 className="h-5 w-5 text-white/60" />
                  </div>
                  <div className="mt-4 space-y-3">
                    {weeklyPlan.map((day) => (
                      <button
                        key={day.day}
                        onClick={() => setSelectedDay(day)}
                        className={`w-full rounded-[22px] border bg-gradient-to-br p-4 text-left transition hover:scale-[1.01] ${accentMap[day.accent] || accentMap.slate}`}
                      >
                        <div className="flex items-center justify-between gap-3">
                          <div>
                            <div className="text-sm text-white/65">{day.day}</div>
                            <div className="mt-0.5 text-lg font-semibold">{day.title}</div>
                          </div>
                          <ChevronRight className="h-5 w-5 text-white/70" />
                        </div>
                      </button>
                    ))}
                  </div>
                </div>
              </section>
            </div>
          )}

          {tab === "schema" && (
            <div className="grid gap-4 xl:grid-cols-[0.85fr_1.15fr]">
              <section className="rounded-[28px] border border-white/10 bg-white/5 p-4 shadow-xl backdrop-blur-xl md:p-5">
                <div className="mb-4">
                  <h2 className="text-xl font-semibold md:text-2xl">Weekschema</h2>
                  <p className="mt-1 text-sm text-white/65">Kies een dag en zie direct de oefeningen, uitleg en een veld om je gewicht te loggen.</p>
                </div>
                <div className="space-y-3">
                  {weeklyPlan.map((day) => (
                    <button
                      key={day.day}
                      onClick={() => setSelectedDay(day)}
                      className={`w-full rounded-[22px] border bg-gradient-to-br p-4 text-left transition hover:scale-[1.01] ${accentMap[day.accent] || accentMap.slate}`}
                    >
                      <div className="flex items-center justify-between gap-3">
                        <div>
                          <div className="text-xs uppercase tracking-[0.25em] text-white/55">{day.day}</div>
                          <div className="mt-1 text-lg font-semibold">{day.title}</div>
                        </div>
                        <div className="rounded-full bg-black/20 px-3 py-1 text-xs text-white/75">
                          {day.type === "football" ? "Full body light" : day.type === "optional" ? "Herstel" : "Gym"}
                        </div>
                      </div>
                    </button>
                  ))}
                </div>
              </section>

              <section className="rounded-[28px] border border-white/10 bg-white/5 p-4 shadow-xl backdrop-blur-xl md:p-6">
                <div className={`rounded-[26px] border bg-gradient-to-br p-5 ${dayColorClass}`}>
                  <div className="flex items-center justify-between gap-4">
                    <div>
                      <div className="text-xs uppercase tracking-[0.3em] text-white/55">{selectedDay.day}</div>
                      <h3 className="mt-1 text-2xl font-semibold">{selectedWorkout.title}</h3>
                      <p className="mt-2 max-w-2xl text-sm leading-6 text-white/75">{selectedWorkout.subtitle}</p>
                    </div>
                    <div className="rounded-2xl bg-black/20 p-3">
                      {selectedDay.type === "football" ? <Flame className="h-6 w-6" /> : <Dumbbell className="h-6 w-6" />}
                    </div>
                  </div>
                  <p className="mt-4 text-sm text-white/70">{selectedWorkout.note}</p>
                </div>

                <div className="mt-5 space-y-4">
                  {selectedExercises.map((exercise) => (
                    <ExerciseCard
                      key={exercise.name}
                      exercise={exercise}
                      dayLabel={selectedDay.day}
                      onSave={saveLog}
                    />
                  ))}
                </div>
              </section>
            </div>
          )}

          {tab === "progress" && (
            <div className="space-y-4">
              <section className="grid gap-4 xl:grid-cols-[1fr_1fr]">
                <div className="rounded-[28px] border border-white/10 bg-white/5 p-5 shadow-xl backdrop-blur-xl md:p-6">
                  <div className="flex items-center justify-between gap-3">
                    <div>
                      <h2 className="text-xl font-semibold md:text-2xl">Totale groei</h2>
                      <p className="mt-1 text-sm text-white/65">Volume per dag: gewicht × reps, samengevoegd per datum.</p>
                    </div>
                    <LineChart className="h-5 w-5 text-white/60" />
                  </div>
                  <div className="mt-5 h-72 rounded-[22px] border border-white/10 bg-black/20 p-3">
                    <ResponsiveContainer width="100%" height="100%">
                      <ReLineChart data={totalVolumeByDate}>
                        <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.08)" />
                        <XAxis dataKey="idx" stroke="rgba(255,255,255,0.55)" tickLine={false} axisLine={false} />
                        <YAxis stroke="rgba(255,255,255,0.55)" tickLine={false} axisLine={false} />
                        <Tooltip
                          contentStyle={{
                            background: "#0b1220",
                            border: "1px solid rgba(255,255,255,0.12)",
                            borderRadius: 16,
                            color: "white",
                          }}
                        />
                        <Line type="monotone" dataKey="volume" stroke="#38bdf8" strokeWidth={3} dot={{ r: 3 }} />
                      </ReLineChart>
                    </ResponsiveContainer>
                  </div>
                </div>

                <div className="rounded-[28px] border border-white/10 bg-white/5 p-5 shadow-xl backdrop-blur-xl md:p-6">
                  <h2 className="text-xl font-semibold md:text-2xl">Per oefening</h2>
                  <p className="mt-1 text-sm text-white/65">Kies een oefening om je progressie per lift te zien.</p>
                  <div className="mt-4">
                    <div className="relative">
                      <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/35" />
                      <select
                        value={selectedExercise}
                        onChange={(e) => setSelectedExercise(e.target.value)}
                        className="w-full rounded-[18px] border border-white/10 bg-black/20 py-3 pl-10 pr-4 outline-none"
                      >
                        {allExerciseNames.map((name) => (
                          <option key={name} value={name} className="bg-slate-900">
                            {name}
                          </option>
                        ))}
                      </select>
                    </div>
                  </div>
                  <div className="mt-5 h-72 rounded-[22px] border border-white/10 bg-black/20 p-3">
                    <ResponsiveContainer width="100%" height="100%">
                      <ReLineChart data={selectedExerciseProgress}>
                        <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.08)" />
                        <XAxis dataKey="session" stroke="rgba(255,255,255,0.55)" tickLine={false} axisLine={false} />
                        <YAxis stroke="rgba(255,255,255,0.55)" tickLine={false} axisLine={false} />
                        <Tooltip
                          contentStyle={{
                            background: "#0b1220",
                            border: "1px solid rgba(255,255,255,0.12)",
                            borderRadius: 16,
                            color: "white",
                          }}
                        />
                        <Line type="monotone" dataKey="weight" stroke="#a78bfa" strokeWidth={3} dot={{ r: 3 }} />
                      </ReLineChart>
                    </ResponsiveContainer>
                  </div>
                </div>
              </section>

              <section className="grid gap-4 xl:grid-cols-[1fr_1fr]">
                <div className="rounded-[28px] border border-white/10 bg-white/5 p-5 shadow-xl backdrop-blur-xl md:p-6">
                  <div className="flex items-center gap-2">
                    <BookOpen className="h-5 w-5 text-white/70" />
                    <h3 className="text-lg font-semibold">Recente logs</h3>
                  </div>
                  <div className="mt-4 space-y-3">
                    {recentLogs.length === 0 ? (
                      <EmptyState title="Nog geen logs" text="Ga naar Schema en sla een set op om hier progress te zien." />
                    ) : (
                      recentLogs.map((entry, index) => (
                        <div key={`${entry.exercise}-${entry.date}-${index}`} className="rounded-[20px] border border-white/10 bg-black/20 p-4">
                          <div className="flex items-start justify-between gap-3">
                            <div>
                              <div className="font-medium">{entry.exercise}</div>
                              <div className="mt-1 text-sm text-white/60">{entry.day} • {entry.date}</div>
                            </div>
                            <div className="text-right text-sm text-white/80">
                              <div>{entry.weight} kg</div>
                              <div>{entry.reps} reps</div>
                            </div>
                          </div>
                        </div>
                      ))
                    )}
                  </div>
                </div>

                <div className="rounded-[28px] border border-white/10 bg-white/5 p-5 shadow-xl backdrop-blur-xl md:p-6">
                  <div className="flex items-center gap-2">
                    <Sparkles className="h-5 w-5 text-white/70" />
                    <h3 className="text-lg font-semibold">Praktische richtlijn</h3>
                  </div>
                  <div className="mt-4 space-y-3 text-sm leading-6 text-white/70">
                    <p>Als je oefening soepel voelt en je reps omhoog gaan, zit je goed. Als je techniek instort, verhoog je nog niet.</p>
                    <p>Voor Jeff Nippard-stijl progressie: houd je oefening consistent, verhoog gewicht of reps langzaam en log alles netjes.</p>
                    <p>Voor voetbalweken is het slim om een paar herhalingen in reserve te houden op de zware dagen, vooral richting wedstrijd.</p>
                  </div>
                </div>
              </section>
            </div>
          )}
        </main>

        <nav className="fixed bottom-4 left-1/2 z-20 w-[calc(100%-1rem)] max-w-3xl -translate-x-1/2 rounded-[26px] border border-white/10 bg-[#0b1220]/90 p-2 shadow-2xl backdrop-blur-xl">
          <div className="grid grid-cols-3 gap-2">
            {tabs.map((item) => {
              const Icon = item.icon;
              const active = tab === item.id;
              return (
                <button
                  key={item.id}
                  onClick={() => setTab(item.id)}
                  className={`flex flex-col items-center gap-1 rounded-[18px] px-3 py-3 transition ${
                    active ? "bg-white text-black" : "text-white/65 hover:bg-white/5"
                  }`}
                >
                  <Icon className="h-5 w-5" />
                  <span className="text-xs font-medium">{item.label}</span>
                </button>
              );
            })}
          </div>
        </nav>
      </div>
    </div>
  );
}

function ExerciseCard({ exercise, dayLabel, onSave }) {
  const [weight, setWeight] = useState("");
  const [reps, setReps] = useState("");
  const [showDetails, setShowDetails] = useState(false);

  return (
    <div className="rounded-[26px] border border-white/10 bg-black/20 p-4 md:p-5">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-center gap-2">
            <h4 className="text-lg font-semibold">{exercise.name}</h4>
            <span className="rounded-full bg-white/10 px-3 py-1 text-xs text-white/70">{exercise.sets}</span>
          </div>
          <p className="mt-2 text-sm leading-6 text-white/70">{exercise.explanation}</p>
        </div>
        <a
          href={exercise.video}
          target="_blank"
          rel="noreferrer"
          className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white px-4 py-2 text-sm font-medium text-black"
        >
          <PlayCircle className="h-4 w-4" />
          Video
        </a>
      </div>

      <button
        onClick={() => setShowDetails((s) => !s)}
        className="mt-4 inline-flex items-center gap-2 text-sm text-white/75"
      >
        <span>{showDetails ? "Verberg tips" : "Toon tips"}</span>
        <ChevronRight className={`h-4 w-4 transition ${showDetails ? "rotate-90" : ""}`} />
      </button>

      {showDetails && (
        <div className="mt-3 rounded-[20px] border border-white/10 bg-white/5 p-4">
          <div className="text-sm font-medium text-white/90">Jeff-inspired aandachtspunten</div>
          <ul className="mt-2 space-y-2 text-sm text-white/70">
            {exercise.tips.map((tip) => (
              <li key={tip} className="flex gap-2">
                <span className="mt-2 h-1.5 w-1.5 rounded-full bg-white/50" />
                <span>{tip}</span>
              </li>
            ))}
          </ul>
        </div>
      )}

      <div className="mt-4 grid gap-3 md:grid-cols-[1fr_120px_120px_auto]">
        <input
          type="number"
          value={weight}
          onChange={(e) => setWeight(e.target.value)}
          placeholder="Gewicht (kg)"
          className="w-full rounded-[18px] border border-white/10 bg-white/5 px-4 py-3 outline-none placeholder:text-white/30"
        />
        <input
          type="number"
          value={reps}
          onChange={(e) => setReps(e.target.value)}
          placeholder="Reps"
          className="w-full rounded-[18px] border border-white/10 bg-white/5 px-4 py-3 outline-none placeholder:text-white/30"
        />
        <div className="hidden rounded-[18px] border border-white/10 bg-white/5 px-4 py-3 text-sm text-white/55 md:flex md:items-center">
          {dayLabel}
        </div>
        <button
          onClick={() => {
            onSave(exercise.name, weight, reps, dayLabel);
            setWeight("");
            setReps("");
          }}
          className="inline-flex items-center justify-center gap-2 rounded-[18px] bg-white px-4 py-3 font-semibold text-black transition hover:opacity-90"
        >
          <Save className="h-4 w-4" />
          Log
        </button>
      </div>
    </div>
  );
}

function KpiCard({ label, value, icon: Icon }) {
  return (
    <div className="rounded-[22px] border border-white/10 bg-black/20 p-4">
      <div className="flex items-center justify-between gap-3 text-white/60">
        <span className="text-xs uppercase tracking-[0.24em]">{label}</span>
        <Icon className="h-4 w-4" />
      </div>
      <div className="mt-2 text-lg font-semibold break-words">{value}</div>
    </div>
  );
}

function EmptyState({ title, text }) {
  return (
    <div className="rounded-[20px] border border-dashed border-white/15 bg-black/20 p-5 text-center">
      <div className="font-medium">{title}</div>
      <p className="mt-2 text-sm text-white/60">{text}</p>
    </div>
  );
}