import { CheckCircle2, X } from 'lucide-react';

import { PLAN_PRICES } from '@/config/plan-limits';
import { cn } from '@/lib/utils';

interface Feature {
  name: string;
  rankwiz: string | boolean;
  surfer: string | boolean;
  clearscope: string | boolean;
  semrush: string | boolean;
  type?: string;
  highlight?: boolean;
}

interface CompetitorComparisonTableProps {
  proPrice?: number;
  className?: string;
}

export function CompetitorComparisonTable({
  proPrice = PLAN_PRICES.pro,
  className,
}: CompetitorComparisonTableProps) {
  const features = [
    {
      name: 'Monthly Price',
      rankwiz: `$${proPrice}`,
      surfer: '$99',
      clearscope: '$170',
      semrush: '$140',
      type: 'price',
    },
    {
      name: 'ROI Tracking',
      rankwiz: true,
      surfer: false,
      clearscope: false,
      semrush: false,
      highlight: true,
    },
    {
      name: 'AI Drafts',
      rankwiz: true,
      surfer: true,
      clearscope: true,
      semrush: true,
    },
    {
      name: 'WordPress Publishing',
      rankwiz: true,
      surfer: false,
      clearscope: false,
      semrush: true,
    },
    {
      name: 'Content Intelligence',
      rankwiz: true,
      surfer: false,
      clearscope: false,
      semrush: false,
    },
    {
      name: 'Traffic Anomaly Alerts',
      rankwiz: true,
      surfer: false,
      clearscope: false,
      semrush: true,
    },
    {
      name: 'Bring Your Own AI Key (BYOK)',
      rankwiz: true,
      surfer: false,
      clearscope: false,
      semrush: false,
      highlight: true,
    },
  ];

  const renderCell = (value: string | boolean) => {
    if (typeof value === 'boolean') {
      return value ? (
        <div className="flex justify-center">
          <CheckCircle2 className="h-5 w-5 text-green-600" aria-label="Included" />
        </div>
      ) : (
        <div className="flex justify-center">
          <X className="h-5 w-5 text-slate-400" aria-label="Not included" />
        </div>
      );
    }
    return <span className="text-center">{value}</span>;
  };

  return (
    <section className={cn('border-t py-24', className)} aria-labelledby="comparison-heading">
      <div className="container">
        <div className="mx-auto max-w-6xl">
          {/* Section Header */}
          <div className="mb-12 text-center">
            <h2 id="comparison-heading" className="mb-4 text-3xl font-bold tracking-tight">
              How RankWiz Compares
            </h2>
            <p className="text-lg text-muted-foreground">
              More features for less. See what you get at every price point.
            </p>
          </div>

          {/* Table */}
          <div className="overflow-x-auto rounded-lg border">
            <table className="w-full border-collapse bg-card">
              <thead>
                <tr className="border-b bg-muted">
                  <th className="border-r px-6 py-4 text-left font-semibold text-foreground">
                    Feature
                  </th>
                  <th className="border-r bg-blue-50 px-6 py-4 text-center font-semibold text-blue-900 dark:bg-blue-950 dark:text-blue-100">
                    RankWiz Pro
                  </th>
                  <th className="border-r px-6 py-4 text-center font-semibold text-foreground">
                    Surfer SEO
                  </th>
                  <th className="border-r px-6 py-4 text-center font-semibold text-foreground">
                    Clearscope
                  </th>
                  <th className="px-6 py-4 text-center font-semibold text-foreground">Semrush</th>
                </tr>
              </thead>
              <tbody>
                {(features as Feature[]).map((feature, index) => (
                  <tr
                    key={index}
                    className={cn(
                      'border-b',
                      feature.highlight && 'bg-amber-50/60 dark:bg-amber-950/20',
                    )}
                  >
                    <td
                      className={cn(
                        'border-r px-6 py-4 font-medium text-foreground',
                        feature.highlight && 'font-semibold',
                      )}
                    >
                      {feature.highlight ? (
                        <span className="flex items-center gap-2">
                          {feature.name}
                          <span className="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-800 dark:bg-amber-900/50 dark:text-amber-300">
                            Unique to RankWiz
                          </span>
                        </span>
                      ) : (
                        feature.name
                      )}
                    </td>
                    <td
                      className={cn(
                        'border-r px-6 py-4',
                        feature.type === 'price'
                          ? 'bg-blue-50 font-semibold text-blue-900 dark:bg-blue-950 dark:text-blue-100'
                          : 'bg-blue-50/50 dark:bg-blue-950/50',
                      )}
                    >
                      {renderCell(feature.rankwiz)}
                    </td>
                    <td className="border-r px-6 py-4 text-foreground">
                      {renderCell(feature.surfer)}
                    </td>
                    <td className="border-r px-6 py-4 text-foreground">
                      {renderCell(feature.clearscope)}
                    </td>
                    <td className="px-6 py-4 text-foreground">{renderCell(feature.semrush)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* Footer: link + disclaimer */}
          <div className="mt-8 flex flex-col items-center gap-3 text-center">
            <a
              href="/compare"
              className="text-sm font-medium text-blue-600 underline-offset-4 hover:underline dark:text-blue-400"
            >
              Full comparison →
            </a>
            <p className="text-xs text-muted-foreground">
              Table shows features where RankWiz differentiates. Semrush and others offer broader
              feature sets not shown here. Prices as of March 2026. Lowest available plan shown for
              each competitor.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}