/**
 * OperatorSignature — a small, persistent "built by a human, shipping in public"
 * signal. Strategically the *opposite* of hiding that you're a solo operator:
 * it leans into the trend of buyers wanting to know who built their tools.
 *
 * Variants:
 *   - 'inline'  : compact pill, fits inside hero or footer rows
 *   - 'card'    : full card with last-shipped activity
 *   - 'footer'  : low-key signature line for the bottom of marketing pages
 *
 * Usage:
 *   <OperatorSignature variant="inline" />
 *   <OperatorSignature
 *     variant="card"
 *     lastShipped={{ label: 'GEO Recommendation Rule', daysAgo: 3 }}
 *   />
 *
 * `lastShipped` is intentionally a prop (not a remote fetch) so this can be
 * SSR'd and updated by editing one place when you ship.
 */
import { Github, Sparkles } from 'lucide-react';

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

import { cn } from '@/lib/utils';

interface ShippedItem {
  label: string;
  /**
   * ISO 8601 date string (e.g. "2026-04-24"). Preferred — daysAgo is computed
   * relative to the current date so the label stays accurate over time.
   */
  publishedAt?: string;
  /** Pre-computed days-ago (escape hatch for snapshots). Use sparingly. */
  daysAgo?: number;
  href?: string;
}

interface OperatorSignatureProps {
  variant?: 'inline' | 'card' | 'footer';
  /** Operator name shown in the signature. */
  name?: string;
  /** Optional link to /about, /changelog, etc. */
  href?: string;
  /** Most recently shipped feature — visible on the 'card' variant. */
  lastShipped?: ShippedItem;
  className?: string;
}

function daysSince(iso: string): number {
  const then = new Date(iso).getTime();
  if (Number.isNaN(then)) return 0;
  const ms = Date.now() - then;
  return Math.max(0, Math.floor(ms / (1000 * 60 * 60 * 24)));
}

function shippedLabel(item: ShippedItem): string {
  const daysAgo =
    typeof item.daysAgo === 'number'
      ? item.daysAgo
      : item.publishedAt
        ? daysSince(item.publishedAt)
        : 0;
  if (daysAgo <= 0) return 'shipped today';
  if (daysAgo === 1) return 'shipped yesterday';
  if (daysAgo < 7) return `shipped ${daysAgo} days ago`;
  if (daysAgo < 14) return 'shipped last week';
  if (daysAgo < 30) return `shipped ${Math.floor(daysAgo / 7)} weeks ago`;
  return 'shipped this month';
}

export function OperatorSignature({
  variant = 'inline',
  name = 'the operator',
  href,
  lastShipped,
  className,
}: OperatorSignatureProps) {
  if (variant === 'footer') {
    return (
      <p
        // Solid `text-muted-foreground` instead of `/80` — drops to ~5:1 in
        // light, ~6.3:1 in dark. The /80 modifier was tight (~5.0:1 light)
        // and inconsistent with the rest of the marketing surface where
        // `text-muted-foreground` is solid for body-sized copy. (F-A11Y-16)
        className={cn(
          'flex items-center justify-center gap-2 text-xs text-muted-foreground',
          className,
        )}
      >
        <span className="live-dot" aria-hidden="true" />
        <span>
          Built by {name} — shipping in public.{' '}
          {href && (
            <Link href={href} className="underline underline-offset-4 hover:text-foreground">
              See the changelog
            </Link>
          )}
        </span>
      </p>
    );
  }

  if (variant === 'card') {
    const inner = (
      <div className="flex items-start gap-3">
        <div className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
          <Sparkles className="size-4" aria-hidden="true" />
        </div>
        <div className="min-w-0">
          <div className="flex items-center gap-2 text-xs uppercase tracking-[0.18em] text-muted-foreground">
            <span className="live-dot" aria-hidden="true" />
            Shipping in public
          </div>
          {lastShipped ? (
            <p className="mt-1.5 text-sm text-foreground">
              <span className="font-data text-xs text-muted-foreground">
                {shippedLabel(lastShipped)}
              </span>
              <span aria-hidden="true" className="mx-2 text-muted-foreground/70">·</span>
              <span className="font-medium">{lastShipped.label}</span>
            </p>
          ) : (
            <p className="mt-1.5 text-sm text-foreground">
              New features ship every week — built by a small team, in public.
            </p>
          )}
          <p className="mt-2 text-xs text-muted-foreground">
            Built by {name}.{' '}
            {href && (
              <Link href={href} className="underline underline-offset-4 hover:text-foreground">
                See what's next →
              </Link>
            )}
          </p>
        </div>
      </div>
    );

    return (
      <div
        className={cn(
          'rounded-xl border border-border bg-card/60 p-4 backdrop-blur-sm shadow-sm',
          className,
        )}
      >
        {inner}
      </div>
    );
  }

  // inline pill
  const pill = (
    <span
      className={cn(
        'inline-flex items-center gap-2 rounded-full border border-border bg-background/60 px-3 py-1 text-xs text-muted-foreground backdrop-blur-sm',
        className,
      )}
    >
      <span className="live-dot" aria-hidden="true" />
      <span>
        Built by <span className="font-medium text-foreground">{name}</span> · shipping in public
      </span>
      <Github className="size-3 opacity-60" aria-hidden="true" />
    </span>
  );

  return href ? (
    <Link href={href} className="inline-flex transition-opacity hover:opacity-80">
      {pill}
    </Link>
  ) : (
    pill
  );
}