"use client";

import Link from "next/link";
import type { WidgetActionablePayload } from "yt-dlp-transcript-common/views/widgetActionable";
import { InlineActionButton } from "../actions/InlineActionButton";

const LIMIT = 10;

// Live "needs work" list: the channels with videos to download or transcribe,
// echoing the ↓ (download) / ✎ (transcribe) verbs used across the app, each row
// carrying the same per-channel Download/Transcribe actions as the operation
// pages.
export function NeedsWorkPanel({
  data,
}: {
  data: WidgetActionablePayload | null;
}) {
  const channels = data?.channels ?? [];
  const shown = channels.slice(0, LIMIT);
  const overflow = channels.length - shown.length;

  return (
    <section
      aria-label="Needs work"
      className="flex flex-col gap-3 rounded-md border border-border bg-card px-4 py-3"
    >
      <div className="flex items-baseline justify-between gap-2">
        <h2 className="font-mono text-xs uppercase tracking-[0.14em] text-muted-foreground">
          Needs work
        </h2>
        <Link
          href="/operations"
          className="text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground"
        >
          {channels.length} {channels.length === 1 ? "channel" : "channels"}
        </Link>
      </div>
      {channels.length === 0 ? (
        <p
          aria-label="needs work empty"
          className="text-sm text-muted-foreground"
        >
          Everything&apos;s handled.
        </p>
      ) : (
        <ul className="flex flex-col gap-2">
          {shown.map((c) => (
            <li
              key={c.slug}
              aria-label={`needs work ${c.slug}`}
              className="flex flex-col gap-1.5 rounded border border-border px-2 py-1.5"
            >
              <div className="flex items-center justify-between gap-2">
                <Link
                  href={`/channels/${c.slug}`}
                  className="font-mono text-xs truncate underline underline-offset-2 hover:text-brand"
                  title={c.slug}
                >
                  {c.slug}
                </Link>
                <span className="flex shrink-0 items-center gap-1">
                  {c.undownloaded > 0 && (
                    <span className="rounded px-1.5 py-0.5 text-[10px] tabular-nums bg-warning-soft text-warning">
                      ↓ {c.undownloaded}
                    </span>
                  )}
                  {c.untranscribed > 0 && (
                    <span className="rounded px-1.5 py-0.5 text-[10px] tabular-nums bg-info-soft text-info">
                      ✎ {c.untranscribed}
                    </span>
                  )}
                  {/* Muted, not coloured: during the backfill this is nearly
                      every video in the channel, so it is context for the row
                      rather than a call to action like the two above. */}
                  {c.digestReachable > 0 && (
                    <span
                      title={`${c.digestReachable} video(s) the digest lane can work on now`}
                      className="rounded px-1.5 py-0.5 text-[10px] tabular-nums bg-muted text-muted-foreground"
                    >
                      ◆ {c.digestReachable}
                    </span>
                  )}
                </span>
              </div>
              <div className="flex flex-wrap items-center gap-1.5">
                {c.undownloaded > 0 && (
                  <InlineActionButton
                    variant={{ kind: "downloadMissing", slug: c.slug }}
                  />
                )}
                {c.untranscribed > 0 && (
                  <InlineActionButton
                    variant={{ kind: "transcribeMissing", slug: c.slug }}
                  />
                )}
              </div>
            </li>
          ))}
          {overflow > 0 && (
            <li className="text-xs text-muted-foreground">
              <Link
                href="/operations"
                className="underline underline-offset-2 hover:text-foreground"
              >
                +{overflow} more {overflow === 1 ? "channel" : "channels"}
              </Link>
            </li>
          )}
        </ul>
      )}
    </section>
  );
}