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-[#F9FAFB] to-[#DDD8EB] 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-[#48286e] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
              Donate
            </h1>
            <p className="text-xl text-[#48286e] 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 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-white rounded-3xl w-full h-full content-center">
                <div className="flex items-center gap-4 mb-6">
                  <CreditCard className="size-24 text-[#664fa3]" />
                  <h2 className="text-3xl font-bold text-[#48286e]" 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-[#664fa3] hover:bg-[#48286e] 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-[#664fa3] hover:bg-[#48286e] 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-[#664fa3] 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-white rounded-3xl flex gap-4 items-center flex-1">
                  <Mail className="size-24 text-[#664fa3]" />

                  <div>
                    <h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                      Mail a Check
                    </h3>
                    <p className="text-lg text-[#48286e] 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-white 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-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                      Pay with Zelle
                    </h3>
                    <p className="text-lg text-[#48286e] 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-[#664fa3] text-lg font-bold underline hover:text-[#48286e] 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-white rounded-3xl">
          <DialogHeader>
            <DialogTitle className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
              Enter Donation Amount
            </DialogTitle>
            <DialogDescription className="text-[#664fa3]" 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-[#422268] 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-[#664fa3] 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-[#ddd8eb] focus:border-[#664fa3] rounded-xl"
                  onKeyPress={(e) => {
                    if (e.key === 'Enter') {
                      handleCustomDonate();
                    }
                  }}
                />
              </div>
              <p className="text-sm text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                Minimum donation: $1.00
              </p>
            </div>

            <div className="bg-[#f1eef9] rounded-lg p-4">
              <p className="text-sm text-[#422268] 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-[#ddd8eb]"
            >
              Cancel
            </Button>
            <Button
              type="button"
              onClick={handleCustomDonate}
              className="bg-[#664fa3] text-white hover:bg-[#48286e] rounded-full"
            >
              Continue to Payment
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default Donate;