import React, { useCallback, useState } from "react";
import {
  Alert,
  Keyboard,
  KeyboardAvoidingView,
  Platform,
  Pressable,
  ScrollView,
  Text,
  TextInput,
  TouchableWithoutFeedback,
  View,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { router } from "expo-router";
import { useConnection } from "../contexts/ConnectionContext";
import { useTheme } from "../contexts/ThemeContext";
import { StatusDot } from "../components/ui/StatusDot";
import { ServerConfig } from "../types";
import { sendWol, isValidMac } from "../services/wol";
import { wsClient } from "../services/websocket";

export default function SettingsScreen() {
  const { serverConfig, status, connect, disconnect, saveServerConfig } =
    useConnection();
  const { colors } = useTheme();

  const [host, setHost] = useState(serverConfig?.host ?? "");
  const [localHost, setLocalHost] = useState(serverConfig?.localHost ?? "");
  const [port, setPort] = useState(
    serverConfig?.port ? String(serverConfig.port) : "8765"
  );
  const [macAddress, setMacAddress] = useState(serverConfig?.macAddress ?? "");
  const [saved, setSaved] = useState(false);
  const [waking, setWaking] = useState(false);

  const handleSave = useCallback(async () => {
    const trimmedHost = host.trim();
    const portNum = parseInt(port.trim(), 10);

    const trimmedLocal = localHost.trim();
    if ((!trimmedHost && !trimmedLocal) || isNaN(portNum) || portNum < 1 || portNum > 65535) {
      return;
    }

    const trimmedMac = macAddress.trim();
    const effectiveHost = trimmedHost || trimmedLocal;
    const config: ServerConfig = {
      host: effectiveHost,
      port: portNum,
      ...(trimmedLocal && trimmedHost ? { localHost: trimmedLocal } : {}),
      ...(trimmedMac ? { macAddress: trimmedMac } : {}),
    };
    await saveServerConfig(config);
    setSaved(true);
    setTimeout(() => setSaved(false), 2000);
  }, [host, localHost, port, macAddress, saveServerConfig]);

  const handleConnect = useCallback(() => {
    if (status === "connected" || status === "connecting" || status === "reconnecting") {
      disconnect();
    } else {
      connect();
    }
  }, [status, connect, disconnect]);

  const handleWake = useCallback(async () => {
    const mac = macAddress.trim() || serverConfig?.macAddress;
    if (!mac || !isValidMac(mac)) {
      Alert.alert("Invalid MAC", "Enter a valid MAC address (e.g. 6a:8a:e7:b3:8e:5c)");
      return;
    }
    setWaking(true);
    try {
      await sendWol(mac, host.trim() || serverConfig?.host);
      Alert.alert("WoL Sent", "Magic packet sent. The Mac should wake in a few seconds.");
    } catch (err) {
      Alert.alert("WoL Failed", err instanceof Error ? err.message : String(err));
    } finally {
      setWaking(false);
    }
  }, [macAddress, host, serverConfig]);

  const isFormValid = (host.trim().length > 0 || localHost.trim().length > 0) && parseInt(port, 10) > 0;

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: colors.bg }} edges={["top", "bottom"]}>
      <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior={Platform.OS === "ios" ? "padding" : "height"}
      >
        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
          <ScrollView
            style={{ flex: 1 }}
            contentContainerStyle={{ paddingBottom: 32 }}
            keyboardShouldPersistTaps="handled"
          >
            {/* Header */}
            <View
              style={{
                flexDirection: "row",
                alignItems: "center",
                paddingHorizontal: 16,
                paddingVertical: 12,
                borderBottomWidth: 1,
                borderBottomColor: colors.border,
              }}
            >
              <Pressable
                onPress={() => router.back()}
                hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }}
                style={{
                  width: 36,
                  height: 36,
                  alignItems: "center",
                  justifyContent: "center",
                  borderRadius: 18,
                  backgroundColor: colors.bgTertiary,
                  marginRight: 12,
                }}
              >
                <Text style={{ color: colors.text, fontSize: 16 }}>{"\u2190"}</Text>
              </Pressable>
              <Text style={{ color: colors.text, fontSize: 22, fontWeight: "800", letterSpacing: -0.5 }}>
                Settings
              </Text>
            </View>

            <View style={{ paddingHorizontal: 16, marginTop: 24 }}>
              {/* Connection status card */}
              <View
                style={{
                  backgroundColor: colors.bgTertiary,
                  borderRadius: 16,
                  padding: 16,
                  marginBottom: 24,
                }}
              >
                <Text
                  style={{
                    color: colors.textSecondary,
                    fontSize: 11,
                    fontWeight: "500",
                    textTransform: "uppercase",
                    letterSpacing: 1.5,
                    marginBottom: 12,
                  }}
                >
                  Connection Status
                </Text>
                <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
                  <StatusDot status={status} size={12} />
                  <Text style={{ color: colors.text, fontSize: 16, fontWeight: "500" }}>
                    {status === "connected"
                      ? "Connected"
                      : status === "connecting"
                      ? "Connecting..."
                      : status === "reconnecting"
                      ? "Reconnecting..."
                      : "Disconnected"}
                  </Text>
                </View>
                {serverConfig && (
                  <Text style={{ color: colors.textMuted, fontSize: 14, marginTop: 8 }}>
                    {wsClient.currentUrl || `ws://${serverConfig.host}:${serverConfig.port}`}
                  </Text>
                )}
              </View>

              {/* Server config */}
              <Text
                style={{
                  color: colors.textSecondary,
                  fontSize: 11,
                  fontWeight: "500",
                  textTransform: "uppercase",
                  letterSpacing: 1.5,
                  marginBottom: 12,
                }}
              >
                Server Configuration
              </Text>

              <View
                style={{
                  backgroundColor: colors.bgTertiary,
                  borderRadius: 16,
                  overflow: "hidden",
                  marginBottom: 16,
                }}
              >
                {/* Local Host (preferred when on same network) */}
                <View
                  style={{
                    paddingHorizontal: 16,
                    paddingVertical: 12,
                    borderBottomWidth: 1,
                    borderBottomColor: colors.border,
                  }}
                >
                  <Text style={{ color: colors.textMuted, fontSize: 11, marginBottom: 4 }}>
                    Local Address (optional)
                  </Text>
                  <TextInput
                    value={localHost}
                    onChangeText={setLocalHost}
                    placeholder="192.168.1.100"
                    placeholderTextColor={colors.textMuted}
                    autoCapitalize="none"
                    autoCorrect={false}
                    keyboardType="url"
                    style={{ color: colors.text, fontSize: 16, padding: 0 }}
                  />
                </View>

                {/* Remote Host (fallback / external) */}
                <View
                  style={{
                    paddingHorizontal: 16,
                    paddingVertical: 12,
                    borderBottomWidth: 1,
                    borderBottomColor: colors.border,
                  }}
                >
                  <Text style={{ color: colors.textMuted, fontSize: 11, marginBottom: 4 }}>
                    Remote Address
                  </Text>
                  <TextInput
                    value={host}
                    onChangeText={setHost}
                    placeholder="myhost.example.com"
                    placeholderTextColor={colors.textMuted}
                    autoCapitalize="none"
                    autoCorrect={false}
                    keyboardType="url"
                    style={{ color: colors.text, fontSize: 16, padding: 0 }}
                  />
                </View>

                {/* Port */}
                <View
                  style={{
                    paddingHorizontal: 16,
                    paddingVertical: 12,
                    borderBottomWidth: 1,
                    borderBottomColor: colors.border,
                  }}
                >
                  <Text style={{ color: colors.textMuted, fontSize: 11, marginBottom: 4 }}>
                    Port
                  </Text>
                  <TextInput
                    value={port}
                    onChangeText={setPort}
                    placeholder="8765"
                    placeholderTextColor={colors.textMuted}
                    keyboardType="number-pad"
                    style={{ color: colors.text, fontSize: 16, padding: 0 }}
                  />
                </View>

                {/* MAC Address for Wake-on-LAN */}
                <View style={{ paddingHorizontal: 16, paddingVertical: 12 }}>
                  <Text style={{ color: colors.textMuted, fontSize: 11, marginBottom: 4 }}>
                    MAC Address (Wake-on-LAN)
                  </Text>
                  <TextInput
                    value={macAddress}
                    onChangeText={setMacAddress}
                    placeholder="6a:8a:e7:b3:8e:5c"
                    placeholderTextColor={colors.textMuted}
                    autoCapitalize="none"
                    autoCorrect={false}
                    style={{ color: colors.text, fontSize: 16, padding: 0 }}
                  />
                </View>
              </View>

              {/* Save button */}
              <Pressable
                onPress={handleSave}
                disabled={!isFormValid}
                style={{
                  borderRadius: 16,
                  paddingVertical: 16,
                  alignItems: "center",
                  marginBottom: 12,
                  backgroundColor: isFormValid ? colors.accent : colors.bgTertiary,
                }}
              >
                <Text
                  style={{
                    fontSize: 16,
                    fontWeight: "600",
                    color: isFormValid ? "#FFF" : colors.textMuted,
                  }}
                >
                  {saved ? "Saved!" : "Save Configuration"}
                </Text>
              </Pressable>

              {/* Wake-on-LAN button */}
              <Pressable
                onPress={handleWake}
                disabled={waking || (!macAddress.trim() && !serverConfig?.macAddress)}
                style={{
                  borderRadius: 16,
                  paddingVertical: 16,
                  alignItems: "center",
                  marginBottom: 12,
                  backgroundColor:
                    macAddress.trim() || serverConfig?.macAddress
                      ? "#FF950033"
                      : colors.bgTertiary,
                }}
              >
                <Text
                  style={{
                    fontSize: 16,
                    fontWeight: "600",
                    color:
                      macAddress.trim() || serverConfig?.macAddress
                        ? "#FF9500"
                        : colors.textMuted,
                  }}
                >
                  {waking ? "Sending..." : "Wake Mac (WoL)"}
                </Text>
              </Pressable>

              {/* Connect/Disconnect button */}
              <Pressable
                onPress={handleConnect}
                disabled={!serverConfig}
                style={{
                  borderRadius: 16,
                  paddingVertical: 16,
                  alignItems: "center",
                  backgroundColor:
                    status === "connected"
                      ? colors.danger + "33"
                      : "#2ED57333",
                }}
              >
                <Text
                  style={{
                    fontSize: 16,
                    fontWeight: "600",
                    color: status === "connected" ? colors.danger : "#2ED573",
                  }}
                >
                  {status === "connected"
                    ? "Disconnect"
                    : status === "connecting" || status === "reconnecting"
                    ? "Reconnecting..."
                    : "Connect"}
                </Text>
              </Pressable>
            </View>
          </ScrollView>
        </TouchableWithoutFeedback>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}