import React, { Fragment } from 'react';

import type { CompareCell, PricingModel } from '../../utils/pricingModel';

/** Pulls the count out of a cell so it can carry the row: "up to 2,000" and "1,000 per agent" both hand back the words around a single number. */
const NUMERIC_CELL = /^(.*?)(\d[\d,]*)(.*)$/;

const CompareValue = ({ value }: { value: CompareCell }): JSX.Element => {
  if (value === 'check') {
    return (
      <span
        className="text-emerald-600 dark:text-emerald-400"
        aria-label="Included"
      >
        ✓
      </span>
    );
  }
  if (value === 'dash') {
    return (
      <span className="text-muted-foreground/50" aria-label="Not on this plan">
        -
      </span>
    );
  }
  const numeric = NUMERIC_CELL.exec(value);
  if (!numeric) return <span>{value}</span>;
  const [, before, count, after] = numeric;

  return (
    <span>
      {before && <em className="not-italic text-muted-foreground">{before}</em>}
      <b className="font-semibold text-foreground">{count}</b>
      {after && <em className="not-italic text-muted-foreground">{after}</em>}
    </span>
  );
};

/**
 * Every limit row across every plan, grouped by the agent that owns it, the
 * way recomaze.ai/pricing compares them.
 */
export const PlanCompareTable = ({
  model,
}: {
  model: PricingModel;
}): JSX.Element => {
  const columns = model.compareColumns.length;

  return (
    <section className="space-y-4">
      <header className="text-center">
        <h2 className="text-xl font-semibold tracking-tight text-foreground">
          Compare features across plans
        </h2>
        <p className="mt-1 text-sm text-muted-foreground">
          All usage is measured in credits. Your plan refills every month.
        </p>
      </header>
      <div className="overflow-x-auto rounded-2xl border border-border bg-card">
        <table className="w-full min-w-[720px] border-collapse text-sm">
          <thead>
            <tr className="border-b border-border">
              <th className="w-1/4 px-4 py-3" />
              {model.compareColumns.map(column => (
                <th
                  key={column.name}
                  className="px-3 py-3 text-center font-semibold text-foreground"
                >
                  {column.name}
                  {column.note && (
                    <small className="block text-[11px] font-normal text-muted-foreground">
                      {column.note}
                    </small>
                  )}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {model.compareGroups.map(group => (
              <Fragment key={group.title}>
                <tr className="bg-muted">
                  <td
                    colSpan={columns + 1}
                    className="px-4 py-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground"
                  >
                    {group.title}
                  </td>
                </tr>
                {group.rows.map(row => (
                  <tr
                    key={row.feature}
                    className="border-b border-border last:border-0"
                  >
                    <td className="px-4 py-2.5 font-medium text-foreground">
                      {row.feature}
                    </td>
                    {row.cells.map((cell, index) => (
                      <td
                        key={`${row.feature}-${index}`}
                        className="px-3 py-2.5 text-center"
                      >
                        <CompareValue value={cell} />
                      </td>
                    ))}
                  </tr>
                ))}
              </Fragment>
            ))}
          </tbody>
        </table>
      </div>
      <p className="text-center text-xs text-muted-foreground">
        *Usage must be reasonable and within our fair use policy. All limits are
        per month. &quot;Up to&quot; means the most the plan does; every job
        shows its cost before it runs.
      </p>
    </section>
  );
};