import React, { useEffect, useState } from 'react';
import {
  View, Text, StyleSheet, Switch,
  TouchableOpacity, Alert, ScrollView, ActivityIndicator,
} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { login, logout, loadAuthState } from '../services/auth';
import { colors, PALETTES, type PaletteKey, type FontSizeKey } from '../theme';
import { useTheme, type MapOrientation } from '../ThemeContext';
import { MAP_STYLES, MAP_TILE_STYLE_ORDER } from '../mapStyles';

type Tab = 'ui' | 'app' | 'sync';

export function SettingsScreen() {
  const [tab, setTab] = useState<Tab>('ui');
  const { accent } = useTheme();

  return (
    <View style={styles.container}>
      {/* Tab bar */}
      <View style={styles.tabBar}>
        {(['ui', 'app', 'sync'] as Tab[]).map((t) => (
          <TouchableOpacity
            key={t}
            style={[styles.tabBtn, tab === t && { borderBottomColor: accent, borderBottomWidth: 2 }]}
            onPress={() => setTab(t)}
          >
            <Text style={[styles.tabLabel, tab === t && { color: accent }]}>
              {t === 'ui' ? 'Interface' : t === 'app' ? 'App' : 'Sync'}
            </Text>
          </TouchableOpacity>
        ))}
      </View>

      {tab === 'ui'   && <UITab />}
      {tab === 'app'  && <AppTab />}
      {tab === 'sync' && <SyncTab />}
    </View>
  );
}

// ─── UI tab ─────────────────────────────────────────────────────────────────

function UITab() {
  const { accent, palette, setPalette, fontSize, setFontSize, boldLabels, setBoldLabels, mapTileStyle, setMapTileStyle } = useTheme();

  const fontSizes: FontSizeKey[] = ['small', 'medium', 'large'];
  const palettes = Object.entries(PALETTES) as [PaletteKey, typeof PALETTES[PaletteKey]][];

  return (
    <ScrollView contentContainerStyle={styles.content}>
      <Text style={styles.sectionTitle}>Colour palette</Text>
      <View style={styles.pillRow}>
        {palettes.map(([key, val]) => (
          <TouchableOpacity
            key={key}
            style={[styles.pill, palette === key && { borderColor: val.accent, backgroundColor: val.accentDim }]}
            onPress={() => setPalette(key)}
          >
            <View style={[styles.paletteDot, { backgroundColor: val.accent }]} />
            <Text style={[styles.pillText, palette === key && { color: val.accent }]}>{val.label}</Text>
          </TouchableOpacity>
        ))}
      </View>

      <Text style={styles.sectionTitle}>Font size</Text>
      <View style={styles.pillRow}>
        {fontSizes.map((s) => (
          <TouchableOpacity
            key={s}
            style={[styles.pill, fontSize === s && { borderColor: accent, backgroundColor: PALETTES[palette].accentDim }]}
            onPress={() => setFontSize(s)}
          >
            <Text style={[styles.pillText, fontSize === s && { color: accent }]}>
              {s.charAt(0).toUpperCase() + s.slice(1)}
            </Text>
          </TouchableOpacity>
        ))}
      </View>

      <Text style={styles.sectionTitle}>Map style</Text>
      {MAP_TILE_STYLE_ORDER.map((key) => {
        const def = MAP_STYLES[key];
        const active = mapTileStyle === key;
        return (
          <TouchableOpacity
            key={key}
            style={[styles.row, active && { borderColor: accent, backgroundColor: PALETTES[palette].accentDim }]}
            onPress={() => setMapTileStyle(key)}
          >
            <View>
              <Text style={[styles.rowLabel, active && { color: accent }]}>{def.label}</Text>
              <Text style={styles.rowSub}>{def.description}</Text>
            </View>
            {active && <Text style={{ color: accent, fontSize: 16 }}>✓</Text>}
          </TouchableOpacity>
        );
      })}

      <Text style={styles.sectionTitle}>Stat labels</Text>
      <View style={styles.row}>
        <Text style={styles.rowLabel}>Bold labels</Text>
        <Switch
          value={boldLabels}
          onValueChange={setBoldLabels}
          trackColor={{ true: accent }}
          thumbColor={colors.text}
        />
      </View>
    </ScrollView>
  );
}

// ─── App tab ─────────────────────────────────────────────────────────────────

const MAP_ORIENTATION_OPTIONS: { key: MapOrientation; label: string; sub: string }[] = [
  { key: 'north',   label: 'North up',   sub: 'Map always points north' },
  { key: 'compass', label: 'Compass',    sub: 'Rotates with device heading' },
  { key: 'course',  label: 'Course up',  sub: 'Rotates to direction of travel' },
];

function AppTab() {
  const { accent, accentDim, mapOrientation, setMapOrientation } = useTheme();
  const [kmNotifications, setKmNotifications] = useState(true);

  useEffect(() => {
    AsyncStorage.getItem('kmNotifications').then((v) => {
      if (v !== null) setKmNotifications(v === 'true');
    });
  }, []);

  async function handleKmToggle(value: boolean) {
    setKmNotifications(value);
    await AsyncStorage.setItem('kmNotifications', String(value));
  }

  return (
    <ScrollView contentContainerStyle={styles.content}>
      <Text style={styles.sectionTitle}>Map orientation</Text>
      {MAP_ORIENTATION_OPTIONS.map(({ key, label, sub }) => {
        const active = mapOrientation === key;
        return (
          <TouchableOpacity
            key={key}
            style={[styles.row, active && { borderColor: accent, backgroundColor: accentDim }]}
            onPress={() => setMapOrientation(key)}
          >
            <View>
              <Text style={[styles.rowLabel, active && { color: accent }]}>{label}</Text>
              <Text style={styles.rowSub}>{sub}</Text>
            </View>
            {active && <Text style={{ color: accent, fontSize: 16 }}>✓</Text>}
          </TouchableOpacity>
        );
      })}

      <Text style={styles.sectionTitle}>Notifications</Text>
      <View style={styles.row}>
        <View>
          <Text style={styles.rowLabel}>Kilometre alerts</Text>
          <Text style={styles.rowSub}>Notify at every km during recording</Text>
        </View>
        <Switch
          value={kmNotifications}
          onValueChange={handleKmToggle}
          trackColor={{ true: accent }}
          thumbColor={colors.text}
        />
      </View>
    </ScrollView>
  );
}

// ─── Sync tab ─────────────────────────────────────────────────────────────────

function SyncTab() {
  const { accent } = useTheme();
  const [connectedAs, setConnectedAs] = useState<string | null>(null);
  const [connecting, setConnecting] = useState(false);

  useEffect(() => {
    loadAuthState().then((auth) => {
      if (auth) setConnectedAs(auth.handle);
    });
  }, []);

  async function handleConnect() {
    setConnecting(true);
    const result = await login();
    setConnecting(false);
    if (result.ok) setConnectedAs(result.displayName ?? '');
    else if (result.error !== 'Cancelled') Alert.alert('Sign in failed', result.error ?? 'Unknown error');
  }

  async function handleDisconnect() {
    Alert.alert('Disconnect', 'Remove saved credentials?', [
      { text: 'Cancel', style: 'cancel' },
      { text: 'Disconnect', style: 'destructive', onPress: async () => {
        await logout(); setConnectedAs(null);
      }},
    ]);
  }

  return (
    <ScrollView contentContainerStyle={styles.content}>
      <Text style={styles.sectionTitle}>bincio instance</Text>

      {connectedAs ? (
        <View style={styles.connectedBox}>
          <View>
            <Text style={[styles.connectedLabel, { color: colors.success }]}>Connected</Text>
            <Text style={styles.connectedName}>{connectedAs}</Text>
          </View>
          <TouchableOpacity style={styles.disconnectBtn} onPress={handleDisconnect}>
            <Text style={styles.disconnectBtnText}>Disconnect</Text>
          </TouchableOpacity>
        </View>
      ) : (
        <>
          <Text style={styles.hint}>Sign in with your bincio account to sync recordings.</Text>
          <TouchableOpacity style={[styles.connectBtn, connecting && styles.connectBtnDisabled]} onPress={handleConnect} disabled={connecting}>
            {connecting ? <ActivityIndicator color={colors.text} /> : <Text style={styles.connectBtnText}>Sign in with bincio</Text>}
          </TouchableOpacity>
        </>
      )}

      <Text style={styles.sectionTitle}>bincio-autarchive</Text>
      <View style={[styles.row, { opacity: 0.5 }]}>
        <Text style={styles.rowLabel}>Local sync</Text>
        <Text style={styles.rowSub}>Coming soon</Text>
      </View>
    </ScrollView>
  );
}

// ─── Shared styles ────────────────────────────────────────────────────────────

const styles = StyleSheet.create({
  container:         { flex: 1, backgroundColor: colors.bg },
  tabBar:            { flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: colors.border },
  tabBtn:            { flex: 1, alignItems: 'center', paddingVertical: 14, borderBottomWidth: 2, borderBottomColor: 'transparent' },
  tabLabel:          { color: colors.textMuted, fontSize: 13, fontWeight: '600' },
  content:           { padding: 16, gap: 10 },
  sectionTitle:      { color: colors.textMuted, fontSize: 11, textTransform: 'uppercase', letterSpacing: 0.8, marginTop: 16 },
  pillRow:           { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
  pill:              { flexDirection: 'row', alignItems: 'center', gap: 6, paddingVertical: 8, paddingHorizontal: 14, borderRadius: 20, borderWidth: 1, borderColor: colors.borderStrong },
  paletteDot:        { width: 10, height: 10, borderRadius: 5 },
  pillText:          { color: colors.textSub, fontSize: 13, fontWeight: '500' },
  label:             { color: colors.textSub, fontSize: 13, marginBottom: 2 },
  input:             { backgroundColor: colors.surface, borderWidth: 1, borderColor: colors.border, color: colors.text, borderRadius: 8, padding: 12, fontSize: 15 },
  hint:              { color: colors.textMuted, fontSize: 12, lineHeight: 18 },
  row:               { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', backgroundColor: colors.surface, borderWidth: 1, borderColor: colors.border, borderRadius: 10, padding: 14 },
  rowLabel:          { color: colors.text, fontSize: 15 },
  rowSub:            { color: colors.textMuted, fontSize: 12, marginTop: 2 },
  connectedBox:      { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', backgroundColor: colors.surface, borderWidth: 1, borderColor: colors.border, borderRadius: 10, padding: 14 },
  connectedLabel:    { fontSize: 11, textTransform: 'uppercase', letterSpacing: 0.6 },
  connectedName:     { color: colors.text, fontSize: 15, fontWeight: '600', marginTop: 2 },
  disconnectBtn:     { paddingVertical: 6, paddingHorizontal: 12, borderRadius: 8, borderWidth: 1, borderColor: colors.errorBg },
  disconnectBtnText: { color: colors.error, fontWeight: '600', fontSize: 13 },
  connectBtn:        { backgroundColor: colors.surface, borderWidth: 1, borderColor: colors.border, borderRadius: 10, padding: 14, alignItems: 'center', marginTop: 4 },
  connectBtnDisabled:{ opacity: 0.5 },
  connectBtnText:    { color: colors.text, fontSize: 15, fontWeight: '600' },
});