"use client";

import { Download, FileText } from "lucide-react";
import { LoadingSpinner } from "@/components/LoadingSpinner";
import { Button } from "@/components/ui/button";
import { useTaskContext } from "../TaskContext";

export default function TaskArtifactsPage() {
  const { task, taskStatus, loading, error } = useTaskContext();

  if (loading) {
    return (
      <div className="flex h-full items-center justify-center">
        <LoadingSpinner />
      </div>
    );
  }

  if (error || !task) {
    return (
      <div className="py-12 text-center text-muted-foreground">
        <FileText className="mx-auto mb-4 h-16 w-16 opacity-50" />
        <p>{error || "Task not found"}</p>
      </div>
    );
  }

  const isActive = ["running", "paused"].includes(task.status);

  return (
    <div className="main-content">
      <h3 className="text-lg font-semibold">Artifacts</h3>
      <p className="note">
        Files and outputs generated by this task
      </p>
        {taskStatus?.artifacts && taskStatus.artifacts.length > 0 ? (
          <div className="space-y-4">
            {taskStatus.artifacts.map((artifact, index) => (
              <div
                key={index}
                className="flex items-center justify-between rounded-lg border p-4"
              >
                <div className="flex items-center gap-3">
                  <FileText className="h-8 w-8 text-primary" />
                  <div>
                    <p className="font-medium">
                      {typeof artifact === "string"
                        ? artifact
                        : `Artifact ${index + 1}`}
                    </p>
                    <p className="text-sm text-muted-foreground">
                      Generated by task execution
                    </p>
                  </div>
                </div>
                <Button variant="outline" size="sm" className="gap-1" disabled>
                  <Download className="h-4 w-4" />
                  Download
                </Button>
              </div>
            ))}
          </div>
        ) : (
          <div className="py-12 text-center">
            <FileText className="mx-auto mb-4 h-16 w-16 text-muted-foreground opacity-50" />
            <h3 className="mb-2 text-lg font-semibold">No Artifacts</h3>
            <p className="text-muted-foreground">
              {isActive
                ? "Artifacts will appear here as the task generates outputs."
                : "This task did not generate any artifacts."}
            </p>
          </div>
        )}
    </div>
  );
}

