---
import { resolveOrgOwners } from "@/lib/repo-owner";
import { getDatabase, schema } from "@/db";
import BaseLayout from "@/layouts/BaseLayout.astro";
import { desc, eq } from "drizzle-orm";
import {
  Play,
  CheckCircle2,
  XCircle,
  Loader2,
  Clock,
  GitBranch,
  GitCommit,
  Bot
} from "lucide-react";

const db = getDatabase();

// Get filter from query params
const filter = Astro.url.searchParams.get("filter") || "all";

// Fetch workflow runs from public repos
let workflowRuns: any[] = [];
let successCount = 0;
let failureCount = 0;
let runningCount = 0;

try {
  const rawRuns = await db.query.workflowRuns.findMany({
    where: filter === "success" 
      ? eq(schema.workflowRuns.status, "success")
      : filter === "failure"
        ? eq(schema.workflowRuns.status, "failure")
        : filter === "running"
          ? eq(schema.workflowRuns.status, "running")
          : undefined,
    orderBy: [desc(schema.workflowRuns.createdAt)],
    limit: 50,
    with: {
      repository: {
        with: {
          owner: true,
        },
      },
      triggeredBy: true,
    },
  });

  // Filter to only public repos
  workflowRuns = (await resolveOrgOwners(rawRuns)).filter(run => 
    run.repository?.visibility === "public"
  );

  const allPublicRuns = await db.query.workflowRuns.findMany({
    columns: { status: true },
    with: {
      repository: {
        columns: { visibility: true }
      }
    }
  });
  const publicOnly = allPublicRuns.filter(r => r.repository?.visibility === "public");
  successCount = publicOnly.filter(r => r.status === "success").length;
  failureCount = publicOnly.filter(r => r.status === "failure").length;
  runningCount = publicOnly.filter(r => r.status === "running").length;
} catch (e) {
  console.error("Error fetching workflow runs:", e);
}

function timeAgo(date: string | number | Date) {
  if (!date) return "";
  const seconds = Math.floor(
    (new Date().getTime() - new Date(date).getTime()) / 1000
  );
  if (seconds < 60) return "just now";
  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
  if (seconds < 604800) return `${Math.floor(seconds / 86400)}d ago`;
  return new Date(date).toLocaleDateString();
}

function formatDuration(start: string, end: string | null) {
  if (!end) return "running...";
  const ms = new Date(end).getTime() - new Date(start).getTime();
  const seconds = Math.floor(ms / 1000);
  if (seconds < 60) return `${seconds}s`;
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${mins}m ${secs}s`;
}
---

<BaseLayout title="Actions · OpenCodeHub">
  <div class="container max-w-[1280px] mx-auto py-8 px-4 sm:px-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-border mb-6">
      <div>
        <h1 class="text-2xl font-bold text-foreground tracking-tight flex items-center gap-2.5">
          <Play className="h-6 w-6 text-foreground fill-foreground" />
          <span>Actions & Pipelines</span>
        </h1>
        <p class="text-sm text-muted-foreground mt-1">Global CI/CD workflow runs across all public repositories</p>
      </div>
    </div>

    <!-- Filter Tabs -->
    <div class="inline-flex items-center gap-1 p-1 rounded-lg border border-border/80 bg-card/60 backdrop-blur-sm mb-6 self-start">
      <a
        href="/actions?filter=all"
        class:list={[
          "inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors",
          filter === "all"
            ? "bg-secondary text-foreground font-semibold shadow-sm"
            : "text-muted-foreground hover:text-foreground hover:bg-muted/60"
        ]}
      >
        <span>All</span>
      </a>
      <a
        href="/actions?filter=success"
        class:list={[
          "inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors",
          filter === "success"
            ? "bg-secondary text-foreground font-semibold shadow-sm"
            : "text-muted-foreground hover:text-foreground hover:bg-muted/60"
        ]}
      >
        <span class="h-2 w-2 rounded-full bg-emerald-500"></span>
        <span>Success</span>
        <span class="ml-0.5 rounded-full bg-muted px-1.5 py-0.2 text-[11px] font-semibold text-muted-foreground">
          {successCount}
        </span>
      </a>
      <a
        href="/actions?filter=failure"
        class:list={[
          "inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors",
          filter === "failure"
            ? "bg-secondary text-foreground font-semibold shadow-sm"
            : "text-muted-foreground hover:text-foreground hover:bg-muted/60"
        ]}
      >
        <span class="h-2 w-2 rounded-full bg-red-500"></span>
        <span>Failed</span>
        <span class="ml-0.5 rounded-full bg-muted px-1.5 py-0.2 text-[11px] font-semibold text-muted-foreground">
          {failureCount}
        </span>
      </a>
      <a
        href="/actions?filter=running"
        class:list={[
          "inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors",
          filter === "running"
            ? "bg-secondary text-foreground font-semibold shadow-sm"
            : "text-muted-foreground hover:text-foreground hover:bg-muted/60"
        ]}
      >
        <span class="h-2 w-2 rounded-full bg-amber-500"></span>
        <span>Running</span>
        <span class="ml-0.5 rounded-full bg-muted px-1.5 py-0.2 text-[11px] font-semibold text-muted-foreground">
          {runningCount}
        </span>
      </a>
    </div>

    <!-- Workflow Runs List Card -->
    <div class="rounded-xl border border-border/80 bg-card/60 backdrop-blur-sm overflow-hidden shadow-sm">
      {workflowRuns.length > 0 ? (
        <div class="divide-y divide-border/60">
          {workflowRuns.map((run) => {
            const ownerName = run.repository?.owner?.username || "unknown";
            const repoName = run.repository?.name || "repo";
            return (
              <a
                href={`/${ownerName}/${repoName}/actions/runs/${run.id}`}
                class="group flex items-start gap-4 p-4 hover:bg-accent/40 transition-colors"
              >
                <!-- Status Icon -->
                <div class="mt-0.5 flex-shrink-0">
                  {run.status === "success" ? (
                    <div class="h-6 w-6 rounded-full bg-emerald-500/10 text-emerald-500 flex items-center justify-center border border-emerald-500/20" title="Workflow succeeded">
                      <CheckCircle2 className="h-3.5 w-3.5" />
                    </div>
                  ) : run.status === "failure" ? (
                    <div class="h-6 w-6 rounded-full bg-red-500/10 text-red-400 flex items-center justify-center border border-red-500/20" title="Workflow failed">
                      <XCircle className="h-3.5 w-3.5" />
                    </div>
                  ) : run.status === "running" ? (
                    <div class="h-6 w-6 rounded-full bg-amber-500/10 text-amber-400 flex items-center justify-center border border-amber-500/20" title="Workflow running">
                      <Loader2 className="h-3.5 w-3.5 animate-spin" />
                    </div>
                  ) : (
                    <div class="h-6 w-6 rounded-full bg-secondary text-muted-foreground flex items-center justify-center border border-border">
                      <Clock className="h-3.5 w-3.5" />
                    </div>
                  )}
                </div>

                <div class="flex-1 min-w-0">
                  <div class="flex items-baseline gap-2 flex-wrap mb-1">
                    <span class="text-xs font-semibold text-muted-foreground hover:text-foreground">
                      {ownerName}/{repoName}
                    </span>
                  </div>

                  <h3 class="text-sm font-semibold text-foreground group-hover:text-primary transition-colors leading-snug break-words">
                    {run.name || "CI Workflow"}
                  </h3>

                  <div class="flex items-center gap-3 mt-2 flex-wrap text-xs text-muted-foreground">
                    <div class="flex items-center gap-1 font-mono text-[11px] bg-secondary/80 text-foreground px-2 py-0.5 rounded border border-border/50">
                      <GitBranch className="h-3 w-3 text-muted-foreground" />
                      <span>{run.branch || "main"}</span>
                    </div>

                    {run.commitSha && (
                      <span class="font-mono text-[11px] text-muted-foreground">
                        {run.commitSha.slice(0, 7)}
                      </span>
                    )}

                    <span>·</span>

                    <span>
                      triggered {timeAgo(run.createdAt)} by <span class="text-foreground font-medium">@{run.triggeredBy?.username || "workflow"}</span>
                    </span>

                    <span>·</span>

                    <span class="flex items-center gap-1">
                      <Clock className="h-3 w-3 text-muted-foreground" />
                      {formatDuration(run.createdAt, run.completedAt)}
                    </span>
                  </div>
                </div>

                <!-- Author Avatar -->
                <div class="hidden sm:block flex-shrink-0">
                  {run.triggeredBy?.avatarUrl ? (
                    <img
                      src={run.triggeredBy.avatarUrl}
                      alt={run.triggeredBy.username}
                      class="h-7 w-7 rounded-full border border-border/80 object-cover"
                    />
                  ) : (
                    <div class="h-7 w-7 rounded-full bg-secondary border border-border/80 flex items-center justify-center text-xs font-medium text-foreground">
                      {run.triggeredBy?.username?.[0]?.toUpperCase() || <Bot className="h-3.5 w-3.5 text-muted-foreground" />}
                    </div>
                  )}
                </div>
              </a>
            );
          })}
        </div>
      ) : (
        <div class="text-center py-16 px-4">
          <div class="w-12 h-12 rounded-full bg-secondary/80 border border-border flex items-center justify-center mx-auto mb-3 text-muted-foreground">
            <Play className="h-6 w-6" />
          </div>
          <h3 class="text-base font-semibold text-foreground mb-1">No workflow runs found</h3>
          <p class="text-sm text-muted-foreground max-w-sm mx-auto">
            {filter === "success"
              ? "No successful workflow runs found."
              : filter === "failure"
                ? "No failed workflow runs. Everything is green! 🎉"
                : filter === "running"
                  ? "No workflows are currently executing."
                  : "No workflows have run yet."}
          </p>
        </div>
      )}
    </div>
  </div>
</BaseLayout>