import { BarChart2, Loader2, Search } from 'lucide-react';

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

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

interface ActivationPromptCardProps {
  variant: 'connect_gsc' | 'gsc_syncing' | 'run_analysis';
  siteId: number;
  siteName: string;
}

const VARIANT_CONFIG = {
  connect_gsc: {
    icon: Search,
    title: 'Connect Google Search Console',
    description:
      'Connect your GSC account to unlock traffic insights, discover pages losing clicks, and get AI-powered recommendations tailored to your site.',
    cta: 'Connect Google Search Console',
    disabled: false,
  },
  gsc_syncing: {
    icon: Loader2,
    title: 'Syncing your data…',
    description:
      'Your Google Search Console data is being imported. This usually takes 2–5 minutes. We\'ll notify you when it\'s ready.',
    cta: 'Syncing in progress…',
    disabled: true,
  },
  run_analysis: {
    icon: BarChart2,
    title: 'Run your first analysis',
    description:
      'Your GSC data is ready. Run an analysis to compare two time periods and discover which pages are gaining or losing traffic.',
    cta: 'Run your first analysis',
    disabled: false,
  },
} as const;

export default function ActivationPromptCard({
  variant,
  siteId,
  siteName,
}: ActivationPromptCardProps) {
  const config = VARIANT_CONFIG[variant];
  const Icon = config.icon;

  const ctaHref =
    variant === 'connect_gsc' || variant === 'gsc_syncing'
      ? route('onboarding.index', siteId)
      : route('analyze.index', siteId);

  return (
    <Card className="border-dashed">
      <CardHeader className="pb-3">
        <div className="flex items-start gap-3">
          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10">
            <Icon
              className={
                variant === 'gsc_syncing'
                  ? 'h-5 w-5 text-primary animate-spin'
                  : 'h-5 w-5 text-primary'
              }
            />
          </div>
          <div>
            <CardTitle className="text-base">{config.title}</CardTitle>
            <CardDescription className="mt-0.5 text-xs text-muted-foreground">
              {siteName}
            </CardDescription>
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-3">
        <p className="text-sm text-muted-foreground">{config.description}</p>
        {config.disabled ? (
          <Button variant="outline" disabled className="w-full sm:w-auto">
            {config.cta}
          </Button>
        ) : (
          <Button asChild className="w-full sm:w-auto">
            <Link href={ctaHref}>{config.cta}</Link>
          </Button>
        )}
      </CardContent>
    </Card>
  );
}