import { Feather } from "@expo/vector-icons";
import axios from "axios";
import * as Haptics from "expo-haptics";
import React, { useState } from "react";
import {
  ActivityIndicator,
  Alert,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { PostizWorkspace, DEFAULT_BASE_URL, usePostiz } from "@/context/PostizContext";
import { useColors } from "@/hooks/useColors";
import { extractError } from "@/lib/extractError";

type FormState = {
  id?: string;
  name: string;
  url: string;
  key: string;
};

const EMPTY_FORM: FormState = { name: "", url: DEFAULT_BASE_URL, key: "" };

export default function SettingsScreen() {
  const colors = useColors();
  const insets = useSafeAreaInsets();
  const { workspaces, isConfigured, addWorkspace, updateWorkspace, removeWorkspace } = usePostiz();

  const [form, setForm] = useState<FormState | null>(null);
  const [showKey, setShowKey] = useState(false);
  const [validating, setValidating] = useState(false);
  const [saving, setSaving] = useState(false);
  const [validationStatus, setValidationStatus] = useState<"idle" | "ok" | "error">("idle");
  const [errorDetail, setErrorDetail] = useState("");

  const openAdd = () => {
    setForm(EMPTY_FORM);
    setShowKey(false);
    resetValidation();
  };

  const openEdit = (ws: PostizWorkspace) => {
    setForm({ id: ws.id, name: ws.name, url: ws.baseUrl, key: ws.apiKey });
    setShowKey(false);
    resetValidation();
  };

  const closeForm = () => {
    setForm(null);
    resetValidation();
  };

  const resetValidation = () => {
    setValidationStatus("idle");
    setErrorDetail("");
  };

  const patchForm = (patch: Partial<FormState>) => {
    setForm((prev) => (prev ? { ...prev, ...patch } : prev));
    resetValidation();
  };

  const handleValidate = async () => {
    if (!form?.key.trim() || !form?.url.trim()) {
      Alert.alert("Missing fields", "Please enter both API key and base URL.");
      return;
    }
    setValidating(true);
    resetValidation();
    const cleanUrl = form.url.trim().replace(/\/$/, "");
    const variants = [form.key.trim(), `Bearer ${form.key.trim()}`];
    let lastError = "";

    for (const auth of variants) {
      try {
        await axios.get(`${cleanUrl}/integrations`, {
          headers: { Authorization: auth },
          timeout: 10000,
          maxRedirects: 0,
        });
        setValidationStatus("ok");
        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
        setValidating(false);
        return;
      } catch (err: unknown) {
        if (axios.isAxiosError(err)) {
          const s = err.response?.status;
          if (s === 307 || s === 301 || s === 302 || s === 308) {
            const loc = err.response?.headers?.location ?? "unknown";
            lastError = `HTTP ${s} redirect → ${loc}. Check the Authorization format or base URL.`;
            continue;
          }
          if (s === 401 || s === 403) { lastError = `HTTP ${s}: Invalid or expired API key.`; continue; }
        }
        lastError = extractError(err);
      }
    }
    setErrorDetail(lastError);
    setValidationStatus("error");
    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
    setValidating(false);
  };

  const handleSave = async () => {
    if (!form) return;
    if (!form.name.trim()) { Alert.alert("Missing name", "Please enter a name for this workspace."); return; }
    if (!form.key.trim() || !form.url.trim()) { Alert.alert("Missing fields", "Please enter both API key and base URL."); return; }
    setSaving(true);
    try {
      const ws = { name: form.name.trim(), apiKey: form.key.trim(), baseUrl: form.url.trim().replace(/\/$/, "") };
      if (form.id) {
        await updateWorkspace({ ...ws, id: form.id });
      } else {
        await addWorkspace(ws);
      }
      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
      closeForm();
    } catch (err: unknown) {
      Alert.alert("Error", `Failed to save.\n${extractError(err)}`);
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = (ws: PostizWorkspace) => {
    Alert.alert(
      "Remove workspace",
      `Remove "${ws.name}"? Channels from this workspace will no longer be available.`,
      [
        { text: "Cancel", style: "cancel" },
        {
          text: "Remove",
          style: "destructive",
          onPress: async () => {
            if (form?.id === ws.id) closeForm();
            await removeWorkspace(ws.id);
          },
        },
      ]
    );
  };

  return (
    <KeyboardAwareScrollView
      style={{ flex: 1, backgroundColor: colors.background }}
      contentContainerStyle={[
        styles.container,
        {
          paddingTop: Platform.OS === "web" ? 67 : 24,
          paddingBottom: Platform.OS === "web" ? 100 : insets.bottom + 40,
        },
      ]}
      bottomOffset={60}
      keyboardShouldPersistTaps="handled"
      showsVerticalScrollIndicator={false}
    >
      {/* Status banner */}
      {!isConfigured ? (
        <View style={[styles.banner, { backgroundColor: colors.primary + "18", borderColor: colors.primary + "40" }]}>
          <Feather name="info" size={16} color={colors.primary} />
          <Text style={[styles.bannerText, { color: colors.primary }]}>
            Add a workspace to get started
          </Text>
        </View>
      ) : (
        <View style={[styles.connectedBadge, { backgroundColor: colors.success + "18", borderColor: colors.success + "40" }]}>
          <Feather name="check-circle" size={14} color={colors.success} />
          <Text style={[styles.connectedText, { color: colors.success }]}>
            {workspaces.length} workspace{workspaces.length > 1 ? "s" : ""} configured
          </Text>
        </View>
      )}

      {/* Workspace cards */}
      {workspaces.map((ws) => (
        <View key={ws.id} style={[styles.wsCard, { backgroundColor: colors.card, borderColor: colors.border }]}>
          <View style={styles.wsCardHeader}>
            <View style={styles.wsCardLeft}>
              <View style={[styles.wsIcon, { backgroundColor: colors.primary + "18" }]}>
                <Feather name="briefcase" size={14} color={colors.primary} />
              </View>
              <View>
                <Text style={[styles.wsName, { color: colors.foreground }]}>{ws.name}</Text>
                <Text style={[styles.wsUrl, { color: colors.mutedForeground }]} numberOfLines={1}>
                  {ws.baseUrl.replace(/^https?:\/\//, "").replace(/\/api.*$/, "")}
                </Text>
              </View>
            </View>
            <View style={styles.wsCardActions}>
              <TouchableOpacity onPress={() => openEdit(ws)} activeOpacity={0.7} style={styles.iconBtn}>
                <Feather name="edit-2" size={15} color={colors.mutedForeground} />
              </TouchableOpacity>
              <TouchableOpacity onPress={() => handleDelete(ws)} activeOpacity={0.7} style={styles.iconBtn}>
                <Feather name="trash-2" size={15} color={colors.destructive} />
              </TouchableOpacity>
            </View>
          </View>
        </View>
      ))}

      {/* Add workspace button */}
      {!form && (
        <TouchableOpacity
          onPress={openAdd}
          activeOpacity={0.8}
          style={[styles.addBtn, { backgroundColor: colors.card, borderColor: colors.border }]}
        >
          <Feather name="plus" size={16} color={colors.primary} />
          <Text style={[styles.addBtnText, { color: colors.primary }]}>Add workspace</Text>
        </TouchableOpacity>
      )}

      {/* Add / Edit form */}
      {form && (
        <View style={[styles.formCard, { backgroundColor: colors.card, borderColor: colors.border }]}>
          <Text style={[styles.formTitle, { color: colors.foreground }]}>
            {form.id ? "Edit workspace" : "Add workspace"}
          </Text>

          {/* Name */}
          <View style={styles.fieldGroup}>
            <Text style={[styles.label, { color: colors.mutedForeground }]}>NAME</Text>
            <View style={[styles.inputWrap, { backgroundColor: colors.background, borderColor: colors.border }]}>
              <Feather name="briefcase" size={15} color={colors.mutedForeground} />
              <TextInput
                style={[styles.input, { color: colors.foreground }]}
                placeholder="My Client"
                placeholderTextColor={colors.mutedForeground}
                value={form.name}
                onChangeText={(t) => patchForm({ name: t })}
                autoCorrect={false}
              />
            </View>
          </View>

          {/* Base URL */}
          <View style={styles.fieldGroup}>
            <Text style={[styles.label, { color: colors.mutedForeground }]}>BASE URL</Text>
            <View style={[styles.inputWrap, { backgroundColor: colors.background, borderColor: colors.border }]}>
              <Feather name="globe" size={15} color={colors.mutedForeground} />
              <TextInput
                style={[styles.input, { color: colors.foreground }]}
                placeholder="https://postiz.example.com/api/public/v1"
                placeholderTextColor={colors.mutedForeground}
                value={form.url}
                onChangeText={(t) => patchForm({ url: t })}
                autoCapitalize="none"
                autoCorrect={false}
                keyboardType="url"
              />
            </View>
          </View>

          {/* API Key */}
          <View style={styles.fieldGroup}>
            <Text style={[styles.label, { color: colors.mutedForeground }]}>API KEY</Text>
            <View style={[styles.inputWrap, { backgroundColor: colors.background, borderColor: colors.border }]}>
              <Feather name="key" size={15} color={colors.mutedForeground} />
              <TextInput
                style={[styles.input, { color: colors.foreground }]}
                placeholder="Enter your API key"
                placeholderTextColor={colors.mutedForeground}
                value={form.key}
                onChangeText={(t) => patchForm({ key: t })}
                secureTextEntry={!showKey}
                autoCapitalize="none"
                autoCorrect={false}
              />
              <TouchableOpacity onPress={() => setShowKey((v) => !v)} activeOpacity={0.7}>
                <Feather name={showKey ? "eye-off" : "eye"} size={15} color={colors.mutedForeground} />
              </TouchableOpacity>
            </View>

            {validationStatus === "ok" && (
              <View style={styles.validRow}>
                <Feather name="check-circle" size={13} color={colors.success} />
                <Text style={[styles.validText, { color: colors.success }]}>Connection successful</Text>
              </View>
            )}

            {validationStatus === "error" && (
              <View style={[styles.errorBox, { backgroundColor: colors.error + "12", borderColor: colors.error + "30" }]}>
                <View style={styles.errorHeader}>
                  <Feather name="x-circle" size={13} color={colors.error} />
                  <Text style={[styles.errorTitle, { color: colors.error }]}>Could not connect</Text>
                </View>
                {!!errorDetail && (
                  <ScrollView style={styles.errorScroll} nestedScrollEnabled>
                    <Text style={[styles.errorDetail, { color: colors.error }]} selectable>{errorDetail}</Text>
                  </ScrollView>
                )}
              </View>
            )}
          </View>

          {/* Form actions */}
          <TouchableOpacity
            onPress={handleValidate}
            activeOpacity={0.8}
            disabled={validating}
            style={[styles.validateBtn, { backgroundColor: colors.background, borderColor: colors.border }]}
          >
            {validating ? (
              <ActivityIndicator color={colors.primary} size="small" />
            ) : (
              <>
                <Feather name="wifi" size={15} color={colors.primary} />
                <Text style={[styles.validateText, { color: colors.primary }]}>Test Connection</Text>
              </>
            )}
          </TouchableOpacity>

          <View style={styles.formBtnsRow}>
            <TouchableOpacity
              onPress={closeForm}
              activeOpacity={0.8}
              style={[styles.cancelBtn, { borderColor: colors.border }]}
            >
              <Text style={[styles.cancelText, { color: colors.mutedForeground }]}>Cancel</Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={handleSave}
              activeOpacity={0.85}
              disabled={saving}
              style={[styles.saveBtn, { backgroundColor: saving ? colors.muted : colors.primary }]}
            >
              {saving ? (
                <ActivityIndicator color={colors.primaryForeground} size="small" />
              ) : (
                <>
                  <Feather name="save" size={15} color={colors.primaryForeground} />
                  <Text style={[styles.saveText, { color: colors.primaryForeground }]}>
                    {form.id ? "Update" : "Save"}
                  </Text>
                </>
              )}
            </TouchableOpacity>
          </View>
        </View>
      )}

      <Text style={[styles.footerText, { color: colors.mutedForeground }]}>
        API keys are stored securely on this device and never transmitted to third parties.
      </Text>
    </KeyboardAwareScrollView>
  );
}

const styles = StyleSheet.create({
  container: { paddingHorizontal: 20, gap: 14 },
  banner: {
    flexDirection: "row", alignItems: "center", gap: 10,
    paddingHorizontal: 14, paddingVertical: 12, borderRadius: 12, borderWidth: 1,
  },
  bannerText: { fontSize: 13, fontFamily: "Inter_500Medium", flex: 1 },
  connectedBadge: {
    flexDirection: "row", alignItems: "center", gap: 6,
    paddingHorizontal: 12, paddingVertical: 8, borderRadius: 10, borderWidth: 1, alignSelf: "flex-start",
  },
  connectedText: { fontSize: 12, fontFamily: "Inter_600SemiBold" },
  wsCard: { borderRadius: 14, borderWidth: 1, overflow: "hidden" },
  wsCardHeader: { flexDirection: "row", alignItems: "center", paddingHorizontal: 14, paddingVertical: 12 },
  wsCardLeft: { flex: 1, flexDirection: "row", alignItems: "center", gap: 12 },
  wsIcon: { width: 32, height: 32, borderRadius: 10, alignItems: "center", justifyContent: "center" },
  wsName: { fontSize: 14, fontFamily: "Inter_600SemiBold" },
  wsUrl: { fontSize: 11, fontFamily: "Inter_400Regular", marginTop: 1 },
  wsCardActions: { flexDirection: "row", gap: 4 },
  iconBtn: { padding: 8 },
  addBtn: {
    flexDirection: "row", alignItems: "center", justifyContent: "center",
    gap: 8, paddingVertical: 13, borderRadius: 14, borderWidth: 1, borderStyle: "dashed",
  },
  addBtnText: { fontSize: 14, fontFamily: "Inter_600SemiBold" },
  formCard: { borderRadius: 14, borderWidth: 1, padding: 16, gap: 14 },
  formTitle: { fontSize: 15, fontFamily: "Inter_600SemiBold" },
  fieldGroup: { gap: 6 },
  label: { fontSize: 11, fontFamily: "Inter_600SemiBold", letterSpacing: 0.8, marginLeft: 2 },
  inputWrap: {
    flexDirection: "row", alignItems: "center",
    borderRadius: 10, borderWidth: 1, paddingHorizontal: 12, paddingVertical: 11, gap: 10,
  },
  input: { flex: 1, fontSize: 14, fontFamily: "Inter_400Regular" },
  validRow: { flexDirection: "row", alignItems: "center", gap: 6, marginLeft: 2 },
  validText: { fontSize: 12, fontFamily: "Inter_400Regular" },
  errorBox: { borderRadius: 10, borderWidth: 1, padding: 12, gap: 6 },
  errorHeader: { flexDirection: "row", alignItems: "center", gap: 6 },
  errorTitle: { fontSize: 12, fontFamily: "Inter_600SemiBold" },
  errorScroll: { maxHeight: 80 },
  errorDetail: { fontSize: 11, fontFamily: "Inter_400Regular", lineHeight: 16 },
  validateBtn: {
    flexDirection: "row", alignItems: "center", justifyContent: "center",
    gap: 8, paddingVertical: 11, borderRadius: 10, borderWidth: 1,
  },
  validateText: { fontSize: 14, fontFamily: "Inter_600SemiBold" },
  formBtnsRow: { flexDirection: "row", gap: 10 },
  cancelBtn: { flex: 1, paddingVertical: 12, borderRadius: 10, borderWidth: 1, alignItems: "center" },
  cancelText: { fontSize: 14, fontFamily: "Inter_500Medium" },
  saveBtn: {
    flex: 2, flexDirection: "row", alignItems: "center", justifyContent: "center",
    gap: 8, paddingVertical: 12, borderRadius: 10,
  },
  saveText: { fontSize: 14, fontFamily: "Inter_600SemiBold" },
  footerText: { fontSize: 12, fontFamily: "Inter_400Regular", textAlign: "center", lineHeight: 18, marginTop: 4 },
});