// components/subscription/SidegradeToggle.tsx
'use client';

import { useState } from 'react';
import {
  PLAN_DISPLAY_NAMES,
  PLAN_PRICES,
  TierName,
  BillingInterval,
  canSidegrade,
  getAnnualSavingsPercent,
} from '@/lib/plan-features';
import styles from './SidegradeToggle.module.css';

interface SidegradeToggleProps {
  currentTier: TierName;
  currentBillingInterval: BillingInterval;
  onSidegrade: (newInterval: BillingInterval) => Promise<void>;
}

/**
 * Toggle for switching between monthly and annual billing.
 * Shows price comparison and savings percentage.
 */
export function SidegradeToggle({
  currentTier,
  currentBillingInterval,
  onSidegrade,
}: SidegradeToggleProps) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [showConfirm, setShowConfirm] = useState(false);
  const [targetInterval, setTargetInterval] = useState<BillingInterval | null>(null);

  // Don't render if tier doesn't support sidegrading
  if (!canSidegrade(currentTier)) {
    return null;
  }

  const pricing = PLAN_PRICES[currentTier];
  const savingsPercent = getAnnualSavingsPercent(currentTier);
  const otherInterval: BillingInterval =
    currentBillingInterval === 'monthly' ? 'annual' : 'monthly';

  const handleToggleClick = () => {
    setTargetInterval(otherInterval);
    setShowConfirm(true);
    setError(null);
  };

  const handleConfirm = async () => {
    if (!targetInterval) return;

    setIsSubmitting(true);
    setError(null);

    try {
      await onSidegrade(targetInterval);
      setShowConfirm(false);
      // Parent component should handle success (e.g., page reload)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to change billing interval');
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleCancel = () => {
    setShowConfirm(false);
    setTargetInterval(null);
    setError(null);
  };

  const formatPrice = (interval: BillingInterval): string => {
    if (interval === 'monthly') {
      return `$${pricing.monthly}/mo`;
    }
    return `$${pricing.annual}/yr`;
  };

  const formatMonthlyEquivalent = (): string => {
    return `$${pricing.annualMonthly}/mo`;
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <h4 className={styles.title}>Billing Interval</h4>
        <p className={styles.subtitle}>
          Currently on <strong>{currentBillingInterval}</strong> billing
        </p>
      </div>

      <div className={styles.options}>
        <button
          type="button"
          className={`${styles.option} ${currentBillingInterval === 'monthly' ? styles.optionActive : ''}`}
          onClick={currentBillingInterval === 'annual' ? handleToggleClick : undefined}
          disabled={currentBillingInterval === 'monthly' || isSubmitting}
        >
          <span className={styles.optionLabel}>Monthly</span>
          <span className={styles.optionPrice}>{formatPrice('monthly')}</span>
          {currentBillingInterval === 'monthly' && (
            <span className={styles.currentBadge}>Current</span>
          )}
        </button>

        <button
          type="button"
          className={`${styles.option} ${currentBillingInterval === 'annual' ? styles.optionActive : ''}`}
          onClick={currentBillingInterval === 'monthly' ? handleToggleClick : undefined}
          disabled={currentBillingInterval === 'annual' || isSubmitting}
        >
          <span className={styles.optionLabel}>Annual</span>
          <span className={styles.optionPrice}>{formatPrice('annual')}</span>
          <span className={styles.optionMonthly}>{formatMonthlyEquivalent()} equivalent</span>
          {savingsPercent > 0 && (
            <span className={styles.savingsBadge}>Save {savingsPercent}%</span>
          )}
          {currentBillingInterval === 'annual' && (
            <span className={styles.currentBadge}>Current</span>
          )}
        </button>
      </div>

      {/* Confirmation Modal */}
      {showConfirm && targetInterval && (
        <div className={styles.overlay} onClick={handleCancel}>
          <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
            <h3 className={styles.modalTitle}>Change Billing Interval</h3>
            <p className={styles.modalText}>
              You are switching from <strong>{currentBillingInterval}</strong> to{' '}
              <strong>{targetInterval}</strong> billing for your{' '}
              <strong>{PLAN_DISPLAY_NAMES[currentTier]}</strong> plan.
            </p>

            <div className={styles.priceComparison}>
              <div className={styles.priceItem}>
                <span className={styles.priceLabel}>Current</span>
                <span className={styles.priceValue}>{formatPrice(currentBillingInterval)}</span>
              </div>
              <div className={styles.priceArrow}>→</div>
              <div className={styles.priceItem}>
                <span className={styles.priceLabel}>New</span>
                <span className={styles.priceValue}>{formatPrice(targetInterval)}</span>
              </div>
            </div>

            {targetInterval === 'annual' && savingsPercent > 0 && (
              <p className={styles.savingsNote}>
                You&apos;ll save {savingsPercent}% compared to monthly billing!
              </p>
            )}

            <p className={styles.prorationNotice}>
              {targetInterval === 'annual'
                ? 'You will be charged the full annual amount, minus credit for your current monthly period.'
                : 'You will receive credit for your unused annual time. Monthly billing starts immediately.'}
            </p>

            {error && <div className={styles.error}>{error}</div>}

            <div className={styles.actions}>
              <button
                className={styles.cancelButton}
                onClick={handleCancel}
                disabled={isSubmitting}
              >
                Cancel
              </button>
              <button
                className={styles.confirmButton}
                onClick={handleConfirm}
                disabled={isSubmitting}
              >
                {isSubmitting ? (
                  <span className={styles.loading}>
                    <span className={styles.spinner} />
                    Processing...
                  </span>
                ) : (
                  `Switch to ${targetInterval}`
                )}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default SidegradeToggle;