
import { useState, useEffect, useCallback, useRef } from 'react';
import { useRoute, useFocusEffect } from '@react-navigation/native';
import { customStyles, GetPageTheme } from "../../styles/Global";
import {
  View, Text, TouchableOpacity,
  StyleSheet,
  Image,
  Modal,
  AppState, ScrollView
} from 'react-native';
import { connect } from 'react-redux';
import { mapStateToProps, mapDispatchToProps } from '../../reducers/contextProvider';
import moment from 'moment';
import { UploadData2 } from '../../controller/functions';
import { get_item, set_item } from '../../components/localStorage';
import { db, GyanCastURL } from '../../constants/constants';
import { AntDesign } from '../../components/icons';
import LinearGradient from 'react-native-linear-gradient';
import Video from 'react-native-video';
import Slider from '@react-native-community/slider'
import CompletionModal from '../../components/CompletionModal'
import { getMethodName, METHODS } from '../../constants/methodNames';
import SecBack from "../../assets/image/15SecBack.svg"
import PauseIcon2 from "../../assets/image/PauseIcon2.svg"
import SecForward from "../../assets/image/15SecForward.svg"
import LangIcon from "../../assets/image/LangIcon.svg"
import PlaySVG from "../../assets/image/PlaySVG.svg"
import Replay from "../../assets/image/Replay.svg"
import { SvgXml } from 'react-native-svg';


function PodcastDetails(props) {
  const route = useRoute();
  const PageTheme = GetPageTheme(props.DarkMode, route.name);
  const customStyle = customStyles(props.DarkMode, route.name);
  let d2 = moment().format('MM/DD/YYYY');

  const player = useRef(null);
  const [paused, setPaused] = useState(true);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);
  const speeds = [0.5, 1, 1.5, 2];
  const [playbackRate, setPlaybackRate] = useState(1.0);
  const [isFinished, setIsFinished] = useState(false);
  const [isVideoMode, setIsVideoMode] = useState(false);
  const [PlayerObj, setPlayerObj] = useState({});
  const [languageModalVisible, setLanguageModalVisible] = useState(false);
  const [selectedLanguage, setSelectedLanguage] = useState();
  const [visible, setVisible] = useState(false);
  const [TrainingOrg, setTrainingOrg] = useState([]);
  const [LngList, setLngList] = useState([]);
  const lastApiTriggerTime = useRef(0);
  const lastApiTriggerTimetoLocal = useRef(0);

  const startTime = useRef(0);
  const currentTimeRef = useRef(0);
  const hasUnsavedChangesRef = useRef(false);
  const [sliderValue, setSliderValue] = useState(0);
  let params = props.route.params ? props.route.params : {};
  useFocusEffect(
    useCallback(() => {
      // setLoaderTitle(ST.Loading + '...')
      let params = props.route.params ? props.route.params : {};
      let storeData1 = params.storeData || {};
      let PlayerDetail = params.item || {};
      let PlayTime = PlayerDetail?.StartTime && moment.duration(PlayerDetail?.StartTime);
      const totalSeconds = PlayTime.asSeconds();
      PlayerDetail["totalSeconds"] = totalSeconds
      startTime.current = totalSeconds
      console.log("PlayerDetail----", PlayerDetail)
      setPlayerObj(PlayerDetail)
      setIsVideoMode(PlayerDetail?.MediaType == "Video")
      getData(PlayerDetail)

      setTimeout(() => {
        if (player?.current && (totalSeconds > 0)) {
          player?.current.seek(Number(totalSeconds));
          setSliderValue(totalSeconds);
          setCurrentTime(totalSeconds)
          //console.log("totalSeconds------iner", totalSeconds)
        }
      }, 1000);

    }, [])
  );


  // Placeholder for your API call
  const triggerApi = useCallback((val, only_update_local) => {
    // Call your API here
    console.log("testgg", startTime.current, currentTimeRef.current)
    if (params?.item?.Status != "Complete" && (startTime.current <= currentTimeRef.current)) {
      submitAnswer(currentTimeRef.current, val, only_update_local)
    }
  }, [currentTimeRef.current]);

  async function submitAnswer(currentTime, ProgressStatus, only_update_local = false) {
    let loginInfo = await get_item('loginInfo');
    const loginDetails = JSON.parse(loginInfo);
    let projectInfo = await get_item('projectInfo');
    const projectDetails = JSON.parse(projectInfo);
    const { TrainingId } = PlayerObj
    const { ProjectCode, projectName } = projectDetails
    const { Designation, UserId, EmpId, EmployeeName } = loginDetails

    let Obj = {
      // Training:Training_Obj,
      TrainingId: params?.item?.TrainingId,
      PlayTime: moment.utc(currentTime * 1000).format('HH:mm:ss'),
      WatchStatus: ProgressStatus === 'onEnd' ? "Complete" : "Progress",
      ProjectCode,
      projectName,
      UserId,
      userName: EmployeeName,
      TrainingContentId: params?.item?.TrainingContentId,
      EmpId,
      Designation,
      Question: []
    }
    let post_data = {
      "MID": "0",
      "Keys": "TrainingQuestionnaire",
      "JsonData": JSON.stringify(Obj),
      "UserId": loginDetails.UserId
    }
    if (only_update_local) {
      console.log("upload_Status", "Update_local")
      UpdateQuery(Obj)
    } else {
      const url = GyanCastURL + getMethodName(METHODS.UPLOAD_JSON_DIRECT);
      console.log('GyanCast upload ', url, post_data);
      await UploadData2(url, post_data)
        .then(async (res) => {
          console.log("upload_Status", ProgressStatus  + "--" + res)
          UpdateQuery(Obj)
          if (res?.success == false) {
            return
          }
        }).catch(err => {
          console.log('onPage Team error', err);
        });
    }
  }

  async function DownloadData() {
    let loginInfo = await get_item('loginInfo');
    const loginDetails = JSON.parse(loginInfo);
    let projectInfo = await get_item('projectInfo');
    let projectDetails = projectInfo != null ? JSON.parse(projectInfo) : {};
    const data1 = {
      Downloadtype: "Gyancast_TrainingContent",
      Param1: '',
      Param2: projectDetails?.ProjectCode,
      Username: loginDetails.UserId,
    };

    const url = props.baseurl + getMethodName(METHODS.DOWNLOADJSON_METHOD);
    console.log("Downloading from:", url, data1);
    await UploadData2(url, data1)
      .then(async (res) => {
        let jsonObj = res && JSON.parse(res)
        console.log(jsonObj);
        insertData(jsonObj);
        console.log('res of download get', res);
      }).catch(err => {
        console.log('onPage Team error', err);
      });
  }

  const UpdateQuery = async (Obj) => {
    let sql_stmnt = `UPDATE Gyancast_TrainingContent SET StartTime='${Obj?.PlayTime}' where (TrainingId='${Obj?.TrainingId}' or TrainingId= ${Obj?.TrainingId}) and (TrainingContentId='${Obj?.TrainingContentId}' or TrainingContentId = ${Obj?.TrainingContentId})`;
    db.transaction(function (txn) {
      txn.executeSql(sql_stmnt, [], function (txn1, txnres) {
        console.log('Gyancast_TrainingContent Updated');
      }, function (txnE, txnerr) {
        console.log(txnerr);
      });
    }, function (txnE, txnerr) {
      console.log(txnerr);
    });
  }

  const insertData = async (res) => {

    if (res != null && typeof res == 'object' && res.Gyancast_TrainingContent != null && res.Gyancast_TrainingContent != '') {
      let data_arr = res.Gyancast_TrainingContent || [];
      var values = [];
      data_arr.map((data_obj) => {
        let { TrainingId, Topic, Description, MediaType, Mandatory, TrainingContentId, Thumnail, TrainingUrl, Duration, LanguageId, Language, DefaultLang, Status, StartTime, PublishDate, ExpiryDate, TrainingNo } = data_obj;
        values.push(` (${TrainingId},'${Topic}','${Description}','${MediaType}',${(Mandatory == "true" || Mandatory == 1 || Mandatory == true || Mandatory == '1') ? 1 : 0},${TrainingContentId},'${Thumnail}','${TrainingUrl}','${Duration}',${LanguageId},'${Language}',${(DefaultLang == "true" || DefaultLang == 1 || DefaultLang == true || DefaultLang == '1') ? 1 : 0},'${Status}','${StartTime}','${PublishDate}','${ExpiryDate}','${TrainingNo}')`);
      });

      var all_vals = values.join(',');
      var sql_stmnt = `INSERT INTO Gyancast_TrainingContent(TrainingId, Topic, Description, MediaType, Mandatory, TrainingContentId, Thumnail, TrainingUrl, Duration, LanguageId, Language, DefaultLang, Status, StartTime, PublishDate, ExpiryDate,TrainingNo) values ${all_vals}`;

      db.transaction(function (txn) {
        // delete all today data
        txn.executeSql(`delete from Gyancast_TrainingContent where 1=1`, [], function (txn1, txnres) {
          // insert or refresh all today data
          txn.executeSql(sql_stmnt, [], function (txn1, txnres) {
            console.log('Gyancast_TrainingContent added');

          }, function (txnE, txnerr) {
            console.log(txnerr);

          });
        }, function (txnE, txnerr) {
          console.log(txnerr);
        });
      });

    }

  }


  const onProgress = (data) => {
    setCurrentTime(data.currentTime);
    currentTimeRef.current = data.currentTime
    hasUnsavedChangesRef.current = true
    setSliderValue(data.currentTime); // keep UI in sync

    // 🌐 API call every 2 minutes
    if ((data.currentTime - lastApiTriggerTime.current >= 120 || lastApiTriggerTime.current === 0) && (startTime.current <= data.currentTime)) {
      triggerApi(PlayerObj?.Status);
      console.log("triggerApi", "Server", lastApiTriggerTime.current)
      lastApiTriggerTime.current = data.currentTime;
    }

    // 🔁 Local update every 30 seconds
    if ((data.currentTime - lastApiTriggerTimetoLocal.current >= 30 || lastApiTriggerTimetoLocal.current === 0) && (startTime.current <= data.currentTime)) {
      triggerApi(PlayerObj?.Status, true);
      lastApiTriggerTimetoLocal.current = data.currentTime;
      console.log("triggerApi", "Local", lastApiTriggerTimetoLocal.current, data.currentTime)
    }

  }
  const onLoad = (data) => {
    setDuration(data.duration)
  };

  const skipForward = () => {
    //player.current.seek(currentTime + 45);
  };

  const skipBackward = () => {
    player.current.seek(currentTime - 15);
  };

  const setPausedWithUpdate = () => {
    const willPause = !paused;
    setPaused(willPause);
    if (isFinished) {
      console.log("isFinished-----", isFinished)
      // Reset everything
      setIsFinished(false);
      player.current?.seek(0); // 👈 SEEK the player to 0
      setCurrentTime(0);
      setSliderValue(0);       // 👈 reset slider
      currentTimeRef.current = 0;
      lastApiTriggerTime.current = 0;
      lastApiTriggerTimetoLocal.current =0;

      setTimeout(() => {
        setPaused(false);      // Auto-resume
      }, 200); // short delay to allow seek to apply
    }
  };


  const toggleSpeed = () => {
    const next = speeds[(speeds.indexOf(playbackRate) + 1) % speeds.length];
    setPlaybackRate(next);
  };

  const formatTime = (seconds) => {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
  };

  useEffect(() => {
    const AppStateSubscription = AppState.addEventListener('change', (pro) => { _handleAppStateChange(pro) });
    const unsubscribe = props.navigation.addListener('beforeRemove', onBeforeRemove);
    return function cleanup() {
      AppStateSubscription.remove();
      return unsubscribe
    };
  }, []);
  const onBeforeRemove = async () => {
    if (hasUnsavedChangesRef.current == true) {
      let Obj = {
        TrainingId: params?.item?.TrainingId,
        PlayTime: moment.utc(currentTimeRef.current * 1000).format('HH:mm:ss'),
        TrainingContentId: params?.item?.TrainingContentId,
      }
      UpdateQuery(Obj)
    }
  }

  const _handleAppStateChange = async (nextAppState) => {
    if (nextAppState == 'background' && hasUnsavedChangesRef.current == true) {
      let Obj = {
        TrainingId: params?.item?.TrainingId,
        PlayTime: moment.utc(currentTimeRef.current * 1000).format('HH:mm:ss'),
        TrainingContentId: params?.item?.TrainingContentId,
      }
      UpdateQuery(Obj)
    }
    if (nextAppState !== "active") {
      // App goes inactive (call, minimize, lock screen etc.)
      setPaused(true);
    }
  }


  async function getData(PlayerDetail) {
    try {
      let List = [], LST = [];
      let lngDt = await get_item('GyanCastLng');

      let jsonDT = lngDt && JSON.parse(lngDt)

      if (jsonDT) {
        setSelectedLanguage(jsonDT)
        LangContent(jsonDT, PlayerDetail)
      }
      await db.transaction(async function (txn) {
        let q = `Select DISTINCT QuestionId,Question,QuestionType from Gyancast_TrainingContentQuestion where (TrainingId='${PlayerDetail?.TrainingId}' or TrainingId= ${PlayerDetail?.TrainingId})`;
        let q2 = `Select DISTINCT LanguageId, Language from Gyancast_TrainingContent where (TrainingId='${PlayerDetail?.TrainingId}' or TrainingId= ${PlayerDetail?.TrainingId})`;

        await txn.executeSql(
          q,
          [],
          async function (txn2, txnres2) {
            if (txnres2.rows.length > 0) {
              for (let i = 0; i < txnres2.rows.length; i++) {
                let data = txnres2.rows.item(i);
                List.push(data);
              }
              setTrainingOrg(List);
            }
          },
          function (txnE, txnerr) {
            console.log(txnerr);
          }
        );

        await txn.executeSql(
          q2,
          [],
          async function (txn2, txnres2) {
            if (txnres2.rows.length > 0) {
              for (let i = 0; i < txnres2.rows.length; i++) {
                let data = txnres2.rows.item(i);
                LST.push(data);
              }
              setLngList(LST);
            }
          },
          function (txnE, txnerr) {
            console.log(txnerr);
          }
        );
      });
    } catch (err) {
      console.log(err);
    }
  }

  const setLocalLang = async (selectedLanguage) => {
    await set_item('GyanCastLng', JSON.stringify(selectedLanguage));
  }

  async function LangContent(selectedLanguage, PlayerDetail = {}) {
    try {
      let List = [];
      await db.transaction(async function (txn) {
        let q = `Select TrainingId,Topic,Description,MediaType,TrainingContentId,Thumnail,TrainingUrl,Status,StartTime,PublishDate,ExpiryDate,DefaultLang,TrainingNo from Gyancast_TrainingContent where (TrainingId='${PlayerDetail?.TrainingId}' or TrainingId= ${PlayerDetail?.TrainingId}) and (LanguageId='${selectedLanguage}' or LanguageId= ${selectedLanguage})`;
        await txn.executeSql(
          q,
          [],
          async function (txn2, txnres2) {
            if (txnres2.rows.length > 0) {
              for (let i = 0; i < txnres2.rows.length; i++) {
                let data = txnres2.rows.item(i);
                setPlayerObj(data)
              }
            }
          },
          function (txnE, txnerr) {
            console.log(txnerr);
          }
        );
      });
    } catch (err) {
      console.log(err);
    }
  }

  function _rendarLanModal() {
    return (
      <Modal visible={languageModalVisible} transparent animationType="slide">
        <View style={styles.modalBackground}>
          <View style={styles.modalContainer}>
            <View style={{ alignItems: "center", textAlign: "center", paddingHorizontal: "10%" }}>
              <LangIcon width={31} height={31} />
              <Text style={styles.modalTitle}>Choose Your Language</Text>
              <Text style={styles.modalNote}>
                <Text style={{ fontWeight: "bold", color: "#000" }}>Note: </Text>After selecting a language, the podcast will start from the beginning.
              </Text>

              <Text style={styles.modalNote}>
                Select the language you prefer to listen to this podcast in.
              </Text>
            </View>

            {LngList.map((lang) => (
              <TouchableOpacity
                key={lang.LanguageId}
                // disabled={!lang.uri}
                onPress={() => {
                  setSelectedLanguage(lang.LanguageId)
                  LangContent(lang.LanguageId, PlayerObj)
                  setLocalLang(lang.LanguageId)
                }}
                style={[
                  styles.languageButton,
                  selectedLanguage == lang.LanguageId && styles.selectedLanguage,
                  // styles.disabledLanguage,
                ]}
              >
                <Text style={{ color: '#000' }}>
                  {lang.Language}
                </Text>
              </TouchableOpacity>
            ))}

            <TouchableOpacity
              onPress={() => {
                setPaused(false);
                player.current.seek(0); // restart
                setLanguageModalVisible(false);
              }}
              style={styles.continueButton}
            >
              <Text style={styles.continueText}>Continue</Text>
            </TouchableOpacity>

            <TouchableOpacity onPress={() => setLanguageModalVisible(false)}>
              <Text style={{ textAlign: 'center', marginTop: 10, color: "#000" }}>Cancel</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    );
  }

  const goBack = () => {
    props.navigation.goBack();
  }


  return (
    <View style={styles.container2}>
      <LinearGradient colors={[PageTheme.$gradient1, PageTheme.$primary_color]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={customStyle.roundScrollWrapper}>
        <View style={styles.container}>
          <View style={{ flexDirection: "row", alignItems: "center", marginBottom: "10%" }}>
            <TouchableOpacity
              style={[customStyle.toggleDrawerBtn, customStyle.headerLeftIcon]} onPress={() => { props.onPress != null ? props.onPress() : goBack() }}>
              <AntDesign color={'gray'} size={25} name='arrowleft' />
            </TouchableOpacity>
            <View style={{ width: '80%', marginTop: "5%" }}>
              <Text style={styles.header}>PLAYING FROM GYANCAST</Text>
              <Text style={styles.title}>{PlayerObj?.Topic}</Text>
              <Text style={styles.modalNote}>Gyancast ID : {PlayerObj?.TrainingNo}</Text>
            </View>
          </View>
          <ScrollView contentContainerStyle={{ paddingBottom: 15 }}>
            {!isVideoMode && (
              <Image
                style={styles.image}
                source={{ uri: PlayerObj?.Thumnail }}
              />
            )}

            <View style={styles.audioContainer}>
              {/* Audio player */}
              {/* {console.log("plyar------", PlayerObj)} */}
              <Video
                source={{ uri: PlayerObj?.TrainingUrl }}
                // source={{ uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4' }}
                ref={player}
                paused={paused}
                onProgress={onProgress}
                onLoad={onLoad}
                rate={playbackRate}
                onEnd={(val) => {
                  setIsFinished(true);
                  setPaused(true)
                  //setSliderValue(0);         // ✅ reset slider
                  if (TrainingOrg.length == 0) {
                    DownloadData()
                  }
                  console.log("APIII","onEnd")
                  triggerApi("onEnd")
                }}
                audioOnly={!isVideoMode}
                resizeMode="contain"
                playInBackground={false}
                style={isVideoMode ? styles.video : {}}
              />

              <View>
                <Text style={styles.episodeTitle}>{PlayerObj?.Topic}</Text>
                <Text style={styles.episodeDescription}>
                  {PlayerObj?.Description}
                </Text>
              </View>

              <Slider
                value={sliderValue}
                minimumValue={0}
                maximumValue={duration}
                onValueChange={(val) => {
                  // Prevent forward seek while sliding
                  if (params?.item?.Status === "Complete" || val > currentTimeRef.current) {
                    // ⛔ Lock slider to current time
                    setSliderValue(currentTimeRef.current);
                  } else {
                    // ✅ Allow normal sliding
                    setSliderValue(val);
                    setCurrentTime(val)
                  }
                }}
                onSlidingComplete={(val) => {
                  // Final check after sliding
                  if (params?.item?.Status === "Complete" || val <= currentTimeRef.current) {
                    player.current.seek(val);
                    setCurrentTime(val);
                    currentTimeRef.current = val;
                  } else {
                    player.current.seek(currentTimeRef.current);
                    setSliderValue(currentTimeRef.current);
                  }
                }}
                minimumTrackTintColor="#3075ec"
                maximumTrackTintColor="#ccc"
                thumbTintColor="#3075ec"
              />

              <View style={styles.timeAndControlsRow}>
                <Text style={styles.timeText}>{formatTime(currentTime)}<Text style={styles.bulletText}> {'\u2022'} Intro</Text></Text>
                <Text style={styles.timeText}>{formatTime(duration)}</Text>
              </View>

              {(!isFinished || params?.item?.Status == "Complete") ?
                <View style={styles.controls}>
                  <TouchableOpacity onPress={() => {
                    //setPlaybackRate(playbackRate === 1 ? 2 : 1)
                    // Cycle between 1x, 1.25x, 1.5x
                    const speeds = [1, 1.25, 1.5];
                    const currentIndex = speeds.indexOf(playbackRate);
                    const nextIndex = (currentIndex + 1) % speeds.length;
                    setPlaybackRate(speeds[nextIndex]);
                  }
                  }>
                    <Text style={styles.speedButton}>{playbackRate}
                      <Text style={{
                        fontSize: 13,
                        fontWeight: '500',
                        padding: 8,
                        color: '#000'
                      }}>X</Text></Text>
                  </TouchableOpacity>

                  <TouchableOpacity onPress={skipBackward}>
                    <SecBack width={28} height={28} />
                  </TouchableOpacity>

                  <TouchableOpacity onPress={() => { setPausedWithUpdate() }}>
                     {paused ? (  <PlaySVG width={57} height={57} />):(<PauseIcon2 width={57} height={57} />)}
                  </TouchableOpacity>

                  <TouchableOpacity onPress={skipForward}>
                    <SecForward width={28} height={28} />
                  </TouchableOpacity>

                  <TouchableOpacity onPress={() => {
                    setLanguageModalVisible(true)
                  }}>
                    <LangIcon width={31} height={31} />
                  </TouchableOpacity>
                </View> : (
                  <View style={styles.endButtonsContainer}>
                    <TouchableOpacity style={styles.replayBtn} onPress={() => {
                      setIsFinished(false);
                      setPaused(false);
                      player.current.seek(0);
                    }}>
                      <Replay width={16} height={16} />
                      <Text style={styles.replayText}>Replay</Text>
                    </TouchableOpacity>

                    {TrainingOrg.length > 0 &&
                      <TouchableOpacity style={styles.continueBtn} onPress={() => {
                        if (TrainingOrg.length > 0) {
                          props.navigation.navigate('QuestionnaireScreen', { PlayerObj: PlayerObj, PlayTime: currentTime })
                        } else {
                          props.navigation.reset({ index: 1, routes: [{ name: 'NoticeBoard' }, { name: 'Gyancasts' }] })
                        }
                      }}>
                        <Text style={styles.continueText}>Continue</Text>
                      </TouchableOpacity>}
                  </View>
                )}


            </View>

          </ScrollView>
        </View>
      </LinearGradient>
      {_rendarLanModal()}
      <CompletionModal
        visible={visible}
        onClose={() => setVisible(false)}
        correct={4}
        wrong={0}
        total={4}
      />
    </View>
  );
}



export default connect(mapStateToProps, mapDispatchToProps)(PodcastDetails);

const styles = StyleSheet.create({

  subtitle: {
    fontSize: 14,
    textAlign: 'center',
    color: '#555',
    marginBottom: 10,
  },
  divider: {
    height: 1,
    backgroundColor: '#e0e0e0',
    marginVertical: 15,
    width: '100%',
  },
  mainHeading: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#000',
    marginBottom: 5,
  },
  subHeading: {
    fontSize: 16,
    textAlign: 'center',
    color: '#555',
    marginBottom: 15,
  },
  episodeTitle: {
    fontSize: 22,
    fontWeight: '700',
    // textAlign: 'center',
    marginBottom: 10,
    paddingHorizontal: 20,
    color: '#000'
  },
  episodeDescription: {
    fontSize: 14,
    color: '#555',
    marginBottom: 8,
    // marginBottom: "15%",
    overflow: "hidden",
    paddingHorizontal: 20,
  },
  bulletContainer: {
    marginBottom: 20,
    paddingHorizontal: 20,
  },
  bulletItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  bulletCheckbox: {
    width: 18,
    height: 18,
    borderWidth: 1,
    borderColor: '#000',
    borderRadius: 3,
    marginRight: 10,
  },
  bulletText: {
    fontSize: 14,
    color: '#000',
  },
  timeAndControlsRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    // marginVertical: 15,
    paddingHorizontal: 6,
  },
  container2: {
    flex: 1,
    backgroundColor: '#e6f0fa',
    paddingTop: 40,
    paddingHorizontal: 0,
  },

  container: {
    flex: 1,
    padding: 10,
    backgroundColor: '#fff',
  },
  header: {
    color: '#555',
    fontSize: 12,
    textAlign: 'center',
  },
  title: {
    fontSize: 18,
    fontWeight: '600',
    textAlign: 'center',
    marginVertical: 5,
    marginBottom: 3,
    color: '#000'
  },
  image: {
    width: 200,
    height: 200,
    alignSelf: 'center',
    borderRadius: 12,
    marginBottom: 20,
  },
  video: {
    width: '100%',
    height: '100%',
    borderRadius: 10,
    height: 250
  },
  slider: {
    width: '100%',
    height: 40,
  },
  timeRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    margin: 5
  },
  timeText: {
    fontSize: 12,
    color: '#444',
  },
  controls: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginVertical: 20,
    alignItems: 'center',
  },
  speedButton: {
    fontSize: 25,
    fontWeight: '500',
    padding: 8,
    color: '#000',
    borderRadius: 8,
    marginHorizontal: 10,
  },
  card: {
    backgroundColor: '#f1f1f1',
    borderRadius: 12,
    padding: 15,
  },
  cardTitle: {
    fontWeight: 'bold',
    fontSize: 16,
    marginBottom: 8,
    color: '#000'
  },
  cardText: {
    fontSize: 14,
    color: '#000',
  },
  endButtonsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginTop: 20,
  },

  replayBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderWidth: 1,
    borderColor: '#007aff',
    borderRadius: 20,
    marginBottom: 25,
    backgroundColor: '#fff',
  },

  replayText: {
    color: '#007aff',
    marginLeft: 6,
    fontWeight: '500',
  },

  continueBtn: {
    paddingHorizontal: 25,
    paddingVertical: 10,
    backgroundColor: '#007aff',
    marginBottom: 25,
    borderRadius: 20,
  },
  videoContainer: {
    position: 'relative',
    width: '100%',
    height: 250,
    backgroundColor: 'black',
    borderRadius: 10,
    overflow: 'hidden',
  },
  audioContainer: {
    // position: 'relative',
    width: '100%',
    // height: 50,
    backgroundColor: 'white',
    borderRadius: 10,
    // overflow: 'hidden',
  },
  audio: {
    width: '100%',
    height: '10%',
    backgroundColor: '#fff'
  },
  sliderOverlay: {
    // position: 'absolute',
    // bottom: 10,
    // left: 10,
    // right: 10,
  },
  modalBackground: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.4)',
  },
  modalContainer: {
    backgroundColor: '#fff',
    // justifyContent:"center",
    // alignItems: "center",
    width: '80%',
    borderRadius: 10,
    padding: 20,
  },
  modalTitle: {
    fontWeight: 'bold',
    fontSize: 18,
    marginBottom: 10,
    textAlign: "center"
  },
  modalNote: {
    fontSize: 12,
    textAlign: "center",
    marginBottom: 15,
    color: '#666',
  },
  languageButton: {
    padding: 10,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    marginVertical: 5,
  },
  selectedLanguage: {
    borderColor: '#007bff',
    backgroundColor: '#e6f0ff',
  },
  disabledLanguage: {
    backgroundColor: '#f1f1f1',
  },
  continueButton: {
    backgroundColor: '#007bff',
    padding: 12,
    borderRadius: 8,
    marginTop: 10,
  },
  continueText: {
    color: '#fff',
    textAlign: 'center',
    fontWeight: '600',
  },

});