/**
 * ViewModeToggle — kleiner Header-Button zum Umschalten zwischen Kompakt-
 * Ansicht (klassischer Chat) und Cockpit (Kachel-Desktop).
 *
 * Sitzt rechts im Navigations-Header ("ARIA Cockpit"), kollidiert also mit
 * nichts in der Chat-Ansicht. Zeigt das Ziel des naechsten Taps.
 */

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

const ViewModeToggle: React.FC = () => {
  const [mode, setMode] = useState<ViewModeValue>(viewMode.get());
  useEffect(() => viewMode.subscribe(setMode), []);

  const isCockpit = mode === 'cockpit';
  return (
    <TouchableOpacity
      onPress={() => viewMode.toggle()}
      style={[styles.pill, isCockpit && styles.pillActive]}
      hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
      activeOpacity={0.75}
    >
      <Text style={[styles.text, isCockpit && styles.textActive]}>
        {isCockpit ? '⧉ Cockpit' : '⧉ Kompakt'}
      </Text>
    </TouchableOpacity>
  );
};

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

export default ViewModeToggle;