import { ArrowRight } from 'lucide-react';

import { Head, Link, usePage } from '@inertiajs/react';

import { MarketingFooter } from '@/Components/marketing/MarketingFooter';
import { MarketingNav } from '@/Components/marketing/MarketingNav';
import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import { Card, CardContent } from '@/Components/ui/card';
import { CTA_LABELS } from '@/config/cta-labels';
import { trackEvent } from '@/lib/analytics';
import { COMPARISON_HUB_CARD_CLICK } from '@/lib/event-catalog';
import { type PageProps } from '@/types';

interface Competitor {
  slug: string;
  name: string;
  category: string;
  starting_price: string;
  description: string;
}

interface CompareProps {
  competitors: Competitor[];
  can_login: boolean;
  can_register: boolean;
}

type CompareComponent = ((props: CompareProps) => JSX.Element) & {
  disableGlobalUi?: boolean;
};

const Compare: CompareComponent = ({ competitors, can_login, can_register }) => {
  const appName = import.meta.env.VITE_APP_NAME || 'RankWiz';
  const { app_url } = usePage<PageProps>().props;

  const metaDescription = `Compare ${appName} against ${competitors.length} popular SEO tools. See how we stack up on WordPress integration, GSC traffic analysis, AI draft generation, and pricing.`;

  const handleCardClick = (slug: string) => {
    trackEvent(COMPARISON_HUB_CARD_CLICK, { competitor: slug });
  };

  return (
    <>
      <Head title={`${appName} Alternatives & Comparisons — How We Stack Up`}>
        <link rel="canonical" href={`${app_url}/compare`} />
        <meta name="description" content={metaDescription} />
        <meta
          property="og:title"
          content={`${appName} Alternatives & Comparisons — How We Stack Up`}
        />
        <meta property="og:description" content={metaDescription} />
        <meta property="og:type" content="website" />
        <meta property="og:url" content={`${app_url}/compare`} />
        <meta property="og:image" content={`${app_url}/og-image.png`} />
        <meta property="og:image:alt" content={`${appName} — SEO Tool Comparisons`} />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="630" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:image" content={`${app_url}/og-image.png`} />
        <meta name="twitter:image:width" content="1200" />
        <meta name="twitter:image:height" content="630" />
        <meta
          name="twitter:title"
          content={`${appName} Alternatives & Comparisons — How We Stack Up`}
        />
        <meta name="twitter:description" content={metaDescription} />
        <script type="application/ld+json">
          {JSON.stringify({
            '@context': 'https://schema.org',
            '@type': 'ItemList',
            name: `${appName} SEO Tool Comparisons`,
            description: metaDescription,
            numberOfItems: competitors.length,
            itemListElement: competitors.map((c, i) => ({
              '@type': 'ListItem',
              position: i + 1,
              name: `${appName} vs ${c.name}`,
              url: `${app_url}/vs/${c.slug}`,
            })),
          })}
        </script>
      </Head>

      <div className="min-h-screen bg-linear-to-b from-background to-muted/30">
        <MarketingNav canLogin={can_login} canRegister={can_register} />

        <main id="main-content">
          {/* Hero Section */}
          <section className="container py-16 text-center">
            <div className="mx-auto max-w-3xl space-y-6">
              <div className="inline-flex items-center gap-2 rounded-full border bg-muted px-4 py-1.5 text-sm text-muted-foreground">
                The Only WordPress SEO Tool That Proves What Worked
              </div>
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
                How {appName} Compares to Other SEO Tools
              </h1>
              <p className="text-lg text-muted-foreground md:text-xl">
                Most SEO tools tell you what to fix. {appName} closes the full loop — from
                diagnosing which pages lost traffic to publishing AI-powered fixes and tracking the
                revenue proof. See how we compare on the metrics that actually move the needle.
              </p>
              <p className="text-sm font-medium text-muted-foreground">
                <span className="text-foreground font-semibold">
                  {appName} Pro starts at $49/mo
                </span>{' '}
                — vs. Surfer SEO at $89/mo, Clearscope at $189/mo, or Ahrefs at $129/mo.
                WordPress-native ROI tracking included, not sold separately.
              </p>
              {can_register && (
                <div className="pt-2">
                  <Button size="lg" asChild>
                    <Link href={route('register')}>
                      {CTA_LABELS.FREE_ANALYSIS}
                      <ArrowRight className="ml-2 h-4 w-4" aria-hidden="true" />
                    </Link>
                  </Button>
                </div>
              )}
            </div>
          </section>

          {/* Competitor Grid */}
          <section className="container py-8 pb-16">
            <div className="mx-auto max-w-6xl">
              <div className="mb-8 text-center">
                <h2 className="mb-3 text-2xl font-bold tracking-tight">Compare All Tools</h2>
                <p className="text-muted-foreground">
                  Click any tool for a detailed feature-by-feature comparison
                </p>
              </div>
              <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                {competitors.map((competitor) => (
                  <Card key={competitor.slug} className="group transition-shadow hover:shadow-lg">
                    <CardContent className="p-6">
                      <Link
                        href={route('comparison', { competitor: competitor.slug })}
                        onClick={() => handleCardClick(competitor.slug)}
                        className="block"
                      >
                        <div className="mb-3 flex items-start justify-between gap-2">
                          <h3 className="text-lg font-semibold group-hover:text-primary">
                            {appName} vs. {competitor.name}
                          </h3>
                          <Badge variant="secondary" className="shrink-0 text-xs">
                            {competitor.category}
                          </Badge>
                        </div>
                        <p className="mb-4 text-sm text-muted-foreground">
                          {competitor.description}
                        </p>
                        <div className="flex items-center justify-between">
                          <span className="text-sm font-medium text-muted-foreground">
                            <span className="text-foreground">{competitor.starting_price}</span> vs.{' '}
                            <span className="text-foreground">$49/mo</span>
                          </span>
                          <span className="flex items-center gap-1 text-sm font-medium text-primary opacity-0 transition-opacity group-hover:opacity-100">
                            See full comparison
                            <ArrowRight className="h-3.5 w-3.5" aria-hidden="true" />
                          </span>
                        </div>
                      </Link>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
          </section>

          {/* Related SEO Guides */}
          <section className="container py-12 pb-4">
            <div className="mx-auto max-w-6xl">
              <div className="mb-8 text-center">
                <h2 className="mb-3 text-2xl font-bold tracking-tight">WordPress SEO Guides</h2>
                <p className="text-muted-foreground">
                  In-depth resources for WordPress site owners looking to grow organic traffic
                </p>
              </div>
              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                {[
                  {
                    slug: 'best-seo-tool-for-wordpress',
                    title: 'Best SEO Tool for WordPress',
                    description:
                      'How to choose the right SEO tool for a WordPress site — GSC integration, AI content, and ROI tracking compared.',
                  },
                  {
                    slug: 'wordpress-seo-analyzer',
                    title: 'WordPress SEO Analyzer',
                    description:
                      "Use Google Search Console data to find and fix what's hurting your WordPress traffic.",
                  },
                  {
                    slug: 'wordpress-traffic-analysis',
                    title: 'WordPress Traffic Analysis Tool',
                    description:
                      'What your GSC data is really telling you — diagnose drops, spot trends, and prioritize fixes.',
                  },
                  {
                    slug: 'eeat-optimization-guide',
                    title: 'E-E-A-T Optimization Guide',
                    description:
                      'Build Experience, Expertise, Authoritativeness, and Trustworthiness signals that move rankings.',
                  },
                  {
                    slug: 'geo-optimization-guide',
                    title: 'GEO Optimization Guide',
                    description:
                      'Structure your WordPress content so AI search engines like Perplexity and Gemini cite your pages.',
                  },
                  {
                    slug: 'wordpress-seo-guide',
                    title: 'WordPress SEO Guide',
                    description:
                      'The complete WordPress SEO playbook — from GSC setup to content rewriting and ROI tracking.',
                  },
                ].map((guide) => (
                  <Link
                    key={guide.slug}
                    href={route('learn.hub', { slug: guide.slug })}
                    className="group block rounded-lg border border-border bg-card p-5 transition-colors hover:border-primary/50 hover:bg-accent/50"
                  >
                    <h3 className="mb-2 text-sm font-semibold group-hover:text-primary">
                      {guide.title}
                    </h3>
                    <p className="text-xs text-muted-foreground">{guide.description}</p>
                  </Link>
                ))}
              </div>
            </div>
          </section>

          {/* CTA Section */}
          <section className="container py-24">
            <div className="rounded-2xl bg-linear-to-r from-primary/10 via-primary/5 to-background p-12 text-center">
              <h2 className="mb-4 text-3xl font-bold tracking-tight">Ready to See for Yourself?</h2>
              <p className="mb-8 text-lg text-muted-foreground">
                Start analyzing your WordPress site's traffic for free. No credit card required.
              </p>
              <div className="flex flex-wrap items-center justify-center gap-4">
                {can_register && (
                  <Button size="lg" asChild>
                    <Link href={route('register')}>
                      {CTA_LABELS.FREE_ANALYSIS}
                      <ArrowRight className="ml-2 h-4 w-4" aria-hidden="true" />
                    </Link>
                  </Button>
                )}
                <Button size="lg" variant="outline" asChild>
                  <Link href={route('features')}>View All Features</Link>
                </Button>
                <Button size="lg" variant="ghost" asChild>
                  <Link href={route('free-audit')}>Try our free SEO audit →</Link>
                </Button>
              </div>
            </div>
          </section>
        </main>

        <MarketingFooter />
      </div>
    </>
  );
};

Compare.disableGlobalUi = true;

export default Compare;
