/* global React */
// ============================================================
// i18n léger (FR / EN) pour le panel opérateur. t("clé") -> texte traduit.
// Langue persistée (localStorage). <LangToggle/> = 2 boutons drapeau.
// ============================================================
const STR = {
  fr: {
    // top bar / menu
    profile_session: "Profil & session", view_admin: "Vue Admin", logout: "Déconnexion",
    // grille devices
    my_devices: "Mes devices", live_backend: "● LIVE (backend)", not_synced: "non synchronisé",
    search_device: "Rechercher un device (nom, tag)…", active: "actifs", assigned: "assignés",
    split_iphone: "Split iPhone", f_all: "Tous", f_online: "En ligne", f_busy: "Occupés",
    f_locked: "Verr.", f_off: "Off", all_pods: "Tous les pods",
    none_assigned: "Aucun iPhone ne t'est assigné pour l'instant.",
    none_filter: "Aucun device ne correspond à ce filtre.",
    refresh: "Rafraîchir", ask_manager_assign: "toujours rien ? demande à ton manager de t'assigner un iPhone",
    click_to_pilot: "cliquer pour piloter",
    // sync notice opérateur
    park_not_synced: "Parc non synchronisé",
    op_offline: "Les iPhones ne sont pas connectés pour le moment. Préviens ton manager pour qu'il relance la synchronisation du parc.",
    send_msg_manager: "Envoyer un message au manager", manager: "Manager",
    // device view / remote
    refresh_screen: "Rafraîchir l'écran", record_screen: "Enregistrer l'écran",
    tap_swipe_hint: "clic = tap, glisser = swipe", connecting_screen: "Connexion à l'écran…",
    unstable_conn: "Connexion instable — reconnexion auto…",
    remote: "Télécommande", my_tasks: "Mes tâches", journal: "Journal",
    actions_journal: "Journal d'actions", navigation: "Navigation directionnelle",
    text_input: "Saisie texte", send: "Envoyer", system: "Système", launch_app: "Lancer une app",
    add: "Ajouter", medias: "Médias", refresh_rate: "Taux de rafraîchissement",
    other_tasks: "Autres tâches", no_task_device: "Aucune tâche assignée pour ce téléphone.",
    text_placeholder: "Texte → champ focus du téléphone…",
  },
  en: {
    profile_session: "Profile & session", view_admin: "Admin view", logout: "Log out",
    my_devices: "My devices", live_backend: "● LIVE (backend)", not_synced: "not synced",
    search_device: "Search a device (name, tag)…", active: "active", assigned: "assigned",
    split_iphone: "Split iPhone", f_all: "All", f_online: "Online", f_busy: "Busy",
    f_locked: "Locked", f_off: "Off", all_pods: "All pods",
    none_assigned: "No iPhone is assigned to you yet.",
    none_filter: "No device matches this filter.",
    refresh: "Refresh", ask_manager_assign: "still nothing? ask your manager to assign you an iPhone",
    click_to_pilot: "click to control",
    park_not_synced: "Fleet not synced",
    op_offline: "The iPhones aren't connected right now. Tell your manager to restart the fleet sync.",
    send_msg_manager: "Message the manager", manager: "Manager",
    refresh_screen: "Refresh screen", record_screen: "Record screen",
    tap_swipe_hint: "click = tap, drag = swipe", connecting_screen: "Connecting to screen…",
    unstable_conn: "Unstable connection — auto-reconnecting…",
    remote: "Remote", my_tasks: "My tasks", journal: "Log",
    actions_journal: "Action log", navigation: "Directional navigation",
    text_input: "Text input", send: "Send", system: "System", launch_app: "Launch an app",
    add: "Add", medias: "Media", refresh_rate: "Refresh rate",
    other_tasks: "Other tasks", no_task_device: "No task assigned for this phone.",
    text_placeholder: "Text → phone's focused field…",
  },
};

const LangStore = (function () {
  let lang = "fr";
  try {
    const saved = localStorage.getItem("tampro_lang");
    if (saved === "fr" || saved === "en") lang = saved;
    else if ((navigator.language || "").toLowerCase().startsWith("en")) lang = "en";
  } catch (e) {}
  const ls = new Set();
  return {
    get() { return lang; },
    set(l) { lang = (l === "en" ? "en" : "fr"); try { localStorage.setItem("tampro_lang", lang); } catch (e) {} ls.forEach(f => f()); },
    sub(cb) { ls.add(cb); return () => ls.delete(cb); },
  };
})();

function t(key) {
  const l = LangStore.get();
  return (STR[l] && STR[l][key]) || STR.fr[key] || key;
}
function useLang() { const [, f] = React.useReducer(x => x + 1, 0); React.useEffect(() => LangStore.sub(f), []); return LangStore.get(); }

// 2 boutons drapeau (FR / EN)
function LangToggle({ size = 26 }) {
  useLang();
  const cur = LangStore.get();
  const Btn = ({ code, flag, label }) => (
    <button onClick={() => LangStore.set(code)} title={label} style={{
      width: size + 8, height: size, display: "grid", placeItems: "center", borderRadius: 8, cursor: "pointer",
      background: cur === code ? "var(--accent-soft)" : "var(--surface-2)",
      border: "1px solid " + (cur === code ? "var(--accent-line)" : "var(--border)"),
      fontSize: size - 9, lineHeight: 1, filter: cur === code ? "none" : "grayscale(.5) opacity(.7)",
    }}>{flag}</button>
  );
  return (
    <div style={{ display: "inline-flex", gap: 5 }}>
      <Btn code="fr" flag="🇫🇷" label="Français" />
      <Btn code="en" flag="🇬🇧" label="English" />
    </div>
  );
}

Object.assign(window, { t, useLang, LangStore, LangToggle });