import React from 'react';
import { Loader2Icon } from 'lucide-react';

import { classNames } from '../../lib/utils';
import { Button } from '../ui/button';
import type { IPlanSelection } from '../../service/user/user.interface';
import { PlanPeriod } from '../../utils/plan';
import {
  formatCount,
  formatUSD,
  limitWords,
  stopBillNote,
  stopMonthlyPrice,
  type PricingModel,
  type PricingPlan,
} from '../../utils/pricingModel';
import {
  voucherAppliesTo,
  voucherDurationNote,
  voucherLabel,
  voucherMonthlyPrice,
  type AppliedVoucher,
} from '../../utils/voucher';

import { PlanDots } from './PlanDots';

/** What the chosen plan's button says and whether it is live. */
export interface PlanSelectorCta {
  label: string;
  disabled: boolean;
  loading: boolean;
  /** The plan is the account's current one. */
  current: boolean;
}

interface PlanSelectorProps {
  model: PricingModel;
  planIndex: number;
  period: PlanPeriod;
  onPeriodChange: (period: PlanPeriod) => void;
  /** Agents ticked on the per-agent plan. */
  pickedAgents: string[];
  onPickedAgentsChange: (agents: string[]) => void;
  /** Tapping an agent on Free jumps to the per-agent plan with it ticked. */
  onJumpToStarter: (agent: string) => void;
  cta: PlanSelectorCta;
  /** The merchant is on the launch trial of this very plan: the launch price shows. */
  launchMonthly: number | null;
  launchMonths: number;
  /** The list price the launch trial reverts to on this plan; the catalog's when null. */
  launchListMonthly: number | null;
  /** A priced voucher applied on the page; the price shows it when it names this plan. */
  voucher: AppliedVoucher | null;
  onCheckout: (selection: IPlanSelection) => void;
}

const LIMIT_PREFIX = 'up to ';

/**
 * The one plan the slider stopped on, the way recomaze.ai/pricing shows it:
 * price and period on the left, how hard each agent runs on the right, the
 * agent picker and the plan's limits below.
 */
export const PlanSelector = ({
  model,
  planIndex,
  period,
  onPeriodChange,
  pickedAgents,
  onPickedAgentsChange,
  onJumpToStarter,
  cta,
  launchMonthly,
  launchMonths,
  launchListMonthly,
  voucher,
  onCheckout,
}: PlanSelectorProps): JSX.Element => {
  const plan: PricingPlan = model.plans[planIndex];
  const isFree =
    !plan.soldOn[PlanPeriod.MONTHLY] && !plan.soldOn[PlanPeriod.YEARLY];
  const isStarter = plan.perAgent;
  const shownPeriod =
    plan.soldOn[period] || isFree ? period : PlanPeriod.MONTHLY;
  const isYearly = shownPeriod === PlanPeriod.YEARLY;
  const units = isStarter ? Math.max(pickedAgents.length, 1) : 1;
  const deal =
    isStarter &&
    !!plan.bundle &&
    plan.bundle.period === shownPeriod &&
    pickedAgents.length === plan.bundle.units;
  const price = stopMonthlyPrice(plan, shownPeriod, units);
  const listMonthly = stopMonthlyPrice(plan, PlanPeriod.MONTHLY, units);
  const wasPrice =
    isYearly && price < listMonthly
      ? listMonthly
      : deal && plan.bundle
        ? plan.bundle.was
        : 0;
  const credits = isStarter ? plan.credits * units : plan.credits;
  const showLaunch = launchMonthly !== null && cta.current && !isYearly;
  const launchRevertsTo: number = launchListMonthly ?? listMonthly;
  const voucherOn: boolean =
    !isFree && !cta.current && voucherAppliesTo(voucher, plan.key);
  const voucherPrice: number =
    voucherOn && voucher
      ? voucherMonthlyPrice(price, shownPeriod, voucher)
      : price;

  const agentFill = (agentKey: string): number => {
    if (isFree) return 0;
    if (isStarter && !deal)
      return pickedAgents.includes(agentKey) ? plan.fill : 0;

    return plan.fill;
  };

  const limitRows = (() => {
    if (isFree) return [];
    let names: string[];
    if (isStarter) {
      names = model.agents
        .filter(agent => pickedAgents.includes(agent.key))
        .flatMap(agent => agent.solo);
    } else {
      const unlocked = new Set(model.agents.flatMap(agent => agent.rows));
      names = model.limitRows.filter(row => unlocked.has(row));
    }

    return names
      .map(row => ({
        row,
        value: model.rowLimits[row]?.[planIndex] ?? '',
        prefix: model.fixedLimitRows.includes(row) ? '' : LIMIT_PREFIX,
      }))
      .filter(limit => limit.value !== '');
  })();

  const toggleAgent = (agentKey: string): void => {
    if (isFree) {
      onJumpToStarter(agentKey);

      return;
    }
    if (!isStarter) return;
    const on = pickedAgents.includes(agentKey);
    if (on && pickedAgents.length === 1) return;
    onPickedAgentsChange(
      on
        ? pickedAgents.filter(key => key !== agentKey)
        : [...pickedAgents, agentKey]
    );
  };

  const agentsTitle = isFree
    ? 'Add an agent to start'
    : isStarter
      ? 'Pick your agents, bundled at one price'
      : 'All six agents, included';

  return (
    <div className="w-full overflow-hidden rounded-3xl border border-border bg-card shadow-xs">
      <div className="grid @2xl:grid-cols-[1.1fr_0.9fr]">
        <div className="p-7 @2xl:p-10">
          <div className="flex items-center gap-3">
            <h2 className="text-3xl font-bold tracking-tight text-foreground">
              {plan.name}
            </h2>
            {(deal || plan.badge || cta.current) && (
              <span className="rounded-full bg-brand/10 px-3 py-1 text-[11px] font-bold uppercase tracking-wider text-brand">
                {cta.current
                  ? 'Current plan'
                  : deal
                    ? 'Special offer'
                    : plan.badge}
              </span>
            )}
          </div>
          <p className="mt-2 text-base text-muted-foreground">
            {deal ? 'All six agents, for the price of one plan.' : plan.fit}
          </p>

          <div className="mt-5 flex flex-wrap items-baseline gap-2">
            <span className="text-5xl font-bold tracking-tight text-foreground">
              {isFree
                ? 'Free'
                : formatUSD(
                    showLaunch ? (launchMonthly as number) : voucherPrice
                  )}
            </span>
            {!isFree && (
              <span className="text-lg text-muted-foreground">/mo</span>
            )}
            {!isFree &&
              !showLaunch &&
              (voucherOn ? price > voucherPrice : wasPrice > price) && (
                <s className="ml-2 text-2xl font-semibold text-muted-foreground/70 decoration-2">
                  {formatUSD(voucherOn ? price : wasPrice)}/mo
                </s>
              )}
            {voucherOn && voucher && (
              <span className="rounded-full bg-emerald-500/10 px-3 py-1 text-[11px] font-bold uppercase tracking-wider text-emerald-700 dark:text-emerald-300">
                {voucher.code}: {voucherLabel(voucher)}
              </span>
            )}
            {showLaunch && (
              <s className="ml-2 text-2xl font-semibold text-muted-foreground/70 decoration-2">
                {formatUSD(launchRevertsTo)}/mo
              </s>
            )}
          </div>
          <p className="mt-2 text-sm text-muted-foreground">
            {showLaunch
              ? `Your launch price for the first ${launchMonths} months, then ${formatUSD(launchRevertsTo)}/mo.`
              : isFree
                ? plan.billMonthly
                : voucherOn && voucher
                  ? `${voucherLabel(voucher)} ${voucherDurationNote(voucher)}. ${stopBillNote(plan, shownPeriod, units, deal)}`
                  : stopBillNote(plan, shownPeriod, units, deal)}
          </p>

          {!isFree && (
            <div
              className="mt-5 inline-flex rounded-full border border-border bg-muted p-1"
              role="group"
              aria-label="Billing period"
            >
              {[
                {
                  value: PlanPeriod.YEARLY,
                  label: 'Pay annually',
                  note: 'Best value',
                },
                {
                  value: PlanPeriod.MONTHLY,
                  label: 'Pay monthly',
                  note: 'Cancel any month',
                },
              ].map(option => (
                <button
                  key={option.value}
                  type="button"
                  disabled={!plan.soldOn[option.value]}
                  onClick={() => onPeriodChange(option.value)}
                  className={[
                    'flex flex-col items-center rounded-full px-4 py-1.5 text-sm font-semibold leading-tight transition-colors disabled:opacity-40',
                    shownPeriod === option.value
                      ? 'bg-brand text-white shadow-xs'
                      : 'text-muted-foreground hover:text-foreground',
                  ].join(' ')}
                >
                  {option.label}
                  <small className="text-[10px] font-semibold uppercase tracking-wider opacity-70">
                    {option.note}
                  </small>
                </button>
              ))}
            </div>
          )}

          <div className="mt-6">
            <Button
              size="lg"
              disabled={cta.disabled || cta.loading}
              onClick={() =>
                onCheckout({
                  plan: plan.key,
                  period: shownPeriod,
                  agents: isStarter ? pickedAgents : [],
                })
              }
              className={classNames(
                'h-12 rounded-full px-7 text-base',
                !cta.disabled &&
                  'bg-linear-to-r from-brand to-pink-500 text-white hover:opacity-90'
              )}
            >
              {cta.loading ? (
                <>
                  <Loader2Icon className="animate-spin" />
                  Processing
                </>
              ) : (
                cta.label
              )}
            </Button>
          </div>

          {deal && plan.bundle && (
            <div className="mt-5 rounded-xl border border-emerald-500/20 bg-emerald-500/10 p-4 text-sm">
              <b className="block font-semibold text-foreground">
                Congrats! You unlocked a special offer!
              </b>
              <span className="text-muted-foreground">
                All six agents for {formatUSD(plan.bundle.monthly)} a month on
                the annual plan, instead of {formatUSD(plan.bundle.was)}.
              </span>
            </div>
          )}
        </div>

        <div className="border-t border-border bg-muted p-7 @2xl:border-l @2xl:border-t-0 @2xl:p-10">
          <p className="text-[11px] font-bold uppercase tracking-wider text-muted-foreground">
            A month on this plan
          </p>
          <h3 className="mt-1.5 min-h-[56px] text-xl font-bold leading-snug tracking-tight text-foreground">
            {plan.month}
          </h3>
          <div className="mt-5 grid gap-2.5">
            <div className="grid grid-cols-[140px_1fr] items-center gap-3">
              <span className="truncate text-sm font-bold text-foreground">
                Audit and Plan
              </span>
              <PlanDots filled={plan.auditFill} tone="audit" />
            </div>
            {model.agents.map(agent => {
              const filled = agentFill(agent.key);

              return (
                <div
                  key={agent.key}
                  className="grid grid-cols-[140px_1fr] items-center gap-3"
                >
                  <span
                    className={[
                      'truncate text-sm font-bold',
                      filled ? 'text-foreground' : 'text-muted-foreground/70',
                    ].join(' ')}
                  >
                    {agent.name}
                  </span>
                  <PlanDots filled={filled} tone="agent" />
                </div>
              );
            })}
          </div>
          <div className="mt-4 flex flex-wrap gap-4 text-xs text-muted-foreground">
            <span className="flex items-center gap-1.5">
              <i className="h-2.5 w-2.5 rounded-[3px] bg-brand" /> AI agents
              volume work
            </span>
            <span className="flex items-center gap-1.5">
              <i className="h-2.5 w-2.5 rounded-[3px] bg-primary" /> Audits
            </span>
            <span className="flex items-center gap-1.5">
              <i className="h-2.5 w-2.5 rounded-[3px] border border-border bg-muted" />{' '}
              Not on this plan
            </span>
          </div>
        </div>
      </div>

      <div className="grid border-t border-border @2xl:grid-cols-[1.1fr_0.9fr]">
        <div className="p-7 @2xl:p-10">
          <p className="mb-3 text-[11px] font-bold uppercase tracking-wider text-muted-foreground">
            {agentsTitle}
          </p>
          <div className="space-y-1">
            {model.agents.map(agent => {
              const locked = !isFree && !isStarter;
              const checked = isFree
                ? false
                : locked
                  ? true
                  : pickedAgents.includes(agent.key);

              return (
                <label
                  key={agent.key}
                  // ``relative`` because ``sr-only`` is an absolute box: the
                  // label keeps its own input, rather than leaving it to the
                  // nearest positioned ancestor up the page.
                  className={[
                    'relative grid grid-cols-[24px_1fr] items-start gap-3 rounded-xl px-3 py-2.5 transition-colors',
                    locked ? 'cursor-default' : 'cursor-pointer hover:bg-muted',
                  ].join(' ')}
                >
                  <input
                    type="checkbox"
                    className="sr-only"
                    checked={checked}
                    disabled={locked}
                    onChange={() => toggleAgent(agent.key)}
                  />
                  <span
                    className={[
                      'mt-0.5 grid h-[22px] w-[22px] place-items-center rounded-[7px] border-2 transition-colors',
                      checked
                        ? 'border-brand bg-brand text-white'
                        : 'border-border',
                      locked ? 'opacity-85' : '',
                    ].join(' ')}
                    aria-hidden="true"
                  >
                    {checked && (
                      <svg
                        viewBox="0 0 24 24"
                        className="h-3.5 w-3.5"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="3"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      >
                        <path d="M20 6 9 17l-5-5" />
                      </svg>
                    )}
                  </span>
                  <span>
                    <b className="block text-[15px] font-bold text-foreground">
                      {agent.name}
                    </b>
                    <small className="mt-0.5 block text-[13px] leading-snug text-muted-foreground">
                      {agent.blurb}
                    </small>
                  </span>
                </label>
              );
            })}
            {isStarter && !deal && plan.bundle && (
              <Button
                variant="outline"
                className="mt-3 rounded-full border-brand/60 bg-brand/5 text-brand hover:bg-brand/10 hover:text-brand"
                onClick={() =>
                  onPickedAgentsChange(model.agents.map(agent => agent.key))
                }
              >
                Select all six, unlock a special offer
              </Button>
            )}
          </div>
        </div>

        <div className="border-t border-border bg-muted p-7 @2xl:border-l @2xl:border-t-0 @2xl:p-10">
          <p className="mb-3 text-[11px] font-bold uppercase tracking-wider text-muted-foreground">
            {isFree ? 'What you get, free' : 'What the plan does'}
          </p>
          <ul className="divide-y divide-dashed divide-border text-[15px] text-muted-foreground">
            <li className="py-1.5 text-foreground">
              AI HQ and Company AI Brain analyze your business and propose what
              to do next
            </li>
            {isFree ? (
              <li className="py-1.5">
                Fix Pack: every failed check, with the fix, ready to export
              </li>
            ) : (
              <>
                <li className="py-1.5">Full free audits</li>
                {limitRows.map(limit => (
                  <li key={limit.row} className="py-1.5">
                    {limit.prefix}
                    <b className="font-bold text-foreground">
                      {limit.value}
                    </b>{' '}
                    {limitWords(
                      model.limitLabels[limit.row] ?? limit.row,
                      limit.value
                    )}
                  </li>
                ))}
                <li className="py-1.5">Unlimited seats</li>
              </>
            )}
          </ul>
          <p className="mt-4 text-sm text-muted-foreground">
            <b className="font-bold text-foreground">
              {formatCount(credits)} AI credits
            </b>{' '}
            {isFree
              ? 'a month to test everything'
              : isStarter
                ? `a month, ${formatCount(plan.credits)} per agent you pick`
                : 'a month'}
          </p>
          <p className="mt-2 text-xs text-muted-foreground/70">
            All limits are per month. &quot;Up to&quot; means the most the plan
            does; every job shows its cost before it runs.
          </p>
        </div>
      </div>
    </div>
  );
};