EMI-ExpoAPP/Views/LiveCaptions.js

import React from "react";
import { View, FlatList } from "react-native";
import { Text, Chip, Menu, Button } from "react-native-paper";
import API from "../API.js";
import i18n from "../i18nMessages.js";

const POLL_MS = 1800;

const toLangLabel = (lang = "") => {
    const normalized = String(lang || "").toLowerCase();
    if (!normalized || normalized === "original") return i18n.t("message.originalLanguage");
    if (normalized === "en") return i18n.t("message.languageEnglish");
    if (normalized === "es") return i18n.t("message.languageSpanish");
    if (normalized === "fr") return i18n.t("message.languageFrench");
    if (normalized === "da") return i18n.t("message.languageDanish");
    return normalized.toUpperCase();
};

const CaptionRow = ({ item, selectedLang }) => {
    const translation = item?.translations?.[selectedLang];
    const displayTranslation = translation || item?.original || "";
    const isFallback = !translation && selectedLang && selectedLang !== "original" && selectedLang !== item?.sourceLang;
    return (
        <View style={{ marginBottom: 12, backgroundColor: "#fff", borderRadius: 10, padding: 12, borderWidth: 1, borderColor: "#e5e7eb" }}>
            <Text style={{ color: "#6b7280", fontSize: 11, marginBottom: 4 }}>
                {item?.sourceLang ? `${i18n.t("message.originalLanguage")}: ${toLangLabel(item.sourceLang)}` : i18n.t("message.originalLanguage")}
            </Text>
            <Text style={{ fontSize: 18, fontWeight: "700", color: "#111827" }}>
                {item?.original || ""}
            </Text>
            <Text style={{ color: "#6b7280", fontSize: 11, marginTop: 8, marginBottom: 4 }}>
                {i18n.t("message.selectedTranslation")}: {toLangLabel(selectedLang)}
            </Text>
            <Text style={{ fontSize: 16, color: "#1f2937" }}>
                {displayTranslation}
            </Text>
            {isFallback ? (
                <Text style={{ fontSize: 11, color: "#6b7280", marginTop: 6 }}>
                    {i18n.t("message.translationFallback")}
                </Text>
            ) : <></>}
        </View>
    );
};

const LiveCaptions = () => {
    const [captions, setCaptions] = React.useState([]);
    const [availableLanguages, setAvailableLanguages] = React.useState([]);
    const [selectedLang, setSelectedLang] = React.useState((i18n?.locale || "en").toLowerCase());
    const [isLoading, setIsLoading] = React.useState(true);
    const [langMenuVisible, setLangMenuVisible] = React.useState(false);
    const latestSequenceRef = React.useRef(0);

    const refresh = React.useCallback(async (initial = false) => {
        const sinceSequence = initial ? undefined : latestSequenceRef.current;
        const response = await API.getLiveCaptions(sinceSequence, 50);
        const incoming = Array.isArray(response?.captions) ? response.captions : [];
        const languages = Array.isArray(response?.availableLanguages) ? response.availableLanguages : [];

        if (initial) {
            setCaptions(incoming);
        } else if (incoming.length > 0) {
            setCaptions((prev) => {
                const bySequence = new Map(prev.map((item) => [item.sequence, item]));
                incoming.forEach((item) => {
                    if (!item || !Number.isFinite(item.sequence)) return;
                    bySequence.set(item.sequence, item);
                });
                return Array.from(bySequence.values()).sort((a, b) => (a.sequence || 0) - (b.sequence || 0)).slice(-150);
            });
        }

        if (Number.isFinite(response?.latestSequence)) {
            latestSequenceRef.current = response.latestSequence;
        } else if (incoming.length) {
            const maxSeq = incoming.reduce((acc, item) => Math.max(acc, Number(item?.sequence) || 0), latestSequenceRef.current);
            latestSequenceRef.current = maxSeq;
        }

        setAvailableLanguages(languages);
        setIsLoading(false);
    }, []);

    React.useEffect(() => {
        refresh(true);
        const interval = setInterval(() => {
            refresh(false);
        }, POLL_MS);
        return () => clearInterval(interval);
    }, [refresh]);

    const languageOptions = React.useMemo(() => {
        const unique = new Set(["original", ...availableLanguages]);
        return Array.from(unique).filter(Boolean);
    }, [availableLanguages]);

    React.useEffect(() => {
        if (languageOptions.includes(selectedLang)) return;
        if (languageOptions.length) setSelectedLang(languageOptions[0]);
    }, [languageOptions, selectedLang]);

    return (
        <View style={{ flex: 1, padding: 14 }}>
            <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
                <View>
                    <Text style={{ fontSize: 24, fontWeight: "700" }}>{i18n.t("message.liveCaptions")}</Text>
                    <Text style={{ color: "#6b7280" }}>{i18n.t("message.liveCaptionsSubtitle")}</Text>
                </View>
                <Chip icon="circle" compact style={{ backgroundColor: "#ecfdf5" }} textStyle={{ color: "#047857" }}>
                    {i18n.t("message.liveNow")}
                </Chip>
            </View>

            <View style={{ marginBottom: 12 }}>
                <Text style={{ marginBottom: 6 }}>{i18n.t("message.translationLanguage")}</Text>
                <Menu
                    visible={langMenuVisible}
                    onDismiss={() => setLangMenuVisible(false)}
                    anchor={
                        <Button mode="outlined" onPress={() => setLangMenuVisible(true)}>
                            {toLangLabel(selectedLang)}
                        </Button>
                    }
                >
                    {languageOptions.map((lang) => (
                        <Menu.Item
                            key={lang}
                            title={toLangLabel(lang)}
                            onPress={() => {
                                setSelectedLang(lang);
                                setLangMenuVisible(false);
                            }}
                        />
                    ))}
                </Menu>
            </View>

            {isLoading ? <Text>{i18n.t("message.loadingLiveCaptions")}</Text> : <></>}
            {!isLoading && captions.length === 0 ? <Text>{i18n.t("message.awaitingLiveCaptions")}</Text> : <></>}

            <FlatList
                data={captions}
                keyExtractor={(item, index) => `${item?.sequence || "caption"}-${index}`}
                renderItem={({ item }) => <CaptionRow item={item} selectedLang={selectedLang} />}
                contentContainerStyle={{ paddingBottom: 18 }}
                style={{ flex: 1 }}
            />
        </View>
    );
};

export default LiveCaptions;