import { TrendingDown, TrendingUp } from 'lucide-react';

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

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

/**
 * COMP-007 — PositionDeltaStrip
 *
 * A compact read-only strip showing day-over-day position deltas for the
 * user's top GSC queries on the main dashboard. Drives the daily-return
 * habit loop: "something moved — click to see what."
 *
 * Data contract: server passes an array of recent query movements sourced
 * from GscQueryMetric comparisons. A positive `delta` means position got
 * worse (higher number = lower in results); a negative `delta` is an
 * improvement (lower number = closer to rank 1).
 *
 * When `queries` is empty the strip renders nothing so the dashboard layout
 * is not disrupted before data is available.
 *
 * Pack 2.1 built this component; Pack 3.1 mounts it in Dashboard.tsx.
 */

export interface PositionDeltaQuery {
  query: string;
  position: number;
  delta: number; // negative = improved (moved up); positive = declined
}

interface Props {
  queries: PositionDeltaQuery[];
  /** Route to the full Tracked Queries / Opportunity Map page. */
  href: string;
}

function DeltaBadge({ delta }: { delta: number }) {
  const improved = delta < 0;
  const neutral = delta === 0;

  if (neutral) {
    return (
      <span className="text-[10px] tabular-nums text-muted-foreground">—</span>
    );
  }

  return (
    <span
      className={cn(
        'inline-flex items-center gap-0.5 text-[10px] font-semibold tabular-nums',
        improved ? 'text-success-strong' : 'text-destructive',
      )}
    >
      {improved ? (
        <TrendingUp className="h-2.5 w-2.5" aria-hidden="true" />
      ) : (
        <TrendingDown className="h-2.5 w-2.5" aria-hidden="true" />
      )}
      {improved ? '' : '+'}
      {Math.abs(delta).toFixed(1)}
    </span>
  );
}

export function PositionDeltaStrip({ queries, href }: Props) {
  if (queries.length === 0) return null;

  return (
    <section aria-label="Position movements" className="mt-4">
      <div className="flex items-center justify-between mb-2">
        <p className="eyebrow text-muted-foreground">Position movements</p>
        <Link
          href={href}
          className="eyebrow text-primary hover:underline"
        >
          View all →
        </Link>
      </div>
      <div className="divide-y divide-border rounded-lg border bg-card">
        {queries.map((q) => (
          <div
            key={q.query}
            className="flex items-center justify-between gap-4 px-3 py-2"
          >
            <p
              className="truncate text-sm text-foreground min-w-0"
              title={q.query}
            >
              {q.query}
            </p>
            <div className="flex shrink-0 items-center gap-2">
              <span className="text-xs tabular-nums text-muted-foreground">
                #{q.position.toFixed(1)}
              </span>
              <DeltaBadge delta={q.delta} />
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}