'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import TermsText from '@/app/components/TermsText';

interface TermsContentProps {
  plan: string;
  interval: 'monthly' | 'annual';
}

/**
 * Terms Content Component
 *
 * Client component that displays the terms and conditions with:
 * - Scrollable terms text container within fixed-height card
 * - Checkbox for agreement
 * - Continue button (disabled until checkbox checked)
 */
export default function TermsContent({ plan, interval }: TermsContentProps) {
  const [agreed, setAgreed] = useState(false);
  const [isNavigating, setIsNavigating] = useState(false);
  const router = useRouter();

  const handleContinue = () => {
    if (agreed && !isNavigating) {
      setIsNavigating(true);
      // Navigate to checkout with plan and interval - encodeURIComponent for safety
      router.push(
        `/api/checkout/create-session?plan=${encodeURIComponent(plan)}&interval=${encodeURIComponent(interval)}`
      );
    }
  };

  return (
    <div className="terms-content-wrapper">
      {/* Header */}
      <h1 className="terms-heading">Terms and Conditions</h1>
      <p className="terms-subheading">Please review and accept the terms below to continue.</p>

      {/* Scrollable Terms Container */}
      <div
        className="terms-scroll-container"
        role="document"
        aria-label="Terms and conditions document"
        tabIndex={0}
      >
        <TermsText />
      </div>

      {/* Footer with Checkbox and Button */}
      <div className="terms-footer">
        <label className="terms-checkbox-label" htmlFor="terms-agreement-checkbox">
          <input
            type="checkbox"
            id="terms-agreement-checkbox"
            checked={agreed}
            onChange={(e) => setAgreed(e.target.checked)}
            disabled={isNavigating}
          />
          <span>I have read and agree to the terms and conditions</span>
        </label>

        <button
          type="button"
          onClick={handleContinue}
          disabled={!agreed || isNavigating}
          aria-disabled={!agreed || isNavigating}
          className="terms-continue-button"
        >
          <span>{isNavigating ? 'Redirecting...' : 'Continue to Payment'}</span>
          {/* Arrow Icon - only show when not navigating */}
          {!isNavigating && (
            <svg
              width="15"
              height="9"
              viewBox="0 0 15 9"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              style={{ transform: 'rotate(-90deg)' }}
              aria-hidden="true"
            >
              <path
                d="M1 1L7.5 7.5L14 1"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          )}
        </button>
      </div>
    </div>
  );
}