AI Task Queue

"use client";

import React from "react";
import { ListTodo, MoreVertical, GripVertical } from "lucide-react";

const tasks = [
    { id: "1", task: "Generate Q4 earnings report", priority: "High", status: "Active", progress: 65 },
    { id: "2", task: "Parse 500+ customer feedback PDFs", priority: "Med", status: "Queued", progress: 0 },
    { id: "3", task: "Translate codebase to TypeScript", priority: "High", status: "Queued", progress: 0 },
    { id: "4", task: "Check logs for security anomalies", priority: "Low", status: "Completed", progress: 100 },
];

export default function AITaskQueue() {
    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-6 shadow-sm w-full max-w-lg mx-auto">
            <div className="flex items-center justify-between mb-6">
                <div className="flex items-center gap-2">
                    <ListTodo className="h-4 w-4 text-zinc-500" />
                    <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100">Priority Task Queue</h3>
                </div>
                <span className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest">4 Tasks Active</span>
            </div>

            <div className="space-y-2">
                {tasks.map((t) => (
                    <div key={t.id} className="group relative flex items-center gap-4 p-3 rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50 hover:bg-white dark:hover:bg-zinc-800 transition-all hover:shadow-md hover:shadow-zinc-200/20 dark:hover:shadow-black">
                        <div className="text-zinc-300 group-hover:text-zinc-500 cursor-grab">
                            <GripVertical className="h-4 w-4" />
                        </div>
                        <div className="flex-1 min-w-0">
                            <div className="flex items-center justify-between mb-1">
                                <p className="text-xs font-bold text-zinc-900 dark:text-zinc-100 truncate">{t.task}</p>
                                <span className={`text-[9px] font-black uppercase tracking-tight px-1.5 py-0.5 rounded ${t.priority === "High" ? "text-red-500 bg-red-50 dark:bg-red-900/20" :
                                        t.priority === "Med" ? "text-amber-500 bg-amber-50 dark:bg-amber-900/20" :
                                            "text-zinc-500 bg-zinc-100 dark:bg-zinc-800"
                                    }`}>
                                    {t.priority}
                                </span>
                            </div>
                            <div className="flex items-center gap-3">
                                <div className="flex-1 h-1 bg-zinc-200 dark:bg-zinc-800 rounded-full overflow-hidden">
                                    <div
                                        className={`h-full transition-all duration-1000 ${t.status === "Active" ? "bg-blue-500" : t.status === "Completed" ? "bg-emerald-500" : "bg-zinc-400"}`}
                                        style={{ width: `${t.progress}%` }}
                                    />
                                </div>
                                <span className="text-[10px] font-bold text-zinc-500 w-8">{t.progress}%</span>
                            </div>
                        </div>
                        <button className="p-1 rounded opacity-0 group-hover:opacity-100 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-all">
                            <MoreVertical className="h-4 w-4 text-zinc-400" />
                        </button>
                    </div>
                ))}
            </div>
        </div>
    );
}