/**
 * ActivityStrip — "Activity" section of the Dashboard.
 *
 * Extracted from Dashboard.tsx (DEBT-005) — behavior-preserving refactor only.
 * Heading was previously "Activity · This Week" but only ONE of the
 * four numbers (analyses) is week-scoped. Renamed to "Activity" with
 * explicit per-cell time-scope qualifiers so users aren't misled.
 */
import { BarChart3, CheckCircle2, Sparkles, Target } from 'lucide-react';

import { Eyebrow } from '@/Components/ui/eyebrow';

export interface UserActivity {
  analyses_this_week: number;
  recommendations_total: number;
  recommendations_applied: number;
  recommendations_pending: number;
}

export interface ActivityStripProps {
  activity: UserActivity;
}

export function ActivityStrip({ activity }: ActivityStripProps) {
  return (
    <section aria-labelledby="activity-heading" className="mb-12">
      <h2 id="activity-heading" className="editorial-rule left mb-4">
        Activity
      </h2>
      <div className="grid grid-cols-2 gap-px overflow-hidden rounded-2xl border bg-border md:grid-cols-4">
        <div className="bg-card px-5 py-4">
          <div className="flex items-center gap-1.5 mb-2">
            <BarChart3 className="size-3 text-muted-foreground/70" aria-hidden="true" />
            <Eyebrow className="text-muted-foreground">
              Analyses (7d)
            </Eyebrow>
          </div>
          <p className="font-data text-2xl font-semibold tabular-nums">
            {activity.analyses_this_week}
          </p>
        </div>
        <div className="bg-card px-5 py-4">
          <div className="flex items-center gap-1.5 mb-2">
            <Sparkles className="size-3 text-warning-strong/80" aria-hidden="true" />
            <Eyebrow className="text-muted-foreground">
              Pending (all)
            </Eyebrow>
          </div>
          <p className="font-data text-2xl font-semibold tabular-nums">
            {activity.recommendations_pending}
          </p>
        </div>
        <div className="bg-card px-5 py-4">
          <div className="flex items-center gap-1.5 mb-2">
            <CheckCircle2 className="size-3 text-success-strong/80" aria-hidden="true" />
            <Eyebrow className="text-muted-foreground">
              Applied (all)
            </Eyebrow>
          </div>
          <p className="font-data text-2xl font-semibold tabular-nums">
            {activity.recommendations_applied}
          </p>
        </div>
        <div className="bg-card px-5 py-4">
          <div className="flex items-center gap-1.5 mb-2">
            <Target className="size-3 text-muted-foreground/70" aria-hidden="true" />
            <Eyebrow className="text-muted-foreground">
              Completion (all)
            </Eyebrow>
          </div>
          <p className="font-data text-2xl font-semibold tabular-nums">
            {activity.recommendations_total > 0
              ? `${Math.round((activity.recommendations_applied / activity.recommendations_total) * 100)}%`
              : '—'}
          </p>
        </div>
      </div>
    </section>
  );
}