import { useState } from "react";
import { Modal, Pressable, ScrollView, View } from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
import { Plus, Trash2, X } from "lucide-react-native";
import { useColorScheme } from "nativewind";

import { Button } from "./ui/Button";
import { Input } from "./ui/Input";
import { Text } from "./ui/Text";

interface CustomHeadersModalProps {
  visible: boolean;
  customHeaders: Record<string, string>;
  onClose: () => void;
  onSave: (headers: Record<string, string>) => void;
}

export function CustomHeadersModal({
  visible,
  customHeaders,
  onClose,
  onSave,
}: CustomHeadersModalProps) {
  const { colorScheme } = useColorScheme();
  const iconColor = colorScheme === "dark" ? "#d1d5db" : "#374151";

  // Convert headers object to array of entries for easier manipulation
  const [headers, setHeaders] = useState<{ key: string; value: string }[]>(
    Object.entries(customHeaders).map(([key, value]) => ({ key, value })),
  );
  const [newHeaderKey, setNewHeaderKey] = useState("");
  const [newHeaderValue, setNewHeaderValue] = useState("");

  const handleAddHeader = () => {
    if (!newHeaderKey.trim() || !newHeaderValue.trim()) {
      return;
    }

    // Check if header already exists
    const existingIndex = headers.findIndex((h) => h.key === newHeaderKey);
    if (existingIndex >= 0) {
      // Update existing header
      const updatedHeaders = [...headers];
      updatedHeaders[existingIndex].value = newHeaderValue;
      setHeaders(updatedHeaders);
    } else {
      // Add new header
      setHeaders([...headers, { key: newHeaderKey, value: newHeaderValue }]);
    }

    setNewHeaderKey("");
    setNewHeaderValue("");
  };

  const handleRemoveHeader = (index: number) => {
    setHeaders(headers.filter((_, i) => i !== index));
  };

  const handleSave = () => {
    // Convert array back to object
    const headersObject = headers.reduce(
      (acc, { key, value }) => {
        if (key.trim() && value.trim()) {
          acc[key] = value;
        }
        return acc;
      },
      {} as Record<string, string>,
    );

    onSave(headersObject);
    onClose();
  };

  const handleCancel = () => {
    // Reset to original headers
    setHeaders(
      Object.entries(customHeaders).map(([key, value]) => ({ key, value })),
    );
    setNewHeaderKey("");
    setNewHeaderValue("");
    onClose();
  };

  return (
    <Modal
      visible={visible}
      transparent
      animationType="slide"
      onRequestClose={handleCancel}
    >
      <View className="flex-1 justify-end">
        <Pressable
          className="absolute inset-0 bg-black/50"
          onPress={handleCancel}
        />
        <View className="max-h-[85%] rounded-t-3xl bg-card">
          <KeyboardAwareScrollView
            contentContainerClassName="p-6"
            bottomOffset={20}
            keyboardShouldPersistTaps="handled"
          >
            {/* Header */}
            <View className="mb-4 flex flex-row items-center justify-between">
              <Text className="text-lg font-semibold">Custom Headers</Text>
              <Pressable onPress={handleCancel} className="p-2">
                <X size={24} color={iconColor} />
              </Pressable>
            </View>

            <Text className="mb-4 text-sm text-gray-600 dark:text-gray-400">
              Add custom HTTP headers that will be sent with every API request.
            </Text>

            {/* Existing Headers List */}
            <View className="mb-4 max-h-64">
              {headers.length === 0 ? (
                <Text className="py-4 text-center text-sm text-gray-500 dark:text-gray-400">
                  No custom headers configured
                </Text>
              ) : (
                <ScrollView>
                  {headers.map((header, index) => (
                    <View
                      key={index}
                      className="mb-2 flex-row items-center gap-2 rounded-lg border border-border bg-background p-3"
                    >
                      <View className="flex-1">
                        <Text className="text-sm font-semibold">
                          {header.key}
                        </Text>
                        <Text
                          className="text-xs text-gray-600 dark:text-gray-400"
                          numberOfLines={1}
                        >
                          {header.value}
                        </Text>
                      </View>
                      <Pressable
                        onPress={() => handleRemoveHeader(index)}
                        className="p-2"
                      >
                        <Trash2 size={18} color="#ef4444" />
                      </Pressable>
                    </View>
                  ))}
                </ScrollView>
              )}
            </View>

            {/* Add New Header */}
            <View className="gap-2 border-t border-border pt-4">
              <Text className="text-sm font-semibold">Add New Header</Text>
              <Input
                placeholder="Header Name (e.g., X-Custom-Header)"
                value={newHeaderKey}
                onChangeText={setNewHeaderKey}
                autoCapitalize="none"
                inputClasses="bg-background"
              />
              <Input
                placeholder="Header Value"
                value={newHeaderValue}
                onChangeText={setNewHeaderValue}
                autoCapitalize="none"
                inputClasses="bg-background"
              />
              <Button
                variant="secondary"
                onPress={handleAddHeader}
                disabled={!newHeaderKey.trim() || !newHeaderValue.trim()}
              >
                <Plus size={16} color={iconColor} />
                <Text className="text-sm">Add Header</Text>
              </Button>
            </View>

            {/* Action Buttons */}
            <View className="mt-4 flex flex-row gap-2 border-t border-border pt-4">
              <Button
                variant="secondary"
                onPress={handleCancel}
                androidRootClassName="flex-1"
              >
                <Text>Cancel</Text>
              </Button>
              <Button
                variant="primary"
                onPress={handleSave}
                androidRootClassName="flex-1"
              >
                <Text>Save</Text>
              </Button>
            </View>
          </KeyboardAwareScrollView>
        </View>
      </View>
    </Modal>
  );
}