import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import api from '../utils/api';
import { Card } from '../components/ui/card';
import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input';
import { Label } from '../components/ui/label';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '../components/ui/dialog';
import Navbar from '../components/Navbar';
import { CheckCircle, CreditCard, Loader2, Heart } from 'lucide-react';
import { toast } from 'sonner';

const Plans = () => {
  const { user } = useAuth();
  const navigate = useNavigate();
  const [plans, setPlans] = useState([]);
  const [loading, setLoading] = useState(true);
  const [processingPlanId, setProcessingPlanId] = useState(null);

  // Amount selection dialog state
  const [amountDialogOpen, setAmountDialogOpen] = useState(false);
  const [selectedPlan, setSelectedPlan] = useState(null);
  const [amountInput, setAmountInput] = useState('');

  useEffect(() => {
    fetchPlans();
  }, []);

  const fetchPlans = async () => {
    try {
      const response = await api.get('/subscriptions/plans');
      setPlans(response.data);
    } catch (error) {
      console.error('Failed to fetch plans:', error);
      toast.error('Failed to load subscription plans');
    } finally {
      setLoading(false);
    }
  };

  const handleSelectPlan = (plan) => {
    if (!user) {
      navigate('/login');
      return;
    }

    setSelectedPlan(plan);
    // Pre-fill with suggested price or minimum price
    const suggestedAmount = (plan.suggested_price_cents || plan.minimum_price_cents) / 100;
    setAmountInput(suggestedAmount.toFixed(2));
    setAmountDialogOpen(true);
  };

  const handleCheckout = async () => {
    const amountCents = Math.round(parseFloat(amountInput) * 100);
    const minimumCents = selectedPlan.minimum_price_cents || 3000;

    // Validate amount
    if (!amountInput || isNaN(amountCents) || amountCents < minimumCents) {
      toast.error(`Amount must be at least $${(minimumCents / 100).toFixed(2)}`);
      return;
    }

    // Check if plan allows donations
    const donationCents = amountCents - minimumCents;
    if (donationCents > 0 && !selectedPlan.allow_donation) {
      toast.error('This plan does not accept donations above the minimum price');
      return;
    }

    setProcessingPlanId(selectedPlan.id);
    setAmountDialogOpen(false);

    try {
      const response = await api.post('/subscriptions/checkout', {
        plan_id: selectedPlan.id,
        amount_cents: amountCents
      });

      // Redirect to Stripe Checkout
      window.location.href = response.data.checkout_url;
    } catch (error) {
      console.error('Failed to create checkout session:', error);
      toast.error(error.response?.data?.detail || 'Failed to start checkout process');
      setProcessingPlanId(null);
    }
  };

  const formatPrice = (cents) => {
    return `$${(cents / 100).toFixed(2)}`;
  };

  const getBillingCycleLabel = (billingCycle) => {
    const labels = {
      yearly: 'per year',
      monthly: 'per month',
      quarterly: 'per quarter',
      lifetime: 'one-time',
      custom: 'custom period'
    };
    return labels[billingCycle] || billingCycle;
  };

  // Calculate donation breakdown
  const getAmountBreakdown = () => {
    if (!selectedPlan || !amountInput) return null;

    const totalCents = Math.round(parseFloat(amountInput) * 100);
    const minimumCents = selectedPlan.minimum_price_cents || 3000;
    const donationCents = Math.max(0, totalCents - minimumCents);

    return {
      total: totalCents,
      base: minimumCents,
      donation: donationCents
    };
  };

  const breakdown = getAmountBreakdown();

  return (
    <div className="min-h-screen bg-white">
      <Navbar />

      <div className="max-w-7xl mx-auto px-6 py-12">
        {/* Header */}
        <div className="mb-12 text-center">
          <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
            Membership Plans
          </h1>
          <p className="text-lg text-[#664fa3] max-w-2xl mx-auto" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            Choose the membership plan that works best for you and become part of our vibrant community.
          </p>
        </div>

        {loading ? (
          <div className="text-center py-20">
            <Loader2 className="h-12 w-12 text-[#664fa3] mx-auto mb-4 animate-spin" />
            <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
          </div>
        ) : plans.length > 0 ? (
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
            {plans.map((plan) => {
              const minimumPrice = plan.minimum_price_cents || plan.price_cents || 3000;
              const suggestedPrice = plan.suggested_price_cents || minimumPrice;

              return (
                <Card
                  key={plan.id}
                  className="p-8 bg-white rounded-2xl border-2 border-[#ddd8eb] hover:border-[#664fa3] hover:shadow-xl transition-all"
                  data-testid={`plan-card-${plan.id}`}
                >
                  {/* Plan Header */}
                  <div className="text-center mb-6">
                    <div className="bg-[#DDD8EB]/20 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
                      <CreditCard className="h-8 w-8 text-[#664fa3]" />
                    </div>
                    <h2 className="text-2xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                      {plan.name}
                    </h2>
                    {plan.description && (
                      <p className="text-sm text-[#664fa3] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                        {plan.description}
                      </p>
                    )}
                  </div>

                  {/* Pricing */}
                  <div className="text-center mb-8">
                    <div className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                      Starting at
                    </div>
                    <div className="text-4xl font-bold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                      {formatPrice(minimumPrice)}
                    </div>
                    {suggestedPrice > minimumPrice && (
                      <div className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                        Suggested: {formatPrice(suggestedPrice)}
                      </div>
                    )}
                    <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                      {getBillingCycleLabel(plan.billing_cycle)}
                    </p>
                    {plan.allow_donation && (
                      <div className="mt-2 flex items-center justify-center gap-1 text-xs text-[#ff9e77]">
                        <Heart className="h-3 w-3" />
                        <span>Donations welcome</span>
                      </div>
                    )}
                  </div>

                  {/* Features */}
                  <div className="space-y-3 mb-8">
                    <div className="flex items-start gap-3">
                      <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
                      <span className="text-sm text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Access to all member events</span>
                    </div>
                    <div className="flex items-start gap-3">
                      <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
                      <span className="text-sm text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Community directory access</span>
                    </div>
                    <div className="flex items-start gap-3">
                      <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
                      <span className="text-sm text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Exclusive member benefits</span>
                    </div>
                    <div className="flex items-start gap-3">
                      <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
                      <span className="text-sm text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Newsletter subscription</span>
                    </div>
                  </div>

                  {/* CTA Button */}
                  <Button
                    onClick={() => handleSelectPlan(plan)}
                    disabled={processingPlanId === plan.id}
                    className="w-full bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full py-6 text-lg font-semibold"
                    data-testid={`subscribe-button-${plan.id}`}
                  >
                    {processingPlanId === plan.id ? (
                      <>
                        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
                        Processing...
                      </>
                    ) : (
                      'Choose Amount & Subscribe'
                    )}
                  </Button>
                </Card>
              );
            })}
          </div>
        ) : (
          <div className="text-center py-20">
            <CreditCard className="h-20 w-20 text-[#ddd8eb] mx-auto mb-6" />
            <h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
              No Plans Available
            </h3>
            <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              Membership plans are not currently available. Please check back later!
            </p>
          </div>
        )}

        {/* Info Section */}
        <div className="mt-16 max-w-3xl mx-auto">
          <Card className="p-8 bg-gradient-to-br from-[#DDD8EB]/20 to-[#f1eef9]/20 rounded-2xl border border-[#ddd8eb]">
            <h3 className="text-xl font-semibold text-[#422268] mb-4 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
              Need Help Choosing?
            </h3>
            <p className="text-[#664fa3] text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              If you have any questions about our membership plans or need assistance, please contact us.
            </p>
            <div className="text-center">
              <a
                href="mailto:support@loaf.org"
                className="text-[#ff9e77] hover:text-[#664fa3] font-medium"
              >
                support@loaf.org
              </a>
            </div>
          </Card>
        </div>
      </div>

      {/* Amount Selection Dialog */}
      <Dialog open={amountDialogOpen} onOpenChange={setAmountDialogOpen}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle className="text-2xl text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
              Choose Your Amount
            </DialogTitle>
            <DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              {selectedPlan?.name} - {getBillingCycleLabel(selectedPlan?.billing_cycle)}
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-6">
            {/* Amount Input */}
            <div>
              <Label htmlFor="amount" className="text-[#422268]">
                Amount (USD) *
              </Label>
              <div className="relative mt-2">
                <span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-[#664fa3] text-lg font-semibold">
                  $
                </span>
                <Input
                  id="amount"
                  type="number"
                  step="0.01"
                  min={selectedPlan ? (selectedPlan.minimum_price_cents / 100).toFixed(2) : "30.00"}
                  value={amountInput}
                  onChange={(e) => setAmountInput(e.target.value)}
                  className="pl-8 h-14 text-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
                  placeholder="50.00"
                />
              </div>
              <p className="text-sm text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                Minimum: {selectedPlan ? formatPrice(selectedPlan.minimum_price_cents || 3000) : '$30.00'}
              </p>
            </div>

            {/* Breakdown Display */}
            {breakdown && breakdown.total >= breakdown.base && (
              <Card className="p-4 bg-[#f9f5ff] border border-[#DDD8EB]">
                <div className="space-y-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                  <div className="flex justify-between text-[#422268]">
                    <span>Membership Fee:</span>
                    <span className="font-semibold">{formatPrice(breakdown.base)}</span>
                  </div>
                  {breakdown.donation > 0 && (
                    <div className="flex justify-between text-[#ff9e77]">
                      <span className="flex items-center gap-1">
                        <Heart className="h-4 w-4" />
                        Additional Donation:
                      </span>
                      <span className="font-semibold">{formatPrice(breakdown.donation)}</span>
                    </div>
                  )}
                  <div className="flex justify-between text-[#422268] font-bold text-base pt-2 border-t border-[#DDD8EB]">
                    <span>Total:</span>
                    <span>{formatPrice(breakdown.total)}</span>
                  </div>
                </div>
              </Card>
            )}

            {/* Donation Message */}
            {selectedPlan?.allow_donation && (
              <div className="bg-[#DDD8EB]/20 rounded-lg p-4">
                <p className="text-sm text-[#422268] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                  <strong>Thank you for supporting our community!</strong><br />
                  Your donation helps us continue our mission and provide meaningful experiences for all members.
                </p>
              </div>
            )}
          </div>

          <DialogFooter>
            <Button
              type="button"
              variant="outline"
              onClick={() => setAmountDialogOpen(false)}
              className="flex-1"
            >
              Cancel
            </Button>
            <Button
              type="button"
              onClick={handleCheckout}
              className="flex-1 bg-[#DDD8EB] text-[#422268] hover:bg-white"
            >
              Continue to Checkout
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default Plans;