import React from 'react';
import type { IconType } from 'react-icons';
import {
  FaBarcode,
  FaBookOpen,
  FaCoins,
  FaMagic,
  FaRegFileAlt,
  FaRegImage,
  FaRegNewspaper,
  FaSatelliteDish,
  FaShieldAlt,
} from 'react-icons/fa';

interface CreditCost {
  /** Icon mirrors the credit-history REASON_META icons for visual consistency. */
  icon: IconType;
  /** Short action name shown in the first column. */
  label: string;
  /** Plain-language explanation of what the action does. */
  description: string;
  /** Human-readable price (kept as text so tiered costs read naturally). */
  cost: string;
}

/**
 * Per-action credit rate card shown on the Plans & Billing page.
 *
 * Source of truth: recomaze-agent/src/credits/constants.py (rate card locked
 * 2026-06-11) and its RATE_CARD_SUMMARY. Keep these values in sync with that
 * file; the numbers below are the credit cost merchants are charged per action.
 */
const CREDIT_COSTS: CreditCost[] = [
  {
    icon: FaRegFileAlt,
    label: 'Product content',
    description: 'Generate titles, descriptions and FAQs for a product.',
    cost: '10 credits per field, per product',
  },
  {
    icon: FaBarcode,
    label: 'Catalog scan',
    description: 'Content-check and audit a product in your catalog.',
    cost: '1 credit per product',
  },
  {
    icon: FaMagic,
    label: 'Inline fix',
    description: 'Apply a fix-it, FAQ or snippet suggestion.',
    cost: '10 credits (15 in gap mode)',
  },
  {
    icon: FaShieldAlt,
    label: 'Gap verification',
    description: 'Re-check a content gap after a fix.',
    cost: '1 credit per check (cached is free)',
  },
  {
    icon: FaBookOpen,
    label: 'Knowledge base document',
    description: "Add a document to your assistant's knowledge base.",
    cost: '1 to 15 credits by size',
  },
  {
    icon: FaRegNewspaper,
    label: 'Article text',
    description: 'Generate or regenerate an article.',
    cost: '75 credits per language',
  },
  {
    icon: FaRegImage,
    label: 'Article image',
    description: 'Generate a cover image or a popup icon.',
    cost: '40 credits per image',
  },
  {
    icon: FaSatelliteDish,
    label: 'AI Visibility scan',
    description: 'Check how AI engines see your brand.',
    cost: '25 credits (250 for multi-engine)',
  },
];

/**
 * Static table listing what each Recomaze action costs in credits, so merchants
 * can see exactly what they spend their credits on.
 */
export function CreditCostList(): JSX.Element {
  return (
    <section className="rounded-2xl border border-gray-200 bg-white p-6">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <div className="flex items-center gap-2">
          <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-50 ring-1 ring-amber-100">
            <FaCoins className="h-4 w-4 text-amber-500" />
          </span>
          <h2 className="text-base font-semibold text-gray-900">
            What each action costs
          </h2>
        </div>
        <span className="text-xs text-gray-500">
          All usage is measured in credits. Your plan refills every month.
        </span>
      </div>

      <div className="mt-4 overflow-x-auto">
        <table className="w-full min-w-[40rem] text-sm">
          <thead>
            <tr className="border-b border-gray-200 text-left text-xs font-medium uppercase tracking-wide text-gray-500">
              <th className="py-2 pr-4">Action</th>
              <th className="py-2 pr-4">What it does</th>
              <th className="py-2 pl-4 text-right">Cost</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-100">
            {CREDIT_COSTS.map(item => {
              const Icon = item.icon;
              return (
                <tr key={item.label}>
                  <td className="whitespace-nowrap py-3 pr-4">
                    <span className="flex items-center gap-2 font-medium text-gray-900">
                      <Icon className="h-4 w-4 text-gray-400" />
                      {item.label}
                    </span>
                  </td>
                  <td className="py-3 pr-4 text-gray-700">
                    {item.description}
                  </td>
                  <td className="whitespace-nowrap py-3 pl-4 text-right font-medium text-gray-900">
                    {item.cost}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <p className="mt-4 text-xs text-gray-500">
        Prices are per action. Failed operations and cached results are never
        charged.
      </p>
    </section>
  );
}