import React, { useState, useEffect, useRef } from 'react';
import {
  View, Text, TextInput, TouchableOpacity, StyleSheet,
  Modal, ScrollView, ActivityIndicator, KeyboardAvoidingView,
  Platform, Linking,
} from 'react-native';
import { useConnectionStore } from '../../stores/connectionStore';
import { useDevice } from '../../hooks/useDevice';
import { useTheme } from '../../design/tokens';
import { Radius, Spacing } from '../../design/tokens';

const LOG_MAX = 20;

export function ConnectModal() {
  const theme = useTheme();
  const { status, host, port, lastError, modalVisible, setHost, setPort, hideModal } =
    useConnectionStore();
  const { connect, disconnect } = useDevice();

  const [portStr, setPortStr]   = useState(String(port));
  const [logs, setLogs]         = useState<string[]>(['就绪']);
  const prevStatus              = useRef(status);

  const addLog = (msg: string) =>
    setLogs((p) => [`${new Date().toLocaleTimeString('zh-CN', { hour12: false })}  ${msg}`, ...p].slice(0, LOG_MAX));

  // Sync portStr when store port changes (e.g. from persisted storage)
  useEffect(() => { setPortStr(String(port)); }, [port]);

  useEffect(() => {
    if (status === prevStatus.current) return;
    prevStatus.current = status;
    if (status === 'connected') {
      addLog('连接成功 ✓');
      const t = setTimeout(() => hideModal(), 900);
      return () => clearTimeout(t);
    }
    if (status === 'error')        addLog(`错误: ${lastError}`);
    if (status === 'reconnecting') addLog('断线，重连中…');
    if (status === 'disconnected') addLog('已断开');
  }, [status, lastError]);

  const handleConnect = () => {
    const trimmed = host.trim();
    const p = parseInt(portStr, 10);
    const ipRe = /^(\d{1,3}\.){3}\d{1,3}$/;
    if (!trimmed || !ipRe.test(trimmed) || trimmed.split('.').some(s => Number(s) > 255)) {
      addLog('IP 地址格式无效'); return;
    }
    if (isNaN(p) || p < 1 || p > 65535) {
      addLog('端口范围 1-65535'); return;
    }
    setPort(p);
    addLog(`连接 ${trimmed}:${p} …`);
    connect();
  };

  const handleDisconnect = () => {
    disconnect();
    addLog('主动断开');
  };

  const connecting  = status === 'connecting' || status === 'reconnecting';
  const connected   = status === 'connected';

  return (
    <Modal
      visible={modalVisible}
      transparent
      animationType="slide"
      onRequestClose={hideModal}
      statusBarTranslucent
    >
      <TouchableOpacity style={S.backdrop} activeOpacity={1} onPress={hideModal} />

      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={S.kav}
        pointerEvents="box-none"
      >
        <View style={[S.sheet, {
          backgroundColor: theme.bg.surface,
          borderColor: theme.bg.border,
        }]}>
          {/* Handle */}
          <View style={[S.handle, { backgroundColor: theme.bg.border }]} />

          {/* Title */}
          <Text style={[S.title, { color: theme.text.secondary }]}>连接仪器</Text>

          {/* Guide */}
          <View style={S.guideRow}>
            <View style={[S.stepBadge, {
              backgroundColor: theme.blue.bg,
              borderColor: theme.blue.border,
            }]}>
              <Text style={[S.stepNum, { color: theme.blue.fg }]}>1</Text>
            </View>
            <Text style={[S.stepTxt, { color: theme.text.muted }]}>手机连接设备 WiFi 热点</Text>
            <TouchableOpacity
              style={[S.settingsBtn, {
                backgroundColor: theme.blue.bg,
                borderColor: theme.blue.border,
              }]}
              onPress={() => Linking.openSettings()}
            >
              <Text style={[S.settingsTxt, { color: theme.blue.fg }]}>设置 →</Text>
            </TouchableOpacity>
          </View>
          <View style={[S.guideRow, { marginBottom: Spacing.md }]}>
            <View style={[S.stepBadge, {
              backgroundColor: theme.blue.bg,
              borderColor: theme.blue.border,
            }]}>
              <Text style={[S.stepNum, { color: theme.blue.fg }]}>2</Text>
            </View>
            <Text style={[S.stepTxt, { color: theme.text.muted }]}>确认参数后点击连接</Text>
          </View>

          {/* Inputs */}
          <View style={[S.inputCard, {
            backgroundColor: theme.bg.raised,
            borderColor: theme.bg.border,
          }]}>
            <View style={S.inputRow}>
              <Text style={[S.inputLabel, { color: theme.text.muted }]}>IP 地址</Text>
              <TextInput
                style={[S.input, {
                  color: theme.text.primary,
                  borderBottomColor: theme.bg.border,
                }]}
                value={host}
                onChangeText={setHost}
                keyboardType="numeric"
                placeholder="192.168.4.1"
                placeholderTextColor={theme.text.ghost}
                autoCapitalize="none"
                editable={!connecting}
              />
            </View>
            <View style={[S.inputDivider, { backgroundColor: theme.bg.divider }]} />
            <View style={S.inputRow}>
              <Text style={[S.inputLabel, { color: theme.text.muted }]}>端  口</Text>
              <TextInput
                style={[S.input, {
                  color: theme.text.primary,
                  borderBottomColor: theme.bg.border,
                }]}
                value={portStr}
                onChangeText={setPortStr}
                keyboardType="numeric"
                placeholder="4321"
                placeholderTextColor={theme.text.ghost}
                editable={!connecting}
              />
            </View>
          </View>

          {/* Action */}
          {!connected ? (
            <TouchableOpacity
              style={[S.connectBtn, {
                backgroundColor: theme.blue.bg,
                borderColor: theme.blue.fg,
              }, connecting && {
                borderColor: theme.blue.border,
                backgroundColor: theme.bg.raised,
              }]}
              onPress={handleConnect}
              disabled={connecting}
              activeOpacity={0.8}
            >
              {connecting
                ? <ActivityIndicator color={theme.blue.fg} />
                : <Text style={[S.connectBtnTxt, { color: theme.blue.fg }]}>连  接  设  备</Text>}
            </TouchableOpacity>
          ) : (
            <View style={S.connectedRow}>
              <View style={S.connectedLeft}>
                <View style={[S.greenDot, { backgroundColor: theme.green.fg }]} />
                <Text style={[S.connectedTxt, { color: theme.green.fg }]}>已连接  {host}:{port}</Text>
              </View>
              <TouchableOpacity
                style={[S.disconnectBtn, {
                  backgroundColor: theme.red.bg,
                  borderColor: theme.red.border,
                }]}
                onPress={handleDisconnect}
              >
                <Text style={[S.disconnectTxt, { color: theme.red.fg }]}>断  开</Text>
              </TouchableOpacity>
            </View>
          )}

          {/* Log */}
          <View style={[S.logBox, {
            backgroundColor: theme.bg.void,
            borderColor: theme.bg.border,
          }]}>
            <Text style={[S.logHeader, {
              color: theme.green.fg,
              borderBottomColor: theme.bg.divider,
            }]}>● 连接日志</Text>
            <ScrollView style={S.logScroll} showsVerticalScrollIndicator={false}>
              {logs.map((l, i) => (
                <Text key={i} style={[S.logLine, { color: theme.text.ghost }, i === 0 && { color: theme.text.muted }]}>{l}</Text>
              ))}
            </ScrollView>
          </View>
        </View>
      </KeyboardAvoidingView>
    </Modal>
  );
}

const S = StyleSheet.create({
  backdrop: {
    ...StyleSheet.absoluteFill,
    backgroundColor: 'rgba(0,0,0,0.6)',
  },
  kav: {
    flex: 1,
    justifyContent: 'flex-end',
  },
  sheet: {
    borderTopLeftRadius:  Radius.xl,
    borderTopRightRadius: Radius.xl,
    padding: Spacing.lg,
    paddingBottom: Spacing.xl,
    borderTopWidth: 1,
  },
  handle: {
    width: 36, height: 4, borderRadius: 2,
    alignSelf: 'center',
    marginBottom: Spacing.md,
  },
  title: {
    fontSize: 15,
    fontWeight: '700',
    marginBottom: Spacing.md,
  },

  guideRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: Spacing.sm,
    marginBottom: 6,
  },
  stepBadge: {
    width: 20, height: 20, borderRadius: 10,
    justifyContent: 'center', alignItems: 'center',
    borderWidth: 1,
  },
  stepNum:     { fontSize: 10, fontWeight: '700' },
  stepTxt:     { fontSize: 12, flex: 1 },
  settingsBtn: {
    borderRadius: Radius.sm,
    paddingHorizontal: 8, paddingVertical: 3,
    borderWidth: 1,
  },
  settingsTxt: { fontSize: 11, fontWeight: '600' },

  inputCard: {
    borderRadius: Radius.md,
    borderWidth: 1,
    paddingHorizontal: Spacing.md,
    marginBottom: Spacing.md,
  },
  inputRow:     { flexDirection: 'row', alignItems: 'center', gap: Spacing.md, paddingVertical: Spacing.sm },
  inputDivider: { height: StyleSheet.hairlineWidth },
  inputLabel:   { fontSize: 12, width: 52 },
  input: {
    flex: 1,
    fontSize: 15,
    fontWeight: '500',
    paddingVertical: 4,
    borderBottomWidth: 1,
  },

  connectBtn: {
    borderRadius: Radius.lg,
    paddingVertical: 15,
    alignItems: 'center',
    marginBottom: Spacing.md,
    borderWidth: 1,
  },
  connectBtnTxt:  { fontSize: 15, fontWeight: '700', letterSpacing: 3 },

  connectedRow:  { flexDirection: 'row', alignItems: 'center', gap: Spacing.sm, marginBottom: Spacing.md },
  connectedLeft: { flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1 },
  greenDot:      { width: 8, height: 8, borderRadius: 4 },
  connectedTxt:  {
    fontWeight: '700', fontSize: 12,
    fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',
  },
  disconnectBtn: {
    borderRadius: Radius.md,
    paddingVertical: 8, paddingHorizontal: 14,
    borderWidth: 1,
  },
  disconnectTxt: { fontSize: 12, fontWeight: '700', letterSpacing: 1 },

  logBox: {
    borderRadius: Radius.md,
    borderWidth: 1,
    overflow: 'hidden',
    maxHeight: 120,
  },
  logHeader: {
    fontSize: 9, fontWeight: '700', letterSpacing: 1.5,
    paddingHorizontal: Spacing.md, paddingTop: 8, paddingBottom: 5,
    borderBottomWidth: 1,
  },
  logScroll: { padding: Spacing.sm },
  logLine: {
    fontSize: 10,
    fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',
    marginBottom: 2, lineHeight: 15,
  },
});