import React from 'react';
import { useNavigate } from 'react-router-dom';

import { useAppStateContext } from '../context/user.data.context';

const STATUS_BADGE_CLASS: Record<string, string> = {
  active: 'bg-green-100 text-green-800',
  trialing: 'bg-green-100 text-green-800',
  cancelled: 'bg-red-100 text-red-800',
  canceled: 'bg-red-100 text-red-800',
  expired: 'bg-yellow-100 text-yellow-800',
  past_due: 'bg-yellow-100 text-yellow-800',
  pending: 'bg-blue-100 text-blue-800',
};

const PlanStatusCard = (): JSX.Element | null => {
  const navigate = useNavigate();
  const { user } = useAppStateContext();

  if (!user) return null;

  const status = (user.stripe_subscription_status || '').toLowerCase();
  const trialDaysLeft = user.trial_days || 0;
  const onTrial = !user.has_active_subscription && trialDaysLeft > 0;

  const planSnapshot = user.plan_snapshot
    ? String(user.plan_snapshot).replace(/_/g, ' ')
    : null;
  const planDisplay = planSnapshot
    ? planSnapshot
    : onTrial
      ? 'Hyper Scaling (Trial)'
      : 'None';

  const badgeClass = STATUS_BADGE_CLASS[status] || 'bg-gray-100 text-gray-800';

  const primaryCta = (() => {
    if (onTrial) {
      return {
        label: 'Activate Hyper Scaling',
        href: '/pricing?plan=HYPER_SCALING',
      };
    }
    if (!user.has_active_subscription && trialDaysLeft === 0) {
      return { label: 'Choose a plan', href: '/pricing' };
    }
    return null;
  })();

  return (
    <div className="rounded-xl border border-gray-100 bg-white p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
      <div className="flex flex-col gap-2 min-w-0">
        <div className="flex flex-wrap items-center gap-2">
          <span className="text-sm text-gray-500">Your Plan:</span>
          <span className="text-base font-bold text-gray-900">
            {planDisplay}
          </span>
          {status && (
            <span
              className={`px-2 py-0.5 text-xs font-medium rounded-full ${badgeClass}`}
            >
              {status.toUpperCase()}
            </span>
          )}
          {onTrial && (
            <span className="px-2 py-0.5 text-xs font-medium rounded-full bg-green-100 text-green-800">
              {`${trialDaysLeft} day${trialDaysLeft === 1 ? '' : 's'} left`}
            </span>
          )}
        </div>

        {onTrial && (
          <div className="max-w-xs h-1.5 bg-gray-100 rounded-full overflow-hidden">
            <div
              className="h-full bg-green-500 transition-all"
              style={{ width: `${((7 - trialDaysLeft) * 100) / 7}%` }}
            />
          </div>
        )}
      </div>

      <div className="flex flex-wrap items-center gap-2">
        {primaryCta && (
          <button
            type="button"
            onClick={() => navigate(primaryCta.href)}
            className="px-3 py-1.5 text-xs font-medium rounded-lg bg-black text-white hover:bg-gray-800 transition-colors"
          >
            {primaryCta.label}
          </button>
        )}
        <button
          type="button"
          onClick={() => navigate('/pricing')}
          className="px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-200 bg-white text-gray-700 hover:bg-gray-50 transition-colors"
        >
          Manage plan
        </button>
      </div>
    </div>
  );
};

export default PlanStatusCard;