"use client";

import { useEffect, useState } from 'react';
import type { Lang } from '@/lib/config';
import type { BillingPeriod, Currency, TierId } from '@/lib/types/pricing';
import { PRICING_TIERS } from '@/lib/config/pricing-tiers';
import type { DashboardSubscriptionDetails } from '../types';

const tierOrder: TierId[] = ['tier1', 'tier2', 'tier3', 'tier4', 'tier5'];

interface PlanUpgradeModalProps {
  lang: Lang;
  isOpen: boolean;
  onClose: () => void;
  subscriptionData: DashboardSubscriptionDetails | null;
  currency: Currency;
  initialTier?: TierId;
  billingPeriod: BillingPeriod;
  onSuccess?: () => void;
}

interface PreviewResponse {
  amountDue: number;
  currency: string | null;
  nextPaymentAttempt: number | null;
  periodEnd: number;
  lineItems: Array<{
    id: string;
    description: string | null;
    amount: number;
    proration: boolean;
    period: { start: number; end: number };
  }>;
}

export function PlanUpgradeModal({
  lang,
  isOpen,
  onClose,
  subscriptionData,
  currency,
  initialTier,
  billingPeriod,
  onSuccess,
}: PlanUpgradeModalProps) {
  const [selectedTier, setSelectedTier] = useState<TierId | null>(initialTier ?? null);
  const [preview, setPreview] = useState<PreviewResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);
  const [successMessage, setSuccessMessage] = useState<string | null>(null);
  const isAr = lang === 'ar';
  const currentTier = subscriptionData?.subscription.tierId as TierId | undefined;
  const currentIndex = currentTier ? tierOrder.indexOf(currentTier) : -1;

  // Determine if this is an upgrade or downgrade based on initial tier
  const isDowngrade = initialTier && currentTier
    ? tierOrder.indexOf(initialTier) < tierOrder.indexOf(currentTier)
    : false;

  // Filter tier options based on upgrade/downgrade
  const tierOptions = PRICING_TIERS.filter((tier) => {
    const tierIndex = tierOrder.indexOf(tier.id as TierId);
    return isDowngrade ? tierIndex < currentIndex : tierIndex > currentIndex;
  });
  const defaultTier = tierOptions[0]?.id as TierId | undefined;

  // Helper function for formatting amounts
  const formatAmount = (amount: number) => {
    const value = (amount || 0) / 100;
    return `${value.toFixed(2)} ${currency}`;
  };

  // Handler for confirming upgrade/downgrade
  const handleConfirm = async () => {
    if (!selectedTier || !subscriptionData) {
      return;
    }
    setSubmitting(true);
    setError(null);
    setSuccessMessage(null);
    try {
      const response = await fetch('/api/subscription/upgrade', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          subscriptionId: subscriptionData.subscription.id,
          newTierId: selectedTier,
          billingPeriod,
          currency: currency.toLowerCase(),
        }),
      });

      const data = await response.json();
      if (!response.ok) {
        throw new Error(data.error || 'Upgrade failed');
      }

      setSuccessMessage(
        isDowngrade
          ? (isAr ? 'تم تخفيض الخطة بنجاح. سيتم تطبيق الرصيد على فاتورتك القادمة.' : 'Plan downgraded successfully. Credit will apply to next invoice.')
          : (isAr ? 'تم إرسال طلب الترقية وسيتم تطبيقه فوراً.' : 'Upgrade submitted successfully.')
      );
      onSuccess?.();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Upgrade failed');
    } finally {
      setSubmitting(false);
    }
  };

  useEffect(() => {
    if (isOpen) {
      setSelectedTier(initialTier ?? null);
      setPreview(null);
      setSuccessMessage(null);
      setError(null);
    }
  }, [isOpen, initialTier]);

  useEffect(() => {
    if (isOpen && !initialTier && defaultTier) {
      setSelectedTier(defaultTier);
    }
  }, [isOpen, initialTier, defaultTier]);

  useEffect(() => {
    if (!isOpen || !selectedTier || !subscriptionData) {
      return;
    }

    async function loadPreview() {
      setLoading(true);
      setError(null);
      try {
        const params = new URLSearchParams({
          subscriptionId: subscriptionData.subscription.id,
          newTierId: selectedTier,
          billingPeriod,
          currency: currency.toLowerCase(),
        });
        const response = await fetch(`/api/subscription/upgrade/preview?${params.toString()}`);
        if (!response.ok) {
          const data = await response.json();
          throw new Error(data.error || 'Preview failed');
        }
        const data = await response.json();
        setPreview(data);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Preview failed');
      } finally {
        setLoading(false);
      }
    }

    loadPreview();
  }, [isOpen, selectedTier, subscriptionData, currency, billingPeriod]);

  if (!isOpen) {
    return null;
  }


  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 px-4">
      <div className="w-full max-w-2xl rounded-2xl bg-white p-6 shadow-2xl">
        <div className="mb-4 flex items-start justify-between">
          <div>
            <h3 className="text-xl font-semibold text-slate-900">
              {isDowngrade
                ? (isAr ? 'تخفيض الخطة' : 'Downgrade your plan')
                : (isAr ? 'ترقية الخطة' : 'Upgrade your plan')}
            </h3>
            <p className="text-sm text-slate-500">
              {isDowngrade
                ? (isAr
                    ? 'سيتم تطبيق الرصيد المتبقي على فاتورتك القادمة. لن تفقد المميزات حتى نهاية الدورة.'
                    : 'Credit will be applied to your next invoice. You\'ll keep features until end of cycle.')
                : (isAr
                    ? 'اختر باقة أعلى لفتح مزايا إضافية. سنعرض تكلفة اليوم قبل التأكيد.'
                    : 'Pick a higher tier to unlock more features. We will show today\'s cost before confirming.')}
            </p>
          </div>
          <button
            onClick={onClose}
            className="rounded-full bg-slate-100 px-3 py-1 text-sm text-slate-600 hover:bg-slate-200"
          >
            ✕
          </button>
        </div>

        {tierOptions.length === 0 ? (
          <div className="mb-4 rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm text-slate-600">
            {isDowngrade
              ? (isAr
                  ? 'أنت بالفعل على أدنى باقة. لا توجد خيارات تخفيض متاحة.'
                  : 'You are already on the lowest tier. No downgrade options available.')
              : (isAr
                  ? 'أنت بالفعل على أعلى باقة. تواصل مع فريق الدعم لحلول مخصصة.'
                  : 'You are already on the highest tier. Contact support for bespoke options.')}
          </div>
        ) : (
          <div className="mb-4 grid gap-3 sm:grid-cols-2">
            {tierOptions.map((tier) => (
              <button
                key={tier.id}
                onClick={() => setSelectedTier(tier.id as TierId)}
                className={`rounded-xl border px-4 py-3 text-left ${
                  selectedTier === tier.id
                    ? 'border-brand-green bg-emerald-50'
                    : 'border-slate-200 bg-slate-50'
                }`}
              >
                <p className="text-xs uppercase text-slate-500">{isAr ? 'الباقة' : 'Plan'}</p>
                <p className="text-lg font-semibold text-slate-900">
                  {isAr ? tier.nameAr : tier.nameEn}
                </p>
                <p className="text-xs text-slate-500">
                  {isAr ? 'يشمل:' : 'Includes:'} {(isAr ? tier.featuresAr : tier.featuresEn)[0]}
                </p>
              </button>
            ))}
          </div>
        )}

        <div className="rounded-2xl border border-slate-100 bg-slate-50 p-4">
          <p className="text-sm font-semibold text-slate-900">
            {isAr ? 'تفاصيل الفاتورة القادمة' : 'Upcoming billing preview'}
          </p>
          {loading && <p className="mt-2 text-xs text-slate-500">{isAr ? 'جاري الحساب...' : 'Calculating...'}</p>}
          {error && <p className="mt-2 text-xs text-rose-600">{error}</p>}
          {preview && !loading && (
            <div className="mt-3 space-y-2 text-sm text-slate-600">
              <div className="flex items-center justify-between">
                <span>{isAr ? 'مستحق اليوم' : 'Due today'}</span>
                <span className="text-base font-semibold text-slate-900">
                  {formatAmount(preview.amountDue)}
                </span>
              </div>
              <div className="text-xs text-slate-500">
                {isAr ? 'يشمل فرق السعر مع الرصيد المتبقي من خطتك الحالية.' : 'Includes prorated difference from your current plan.'}
              </div>
              <div>
                <p className="text-xs font-semibold text-slate-500">
                  {isAr ? 'تفاصيل بنود الفاتورة' : 'Invoice breakdown'}
                </p>
                <ul className="mt-2 space-y-1 text-xs">
                  {preview.lineItems.map((item) => (
                    <li key={item.id} className="flex items-center justify-between">
                      <span>
                        {item.description}{' '}
                        {item.proration && <span className="text-slate-400">({isAr ? 'نسبي' : 'proration'})</span>}
                      </span>
                      <span>{formatAmount(item.amount)}</span>
                    </li>
                  ))}
                </ul>
              </div>
              <div className="text-xs text-slate-500">
                {isAr ? 'سيتكرر السحب التالي في ' : 'Next renewal will be on '}
                {new Date(preview.periodEnd * 1000).toLocaleDateString(isAr ? 'ar-SA' : 'en-US', {
                  month: 'short',
                  day: 'numeric',
                  year: 'numeric',
                })}
              </div>
            </div>
          )}
        </div>

        {successMessage && (
          <div className="mt-3 rounded-lg bg-emerald-50 px-4 py-2 text-sm text-emerald-700">
            {successMessage}
          </div>
        )}

        <div className="mt-4 flex flex-wrap justify-end gap-3">
          <button
            onClick={onClose}
            className="rounded-lg border border-slate-200 px-4 py-2 text-sm text-slate-600 hover:border-slate-300"
          >
            {isAr ? 'إلغاء' : 'Cancel'}
          </button>
          <button
            onClick={handleConfirm}
            disabled={!selectedTier || submitting || loading}
            className={`rounded-lg px-5 py-2 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:bg-slate-300 ${
              isDowngrade ? 'bg-slate-600 hover:bg-slate-700' : 'bg-brand-green hover:bg-brand-greenHover'
            }`}
          >
            {submitting
              ? (isDowngrade
                  ? (isAr ? 'جاري التخفيض...' : 'Processing downgrade...')
                  : (isAr ? 'جاري الترقية...' : 'Upgrading...'))
              : (isDowngrade
                  ? (isAr ? 'تأكيد التخفيض' : 'Confirm downgrade')
                  : (isAr ? 'تأكيد الترقية' : 'Confirm upgrade'))}
          </button>
        </div>
      </div>
    </div>
  );
}