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 { Switch } from "@/components/ui/switch";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useTranslation } from 'react-i18next';
import { useShop } from "@/components/context/ShopContext";
import { useSubscription, useUpdateSubscription } from "@/hooks/useSubscription";
import { usePackages } from "@/hooks/usePlans";
import {
  Clock,
  AlertCircle,
  Loader2,
  Info,
  Package,
  Zap,
  AlertTriangle
} from "lucide-react";
import {
  getPackagePrice,
  formatCurrency,
  getUsageProgressColor,
  type Currency,
  type PackageWithTranslation
} from "@/types/subscription.types";
import { useNavigate } from "react-router-dom";

export default function BillingTopups() {
  const { t } = useTranslation();
  const { selectedShop } = useShop();
  const navigate = useNavigate();

  // Hooks
  const {
    subscription,
    isLoading: subLoading,
    minutesRemaining,
    packageMinutesRemaining,
    totalMinutesRemaining,
    usagePercentage,
    isExpired,
    daysRemaining,
    refetch: refetchSubscription
  } = useSubscription(selectedShop?.id);

  const { packages, purchasePackage, isLoading: packagesLoading } = usePackages();
  const { updateAutoPurchase, isUpdating } = useUpdateSubscription();

  const currentCurrency: Currency = (subscription?.currency as Currency) || 'HUF';
  const isLoading = subLoading || packagesLoading;

  // Handle package purchase
  const handlePurchasePackage = async (pkg: PackageWithTranslation) => {
    if (!selectedShop?.id || !subscription?.id) return;

    const success = await purchasePackage(
      selectedShop.id,
      subscription.id,
      pkg.id,
      pkg,
      currentCurrency
    );

    if (success) {
      await refetchSubscription();
    }
  };

  // Handle auto-purchase toggle
  const handleAutoPurchaseToggle = async (enabled: boolean) => {
    if (!selectedShop?.id) return;

    await updateAutoPurchase(
      selectedShop.id,
      enabled,
      subscription?.auto_purchase_package_id || packages[0]?.id,
      subscription?.auto_purchase_threshold || 5
    );

    await refetchSubscription();
  };

  // Render loading state
  if (isLoading) {
    return (
      <SidebarProvider>
        <div className="min-h-screen flex w-full bg-slate-900">
          <AppSidebar />
          <main className="flex-1 bg-slate-900 text-white flex items-center justify-center">
            <Loader2 className="w-8 h-8 animate-spin text-cyan-500" />
          </main>
        </div>
      </SidebarProvider>
    );
  }

  // No shop selected
  if (!selectedShop) {
    return (
      <SidebarProvider>
        <div className="min-h-screen flex w-full bg-slate-900">
          <AppSidebar />
          <main className="flex-1 bg-slate-900 text-white p-6">
            <div className="text-center py-20">
              <AlertCircle className="w-16 h-16 text-yellow-500 mx-auto mb-4" />
              <h2 className="text-2xl font-bold mb-2">{t('billing.noShopSelected')}</h2>
              <p className="text-slate-400">{t('billing.selectShopFirst')}</p>
            </div>
          </main>
        </div>
      </SidebarProvider>
    );
  }

  // Show upgrade prompt for trial users
  if (subscription?.status === 'trial') {
    return (
      <SidebarProvider>
        <div className="min-h-screen flex w-full bg-slate-900">
          <AppSidebar />
          <main className="flex-1 bg-slate-900 text-white p-6">
            <div className="flex flex-col gap-6">
              {/* Header */}
              <div>
                <h1 className="text-3xl font-bold text-white">{t('billing.topups')}</h1>
                <p className="text-slate-400 mt-2">
                  {t('billing.topupsSubtitle')}
                </p>
              </div>

              {/* Upgrade Required */}
              <Card className="border border-yellow-500/50 bg-yellow-500/10">
                <CardContent className="p-8 text-center">
                  <AlertTriangle className="w-16 h-16 text-yellow-500 mx-auto mb-4" />
                  <h2 className="text-2xl font-bold text-white mb-2">
                    {t('billing.upgradeRequired')}
                  </h2>
                  <p className="text-slate-400 mb-6 max-w-md mx-auto">
                    {t('billing.upgradeRequiredDesc')}
                  </p>
                  <Button
                    className="bg-cyan-500 hover:bg-cyan-600 text-white"
                    onClick={() => navigate('/billing/plans')}
                  >
                    {t('billing.viewPlans')}
                  </Button>
                </CardContent>
              </Card>
            </div>
          </main>
        </div>
      </SidebarProvider>
    );
  }

  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">
            {/* Header */}
            <div>
              <h1 className="text-3xl font-bold text-white">{t('billing.topups')}</h1>
              <p className="text-slate-400 mt-2">
                {t('billing.topupsSubtitle')}
              </p>
            </div>

            {/* Current Usage Summary */}
            <Card className="border border-slate-700 bg-slate-800/50">
              <CardContent className="p-6">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="font-semibold text-white flex items-center gap-2">
                    <Clock className="w-5 h-5 text-cyan-400" />
                    {t('billing.currentUsage')}
                  </h3>
                  <span className="text-sm text-slate-400">
                    {subscription?.plan_translation?.name || subscription?.plan?.plan_code}
                  </span>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                  <div className="p-4 bg-slate-700/50 rounded-lg">
                    <div className="text-sm text-slate-400 mb-1">{t('billing.includedMinutes')}</div>
                    <div className="text-2xl font-bold text-white">
                      {Math.round(minutesRemaining)} / {subscription?.minutes_included}
                      <span className="text-sm font-normal text-slate-400 ml-1">{t('sidebar.min')}</span>
                    </div>
                  </div>
                  <div className="p-4 bg-slate-700/50 rounded-lg">
                    <div className="text-sm text-slate-400 mb-1">{t('billing.packageMinutes')}</div>
                    <div className="text-2xl font-bold text-cyan-400">
                      {Math.round(packageMinutesRemaining)}
                      <span className="text-sm font-normal text-slate-400 ml-1">{t('sidebar.min')}</span>
                    </div>
                  </div>
                  <div className="p-4 bg-slate-700/50 rounded-lg">
                    <div className="text-sm text-slate-400 mb-1">{t('billing.totalRemaining')}</div>
                    <div className={`text-2xl font-bold ${
                      totalMinutesRemaining <= 5 ? 'text-red-400' :
                      totalMinutesRemaining <= 15 ? 'text-yellow-400' :
                      'text-green-400'
                    }`}>
                      {Math.round(totalMinutesRemaining)}
                      <span className="text-sm font-normal text-slate-400 ml-1">{t('sidebar.min')}</span>
                    </div>
                  </div>
                </div>

                {/* Progress bar */}
                <div className="h-2 bg-slate-700 rounded-full overflow-hidden">
                  <div
                    className={`h-full transition-all duration-300 ${getUsageProgressColor(usagePercentage)}`}
                    style={{ width: `${Math.min(usagePercentage, 100)}%` }}
                  />
                </div>
                <div className="flex justify-between text-xs text-slate-500 mt-1">
                  <span>{Math.round(subscription?.minutes_used || 0)} {t('billing.used')}</span>
                  <span>{subscription?.minutes_included} {t('billing.included')}</span>
                </div>
              </CardContent>
            </Card>

            {/* Additional Packages Section */}
            <div>
              <h2 className="text-xl font-semibold text-white mb-4 flex items-center gap-2">
                <Package className="w-5 h-5 text-cyan-400" />
                {t('billing.additionalPackages')}
              </h2>
              <p className="text-slate-400 mb-6">
                {t('billing.additionalPackagesDescription')}
              </p>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                {packages.map(pkg => (
                  <Card
                    key={pkg.id}
                    className="border border-slate-700 bg-slate-800/50 hover:border-cyan-500/50 transition-all"
                  >
                    <CardContent className="p-6">
                      <div className="flex items-center gap-3 mb-4">
                        <div className="w-12 h-12 rounded-lg bg-cyan-500/20 flex items-center justify-center">
                          <Zap className="w-6 h-6 text-cyan-400" />
                        </div>
                        <div>
                          <span className="font-semibold text-white text-lg">
                            {pkg.translations.name}
                          </span>
                          <div className="text-sm text-slate-400">
                            {pkg.minutes} {t('sidebar.min')}
                          </div>
                        </div>
                      </div>

                      <p className="text-sm text-slate-400 mb-4">
                        {pkg.translations.description}
                      </p>

                      <div className="flex items-center justify-between mb-4">
                        <span className="text-2xl font-bold text-white">
                          {formatCurrency(getPackagePrice(pkg, currentCurrency), currentCurrency)}
                        </span>
                        <span className="text-xs text-slate-500">+ {t('billing.vat')}</span>
                      </div>

                      <Button
                        className="w-full bg-cyan-500 hover:bg-cyan-600 text-white"
                        onClick={() => handlePurchasePackage(pkg)}
                      >
                        {t('billing.purchasePackage')}
                      </Button>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>

            {/* Auto-Purchase Settings */}
            <Card className="border border-slate-700 bg-slate-800/50">
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <h3 className="font-semibold text-white flex items-center gap-2">
                      <Zap className="w-5 h-5 text-yellow-400" />
                      {t('billing.autoPurchase')}
                    </h3>
                    <p className="text-sm text-slate-400 mt-1">
                      {t('billing.autoPurchaseDescription')}
                    </p>
                  </div>
                  <Switch
                    checked={subscription?.auto_purchase_enabled || false}
                    onCheckedChange={handleAutoPurchaseToggle}
                  />
                </div>

                {subscription?.auto_purchase_enabled && (
                  <div className="mt-4 pt-4 border-t border-slate-700 grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="text-sm text-slate-400 mb-2 block">
                        {t('billing.autoPurchasePackage')}
                      </label>
                      <Select
                        value={subscription.auto_purchase_package_id || ''}
                        onValueChange={(value) => {
                          if (selectedShop?.id) {
                            updateAutoPurchase(
                              selectedShop.id,
                              true,
                              value,
                              subscription.auto_purchase_threshold
                            );
                          }
                        }}
                      >
                        <SelectTrigger className="bg-slate-700 border-slate-600">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent className="bg-slate-800 border-slate-600">
                          {packages.map(pkg => (
                            <SelectItem key={pkg.id} value={pkg.id} className="text-white">
                              {pkg.translations.name} - {formatCurrency(getPackagePrice(pkg, currentCurrency), currentCurrency)}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                    <div>
                      <label className="text-sm text-slate-400 mb-2 block">
                        {t('billing.autoPurchaseThreshold')}
                      </label>
                      <Select
                        value={String(subscription.auto_purchase_threshold)}
                        onValueChange={(value) => {
                          if (selectedShop?.id) {
                            updateAutoPurchase(
                              selectedShop.id,
                              true,
                              subscription.auto_purchase_package_id || packages[0]?.id,
                              parseInt(value)
                            );
                          }
                        }}
                      >
                        <SelectTrigger className="bg-slate-700 border-slate-600">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent className="bg-slate-800 border-slate-600">
                          {[1, 2, 5, 10, 15, 20].map(mins => (
                            <SelectItem key={mins} value={String(mins)} className="text-white">
                              {mins} {t('billing.minutesRemaining')}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>

            {/* Info Section */}
            <Card className="border border-slate-700 bg-slate-800/50">
              <CardContent className="p-6">
                <h3 className="font-semibold text-white mb-4 flex items-center gap-2">
                  <Info className="w-5 h-5 text-cyan-400" />
                  {t('billing.topupsInfo')}
                </h3>
                <div className="space-y-3 text-sm text-slate-400">
                  <p>
                    <strong className="text-slate-300">{t('billing.packageExpiry')}</strong>{' '}
                    {t('billing.packageExpiryDesc')}
                  </p>
                  <p>
                    <strong className="text-slate-300">{t('billing.usageOrder')}</strong>{' '}
                    {t('billing.usageOrderDesc')}
                  </p>
                </div>
              </CardContent>
            </Card>
          </div>
        </main>
      </div>
    </SidebarProvider>
  );
}
