import { ArrowRight, CheckCircle2 } from 'lucide-react';

import { Link } from '@inertiajs/react';

/**
 * ReviewQueueHero — R8UX-012 / PMR-004
 *
 * Resume-first hero: surfaces when the user has drafts awaiting review
 * (pending_review_count > 0). Shown ABOVE RecoveryRunHero in the priority
 * stack so the persona's most valuable next action ("finish what I paid for")
 * is always the primary CTA.
 *
 * Visibility rule (enforced by parent Dashboard.tsx):
 *   - pending_review_count > 0
 *
 * Design mirrors RecoveryRunHero (full-card stretched Link + content layer z-10)
 * with success tinting (green) to signal "progress, not problem".
 */

interface ReviewQueueHeroProps {
  /** Opaque public_id (ULID string) for the site — passed to route(). */
  siteId: string;
  /** Count of AI drafts awaiting the review step (untriaged only). */
  pendingReviewCount: number;
}

export function ReviewQueueHero({ siteId, pendingReviewCount }: ReviewQueueHeroProps) {
  const href = route('review.index', siteId);

  return (
    <div className="relative mb-6 flex items-center gap-4 rounded-2xl border border-success/30 bg-success/5 px-5 py-4 hover:bg-success/10 transition-colors">
      {/* Stretched link — full-card hit target (UX-215). sr-only span provides accessible name. */}
      <Link
        href={href}
        className="absolute inset-0 rounded-2xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
      >
        <span className="sr-only">
          Finish reviewing {pendingReviewCount} draft{pendingReviewCount !== 1 ? 's' : ''}
        </span>
      </Link>

      {/* Icon layer */}
      <span className="relative z-10 shrink-0" aria-hidden="true">
        <CheckCircle2 className="size-5 text-success-strong" />
      </span>

      {/* Content layer */}
      <div className="relative z-10 flex-1 min-w-0">
        <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-success-strong/70 mb-0.5">
          Pending Review
        </p>
        <span className="text-sm font-semibold text-foreground inline-flex items-center gap-1">
          Finish reviewing {pendingReviewCount} draft{pendingReviewCount !== 1 ? 's' : ''} — publish to see results
          <ArrowRight className="size-3.5" aria-hidden="true" />
        </span>
      </div>
    </div>
  );
}