Mobile/app/(tabs)/(workout)/WorkoutDetailScreen.tsx

import React, { useState } from "react";
import { View, Text, ImageBackground, TouchableOpacity, ScrollView, Dimensions, Image } from "react-native";
import Modal from "react-native-modal";
import { Ionicons } from "@expo/vector-icons";
import {useWorkoutStore} from "@/store/workoutStore";
import {Workout} from "@/model/Workout";
import {useRouter} from "expo-router";

const screenHeight = Dimensions.get("window").height;

export default function WorkoutScreen() {
    const router = useRouter();
    const workout = useWorkoutStore((s) => s.selectedWorkout);
    const [isModalVisible, setModalVisible] = useState(false);

    if (!workout) return <Text>Pas de workout</Text>;

    const exercises: any[] = [
        {
            id: "1",
            title: "Back Warmup",
            duration: "05:30",
        },
        {
            id: "2",
            title: "Bent Over Row",
            duration: "10:00",
        },
        {
            id: "3",
            title: "Renegade Row",
            duration: "08:45",
        },
    ];

    return (
        <View className="flex-1 bg-black">

            <ImageBackground
                source={require("assets/images/TrainingPresentation.png")}
                className="flex-1 justify-between px-6 pb-10 pt-14"
                imageStyle={{ resizeMode: "cover" }}
            >
                <View className="flex-row justify-between">
                    <TouchableOpacity className="bg-black/50 p-2 rounded-full">
                        <Ionicons name="chevron-back" size={20} color="white" />
                    </TouchableOpacity>
                    <TouchableOpacity className="bg-black/50 p-2 rounded-full">
                        <Ionicons name="settings-outline" size={20} color="white" />
                    </TouchableOpacity>
                </View>

                <View className="flex-1 justify-end">
                    <View className="items-center">
                        <View className="bg-black/50 px-6 py-2 rounded-full mb-4">
                            <Text className="text-white text-base">{exercises.length} Total</Text>
                        </View>
                        <Text className="text-white text-4xl font-bold">{workout.name}</Text>
                    </View>

                    <View className="flex-row justify-between mb-16 mt-16">
                        <View className="items-center flex-1">
                            <Ionicons name="time-outline" size={36} color="white" />
                            <Text className="text-white font-bold text-xl mt-2">{workout.duration} min</Text>
                            <Text className="text-gray-300 text-lg">Time</Text>
                        </View>

                        <View className="h-20 w-1 bg-white mx-2" />

                        <View className="items-center flex-1">
                            <Ionicons name="flame-outline" size={36} color="white" />
                            <Text className="text-white font-bold text-xl mt-2">240kcal</Text>
                            <Text className="text-gray-300 text-lg">Calories</Text>
                        </View>

                        <View className="h-20 w-1 bg-white mx-2" />

                        <View className="items-center flex-1">
                            <Ionicons name="barbell-outline" size={36} color="white" />
                            <Text className="text-white font-bold text-xl mt-2">{workout.nbRepetitions}</Text>
                            <Text className="text-gray-300 text-lg">Sets</Text>
                        </View>
                    </View>
                </View>


                <View className="flex-row">
                    <TouchableOpacity
                        className="flex-1 bg-black/50 p-4 rounded-xl flex-row justify-center items-center"
                        onPress={() => setModalVisible(true)}
                    >
                        <Text className="text-white mr-2">Details</Text>
                        <Ionicons name="document-text-outline" size={18} color="white" />
                    </TouchableOpacity>

                    <TouchableOpacity className="flex-1 bg-orange-500 p-4 rounded-xl flex-row justify-center items-center">
                        <Text className="text-white font-bold mr-2">Start</Text>
                        <Ionicons name="timer-outline" size={18} color="white" />
                    </TouchableOpacity>
                </View>
            </ImageBackground>

            <Modal
                isVisible={isModalVisible}
                onBackdropPress={() => setModalVisible(false)}
                swipeDirection="down"
                onSwipeComplete={() => setModalVisible(false)}
                style={{
                    justifyContent: "flex-end",
                    margin: 0,
                }}
            >
                <View
                    style={{
                        height: screenHeight * 0.65,
                        backgroundColor: "white",
                        borderTopLeftRadius: 20,
                        borderTopRightRadius: 20,
                        padding: 20,
                    }}
                >
                    <ScrollView>
                        <Text className="text-center text-gray-700 mb-4">
                            Liste des exercices
                        </Text>

                        {exercises.map((ex, index) => (
                            <View
                                key={ex.id}
                                className="flex-row bg-gray-100 rounded-xl items-center p-3 mb-4"
                            >
                                <Image source={require("assets/images/TrainingPresentation.png")} className="w-16 h-16 rounded-md mr-3" />
                                <View className="flex-1">
                                    <Text className="font-semibold text-black">
                                        {index + 1}. {ex.title}
                                    </Text>
                                    <View className="flex-row items-center mt-1">
                                        <Ionicons name="time-outline" size={14} color="gray" />
                                        <Text className="text-gray-500 text-xs ml-1">{ex.duration}</Text>
                                    </View>
                                </View>
                                <TouchableOpacity
                                onPress={() => {
                                 //   router.push("/(tabs)/(exercice)/ExercicesScreen")
                                }}>
                                    <Ionicons name="play-circle" size={30} color="#ff7a00" />

                                </TouchableOpacity>
                            </View>
                        ))}
                    </ScrollView>
                </View>
            </Modal>
        </View>
    );
}