import { View, Text, ScrollView } from "react-native";
import { Badge, IconButton } from "react-native-paper";
import { useState } from "react";
import { Ionicons } from "@expo/vector-icons";

import { TodoDetailsModal } from "@/components/features/todos/TodoDetailsModal";
import { Todo } from "@/store/models/Todo.model";
import { PriorityIndicator } from "@/components/ui/PriorityIndicator";
import { SizeEnum } from "@/constants/sizeEnum";
import { TodoStatusColors } from "@/constants/todoStatusEnum";
import { formatDateMDY, formatTime } from "@/utils/dateUtils";

interface MobileAdminTodoTableProps {
  todos: Todo[];
  onEdit: (todo: Todo) => void;
  onDelete: (todo: Todo) => void;
}

export const MobileAdminTodosTable = ({
  todos,
  onEdit,
  onDelete,
}: MobileAdminTodoTableProps) => {
  const [detailsOpen, setDetailsOpen] = useState(false);
  const [selectedTodo, setSelectedTodo] = useState<Todo | null>(null);

  const openDetails = (todo: Todo) => {
    setSelectedTodo(todo);
    setDetailsOpen(true);
  };

  const closeDetails = () => setDetailsOpen(false);

  return (
    <View className="flex-1">
      <ScrollView
        className="flex-1"
        contentContainerStyle={{ paddingBottom: 16 }}
      >
        {todos.map((todo) => {
          const taskPreview =
            todo.task && todo.task.length > 50
              ? `${todo.task.slice(0, 50)}...`
              : todo.task;
          return (
            <View
              key={todo.id}
              className="mb-3 p-4 bg-white rounded-md shadow-sm"
            >
              <View className="flex-row justify-between items-center mb-3">
                <View className="mr-2">
                  <Badge
                    size={16}
                    style={{ backgroundColor: TodoStatusColors[todo.status] }}
                  />
                </View>
                <Text className="font-bold flex-1 flex-wrap" numberOfLines={0}>
                  {todo.title}
                </Text>
                <View className="ml-2 flex-row items-center">
                  <PriorityIndicator
                    priority={todo.priority}
                    size={SizeEnum.Small}
                  />
                </View>
              </View>
              <View className="flex-row items-center mb-2">
                <Ionicons name="calendar-outline" size={14} color="#6b7280" />
                <Text className="text-xs text-gray-500 ml-1">
                  {`${formatDateMDY(todo.createdAt)} ${formatTime(
                    todo.createdAt
                  )}`}
                </Text>
              </View>
              <Text className="text-sm mb-3 text-gray-600" numberOfLines={0}>
                {taskPreview}
              </Text>
              <View className="flex-row justify-end border-t border-gray-200 pt-3">
                <IconButton
                  icon="eye-outline"
                  size={20}
                  onPress={() => openDetails(todo)}
                />
                <IconButton
                  icon="pencil-outline"
                  size={20}
                  onPress={() => {
                    onEdit(todo);
                  }}
                />
                <IconButton
                  icon="delete-outline"
                  size={20}
                  onPress={() => {
                    onDelete(todo);
                  }}
                />
              </View>
            </View>
          );
        })}
      </ScrollView>
      {selectedTodo && (
        <TodoDetailsModal
          visible={detailsOpen}
          todo={selectedTodo}
          onClose={closeDetails}
        />
      )}
    </View>
  );
};