"use client";

/**
 * Sidebar Task Indicator — shows running background tasks in the sidebar.
 * Compact by default, expands to show all running tasks on click.
 */

import { useState } from "react";
import { Loader2, ChevronDown, ChevronUp, CheckCircle2, XCircle } from "lucide-react";
import { useBackgroundTasks } from "@/lib/stores/task-store";

export function SidebarTaskIndicator() {
  const { runningTasks, recentTasks } = useBackgroundTasks();
  const [expanded, setExpanded] = useState(false);

  if (runningTasks.length === 0 && recentTasks.length === 0) return null;

  return (
    <div className="mx-3 my-2">
      <button
        onClick={() => setExpanded(!expanded)}
        className="w-full px-3 py-2 rounded-lg bg-white/[0.04] border border-white/[0.06] hover:bg-white/[0.06] transition-colors text-left"
      >
        {runningTasks.length > 0 ? (
          <>
            <div className="flex items-center gap-2">
              <Loader2 className="h-3.5 w-3.5 animate-spin text-brand-400 shrink-0" />
              <span className="text-xs text-slate-400 truncate flex-1">
                {runningTasks[0].label}
              </span>
              {expanded
                ? <ChevronUp className="w-3 h-3 text-slate-500 shrink-0" />
                : <ChevronDown className="w-3 h-3 text-slate-500 shrink-0" />
              }
            </div>
            {runningTasks.length > 1 && !expanded && (
              <p className="text-[10px] text-slate-500 mt-1 ml-5">
                +{runningTasks.length - 1} more running
              </p>
            )}
          </>
        ) : (
          <div className="flex items-center gap-2">
            <CheckCircle2 className="h-3.5 w-3.5 text-green-500 shrink-0" />
            <span className="text-xs text-slate-500 truncate flex-1">All tasks complete</span>
            {expanded
              ? <ChevronUp className="w-3 h-3 text-slate-500 shrink-0" />
              : <ChevronDown className="w-3 h-3 text-slate-500 shrink-0" />
            }
          </div>
        )}
      </button>

      {expanded && (
        <div className="mt-1 px-2 py-1.5 rounded-lg bg-white/[0.03] border border-white/[0.04] space-y-1">
          {runningTasks.map((t) => (
            <div key={t.id} className="flex items-center gap-2 px-1 py-1">
              <Loader2 className="h-3 w-3 animate-spin text-brand-400 shrink-0" />
              <span className="text-[11px] text-slate-400 truncate">{t.label}</span>
            </div>
          ))}
          {recentTasks.slice(0, 3).map((t) => (
            <div key={t.id} className="flex items-center gap-2 px-1 py-1">
              {t.status === "completed"
                ? <CheckCircle2 className="h-3 w-3 text-green-500 shrink-0" />
                : <XCircle className="h-3 w-3 text-red-400 shrink-0" />
              }
              <span className="text-[11px] text-slate-500 truncate">{t.label.replace(/^Running\s+/i, "").replace(/\.{2,}$/, "")}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
