/**
 * CockpitOverviewButton — Header-Button (links) für „⤢ Übersicht".
 *
 * Nur sichtbar im Cockpit-Modus, wenn gerade eine Kachel fokussiert ist. Sitzt
 * im Navigations-Header, kollidiert also mit nichts im Chat (früher hing er über
 * dem Abbrechen-Button der „ARIA denkt"-Leiste).
 */

import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, TouchableOpacity } from 'react-native';
import cockpitNav from '../services/cockpitNav';
import viewMode, { ViewModeValue } from '../services/viewMode';

const CockpitOverviewButton: React.FC = () => {
  const [mode, setMode] = useState<ViewModeValue>(viewMode.get());
  const [focused, setFocused] = useState<boolean>(cockpitNav.isFocused());

  useEffect(() => viewMode.subscribe(setMode), []);
  useEffect(() => cockpitNav.subscribe(setFocused), []);

  if (mode !== 'cockpit' || !focused) return null;

  return (
    <TouchableOpacity
      onPress={() => cockpitNav.requestOverview()}
      style={styles.pill}
      hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
      activeOpacity={0.75}
    >
      <Text style={styles.text}>⤢ Übersicht</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  pill: {
    marginLeft: 12,
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: '#0096FF',
    backgroundColor: '#0A1F33',
  },
  text: { color: '#0096FF', fontSize: 13, fontWeight: '700' },
});

export default CockpitOverviewButton;