'use client';

import { useSubscribe } from './hook';
import { PLANS } from '@/shared/billing/plans';

// --- ASA GENERATED START ---
// UI component for billing/subscribe slice.
// Shows available plans with pricing and upgrade buttons.
// --- ASA GENERATED END ---

// --- USER CODE START ---

interface BillingSubscribeProps {
  currentPlan?: string;
}

export default function BillingSubscribe({ currentPlan = 'free' }: BillingSubscribeProps) {
  const { subscribe, loading, error } = useSubscribe();

  return (
    <div className="mx-auto max-w-4xl px-4 py-12">
      <h2 className="text-2xl font-bold text-neutral-900">Choose your plan</h2>
      <p className="mt-2 text-sm text-neutral-500">
        Upgrade to unlock more features and higher limits.
      </p>

      {error && (
        <div className="mt-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
          {error}
        </div>
      )}

      <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {PLANS.map((plan) => {
          const isCurrent = plan.id === currentPlan;
          return (
            <div
              key={plan.id}
              className={`rounded-xl border p-6 ${
                isCurrent
                  ? 'border-neutral-900 bg-neutral-50'
                  : 'border-neutral-200 bg-white'
              }`}
            >
              <h3 className="text-lg font-semibold text-neutral-900">{plan.name}</h3>
              <p className="mt-1 text-sm text-neutral-500">{plan.description}</p>

              <div className="mt-4">
                <span className="text-3xl font-bold text-neutral-900">
                  ${plan.price}
                </span>
                {plan.price > 0 && (
                  <span className="text-sm text-neutral-500">/month</span>
                )}
              </div>

              <ul className="mt-6 space-y-2">
                {plan.features.map((feature) => (
                  <li key={feature} className="flex items-start gap-2 text-sm text-neutral-600">
                    <span className="mt-0.5 text-neutral-400">&#10003;</span>
                    {feature}
                  </li>
                ))}
              </ul>

              <div className="mt-6">
                {isCurrent ? (
                  <div className="rounded-lg bg-neutral-100 px-4 py-2.5 text-center text-sm font-medium text-neutral-500">
                    Current plan
                  </div>
                ) : plan.stripe_price_id ? (
                  <button
                    onClick={() => subscribe(plan.stripe_price_id!)}
                    disabled={loading}
                    className="w-full rounded-lg bg-neutral-900 px-4 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                  >
                    {loading ? 'Processing...' : `Upgrade to ${plan.name}`}
                  </button>
                ) : (
                  <div className="rounded-lg bg-neutral-100 px-4 py-2.5 text-center text-sm font-medium text-neutral-500">
                    Free forever
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// --- USER CODE END ---
