import React from 'react';

import { PlanType } from '../../utils/plan';

const APP_SUMO_BASE_URL = 'https://appsumo.com/';

const APP_SUMO_TIERS: {
  tier: string;
  planKey: PlanType;
  code: string;
}[] = [
  { tier: 'Tier 1', planKey: PlanType.FAST_GROWING, code: 'recomaze-tier-1' },
  { tier: 'Tier 2', planKey: PlanType.SCALING, code: 'recomaze-tier-2' },
  { tier: 'Tier 3', planKey: PlanType.HYPER_SCALING, code: 'recomaze-tier-3' },
  { tier: 'Tier 4', planKey: PlanType.HYPER_SCALING, code: 'recomaze-tier-4' },
];

const APP_SUMO_ROWS: {
  label: React.ReactNode;
  values: [string, string, string, string];
  highlight?: boolean;
}[] = [
  {
    label: 'Partner Branded Plan',
    values: ['Fast Growing', 'Scaling', 'Hyper Scaling', 'Hyper Scaling'],
  },
  {
    label: 'Deal Access Duration',
    values: ['Lifetime', 'Lifetime', 'Lifetime', 'Lifetime'],
  },
  {
    label: 'Deal Price',
    values: ['$59', '$119', '$279', '$599'],
    highlight: true,
  },
  {
    label: 'Products per month',
    values: ['250', '1,000', '5,000', '5,000'],
  },
  {
    label: 'Number of stores',
    values: ['1', '1', '1', '3'],
  },
  {
    label: 'AI credits per store per month',
    values: ['2,000', '4,500', '9,000', '9,000'],
  },
  {
    label: (
      <>
        AI optimized pages generated per month
        <span className="mt-1 block text-[10px] font-normal leading-snug text-gray-400">
          25 credits = article no images
          <br />
          75 credits = article with image
          <br />
          10 credits = 1 optimized product page
        </span>
      </>
    ),
    values: ['25', '60', '120', '250'],
  },
  {
    label: 'Prompts tracked per store',
    values: ['5', '10', '50', '50'],
  },
  {
    label: 'Competitors tracked',
    values: ['5', '10', '25', '50'],
  },
  {
    label: 'AI chatbot conversations',
    values: ['Unlimited', 'Unlimited', 'Unlimited', 'Unlimited'],
  },
];

/**
 * AppSumo lifetime-deal pricing table, shown in place of the regular plan grid
 * for AppSumo-sourced merchants. Static presentation — each tier links out to
 * its AppSumo deal page.
 *
 * @return {JSX.Element}
 */
export const AppSumoPricing = (): JSX.Element => {
  return (
    <section className="w-full space-y-4">
      <div className="flex flex-col items-center space-y-1 text-center">
        <h2 className="text-2xl font-bold tracking-tight text-gray-900 md:text-3xl">
          Your AppSumo Lifetime Deal
        </h2>
        <p className="text-sm text-gray-600 md:text-base">
          Pick the tier that matches your AppSumo purchase. Each tier is a
          one-time lifetime deal — no monthly fees.
        </p>
      </div>

      <div className="overflow-x-auto rounded-2xl border border-gray-200">
        <table className="w-full min-w-[760px] border-collapse text-sm">
          <thead>
            <tr>
              <th className="border border-gray-200 bg-slate-800 px-4 py-3 text-left font-semibold text-white">
                AppSumo Pricing Table Tier
              </th>
              {APP_SUMO_TIERS.map(t => (
                <th
                  key={t.tier}
                  className="border border-gray-200 bg-slate-800 px-4 py-3 text-center font-semibold text-white"
                >
                  {t.tier}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {APP_SUMO_ROWS.map((row, rowIdx) => (
              <tr
                key={rowIdx}
                className={row.highlight ? 'bg-gray-50' : 'bg-white'}
              >
                <td className="border border-gray-200 px-4 py-3 font-medium text-gray-900">
                  {row.label}
                </td>
                {row.values.map((value, i) => (
                  <td
                    key={i}
                    className={[
                      'border border-gray-200 px-4 py-3 text-center',
                      row.highlight
                        ? 'font-semibold text-gray-900'
                        : 'text-gray-500',
                    ].join(' ')}
                  >
                    {value}
                  </td>
                ))}
              </tr>
            ))}
            <tr className="bg-white">
              <td className="border border-gray-200 px-4 py-3" />
              {APP_SUMO_TIERS.map(t => (
                <td
                  key={t.tier}
                  className="border border-gray-200 px-3 py-3 align-middle"
                >
                  <a
                    href={`${APP_SUMO_BASE_URL}${t.code}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex h-9 w-full items-center justify-center rounded-md border border-gray-200 text-xs font-medium text-gray-900 transition-colors hover:bg-gray-50"
                  >
                    Get this deal
                  </a>
                </td>
              ))}
            </tr>
          </tbody>
        </table>
      </div>
    </section>
  );
};

export default AppSumoPricing;