WooNooW/admin-spa/src/routes/Settings/Shipping.tsx

import React, { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from '@/lib/api';
import { SettingsLayout } from './components/SettingsLayout';
import { SettingsCard } from './components/SettingsCard';
import { ToggleField } from './components/ToggleField';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';
import { Globe, Truck, MapPin, Edit, Trash2, RefreshCw, Loader2, ExternalLink, Settings } from 'lucide-react';
import { toast } from 'sonner';
import { __ } from '@/lib/i18n';
import { useMediaQuery } from '@/hooks/use-media-query';

interface ShippingRate {
  id: string;
  name: string;
  price: string;
  condition?: string;
  transitTime?: string;
}

interface ShippingZone {
  id: string;
  name: string;
  regions: string;
  rates: ShippingRate[];
}

export default function ShippingPage() {
  const queryClient = useQueryClient();
  const wcAdminUrl = (window as any).WNW_CONFIG?.wpAdminUrl || '/wp-admin';
  const [togglingMethod, setTogglingMethod] = useState<string | null>(null);
  const [selectedZone, setSelectedZone] = useState<any | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const isDesktop = useMediaQuery("(min-width: 768px)");
  
  // Fetch shipping zones from WooCommerce
  const { data: zones = [], isLoading, refetch } = useQuery({
    queryKey: ['shipping-zones'],
    queryFn: () => api.get('/settings/shipping/zones'),
    staleTime: 5 * 60 * 1000, // 5 minutes
  });

  // Toggle shipping method mutation
  const toggleMutation = useMutation({
    mutationFn: async ({ zoneId, instanceId, enabled }: { zoneId: number; instanceId: number; enabled: boolean }) => {
      return api.post(`/settings/shipping/zones/${zoneId}/methods/${instanceId}/toggle`, { enabled });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['shipping-zones'] });
      toast.success(__('Shipping method updated successfully'));
    },
    onError: (error: any) => {
      toast.error(error?.message || __('Failed to update shipping method'));
    },
    onSettled: () => {
      setTogglingMethod(null);
    },
  });

  const handleToggle = (zoneId: number, instanceId: number, enabled: boolean) => {
    setTogglingMethod(`${zoneId}-${instanceId}`);
    toggleMutation.mutate({ zoneId, instanceId, enabled });
  };

  if (isLoading) {
    return (
      <SettingsLayout 
        title={__('Shipping & Delivery')} 
        description={__('Manage how you ship products to customers')}
      >
        <div className="flex items-center justify-center py-12">
          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
        </div>
      </SettingsLayout>
    );
  }

  return (
    <SettingsLayout
      title={__('Shipping & Delivery')}
      description={__('Manage how you ship products to customers')}
      action={
        <Button
          variant="outline"
          size="sm"
          onClick={() => refetch()}
          disabled={isLoading}
        >
          <RefreshCw className="h-4 w-4 mr-2" />
          {__('Refresh')}
        </Button>
      }
    >
      {/* Shipping Zones */}
      <SettingsCard
        title={__('Shipping Zones')}
        description={__('Create zones to group regions with similar shipping rates')}
      >
        {zones.length === 0 ? (
          <div className="text-center py-8">
            <p className="text-sm text-muted-foreground mb-4">
              {__('No shipping zones configured yet.')}
            </p>
            <Button
              variant="outline"
              asChild
            >
              <a href={`${wcAdminUrl}/admin.php?page=wc-settings&tab=shipping`} target="_blank" rel="noopener noreferrer">
                {__('Configure in WooCommerce')}
              </a>
            </Button>
          </div>
        ) : (
          <div className="space-y-4">
            {zones.map((zone: any) => (
            <div
              key={zone.id}
              className="border rounded-lg p-3 md:p-4 hover:border-primary/50 transition-colors"
            >
              <div className="flex flex-col md:flex-row items-start md:justify-between gap-3 mb-3 md:mb-4">
                <div className="flex items-start gap-2 md:gap-3 flex-1">
                  <div className="p-1.5 md:p-2 bg-primary/10 rounded-lg text-primary flex-shrink-0">
                    <Globe className="h-4 w-4 md:h-5 md:w-5" />
                  </div>
                  <div className="min-w-0 flex-1">
                    <h3 className="font-semibold text-base md:text-lg">{zone.name}</h3>
                    <p className="text-xs md:text-sm text-muted-foreground truncate">
                      Regions: {zone.regions}
                    </p>
                    <p className="text-xs md:text-sm text-muted-foreground">
                      Rates: {zone.rates.length} shipping rate{zone.rates.length !== 1 ? 's' : ''}
                    </p>
                  </div>
                </div>
                <div className="flex items-center gap-2 w-full md:w-auto">
                  <Button 
                    variant="outline" 
                    size="sm"
                    className="w-full md:w-auto"
                    onClick={() => {
                      setSelectedZone(zone);
                      setIsModalOpen(true);
                    }}
                  >
                    <Settings className="h-4 w-4 mr-2" />
                    {__('Settings')}
                  </Button>
                </div>
              </div>

              {/* Shipping Rates */}
              <div className="pl-0 md:pl-11 space-y-2">
                {zone.rates?.map((rate: any) => (
                  <div
                    key={rate.id}
                    className="flex items-center justify-between gap-2 py-2 px-2 md:px-3 bg-muted/50 rounded-md"
                  >
                    <div className="flex items-center gap-1.5 md:gap-2 flex-1 min-w-0">
                      <Truck className="h-3.5 w-3.5 md:h-4 md:w-4 text-muted-foreground flex-shrink-0" />
                      <div className="flex-1 min-w-0">
                        <span 
                          className="text-xs md:text-sm font-medium line-clamp-1"
                          dangerouslySetInnerHTML={{ __html: rate.name }}
                        />
                        {rate.transitTime && (
                          <span className="text-xs text-muted-foreground ml-2">
                            • {rate.transitTime}
                          </span>
                        )}
                        {rate.condition && (
                          <span className="text-xs text-muted-foreground ml-2">
                            • {rate.condition}
                          </span>
                        )}
                      </div>
                    </div>
                    <div className="flex items-center gap-2 md:gap-3 flex-shrink-0">
                      <span 
                        className="text-xs md:text-sm font-semibold whitespace-nowrap"
                        dangerouslySetInnerHTML={{ __html: rate.price }}
                      />
                      <ToggleField
                        id={`${zone.id}-${rate.instance_id}`}
                        label=""
                        checked={rate.enabled}
                        onCheckedChange={(checked) => handleToggle(zone.id, rate.instance_id, checked)}
                        disabled={togglingMethod === `${zone.id}-${rate.instance_id}`}
                      />
                    </div>
                  </div>
                ))}
              </div>
            </div>
            ))}

            <Button 
              variant="outline" 
              className="w-full"
              asChild
            >
              <a href={`${wcAdminUrl}/admin.php?page=wc-settings&tab=shipping`} target="_blank" rel="noopener noreferrer">
                <ExternalLink className="h-4 w-4 mr-2" />
                {__('Manage Zones in WooCommerce')}
              </a>
            </Button>
          </div>
        )}
      </SettingsCard>

      {/* Help Card */}
      <div className="bg-muted/50 border rounded-lg p-4">
        <p className="text-sm font-medium mb-2">💡 {__('Shipping tips')}</p>
        <ul className="text-sm text-muted-foreground space-y-1">
          <li>• {__('Offer free shipping for orders above a certain amount to increase average order value')}</li>
          <li>• {__('Provide multiple shipping options to give customers flexibility')}</li>
          <li>• {__('Set realistic delivery estimates to manage customer expectations')}</li>
          <li>• {__('Configure detailed shipping settings in WooCommerce for full control')}</li>
        </ul>
      </div>
    </SettingsLayout>
  );
}