"use client";

import { useMemo, useState } from "react";

import { useMutation, useQuery } from "convex/react";
import { FunctionReturnType } from "convex/server";
import { Activity, Files, FileSearch, RotateCcw, SquarePen } from "lucide-react";
import Link from "next/link";

import { api } from "@/convex/_generated/api";
import type { Id } from "@/convex/_generated/dataModel";
import { Skeleton } from "@/components/ui/skeleton";
import { Badge } from "@/components/ui/badge";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

type AuditDashboardRowsResult = FunctionReturnType<typeof api.audits.listDashboardRows>;
type AuditRow = Extract<
  NonNullable<AuditDashboardRowsResult>[number],
  { kind: "audit" }
>;
type AuditDashboardRow = NonNullable<AuditDashboardRowsResult>[number];
type AuditStatusFilter = "all" | "audit" | "generation" | "failed";

const statusText: Record<string, string> = {
  draft: "Entwurf",
  approved: "Freigegeben",
  published: "Veröffentlicht",
  deactivated: "Deaktiviert",
};

const fallbackStatus = "Unbekannt";

const generationStageText: Record<string, string> = {
  audit_generation: "Audit-Generierung",
  classification: "Klassifikation",
  multimodalAudit: "Multimodale Analyse",
  germanCopy: "Deutsche Texte",
  qualityReview: "Qualitätsprüfung",
};

function formatPageCount(pageCount: number) {
  return `${pageCount} Seite${pageCount === 1 ? "" : "n"}`;
}

function getStatusLabel(status: AuditRow["status"]) {
  return statusText[status] ?? fallbackStatus;
}

function getGenerationStatusLabel(
  row: Extract<AuditDashboardRow, { kind: "generation" }>,
) {
  if (row.status === "pending") {
    return "Wartet auf Start";
  }

  if (row.status === "failed") {
    return "Fehlgeschlagen";
  }

  if (row.status === "canceled") {
    return "Abgebrochen";
  }

  if (row.status === "succeeded") {
    return "Wartet auf finales Audit";
  }

  return "Generierung läuft";
}

function getStageLabel(stage: string) {
  return generationStageText[stage] ?? stage;
}

function AuditsBoardLoading() {
  return (
    <section className="space-y-4">
      <header className="agency-panel space-y-2 p-4">
        <p className="agency-kicker">Evidence Dossier</p>
        <h1 className="font-heading text-2xl font-semibold tracking-normal">Audits</h1>
        <p className="text-sm text-muted-foreground">Audits werden geladen...</p>
      </header>
      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
        {Array.from({ length: 4 }, (_, index) => (
          <Skeleton className="h-40 rounded-lg" key={index} />
        ))}
      </div>
    </section>
  );
}

export function AuditsBoard() {
  const dashboardRows = useQuery(api.audits.listDashboardRows, { limit: 100 });
  const retryAuditRun = useMutation(api.audits.retryAuditRun);
  const [activeFilter, setActiveFilter] = useState<AuditStatusFilter>("all");
  const [retryingRunId, setRetryingRunId] = useState<string | null>(null);
  const rows = useMemo(() => {
    if (!dashboardRows) {
      return [];
    }

    return [...dashboardRows].sort((a, b) => b.updatedAt - a.updatedAt);
  }, [dashboardRows]);
  const statusCounts = useMemo(() => {
    return {
      all: rows.length,
      audit: rows.filter((row) => row.kind === "audit").length,
      generation: rows.filter((row) => row.kind === "generation").length,
      failed: rows.filter(
        (row) => row.kind === "generation" && row.status === "failed",
      ).length,
    };
  }, [rows]);
  const visibleRows = useMemo(() => {
    if (activeFilter === "audit") {
      return rows.filter((row) => row.kind === "audit");
    }

    if (activeFilter === "generation") {
      return rows.filter((row) => row.kind === "generation");
    }

    if (activeFilter === "failed") {
      return rows.filter(
        (row) => row.kind === "generation" && row.status === "failed",
      );
    }

    return rows;
  }, [activeFilter, rows]);
  const auditStatusFilters: Array<{
    label: string;
    value: AuditStatusFilter;
    count: number;
  }> = [
    { label: "Alle", value: "all", count: statusCounts.all },
    { label: "Audits", value: "audit", count: statusCounts.audit },
    { label: "Pipeline", value: "generation", count: statusCounts.generation },
    { label: "Fehlgeschlagen", value: "failed", count: statusCounts.failed },
  ];
  const handleRetryAudit = async (runId: Id<"agentRuns">) => {
    setRetryingRunId(runId);
    try {
      await retryAuditRun({ runId });
    } finally {
      setRetryingRunId(null);
    }
  };

  if (dashboardRows === undefined) {
    return <AuditsBoardLoading />;
  }

  if (rows.length === 0) {
    return (
      <section className="space-y-4">
        <header className="agency-panel space-y-2 p-4">
          <p className="agency-kicker">Evidence Dossier</p>
          <h1 className="font-heading text-2xl font-semibold tracking-normal">Audits</h1>
        </header>

        <Card className="agency-panel">
          <CardHeader>
            <h2 className="text-sm font-medium">Noch keine Audits</h2>
            <CardDescription>
              Sobald neue Audits oder laufende Audit-Generierungen angelegt
              wurden, erscheinen sie hier als kompakte Cards.
            </CardDescription>
          </CardHeader>
        </Card>
      </section>
    );
  }

  return (
    <section className="space-y-4">
      <header className="agency-panel space-y-2 p-4">
        <p className="agency-kicker">Evidence Dossier</p>
        <h1 className="font-heading text-2xl font-semibold tracking-normal">Audits</h1>
        <p className="max-w-3xl text-sm leading-6 text-muted-foreground">
          Laufende Generierungen, veröffentlichbare Audits und Fehlerzustände
          als Prüfmappe statt lose Datensatzliste.
        </p>
      </header>

      <div className="flex flex-wrap gap-2" aria-label="Audit-Filter">
        {auditStatusFilters.map((filter) => (
          <button
            aria-pressed={activeFilter === filter.value}
            className="agency-tab"
            key={filter.value}
            onClick={() => setActiveFilter(filter.value)}
            type="button"
          >
            {filter.label}
            <Badge variant="secondary">{filter.count}</Badge>
          </button>
        ))}
      </div>

      <section
        className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3"
        aria-label="Audit-Cards"
      >
        {visibleRows.map((row: AuditDashboardRow) => {
          const rowTitleId = `audit-row-title-${row.id}`;

          return (
            <Card
              aria-labelledby={rowTitleId}
              className="agency-panel flex min-w-0 flex-col overflow-hidden"
              key={row.id}
            >
              <CardHeader className="gap-3">
                <div className="flex flex-wrap items-start justify-between gap-2">
                  <div className="min-w-0">
                    <CardDescription className="inline-flex items-center gap-2">
                      <FileSearch className="size-3.5" aria-hidden="true" />
                      {row.kind === "audit" ? "Audit Evidence" : "Pipeline Evidence"}
                    </CardDescription>
                    <CardTitle className="mt-1 break-words text-base" id={rowTitleId}>
                      {row.title}
                    </CardTitle>
                  </div>
                  <Badge variant={row.kind === "audit" ? "secondary" : "outline"}>
                    {row.kind === "audit"
                      ? getStatusLabel(row.status)
                      : getGenerationStatusLabel(row)}
                  </Badge>
                </div>
              </CardHeader>

              <CardContent className="flex flex-1 flex-col gap-4">
                <div className="grid gap-3 text-sm">
                  <div className="evidence-surface min-w-0 rounded-md px-3 py-2">
                    <p className="text-xs font-medium text-muted-foreground">Domain</p>
                    <p className="mt-1 break-all">{row.checkedDomain}</p>
                  </div>
                  <div className="min-w-0 rounded-md border border-border/75 bg-background/60 p-3">
                    <p className="text-xs font-medium text-muted-foreground">
                      {row.kind === "audit" ? "Seiten" : "Phase"}
                    </p>
                    <p className="mt-1 inline-flex items-center gap-1 text-muted-foreground">
                      {row.kind === "audit" ? (
                        <>
                          <Files className="size-3.5" aria-hidden="true" />
                          {formatPageCount(row.pageCount)}
                        </>
                      ) : (
                        <>
                          <Activity className="size-3.5" aria-hidden="true" />
                          {getStageLabel(row.latestStage)}
                        </>
                      )}
                    </p>
                  </div>
                  <div className="min-w-0 rounded-md bg-muted/45 p-3">
                    <p className="text-xs font-medium text-muted-foreground">Slug</p>
                    <p className="mt-1 break-words text-muted-foreground">
                      {row.kind === "generation" ? `Run ${row.runId}` : row.title}
                    </p>
                  </div>
                  {row.kind === "generation" && row.errorSummary ? (
                    <p className="break-words rounded-md border border-destructive/30 bg-[var(--danger-soft)] px-3 py-2 text-xs text-destructive">
                      {row.errorSummary}
                    </p>
                  ) : null}
                  {row.kind === "generation" ? (
                    <div className="min-w-0 rounded-md border border-border/75 bg-background/60 p-3">
                      <div className="flex items-center justify-between gap-3 text-xs">
                        <span className="font-medium text-muted-foreground">
                          {row.progress.step}/{row.progress.total} · {row.progress.label}
                        </span>
                        <span className="tabular-nums text-muted-foreground">
                          {row.progress.percent}%
                        </span>
                      </div>
                      <div
                        aria-label={row.progress.label}
                        aria-valuemax={100}
                        aria-valuemin={0}
                        aria-valuenow={row.progress.percent}
                        className="mt-2 h-2 overflow-hidden rounded-full bg-muted"
                        role="progressbar"
                      >
                        <div
                          className="h-full rounded-full bg-primary transition-all"
                          style={{ width: `${row.progress.percent}%` }}
                        />
                      </div>
                      {row.retry.isRetrying ? (
                        <p className="mt-2 text-xs text-muted-foreground">
                          Versuch {row.retry.attempt}/{row.retry.maxAttempts} läuft
                        </p>
                      ) : null}
                      {row.retry.isRetrying && row.retry.lastRetryReason ? (
                        <p className="mt-1 text-xs text-muted-foreground">
                          {row.retry.lastRetryReason}
                        </p>
                      ) : null}
                    </div>
                  ) : null}
                </div>

                <div className="mt-auto flex justify-end">
                  {row.kind === "audit" ? (
                    <Link
                      className="inline-flex min-h-8 items-center gap-1 rounded-md px-2 text-sm font-semibold text-primary hover:bg-muted"
                      href={row.detailHref}
                    >
                      <SquarePen className="size-4" aria-hidden="true" />
                      Öffnen
                    </Link>
                  ) : row.canRetry ? (
                    <button
                      className="inline-flex min-h-8 items-center gap-1 rounded-md px-2 text-sm font-semibold text-primary hover:bg-muted disabled:cursor-not-allowed disabled:opacity-60"
                      disabled={retryingRunId === row.runId}
                      onClick={() => {
                        void handleRetryAudit(row.runId);
                      }}
                      type="button"
                    >
                      <RotateCcw className="size-4" aria-hidden="true" />
                      Erneut starten
                    </button>
                  ) : (
                    <span className="inline-flex min-h-8 items-center text-sm text-muted-foreground">
                      Pipeline läuft
                    </span>
                  )}
                </div>
              </CardContent>
            </Card>
          );
        })}
        {visibleRows.length === 0 ? (
          <Card className="agency-panel sm:col-span-2 xl:col-span-3">
            <CardHeader>
              <CardTitle>Keine Treffer</CardTitle>
              <CardDescription>
                Für diesen Filter gibt es aktuell keine Audit-Einträge.
              </CardDescription>
            </CardHeader>
          </Card>
        ) : null}
      </section>
    </section>
  );
}