import TaskCrud from "../components/TaskCrud";
import TaskList from "../components/TaskList";
import TaskMaintenanceButtons from "../components/TaskMaintenanceButtons";
import TaskProcessingControls from "../components/TaskProcessingControls";

export default function TasksPage() {
  return (
    <div className="max-w-7xl mx-auto px-6 py-8 lg:px-8">
      <div className="sticky top-16 z-10 bg-white/80 dark:bg-gray-950/80 backdrop-blur-md border-b border-gray-200/50 dark:border-gray-800/50 pb-6 mb-8 flex items-center justify-between rounded-t-xl">
        <div className="flex items-center gap-3">
          <div className="flex-shrink-0">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 shadow-sm">
              <svg
                className="h-6 w-6 text-white"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
                />
              </svg>
            </div>
          </div>
          <div>
            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
              Task Management
            </h2>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              Monitor and manage file processing tasks and operations
            </p>
          </div>
        </div>
        <div className="flex items-center gap-3">
          <TaskProcessingControls />
          <TaskMaintenanceButtons />
          <TaskCrud />
        </div>
      </div>
      <div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 overflow-hidden">
        <TaskList context="tasks" />
      </div>
    </div>
  );
}