import { AlertCircle, ArrowRight, CheckCircle2, Workflow } from "lucide-react";
import { type PipelineRequest } from "@/app/lib/api";
import { Badge } from "../ui/badge";
import { Button } from "../ui/button";
import { ScrollArea } from "../ui/scroll-area";
import { type PipelineHistoryItem } from "./usePipelinesStore";

type HistoryTabProps = {
  history: PipelineHistoryItem[];
  onRerun: (request: PipelineRequest) => void;
};

export function HistoryTab({ history, onRerun }: HistoryTabProps) {
  return (
    <div className="flex-1 m-0 overflow-hidden">
      <ScrollArea className="h-full">
        <div className="mx-auto max-w-2xl p-6 space-y-3">
          {history.length === 0 && (
            <div className="flex flex-col items-center justify-center py-12 text-center">
              <Workflow className="h-10 w-10 text-muted-foreground-dim mb-4" />
              <p className="text-sm font-medium text-muted-foreground">
                No pipeline runs yet
              </p>
              <p className="text-xs text-muted-foreground-subtle mt-1">
                Configure and run a pipeline from the Builder tab.
              </p>
            </div>
          )}
          {history.map((h) => (
            <div
              key={h.id}
              className="rounded-lg border border-border bg-card p-4 space-y-2"
            >
              <div className="flex items-center gap-2">
                {h.error ? (
                  <AlertCircle className="h-3.5 w-3.5 text-destructive" />
                ) : (
                  <CheckCircle2 className="h-3.5 w-3.5 text-success" />
                )}
                <span className="text-xs font-medium text-foreground">
                  {h.request.pipeline ||
                    h.request.source?.table_name ||
                    "Pipeline"}
                </span>
                {h.request.sink?.table_name && (
                  <>
                    <ArrowRight className="h-3 w-3 text-muted-foreground" />
                    <span className="text-xs text-muted-foreground">
                      {h.request.sink.table_name}
                    </span>
                  </>
                )}
                <div className="flex-1" />
                <span className="text-caption text-muted-foreground">
                  {h.timestamp.toLocaleTimeString()}
                </span>
                {h.duration != null && (
                  <Badge variant="secondary" className="text-tiny tabular-nums">
                    {h.duration}ms
                  </Badge>
                )}
              </div>
              {h.result && (
                <div className="flex gap-3 text-caption text-muted-foreground">
                  <span>Fetched: {h.result.rows_fetched ?? 0}</span>
                  <span>Inserted: {h.result.rows_inserted ?? 0}</span>
                </div>
              )}
              {h.error && (
                <p className="text-caption text-destructive wrap-break-word">
                  {h.error}
                </p>
              )}
              <Button
                variant="ghost"
                size="sm"
                className="h-6 text-caption"
                onClick={() => onRerun(h.request)}
              >
                Re-run
              </Button>
            </div>
          ))}
        </div>
      </ScrollArea>
    </div>
  );
}
