import React, { useState } from 'react';
import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter';
import { Button } from '../components/ui/button';
import { Card } from '../components/ui/card';
import { Input } from '../components/ui/input';
import { Label } from '../components/ui/label';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '../components/ui/dialog';
import { CreditCard, Mail, Heart, Loader2 } from 'lucide-react';
import api from '../utils/api';
import { toast } from 'sonner';

const Donate = () => {
  const loafHearts = `${process.env.PUBLIC_URL}/loaf-hearts.png`;
  const zelleLogo = `${process.env.PUBLIC_URL}/zelle-logo.png`;

  const [customAmountDialogOpen, setCustomAmountDialogOpen] = useState(false);
  const [customAmount, setCustomAmount] = useState('');
  const [processingAmount, setProcessingAmount] = useState(null);

  const handleDonateAmount = async (amountCents) => {
    setProcessingAmount(amountCents);
    try {
      const response = await api.post('/donations/checkout', {
        amount_cents: amountCents
      });

      // Redirect to Stripe Checkout
      window.location.href = response.data.checkout_url;
    } catch (error) {
      console.error('Failed to process donation:', error);
      toast.error(error.response?.data?.detail || 'Failed to process donation. Please try again.');
      setProcessingAmount(null);
    }
  };

  const handleCustomDonate = () => {
    const amount = parseFloat(customAmount);

    if (!customAmount || isNaN(amount) || amount < 1) {
      toast.error('Please enter a valid amount (minimum $1.00)');
      return;
    }

    const amountCents = Math.round(amount * 100);
    setCustomAmountDialogOpen(false);
    handleDonateAmount(amountCents);
  };

  return (
    <div className="min-h-screen">
      <PublicNavbar />

      <main className="bg-gradient-to-bl from-[var(--neutral-100)] to-[var(--neutral-800)] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-10 md:py-12">
        {/* Hero Section */}
        <section className="py-12">
          <div className="max-w-4xl mx-auto text-center h-full">
            <div className="flex justify-center mb-4">
              <img src={loafHearts} alt="Hearts" className="w-32 h-auto" onError={(e) => e.target.style.display = 'none'} />
            </div>
            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[var(--purple-deep)] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
              Donate
            </h1>
            <p className="text-xl text-[var(--purple-deep)] font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>
              We really appreciate your donations. You can make your donation online
              or send a check by mail.
            </p>
          </div>
        </section>

        {/* Columns */}
        <div className="py-12">
          <div className='grid grid-cols-1 items-stretch lg:grid-cols-[2fr_1fr] gap-8 lg:max-h-[450px]'>

            {/* Donation Amount Buttons */}
            <section className="flex flex-col h-full">
              <div className="mx-auto flex-1 w-full h-full">
                <Card className="p-8 bg-background rounded-3xl w-full h-full content-center">
                  <div className="flex items-center gap-4 mb-6">
                    <CreditCard className="size-24 text-[var(--purple-lavender)]" />
                    <h2 className="text-3xl font-bold text-[var(--purple-deep)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                      Select Your Donation Amount
                    </h2>
                  </div>

                  {/* Donation Buttons Grid */}
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                    {[25, 50, 100, 250].map(amount => (
                      <Button
                        key={amount}
                        onClick={() => handleDonateAmount(amount * 100)}
                        disabled={processingAmount === amount * 100}
                        className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-deep)] text-white text-xl py-8 rounded-full disabled:opacity-50"
                      >
                        {processingAmount === amount * 100 ? (
                          <Loader2 className="h-6 w-6 animate-spin" />
                        ) : (
                          `$${amount}`
                        )}
                      </Button>
                    ))}
                  </div>

                  {/* Custom Amount Button */}
                  <Button
                    onClick={() => setCustomAmountDialogOpen(true)}
                    disabled={processingAmount !== null}
                    className="w-full bg-[var(--purple-lavender)] hover:bg-[var(--purple-deep)] text-white text-xl py-8 rounded-full flex items-center justify-center gap-2"
                  >
                    <Heart className="h-6 w-6" />
                    Donate Any Amount
                  </Button>

                  <p className="text-sm text-[var(--purple-lavender)] text-center mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    Secure donation processing powered by Stripe
                  </p>
                </Card>
              </div>
            </section>

            {/* Alternative Payment Methods */}
            <section className="flex flex-col">
              <div className="max-w-6xl mx-auto w-full">
                <div className="flex flex-col gap-8 w-full">
                  {/* Mail Check */}
                  <Card className="p-8 bg-background rounded-3xl flex gap-4 items-center flex-1">
                    <Mail className="size-24 text-[var(--purple-lavender)]" />

                    <div>
                      <h3 className="text-2xl font-bold text-[var(--purple-deep)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                        Mail a Check
                      </h3>
                      <p className="text-lg text-[var(--purple-deep)] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                        Our mailing address for checks:<br />
                        <span className="font-semibold">LOAF</span><br />
                        P.O. Box 7207<br />
                        Houston, Texas 77248-7207
                      </p>
                    </div>
                  </Card>

                  {/* Zelle */}
                  <Card className="p-8 bg-background rounded-3xl flex gap-4 items-center flex-1">
                    <div className="w-44">
                      <img src={zelleLogo} alt="Zelle" className=" w-32" onError={(e) => e.target.style.display = 'none'} />
                    </div>

                    <div>
                      <h3 className="text-2xl font-bold text-[var(--purple-deep)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                        Pay with Zelle
                      </h3>
                      <p className="text-lg text-[var(--purple-deep)] leading-relaxed mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                        If your bank allows the use of Zelle, please feel free to send money to:
                      </p>
                      <a href="mailto:LOAFHoustonTX@gmail.com"
                        className="text-[var(--purple-lavender)] text-lg font-bold underline hover:text-[var(--purple-deep)] transition-colors"
                        style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                        LOAFHoustonTX@gmail.com
                      </a>
                    </div>
                  </Card>
                </div>
              </div>
            </section>

          </div>
        </div>
        {/* Columns end */}
      </main>

      <PublicFooter />

      {/* Custom Amount Dialog */}
      <Dialog open={customAmountDialogOpen} onOpenChange={setCustomAmountDialogOpen}>
        <DialogContent className="sm:max-w-[450px] bg-background rounded-3xl">
          <DialogHeader>
            <DialogTitle className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
              Enter Donation Amount
            </DialogTitle>
            <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              Choose how much you'd like to donate to support our community
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4 py-4">
            <div>
              <Label htmlFor="customAmount" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
                Amount (USD)
              </Label>
              <div className="relative mt-2">
                <span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-[var(--purple-lavender)] text-xl font-semibold">
                  $
                </span>
                <Input
                  id="customAmount"
                  type="number"
                  step="0.01"
                  min="1.00"
                  value={customAmount}
                  onChange={(e) => setCustomAmount(e.target.value)}
                  placeholder="50.00"
                  className="pl-10 h-14 text-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)] rounded-xl"
                  onKeyPress={(e) => {
                    if (e.key === 'Enter') {
                      handleCustomDonate();
                    }
                  }}
                />
              </div>
              <p className="text-sm text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                Minimum donation: $1.00
              </p>
            </div>

            <div className="bg-[var(--lavender-300)] rounded-lg p-4">
              <p className="text-sm text-[var(--purple-ink)] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                <strong>Thank you for supporting LOAF!</strong><br />
                Your donation helps us continue our mission and provide meaningful experiences for our community.
              </p>
            </div>
          </div>

          <DialogFooter className="gap-2">
            <Button
              type="button"
              variant="outline"
              onClick={() => setCustomAmountDialogOpen(false)}
              className="rounded-full border-2 border-[var(--neutral-800)]"
            >
              Cancel
            </Button>
            <Button
              type="button"
              onClick={handleCustomDonate}
              className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-deep)] rounded-full"
            >
              Continue to Payment
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default Donate;
