"use client";

import { useState, Suspense } from "react";
import { Heart, Users, GraduationCap, Building, CreditCard, CheckCircle } from "lucide-react";
import HeroSection from "@/components/ui/hero-section";

function DonationsContent() {
  const [lang] = useState("ar");
  const isArabic = lang === "ar";
  const dir = isArabic ? "rtl" : "ltr";

  const [selectedAmount, setSelectedAmount] = useState<number | null>(50);
  const [customAmount, setCustomAmount] = useState("");
  const [donorName, setDonorName] = useState("");
  const [donorEmail, setDonorEmail] = useState("");
  const [donorPhone, setDonorPhone] = useState("");
  const [anonymous, setAnonymous] = useState(false);

  const presetAmounts = [10, 25, 50, 100];

  const stats = [
    { icon: Users, value: "1,250+", label: isArabic ? "تبرع مستمر" : "Recurring Donors" },
    { icon: Heart, value: "$50K+", label: isArabic ? "إجمالي التبرعات" : "Total Donations" },
    { icon: GraduationCap, value: "100+", label: isArabic ? "طالب مستفيد" : "Students Benefited" },
    { icon: Building, value: "10+", label: isArabic ? "مشروع ممول" : "Funded Projects" },
  ];

  const impactItems = [
    { amount: "$10", desc: isArabic ? "يغطي تكاليف كتب دراسية لطالب واحد" : "Covers textbook costs for one student" },
    { amount: "$25", desc: isArabic ? "يساهم في تدريب طالب لمدة شهر" : "Contributes to training a student for one month" },
    { amount: "$50", desc: isArabic ? "يمكن طالباً من حضور ورشة عمل" : "Enables a student to attend a workshop" },
    { amount: "$100", desc: isArabic ? "يوفر منحة دراسية جزئية لطالب محتاج" : "Provides a partial scholarship for a needy student" },
  ];

  const handleAmountSelect = (amount: number) => {
    setSelectedAmount(amount);
    setCustomAmount("");
  };

  const handleCustomAmount = (value: string) => {
    setCustomAmount(value);
    setSelectedAmount(null);
  };

  return (
    <div dir={dir}>
      <HeroSection
        pageSlug="donations"
        lang={lang}
        defaultTitle={isArabic ? "تبرعاتنا" : "Our Donations"}
        defaultSubtitle={isArabic ? "تبرعك يُحدث فرقاً — ساهم في دعم التعليم والتنمية للخريجين والطلاب" : "Your donation makes a difference — Support education and development"}
        gradient="from-secondary via-secondary-light to-secondary"
      >
        <div className="max-w-3xl mx-auto text-center">
          <Heart className="w-16 h-16 text-white mx-auto mb-6" />
          <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
            {isArabic ? "تبرعاتنا" : "Our Donations"}
          </h1>
          <p className="text-xl text-white/80 max-w-2xl mx-auto">
            {isArabic ? "تبرعك يُحدث فرقاً — ساهم في دعم التعليم والتنمية للخريجين والطلاب" : "Your donation makes a difference — Support education and development"}
          </p>
        </div>
      </HeroSection>

      {/* Stats */}
      <section className="py-16 bg-background">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {stats.map((stat, i) => (
              <div key={i} className="text-center p-6 bg-surface rounded-2xl shadow-sm">
                <div className="w-16 h-16 mx-auto mb-4 bg-secondary/10 rounded-full flex items-center justify-center">
                  <stat.icon className="w-8 h-8 text-secondary" />
                </div>
                <div className="text-3xl font-bold text-secondary mb-2">{stat.value}</div>
                <div className="text-text-secondary text-sm">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Donation Form */}
      <section className="py-20 bg-surface">
        <div className="container mx-auto px-4">
          <div className="max-w-2xl mx-auto">
            <div className="text-center mb-8">
              <h2 className="text-3xl font-bold text-text mb-4">{isArabic ? "اختر مبلغ التبرع" : "Choose Donation Amount"}</h2>
              <p className="text-text-secondary">{isArabic ? "كل تبرع يُحدث فرقاً في حياة الخريجين والطلاب" : "Every donation makes a difference"}</p>
            </div>

            {/* Preset Amounts */}
            <div className="grid grid-cols-4 gap-3 mb-6">
              {presetAmounts.map((amount) => (
                <button
                  key={amount}
                  onClick={() => handleAmountSelect(amount)}
                  className={`py-4 rounded-xl font-bold text-lg transition-all ${selectedAmount === amount ? "bg-secondary text-white shadow-lg scale-105" : "bg-background border-2 border-border text-text hover:border-secondary/50"}`}
                >
                  ${amount}
                </button>
              ))}
            </div>

            {/* Custom Amount */}
            <div className="mb-8">
              <label className="block text-sm font-medium text-text mb-1.5">{isArabic ? "مبلغ مخصص" : "Custom Amount"}</label>
              <div className="relative">
                <span className="absolute start-3 top-1/2 -translate-y-1/2 text-text-secondary">$</span>
                <input
                  type="number"
                  value={customAmount}
                  onChange={(e) => handleCustomAmount(e.target.value)}
                  className="w-full h-12 rounded-lg border-2 border-border bg-background ps-8 pe-4 text-lg font-bold text-text focus:outline-none focus:border-secondary transition-all"
                  placeholder={isArabic ? "أدخل المبلغ" : "Enter amount"}
                  dir="ltr"
                />
              </div>
            </div>

            {/* Donor Info */}
            <div className="bg-background rounded-2xl p-6 mb-8">
              <h3 className="text-lg font-bold text-text mb-4">{isArabic ? "بيانات المتبرع" : "Donor Information"}</h3>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-text mb-1.5">{isArabic ? "الاسم" : "Name"}</label>
                  <input
                    value={donorName}
                    onChange={(e) => setDonorName(e.target.value)}
                    className="w-full h-10 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-secondary/20 focus:border-secondary"
                    dir={dir}
                    disabled={anonymous}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-text mb-1.5">{isArabic ? "البريد الإلكتروني" : "Email"}</label>
                  <input
                    type="email"
                    value={donorEmail}
                    onChange={(e) => setDonorEmail(e.target.value)}
                    className="w-full h-10 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-secondary/20 focus:border-secondary"
                    dir={dir}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-text mb-1.5">{isArabic ? "رقم الهاتف" : "Phone"}</label>
                  <input
                    value={donorPhone}
                    onChange={(e) => setDonorPhone(e.target.value)}
                    className="w-full h-10 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-secondary/20 focus:border-secondary"
                    dir={dir}
                  />
                </div>
                <label className="flex items-center gap-2 cursor-pointer">
                  <input type="checkbox" checked={anonymous} onChange={(e) => setAnonymous(e.target.checked)} className="w-4 h-4 rounded border-gray-300 text-secondary focus:ring-secondary" />
                  <span className="text-sm text-text-secondary">{isArabic ? "تبرع مجهول الهوية" : "Anonymous donation"}</span>
                </label>
              </div>
            </div>

            {/* Payment Method */}
            <div className="mb-8">
              <h3 className="text-lg font-bold text-text mb-4">{isArabic ? "طريقة الدفع" : "Payment Method"}</h3>
              <div className="grid grid-cols-3 gap-3">
                <button className="flex items-center justify-center gap-2 py-3 border-2 border-secondary rounded-xl font-bold text-secondary bg-secondary/5">
                  <CreditCard className="w-5 h-5" />
                  <span className="text-sm">{isArabic ? "بطاقة ائتمان" : "Credit Card"}</span>
                </button>
                <button className="flex items-center justify-center gap-2 py-3 border-2 border-border rounded-xl font-bold text-text-secondary hover:border-secondary/50 transition-all">
                  <span className="text-sm">{isArabic ? "تحويل بنكي" : "Bank Transfer"}</span>
                </button>
                <button className="flex items-center justify-center gap-2 py-3 border-2 border-border rounded-xl font-bold text-text-secondary hover:border-secondary/50 transition-all">
                  <span className="text-sm">{isArabic ? "فودافون كاش" : "Mobile Money"}</span>
                </button>
              </div>
            </div>

            {/* Summary */}
            <div className="bg-surface border-2 border-secondary rounded-2xl p-6 mb-8">
              <div className="flex justify-between items-center">
                <span className="text-text-secondary">{isArabic ? "مبلغ التبرع" : "Donation Amount"}</span>
                <span className="text-2xl font-bold text-secondary">${selectedAmount || customAmount || 0}</span>
              </div>
            </div>

            <button className="w-full py-4 bg-secondary text-white rounded-xl text-lg font-bold hover:bg-secondary/90 transition-all hover:scale-[1.02] flex items-center justify-center gap-2">
              <Heart className="w-5 h-5" />
              {isArabic ? "تبرع الآن" : "Donate Now"}
            </button>

            <p className="text-center text-text-light text-xs mt-4">
              {isArabic ? "جميع التبرعات آمنة ومشفرة. سيتم إرسال إيصال على بريدك الإلكتروني." : "All donations are secure and encrypted. A receipt will be sent to your email."}
            </p>
          </div>
        </div>
      </section>

      {/* Impact */}
      <section className="py-20 bg-background">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-text mb-4">
              {isArabic ? "تأثير تبرعك" : "Your Donation Impact"}
            </h2>
            <div className="w-20 h-1 bg-secondary mx-auto rounded-full" />
          </div>
          <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
            {impactItems.map((item, i) => (
              <div key={i} className="flex items-start gap-4 bg-surface rounded-2xl p-6 shadow-sm">
                <div className="w-14 h-14 bg-secondary/10 rounded-full flex items-center justify-center shrink-0">
                  <span className="text-lg font-bold text-secondary">{item.amount}</span>
                </div>
                <p className="text-text-secondary text-sm mt-3">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Recent Donations */}
      <section className="py-16 bg-surface border-t border-border">
        <div className="container mx-auto px-4 text-center">
          <p className="text-text-secondary text-lg">
            {isArabic ? "آخر 24 ساعة: تبرع 45 متبرع بأكثر من" : "Last 24 hours: 45 donors contributed over"}
            <span className="font-bold text-secondary mx-1">$2,500</span>
          </p>
        </div>
      </section>
    </div>
  );
}

export default function DonationsPage() {
  return (
    <Suspense fallback={
      <div className="min-h-screen flex items-center justify-center">
        <p className="text-gray-500">جاري التحميل...</p>
      </div>
    }>
      <DonationsContent />
    </Suspense>
  );
}