import React from "react";
import { Alert, StyleSheet, Text, View } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import {
    Draggable,
    Droppable,
    DropProvider,
} from "react-native-reanimated-dnd";
import { SafeAreaView } from "react-native-safe-area-context";

export default function DragDropExample() {
  const handleDrop = (data: any, zoneId: string) => {
    Alert.alert("Item Dropped", `"${data.title}" dropped in ${zoneId}`);
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <GestureHandlerRootView style={styles.container}>
        <DropProvider>
          <View style={styles.content}>
            {/* Drop Zones */}
            <View style={styles.dropZonesSection}>
              <Text style={styles.sectionTitle}>Drop Zones</Text>

              <Droppable
                onDrop={(data) => handleDrop(data, "Zone 1")}
                activeStyle={styles.dropZoneActive}
                style={styles.droppable}
              >
                <View style={[styles.dropZoneBlue, styles.dropZone]}>
                  <Text style={styles.dropZoneText}>🎯 Zone 1</Text>
                  <Text style={styles.dropZoneSubtext}>Drop here</Text>
                </View>
              </Droppable>

              <Droppable
                onDrop={(data) => handleDrop(data, "Zone 2")}
                activeStyle={styles.dropZoneActive}
                style={styles.droppable}
              >
                <View style={[styles.dropZone, styles.dropZoneGreen]}>
                  <Text style={styles.dropZoneText}>🎯 Zone 2</Text>
                  <Text style={styles.dropZoneSubtext}>Drop here</Text>
                </View>
              </Droppable>
            </View>

            {/* Draggable Item */}
            <View style={styles.draggableSection}>
              <Text style={styles.sectionTitle}>Draggable Item</Text>
              <Draggable data={{ id: "1", title: "Task Item" }}>
                <View style={styles.draggableItem}>
                  <Text style={styles.itemText}>📦 Drag me to a zone</Text>
                </View>
              </Draggable>
            </View>
          </View>
        </DropProvider>
      </GestureHandlerRootView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000000",
  },
  content: {
    flex: 1,
    padding: 20,
    justifyContent: "space-between",
  },
  sectionTitle: {
    color: "#FFFFFF",
    fontSize: 18,
    fontWeight: "700",
    marginBottom: 20,
    textAlign: "center",
  },
  draggableSection: {
    alignItems: "center",
    paddingVertical: 40,
  },
  draggableItem: {
    padding: 20,
    backgroundColor: "#1C1C1E",
    borderRadius: 12,
    borderWidth: 1,
    borderColor: "#3A3A3C",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 3,
  },
  itemText: {
    color: "#FFFFFF",
    fontSize: 16,
    fontWeight: "600",
    textAlign: "center",
  },
  dropZonesSection: {
    flex: 1,
    paddingVertical: 40,
  },
  droppable: {
    marginBottom: 20,
    overflow: "hidden",
    borderRadius: 16,
  },
  dropZone: {
    height: 140,
    borderWidth: 2,
    borderStyle: "dashed",
    borderRadius: 16,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
  dropZoneBlue: {
    borderColor: "#58a6ff",
    backgroundColor: "rgba(88, 166, 255, 0.08)",
  },
  dropZoneGreen: {
    borderColor: "#3fb950",
    backgroundColor: "rgba(63, 185, 80, 0.08)",
  },
  dropZoneActive: {
    backgroundColor: "rgba(255, 255, 255, 0.1)",
    borderStyle: "solid",
    transform: [{ scale: 1.02 }],
  },
  dropZoneText: {
    color: "#FFFFFF",
    fontSize: 18,
    fontWeight: "600",
    textAlign: "center",
    marginBottom: 8,
  },
  dropZoneSubtext: {
    color: "#8E8E93",
    fontSize: 14,
    textAlign: "center",
  },
});