import { View, Text, TextInput, Pressable } from "react-native";
import { useLocalSearchParams } from "expo-router";
import BaseBackground from "../../components/BaseBackground";
import { useThemeStore } from "../../stores/ThemeStore";

const EventDetailScreen = () => {
  const { id } = useLocalSearchParams<{ id: string }>();
  const { theme } = useThemeStore();

  // TODO: Fetch event by id using EventService.getById()
  // TODO: Display event details (title, description, start/end time)
  // TODO: Edit mode toggle
  // TODO: Save changes -> EventService.update()
  // TODO: Delete button -> EventService.delete()
  // TODO: Link to NoteScreen for this event
  // TODO: Loading and error states
  throw new Error("Not implemented");

  return (
    <BaseBackground>
      <View className="flex-1 p-4">
        <Text className="text-2xl mb-4" style={{ color: theme.textPrimary }}>
          Event Detail
        </Text>
        <Text className="mb-4" style={{ color: theme.textSecondary }}>
          ID: {id}
        </Text>
        <TextInput
          placeholder="Title"
          placeholderTextColor={theme.textMuted}
          className="w-full border rounded p-2 mb-4"
          style={{
            color: theme.textPrimary,
            borderColor: theme.borderPrimary,
            backgroundColor: theme.secondaryBg,
          }}
        />
        <TextInput
          placeholder="Description"
          placeholderTextColor={theme.textMuted}
          multiline
          className="w-full border rounded p-2 mb-4 h-24"
          style={{
            color: theme.textPrimary,
            borderColor: theme.borderPrimary,
            backgroundColor: theme.secondaryBg,
          }}
        />
        <View className="flex-row gap-2">
          <Pressable
            className="p-3 rounded flex-1"
            style={{ backgroundColor: theme.confirmButton }}
          >
            <Text className="text-center" style={{ color: theme.buttonText }}>
              Save
            </Text>
          </Pressable>
          <Pressable
            className="p-3 rounded flex-1"
            style={{ backgroundColor: theme.rejectButton }}
          >
            <Text className="text-center" style={{ color: theme.buttonText }}>
              Delete
            </Text>
          </Pressable>
        </View>
      </View>
    </BaseBackground>
  );
};

export default EventDetailScreen;