import { useState } from "react";
import { View, Text } from "react-native";
import { DataTable } from "react-native-paper";

import { Todo } from "@/store/models/Todo.model";
import { TableSortDirection } from "@/constants/tableSortDirectionEnum";
import { AdminTodoTableHeader } from "@/components/features/todos/AdminTodoTableHeader";
import { AdminTodoActions } from "@/components/features/todos/AdminTodoActions";
import { PriorityIndicator } from "@/components/ui/PriorityIndicator";
import { StatusTableItem } from "@/components/ui/StatusTableItem";
import { TodoDetailsModal } from "@/components/features/todos/TodoDetailsModal";
import { formatDateMDY, formatTime } from "@/utils/dateUtils";

interface DesktopAdminTodoTableProps {
  todos: Todo[];
  sortColumn: string | null;
  sortDirection: TableSortDirection;
  onSort: (column: string) => void;
  onEdit: (todo: Todo) => void;
  onDelete: (todo: Todo) => void;
}

export const DesktopAdminTodosTable = ({
  todos,
  sortColumn,
  sortDirection,
  onSort,
  onEdit,
  onDelete,
}: DesktopAdminTodoTableProps) => {
  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 (
    <DataTable>
      <AdminTodoTableHeader
        sortColumn={sortColumn}
        sortDirection={sortDirection}
        onSort={onSort}
      />

      {todos.map((todo) => (
        <DataTable.Row key={todo.id}>
          <DataTable.Cell>
            <View className="flex-row items-center flex-shrink px-1 py-1">
              <Text onPress={() => openDetails(todo)} numberOfLines={10}>
                {todo.title}
              </Text>
            </View>
          </DataTable.Cell>
          <DataTable.Cell>
            <View className="flex-row items-center flex-shrink px-1 py-1">
              <Text numberOfLines={10}>
                {todo.task && todo.task.length > 50
                  ? `${todo.task.slice(0, 50)}...`
                  : todo.task}
              </Text>
            </View>
          </DataTable.Cell>
          <DataTable.Cell
            style={{
              justifyContent: "center",
            }}
          >
            <StatusTableItem todoStatus={todo.status} />
          </DataTable.Cell>
          <DataTable.Cell
            style={{
              justifyContent: "center",
            }}
          >
            <PriorityIndicator priority={todo.priority} />
          </DataTable.Cell>
          <DataTable.Cell style={{ justifyContent: "center" }}>
            <Text className="px-1 py-1">{`${formatDateMDY(
              todo.createdAt
            )} ${formatTime(todo.createdAt)}`}</Text>
          </DataTable.Cell>
          <DataTable.Cell style={{ justifyContent: "center" }}>
            <AdminTodoActions
              todo={todo}
              onView={(t) => openDetails(t)}
              onEdit={onEdit}
              onDelete={onDelete}
            />
          </DataTable.Cell>
        </DataTable.Row>
      ))}
      {selectedTodo && (
        <TodoDetailsModal
          visible={detailsOpen}
          todo={selectedTodo}
          onClose={closeDetails}
        />
      )}
    </DataTable>
  );
};