import { Navigate, Outlet, useLocation } from 'react-router-dom';
import { useShop } from './context/ShopContext';
import { AlertCircle, Store } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { useTranslation } from "react-i18next";
import { LoadingScreen } from "@/components/ui/loading-screen";

/**
 * StoreProtectedRoute - Protects routes that require an active store to be selected
 *
 * This component checks:
 * 1. If a store is selected
 * 2. If the selected store is active (not uninstalled/disabled)
 *
 * If no active store is selected, it shows an error message with a link to the webshops page.
 */
const StoreProtectedRoute = () => {
  const { selectedShop, stores, isLoading, storesLoaded } = useShop();
  const { t } = useTranslation();
  const location = useLocation();

  // Wait for stores to load - show loading until stores are actually fetched
  if (isLoading || !storesLoaded) {
    return (
      <LoadingScreen
        icon={Store}
        message={t('storeProtectedRoute.loadingStores') || 'Loading stores...'}
      />
    );
  }

  // Check if no stores exist at all
  if (stores.length === 0) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center px-4">
        <div className="w-full max-w-md">
          <Card className="bg-slate-800/50 border-slate-700 backdrop-blur-sm">
            <CardContent className="p-8">
              <div className="text-center space-y-6">
                <div className="mx-auto w-16 h-16 rounded-full bg-amber-500/10 flex items-center justify-center">
                  <Store className="w-8 h-8 text-amber-500" />
                </div>
                <div className="space-y-2">
                  <h2 className="text-xl font-semibold text-white">
                    {t('storeProtectedRoute.noStoresTitle') || 'No Stores Connected'}
                  </h2>
                  <p className="text-slate-400 text-sm">
                    {t('storeProtectedRoute.noStoresDescription') || 'You need to connect a store to access this feature.'}
                  </p>
                </div>
                <Button
                  onClick={() => window.location.href = '/webshops'}
                  className="bg-[#52b3d0] hover:bg-[#52b3d0]/80 text-white"
                >
                  <Store className="w-4 h-4 mr-2" />
                  {t('storeProtectedRoute.connectStore') || 'Connect a Store'}
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    );
  }

  // Check if no store is selected
  if (!selectedShop) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center px-4">
        <div className="w-full max-w-md">
          <Card className="bg-slate-800/50 border-slate-700 backdrop-blur-sm">
            <CardContent className="p-8">
              <div className="text-center space-y-6">
                <div className="mx-auto w-16 h-16 rounded-full bg-amber-500/10 flex items-center justify-center">
                  <AlertCircle className="w-8 h-8 text-amber-500" />
                </div>
                <div className="space-y-2">
                  <h2 className="text-xl font-semibold text-white">
                    {t('storeProtectedRoute.noStoreSelectedTitle') || 'No Store Selected'}
                  </h2>
                  <p className="text-slate-400 text-sm">
                    {t('storeProtectedRoute.noStoreSelectedDescription') || 'Please select an active store from the sidebar to access this feature.'}
                  </p>
                </div>
                <Button
                  onClick={() => window.location.href = '/webshops'}
                  className="bg-[#52b3d0] hover:bg-[#52b3d0]/80 text-white"
                >
                  <Store className="w-4 h-4 mr-2" />
                  {t('storeProtectedRoute.manageStores') || 'Manage Stores'}
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    );
  }

  // Check if selected store is inactive (uninstalled/disabled)
  if (selectedShop.is_active === false) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center px-4">
        <div className="w-full max-w-md">
          <Card className="bg-slate-800/50 border-red-700/50 backdrop-blur-sm">
            <CardContent className="p-8">
              <div className="text-center space-y-6">
                <div className="mx-auto w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center">
                  <AlertCircle className="w-8 h-8 text-red-500" />
                </div>
                <div className="space-y-2">
                  <h2 className="text-xl font-semibold text-white">
                    {t('storeProtectedRoute.storeInactiveTitle') || 'Store is Inactive'}
                  </h2>
                  <p className="text-slate-400 text-sm">
                    {t('storeProtectedRoute.storeInactiveDescription') || 'The selected store has been disconnected or disabled. Please select another store or reconnect this one.'}
                  </p>
                  <div className="mt-4 p-3 bg-slate-700/50 rounded-lg">
                    <p className="text-sm text-slate-300 font-medium">{selectedShop.store_name}</p>
                    <p className="text-xs text-slate-500 capitalize">{selectedShop.platform_name}</p>
                  </div>
                </div>
                <div className="flex flex-col gap-2">
                  <Button
                    onClick={() => window.location.href = '/webshops'}
                    className="bg-[#52b3d0] hover:bg-[#52b3d0]/80 text-white"
                  >
                    <Store className="w-4 h-4 mr-2" />
                    {t('storeProtectedRoute.manageStores') || 'Manage Stores'}
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    );
  }

  // All checks passed, render the protected content
  return <Outlet />;
};

export default StoreProtectedRoute;
