import React from "react";
import {
  View,
  Text,
  TouchableOpacity,
  Modal,
  FlatList,
  StyleSheet,
} from "react-native";
import { X, Check } from "lucide-react-native";
import { PRIMARY } from "@/constants/colors";
import { useThemeColor } from "@/hooks/useThemeColor";
import { useColorScheme } from "@/hooks/useColorScheme";
import { Etape } from "@/types/tasks.types";

type EtapePickerProps = {
  visible: boolean;
  onClose: () => void;
  etapes: Etape[];
  selectedId: string | null;
  onSelect: (etapeId: string | null) => void;
};

export default function EtapePicker({
  visible,
  onClose,
  etapes,
  selectedId,
  onSelect,
}: EtapePickerProps) {
  const colorScheme = useColorScheme();
  const isDark = colorScheme === "dark";
  const bgColor = useThemeColor({ light: "#ffffff", dark: "#1f2937" }, "background");
  const textColor = useThemeColor({ light: "#1f2937", dark: "#f9fafb" }, "text");
  const subtextColor = useThemeColor({ light: "#6b7280", dark: "#9ca3af" }, "text");
  const borderColor = isDark ? "#374151" : "#e5e7eb";

  const handleSelect = (id: string | null) => {
    onSelect(id);
    onClose();
  };

  return (
    <Modal visible={visible} animationType="slide" transparent onRequestClose={onClose}>
      <View style={styles.overlay}>
        <View style={[styles.sheet, { backgroundColor: bgColor }]}>
          <View style={[styles.header, { borderBottomColor: borderColor }]}>
            <Text style={[styles.title, { color: textColor }]}>Étape</Text>
            <TouchableOpacity onPress={onClose}>
              <X size={22} color={textColor} />
            </TouchableOpacity>
          </View>

          <TouchableOpacity
            style={[styles.row, { borderBottomColor: borderColor }]}
            onPress={() => handleSelect(null)}
          >
            <Text style={[styles.name, { color: subtextColor }]}>Sans Étape</Text>
            {selectedId === null && <Check size={18} color={PRIMARY} />}
          </TouchableOpacity>

          <FlatList
            data={etapes}
            keyExtractor={(item) => item.id}
            renderItem={({ item }) => (
              <TouchableOpacity
                style={[styles.row, { borderBottomColor: borderColor }]}
                onPress={() => handleSelect(item.id)}
              >
                <Text style={[styles.name, { color: textColor }]}>{item.title}</Text>
                {selectedId === item.id && <Check size={18} color={PRIMARY} />}
              </TouchableOpacity>
            )}
          />
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    justifyContent: "flex-end",
    backgroundColor: "rgba(0,0,0,0.4)",
  },
  sheet: {
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    maxHeight: "50%",
    paddingBottom: 34,
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 16,
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  title: {
    fontSize: 17,
    fontWeight: "700",
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 14,
    paddingHorizontal: 16,
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  name: {
    flex: 1,
    fontSize: 15,
  },
});
