"use client";

import {
  ARCHIVE_FORMATS,
  type ArchiveBuildOptions,
  type ArchiveFormat,
} from "yt-dlp-transcript-common/lib/archiveOptions";

type Props = {
  value: ArchiveBuildOptions;
  onChange: (next: ArchiveBuildOptions) => void;
  // Used to disambiguate aria-labels when multiple instances are rendered
  // on the same page (per-channel vs combined).
  actionLabel: string;
};

const inputClass =
  "font-mono px-2 py-1 rounded border border-border bg-card text-foreground";

export function ArchiveOptionsControl({ value, onChange, actionLabel }: Props) {
  return (
    <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
      <label className="flex items-center gap-1">
        <span>format</span>
        <select
          aria-label={`archive format for ${actionLabel}`}
          value={value.format}
          onChange={(e) =>
            onChange({ ...value, format: e.target.value as ArchiveFormat })
          }
          className={inputClass}
        >
          {ARCHIVE_FORMATS.map((f) => (
            <option key={f} value={f}>
              {f}
            </option>
          ))}
        </select>
      </label>

      <label className="flex items-center gap-1">
        <span>level</span>
        <select
          aria-label={`compression level for ${actionLabel}`}
          value={value.compressionLevel}
          onChange={(e) =>
            onChange({
              ...value,
              compressionLevel: Number(e.target.value),
            })
          }
          className={inputClass}
        >
          {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((n) => (
            <option key={n} value={n}>
              {n}
            </option>
          ))}
        </select>
      </label>

      <label className="flex items-center gap-1">
        <input
          type="checkbox"
          aria-label={`include per-video metadata for ${actionLabel}`}
          checked={value.includeMetadata}
          onChange={(e) =>
            onChange({ ...value, includeMetadata: e.target.checked })
          }
        />
        <span>metadata</span>
      </label>

      <label className="flex items-center gap-1">
        <input
          type="checkbox"
          aria-label={`pretty-print json for ${actionLabel}`}
          checked={value.prettyPrint}
          onChange={(e) =>
            onChange({ ...value, prettyPrint: e.target.checked })
          }
        />
        <span>pretty</span>
      </label>
    </div>
  );
}