"use client";

import Link from "next/link";
import { Changelog } from "yt-dlp-transcript-common/components/Changelog";

// The quiet right-hand column: a prominent entry into the URL-first onboarding
// flow, and the recent-changes card beneath it (reusing the shared Changelog).
export function QuickAddPanel({
  changelogSource,
}: {
  changelogSource: string | null;
}) {
  return (
    <section
      aria-label="Quick add and changes"
      className="flex flex-col gap-3"
    >
      <Link
        href="/channels/new"
        aria-label="add a channel"
        className="block rounded-md border border-brand/40 bg-brand/5 px-4 py-3 hover:border-brand/60 transition-colors"
      >
        <h2 className="font-mono text-xs uppercase tracking-[0.14em] text-brand mb-1">
          Add a channel
        </h2>
        <p className="text-sm text-foreground">
          Paste a channel or playlist URL — platform, handling and slug fill in
          automatically, and it can fetch the playlist on create.
        </p>
      </Link>

      {changelogSource && (
        // A plain <div>, not a Link: the Changelog renders its own anchors and
        // CopyLink buttons, and wrapping interactive content in an outer <a> is
        // invalid nesting that the browser reparents — an SSR hydration
        // mismatch now that this panel is a client component. The "View all"
        // affordance is a sibling link in the header instead.
        <div className="rounded-md border border-border bg-card px-4 py-3">
          <div className="flex items-baseline justify-between gap-2 mb-1">
            <h2 className="font-mono text-xs uppercase tracking-[0.14em] text-muted-foreground">
              Recent changes
            </h2>
            <Link
              href="/changelog"
              aria-label="View full changelog"
              className="text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground"
            >
              View all
            </Link>
          </div>
          <div className="relative max-h-48 overflow-hidden">
            <Changelog source={changelogSource} limit={1} />
            <div
              aria-hidden="true"
              className="pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-card to-transparent"
            />
          </div>
        </div>
      )}
    </section>
  );
}