import { SidebarProvider } from "@/components/ui/sidebar";
import { AppSidebar } from "@/components/AppSidebar";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { CreditCard, Sparkles, Bell, Rocket, Zap, Gift } from "lucide-react";
import { useTranslation } from 'react-i18next';

export default function Billing() {
  const { t } = useTranslation();

  return (
    <SidebarProvider>
      <div className="min-h-screen flex w-full bg-slate-900">
        <AppSidebar />
        <main className="flex-1 bg-slate-900 text-white">
          <div className="flex flex-col gap-6 p-6">
            <div>
              <h1 className="text-3xl font-bold text-white">{t('billing.title')}</h1>
              <p className="text-slate-400 mt-2">
                {t('billing.subtitle')}
              </p>
            </div>

            {/* Coming Soon Card */}
            <div className="flex items-center justify-center min-h-[60vh]">
              <Card className="bg-gradient-to-br from-slate-800 via-slate-800 to-slate-900 border-slate-700 max-w-2xl w-full overflow-hidden relative">
                {/* Animated background elements */}
                <div className="absolute inset-0 overflow-hidden">
                  <div className="absolute -top-20 -right-20 w-40 h-40 bg-cyan-500/10 rounded-full blur-3xl animate-pulse" />
                  <div className="absolute -bottom-20 -left-20 w-40 h-40 bg-purple-500/10 rounded-full blur-3xl animate-pulse delay-1000" />
                </div>

                <CardContent className="p-12 text-center relative z-10">
                  {/* Icon */}
                  <div className="mb-8 relative inline-block">
                    <div className="w-24 h-24 rounded-full bg-gradient-to-br from-cyan-500/20 to-purple-500/20 flex items-center justify-center mx-auto">
                      <CreditCard className="w-12 h-12 text-cyan-400" />
                    </div>
                    <div className="absolute -top-1 -right-1">
                      <Sparkles className="w-6 h-6 text-yellow-400 animate-pulse" />
                    </div>
                  </div>

                  {/* Coming Soon Badge */}
                  <div className="inline-flex items-center gap-2 bg-cyan-500/10 border border-cyan-500/30 rounded-full px-4 py-2 mb-6">
                    <Rocket className="w-4 h-4 text-cyan-400" />
                    <span className="text-cyan-400 font-medium text-sm">{t('billing.comingSoon.badge')}</span>
                  </div>

                  {/* Title */}
                  <h2 className="text-3xl font-bold text-white mb-4">
                    {t('billing.comingSoon.title')}
                  </h2>

                  {/* Description */}
                  <p className="text-slate-400 text-lg mb-8 max-w-md mx-auto">
                    {t('billing.comingSoon.description')}
                  </p>

                  {/* Features Preview */}
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
                    <div className="bg-slate-700/30 rounded-lg p-4 border border-slate-600/50">
                      <Zap className="w-6 h-6 text-yellow-400 mx-auto mb-2" />
                      <p className="text-slate-300 text-sm font-medium">{t('billing.comingSoon.features.flexiblePlans')}</p>
                    </div>
                    <div className="bg-slate-700/30 rounded-lg p-4 border border-slate-600/50">
                      <Gift className="w-6 h-6 text-pink-400 mx-auto mb-2" />
                      <p className="text-slate-300 text-sm font-medium">{t('billing.comingSoon.features.specialOffers')}</p>
                    </div>
                    <div className="bg-slate-700/30 rounded-lg p-4 border border-slate-600/50">
                      <CreditCard className="w-6 h-6 text-green-400 mx-auto mb-2" />
                      <p className="text-slate-300 text-sm font-medium">{t('billing.comingSoon.features.easyPayments')}</p>
                    </div>
                  </div>

                  {/* Notify Button */}
                  <Button
                    className="bg-cyan-500 hover:bg-cyan-600 text-white px-8 py-6 text-lg"
                    disabled
                  >
                    <Bell className="w-5 h-5 mr-2" />
                    {t('billing.comingSoon.notifyButton')}
                  </Button>

                  {/* Note */}
                  <p className="text-slate-500 text-sm mt-6">
                    {t('billing.comingSoon.note')}
                  </p>
                </CardContent>
              </Card>
            </div>
          </div>
        </main>
      </div>
    </SidebarProvider>
  );
}
