import { StatusBar } from 'expo-status-bar';
import { useState } from 'react';
import {
  StyleSheet, Text, View, TextInput, TouchableOpacity,
  ScrollView, Switch,
} from 'react-native';
import { DEFAULT_GATEWAY_CONFIG } from '@yuzu-gca/shared';

/** U-001: Settings Page for Yuzu GCA Android Client */

export default function App() {
  const [tab, setTab] = useState<'settings' | 'device' | 'connection'>('settings');

  // Settings state
  const [gatewayUrl, setGatewayUrl] = useState(DEFAULT_GATEWAY_CONFIG.url);
  const [deviceName, setDeviceName] = useState('Android Device');
  const [autoConnect, setAutoConnect] = useState(true);
  const [heartbeatInterval, setHeartbeatInterval] = useState(String(DEFAULT_GATEWAY_CONFIG.heartbeatInterval / 1000));
  const [logLevel, setLogLevel] = useState('info');

  // Connection state
  const [connStatus, setConnStatus] = useState<'disconnected' | 'connecting' | 'connected' | 'error'>('disconnected');

  return (
    <View style={styles.container}>
      <StatusBar style="light" />

      {/* Header */}
      <Text style={styles.title}>Yuzu GCA</Text>
      <Text style={styles.subtitle}>Settings</Text>

      {/* Tabs */}
      <View style={styles.tabBar}>
        {(['settings', 'device', 'connection'] as const).map(t => (
          <TouchableOpacity key={t} onPress={() => setTab(t)} style={[styles.tab, tab === t && styles.tabActive]}>
            <Text style={[styles.tabText, tab === t && styles.tabTextActive]}>
              {t === 'settings' ? 'Gateway' : t === 'device' ? 'Device' : 'Connection'}
            </Text>
          </TouchableOpacity>
        ))}
      </View>

      <ScrollView style={styles.body}>
        {tab === 'settings' && (
          <>
            {/* Gateway URL */}
            <Text style={styles.label}>Gateway URL</Text>
            <TextInput
              style={styles.input}
              value={gatewayUrl}
              onChangeText={setGatewayUrl}
              placeholder="http://localhost:3000"
              placeholderTextColor="#475569"
              autoCapitalize="none"
              keyboardType="url"
            />

            {/* Heartbeat Interval */}
            <Text style={styles.label}>Heartbeat (seconds)</Text>
            <TextInput
              style={styles.input}
              value={heartbeatInterval}
              onChangeText={setHeartbeatInterval}
              keyboardType="numeric"
              placeholder="15"
              placeholderTextColor="#475569"
            />

            {/* Auto-connect */}
            <View style={styles.switchRow}>
              <Text style={styles.label}>Auto-connect on start</Text>
              <Switch value={autoConnect} onValueChange={setAutoConnect} trackColor={{ true: '#3b82f6' }} />
            </View>

            {/* Log Level */}
            <Text style={styles.label}>Log Level</Text>
            <View style={styles.chipRow}>
              {(['debug', 'info', 'warn', 'error'] as const).map(lv => (
                <TouchableOpacity
                  key={lv}
                  style={[styles.chip, logLevel === lv && styles.chipActive]}
                  onPress={() => setLogLevel(lv)}
                >
                  <Text style={[styles.chipText, logLevel === lv && styles.chipTextActive]}>{lv}</Text>
                </TouchableOpacity>
              ))}
            </View>
          </>
        )}

        {tab === 'device' && (
          <>
            <Text style={styles.label}>Device Name</Text>
            <TextInput
              style={styles.input}
              value={deviceName}
              onChangeText={setDeviceName}
              placeholder="Android Device"
              placeholderTextColor="#475569"
            />
            <View style={styles.infoCard}>
              <Text style={styles.infoTitle}>Device Info</Text>
              <Text style={styles.infoText}>Platform: Android</Text>
              <Text style={styles.infoText}>MCP Server: {gatewayUrl ? 'Configured' : 'Not configured'}</Text>
              <Text style={styles.infoText}>Capabilities: 36 tools (7 implemented)</Text>
            </View>
          </>
        )}

        {tab === 'connection' && (
          <>
            <View style={[styles.connIndicator, styles[`conn_${connStatus}`]]}>
              <Text style={styles.connText}>
                {connStatus === 'connected' ? '🟢 Connected' :
                 connStatus === 'connecting' ? '🟡 Connecting...' :
                 connStatus === 'error' ? '🔴 Error' : '⚫ Disconnected'}
              </Text>
            </View>
            <TouchableOpacity
              style={[styles.btn, connStatus === 'connected' ? styles.btnDanger : styles.btnPrimary]}
              onPress={() => setConnStatus(connStatus === 'disconnected' ? 'connecting' : 'disconnected')}
            >
              <Text style={styles.btnText}>
                {connStatus === 'disconnected' ? 'Connect' : 'Disconnect'}
              </Text>
            </TouchableOpacity>
          </>
        )}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#0f172a', paddingTop: 48 },
  title: { fontSize: 28, fontWeight: '800', color: '#e2e8f0', textAlign: 'center' },
  subtitle: { fontSize: 12, color: '#64748b', textAlign: 'center', marginBottom: 16 },
  tabBar: { flexDirection: 'row', marginHorizontal: 16, marginBottom: 16 },
  tab: {
    flex: 1, padding: 10, alignItems: 'center',
    borderBottomWidth: 2, borderBottomColor: '#1e293b',
  },
  tabActive: { borderBottomColor: '#3b82f6' },
  tabText: { fontSize: 14, color: '#64748b' },
  tabTextActive: { color: '#3b82f6', fontWeight: '600' },
  body: { flex: 1, paddingHorizontal: 16 },
  label: { fontSize: 12, color: '#94a3b8', marginBottom: 4, marginTop: 12 },
  input: {
    backgroundColor: '#1e293b', color: '#e2e8f0', borderRadius: 8,
    padding: 12, fontSize: 14, marginBottom: 4,
  },
  switchRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 },
  chipRow: { flexDirection: 'row', gap: 8, marginTop: 4 },
  chip: { paddingHorizontal: 12, paddingVertical: 6, borderRadius: 16, backgroundColor: '#1e293b' },
  chipActive: { backgroundColor: '#1e40af' },
  chipText: { fontSize: 12, color: '#94a3b8' },
  chipTextActive: { color: '#fff' },
  infoCard: { backgroundColor: '#1e293b', borderRadius: 8, padding: 16, marginTop: 16 },
  infoTitle: { fontSize: 14, color: '#38bdf8', marginBottom: 8 },
  infoText: { fontSize: 12, color: '#94a3b8', marginTop: 4 },
  connIndicator: { borderRadius: 8, padding: 16, marginTop: 16, alignItems: 'center' },
  conn_connected: { backgroundColor: '#064e3b' },
  conn_connecting: { backgroundColor: '#78350f' },
  conn_error: { backgroundColor: '#7f1d1d' },
  conn_disconnected: { backgroundColor: '#1e293b' },
  connText: { fontSize: 16, color: '#e2e8f0' },
  btn: { borderRadius: 8, padding: 14, marginTop: 16, alignItems: 'center' },
  btnPrimary: { backgroundColor: '#1e40af' },
  btnDanger: { backgroundColor: '#991b1b' },
  btnText: { fontSize: 16, color: '#fff', fontWeight: '600' },
});