"use client";

import { useState } from "react";
import Link from "next/link";
import { StreamActionLog } from "yt-dlp-transcript-common/components/StreamActionLog";
import { formatBytes } from "yt-dlp-transcript-common/lib/format";
import { Badge } from "yt-dlp-transcript-common/components/ui/badge";
import { cancelJobAction } from "../../jobs/actions";
import {
  cleanAudioAction,
  cleanExtraAudioFormatsAction,
  removeWrongFormatAudioAction,
  clearFailedTranscriptionsAction,
} from "../../channels/[slug]/whisperActions";
import { ChannelCleanupToggle } from "./ChannelCleanupToggle";

export type ChannelCleanupCardProps = {
  slug: string;
  name: string;
  included: boolean;
  transcribedBytes: number;
  extraFormatsBytes: number;
  foreignBytes: number;
  hasTargetFormat: boolean;
  failedTranscriptions: number;
};

export function ChannelCleanupCard({
  slug,
  name,
  included,
  transcribedBytes,
  extraFormatsBytes,
  foreignBytes,
  hasTargetFormat,
  failedTranscriptions,
}: ChannelCleanupCardProps) {
  const queueKey = `channel:${slug}`;
  const [armed, setArmed] = useState(false);
  const nothingToReclaim =
    transcribedBytes <= 0 && extraFormatsBytes <= 0 && foreignBytes <= 0;
  const noHousekeeping = failedTranscriptions === 0;

  return (
    <section
      aria-label={`cleanup ${slug}`}
      data-included={included ? "true" : "false"}
      className={
        "flex flex-col gap-3 rounded-lg border border-border bg-card p-4 transition-opacity " +
        (included ? "" : "opacity-60")
      }
    >
      <header className="flex flex-wrap items-center gap-x-3 gap-y-2">
        <Link
          href={`/channels/${slug}`}
          className="font-display text-base font-semibold text-foreground hover:text-brand"
        >
          {name}
        </Link>
        {!included && (
          <Badge variant="warning" aria-label={`${slug} excluded from total`}>
            Excluded from total
          </Badge>
        )}
        <span
          className="ml-auto font-mono text-sm tabular-nums text-foreground"
          aria-label={`${slug} reclaimable`}
        >
          {transcribedBytes > 0 ? `~${formatBytes(transcribedBytes)}` : "—"}
        </span>
        <ChannelCleanupToggle slug={slug} excluded={!included} />
      </header>

      {nothingToReclaim && noHousekeeping ? (
        <p className="text-sm text-muted-foreground">
          Nothing to reclaim in the last report.
        </p>
      ) : (
        <div className="flex flex-col gap-3">
          {transcribedBytes > 0 && (
            <SweepRow
              estimate={transcribedBytes}
              caption="Audio in transcribed video dirs"
            >
              <StreamActionLog
                trigger={() => cleanAudioAction(slug, queueKey)}
                cancelAction={cancelJobAction}
                buttonLabel="Clean audio"
                runningLabel="Cleaning…"
                label={`Clean audio ${slug}`}
              />
            </SweepRow>
          )}

          {hasTargetFormat && extraFormatsBytes > 0 && (
            <SweepRow
              estimate={extraFormatsBytes}
              caption="Non-target audio in dirs that keep the target format"
            >
              <StreamActionLog
                trigger={() => cleanExtraAudioFormatsAction(slug, queueKey)}
                cancelAction={cancelJobAction}
                buttonLabel="Clean extra formats"
                runningLabel="Cleaning…"
                label={`Clean extra audio formats ${slug}`}
              />
            </SweepRow>
          )}

          {hasTargetFormat && foreignBytes > 0 && (
            <SweepRow
              estimate={foreignBytes}
              caption="All wrong-format audio, including failed-extract orphans"
            >
              <label className="flex items-center gap-1.5 text-xs text-muted-foreground">
                <input
                  type="checkbox"
                  checked={armed}
                  onChange={(e) => setArmed(e.target.checked)}
                  aria-label={`confirm remove wrong-format audio ${slug}`}
                />
                Confirm
              </label>
              <StreamActionLog
                trigger={() => removeWrongFormatAudioAction(slug, queueKey)}
                cancelAction={cancelJobAction}
                buttonLabel="Remove wrong-format"
                runningLabel="Removing…"
                label={`Remove wrong-format audio ${slug}`}
                disabled={!armed}
              />
            </SweepRow>
          )}

          {!noHousekeeping && (
            <div className="flex flex-wrap items-center gap-2 border-t border-border pt-3">
              <span className="font-mono text-[11px] uppercase tracking-[0.14em] text-muted-foreground">
                Housekeeping
              </span>
              {failedTranscriptions > 0 && (
                <StreamActionLog
                  trigger={() => clearFailedTranscriptionsAction(slug, queueKey)}
                  cancelAction={cancelJobAction}
                  buttonLabel={`Clear failed transcriptions (${failedTranscriptions})`}
                  runningLabel="Clearing…"
                  label={`Clear failed transcriptions ${slug}`}
                />
              )}
            </div>
          )}
        </div>
      )}
    </section>
  );
}

function SweepRow({
  estimate,
  caption,
  children,
}: {
  estimate: number;
  caption: string;
  children: React.ReactNode;
}) {
  return (
    <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5">
      <div className="min-w-0 flex-1">
        <p className="text-sm text-foreground">{caption}</p>
        <p className="font-mono text-xs tabular-nums text-muted-foreground">
          ~{formatBytes(estimate)}
        </p>
      </div>
      {children}
    </div>
  );
}