'use client';

import React from 'react';
import { useSubscription } from './subscription-context';

type Props = {
  children: React.ReactNode;
  title?: string;       // optional feature/page title
  allowTrialCta?: boolean; // show Start Trial button
};

const SubscriptionGate: React.FC<Props> = ({ children, title = 'This feature', allowTrialCta = true }) => {
  const { isEntitled, isTrialActive, daysLeftInTrial, startTrial, purchase } = useSubscription();

  if (isEntitled) {
    return <>{children}</>;
  }

  return (
    <div className="max-w-3xl mx-auto py-16 px-6">
      <div className="bg-white rounded-2xl shadow-lg p-8 border">
        <h2 className="text-2xl font-bold mb-2">{title} requires a subscription</h2>
        <p className="text-gray-600 mb-6">
          Unlock access to all tools. New users get a <span className="font-semibold">7-day free trial</span>.
        </p>

        {isTrialActive && (
          <div className="mb-6 text-sm text-emerald-700 bg-emerald-50 border border-emerald-200 rounded-lg px-4 py-3">
            Your trial is active — <span className="font-semibold">{daysLeftInTrial}</span> day(s) left.
          </div>
        )}

        <div className="flex flex-wrap gap-3">
          {allowTrialCta && !isTrialActive && (
            <button
              onClick={() => startTrial(7)}
              className="px-5 py-2.5 rounded-lg bg-slate-900 text-white hover:bg-black transition"
            >
              Start 7-day Free Trial
            </button>
          )}
          <button
            onClick={purchase}
            className="px-5 py-2.5 rounded-lg bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:from-blue-700 hover:to-purple-700 transition"
          >
            Purchase Subscription
          </button>
        </div>

        <p className="text-xs text-gray-500 mt-4">
          You can manage your plan anytime in <span className="font-medium">Account Settings → Subscription</span>.
        </p>
      </div>
    </div>
  );
};

export default SubscriptionGate;