import { ArrowRight, Lock, type LucideIcon } from 'lucide-react';

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

import { Button } from '@/Components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { cn } from '@/lib/utils';

/**
 * NAV-001 Cut 7 — shared Day-0 / Empty-state hero for hub landing pages.
 *
 * Used when a hub's primary work is gated by an unmet prerequisite
 * (e.g. Opportunities + Performance need GSC). Renders:
 *
 * 1. A hero card with the headline outcome promise + a single primary CTA.
 * 2. A locked-feature grid that previews what the hub will surface once
 *    the prerequisite is met. Cards are styled as visibly inert (Lock
 *    icon, reduced-opacity title, no clickable button) so the user reads
 *    them as "promised" not as "broken click target."
 *
 * Reusable across OpportunitiesHub, PerformanceHub, ContentHub (when WP
 * isn't connected), and OverviewHub.
 */

export interface HubDay0Card {
  title: string;
  description: string;
  Icon: LucideIcon;
}

interface HubDay0EmptyProps {
  /** Hero headline — outcome-led, brand voice. */
  headline: string;
  /** One-line outcome promise rendered under the headline. */
  description: string;
  /** Primary CTA href (e.g. onboarding/connections route). */
  ctaHref: string;
  /** Primary CTA label (e.g. "Connect Google Search Console"). */
  ctaLabel: string;
  /** Optional secondary line under the CTA (e.g. "Takes 2 minutes"). */
  ctaSubLabel?: string;
  /** Cards previewing what unlocks once the prerequisite is met. */
  preview: HubDay0Card[];
  /**
   * Optional override for the locked-card heading. Defaults to "Once
   * you're connected, you'll have:".
   */
  previewHeading?: string;
}

export function HubDay0Empty({
  headline,
  description,
  ctaHref,
  ctaLabel,
  ctaSubLabel,
  preview,
  previewHeading = "Once you're connected, you'll have:",
}: HubDay0EmptyProps) {
  return (
    <div className="space-y-6">
      <Card className="border-primary/30 bg-primary/5">
        <CardHeader>
          <CardTitle className="text-xl">{headline}</CardTitle>
          <CardDescription className="text-base text-foreground/80">
            {description}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Button asChild size="lg" className="gap-2">
            <Link href={ctaHref}>
              {ctaLabel}
              <ArrowRight className="size-4" />
            </Link>
          </Button>
          {ctaSubLabel && (
            <p className="mt-2 text-xs text-muted-foreground">{ctaSubLabel}</p>
          )}
        </CardContent>
      </Card>

      <div>
        <h2 className="text-sm font-medium text-muted-foreground mb-3">{previewHeading}</h2>
        <div className="grid gap-4 md:grid-cols-2">
          {preview.map((card) => {
            const Icon = card.Icon;
            return (
              <Card
                key={card.title}
                aria-disabled="true"
                className={cn(
                  'flex flex-col opacity-70 cursor-not-allowed',
                  // border-muted/60 ensures the dashed edge keeps WCAG AA
                  // separation from the page background in dark mode where
                  // bare `border-dashed` washed into the muted backdrop.
                  'border-dashed border-muted/60',
                )}
              >
                <CardHeader>
                  <div className="flex items-center gap-3">
                    <div className="relative flex size-10 items-center justify-center rounded-lg bg-muted text-muted-foreground">
                      <Icon className="size-5" aria-hidden="true" />
                      <Lock
                        className="absolute -bottom-1 -right-1 size-3.5 rounded-full bg-background p-0.5 text-muted-foreground"
                        aria-hidden="true"
                      />
                    </div>
                    <CardTitle className="text-base text-muted-foreground">{card.title}</CardTitle>
                  </div>
                  <CardDescription className="mt-3">{card.description}</CardDescription>
                </CardHeader>
              </Card>
            );
          })}
        </div>
      </div>
    </div>
  );
}