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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Globe, Truck, MapPin, Edit, Trash2, RefreshCw, Loader2, ExternalLink, Settings, Plus, X } 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 [activeTab, setActiveTab] = useState('methods');
  const [showAddMethod, setShowAddMethod] = 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
  });

  // Fetch available shipping methods
  const { data: availableMethods = [] } = useQuery({
    queryKey: ['available-shipping-methods'],
    queryFn: () => api.get('/settings/shipping/methods/available'),
    enabled: showAddMethod,
  });

  // 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);
    },
  });

  // Add shipping method mutation
  const addMethodMutation = useMutation({
    mutationFn: async ({ zoneId, methodId }: { zoneId: number; methodId: string }) => {
      return api.post(`/settings/shipping/zones/${zoneId}/methods`, { method_id: methodId });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['shipping-zones'] });
      toast.success(__('Shipping method added successfully'));
      setShowAddMethod(false);
    },
    onError: (error: any) => {
      toast.error(error?.message || __('Failed to add shipping method'));
    },
  });

  // Delete shipping method mutation
  const deleteMethodMutation = useMutation({
    mutationFn: async ({ zoneId, instanceId }: { zoneId: number; instanceId: number }) => {
      return api.delete(`/settings/shipping/zones/${zoneId}/methods/${instanceId}`);
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['shipping-zones'] });
      toast.success(__('Shipping method deleted successfully'));
    },
    onError: (error: any) => {
      toast.error(error?.message || __('Failed to delete shipping method'));
    },
  });

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

  const handleAddMethod = (methodId: string) => {
    if (selectedZone) {
      addMethodMutation.mutate({ zoneId: selectedZone.id, methodId });
    }
  };

  const handleDeleteMethod = (instanceId: number) => {
    if (selectedZone && confirm(__('Are you sure you want to delete this shipping method?'))) {
      deleteMethodMutation.mutate({ zoneId: selectedZone.id, instanceId });
    }
  };

  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 items-start 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">
                      {zone.regions}
                    </p>
                    <p className="text-xs md:text-sm text-muted-foreground">
                      {zone.rates.length} {zone.rates.length === 1 ? 'method' : 'methods'}
                    </p>
                  </div>
                </div>
                <Button 
                  variant="ghost" 
                  size="sm"
                  onClick={() => {
                    setSelectedZone(zone);
                    setIsModalOpen(true);
                  }}
                >
                  <Edit className="h-4 w-4" />
                </Button>
              </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>

      {/* Settings Modal/Drawer */}
      {selectedZone && (
        isDesktop ? (
          <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
            <DialogContent className="max-w-2xl max-h-[90vh] flex flex-col p-0">
              <DialogHeader className="px-6 py-4 border-b">
                <DialogTitle>{selectedZone.name}</DialogTitle>
                <p className="text-sm text-muted-foreground mt-1">
                  {selectedZone.regions}
                </p>
              </DialogHeader>
              <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col min-h-0">
                <TabsList className="mx-6 mt-4">
                  <TabsTrigger value="methods">{__('Shipping Methods')}</TabsTrigger>
                  <TabsTrigger value="details">{__('Zone Details')}</TabsTrigger>
                </TabsList>
                
                <TabsContent value="methods" className="flex-1 overflow-y-auto px-6 pb-6 mt-0">
                  <div className="space-y-4 mt-4">
                    {/* Add Method Button */}
                    <Button
                      variant="outline"
                      className="w-full"
                      onClick={() => setShowAddMethod(true)}
                    >
                      <Plus className="h-4 w-4 mr-2" />
                      {__('Add Shipping Method')}
                    </Button>

                    {/* Methods List */}
                    <div className="space-y-3">
                      {selectedZone.rates?.map((rate: any) => (
                        <div key={rate.id} className="border rounded-lg p-4">
                          <div className="flex items-start justify-between gap-3 mb-3">
                            <div className="flex-1">
                              <div className="flex items-center gap-2 mb-1">
                                <Truck className="h-4 w-4 text-muted-foreground" />
                                <span className="font-medium" dangerouslySetInnerHTML={{ __html: rate.name }} />
                              </div>
                              <div className="text-sm text-muted-foreground">
                                <span>{__('Cost')}:</span>{' '}
                                <span className="font-semibold" dangerouslySetInnerHTML={{ __html: rate.price }} />
                              </div>
                            </div>
                            <div className="flex items-center gap-2">
                              <span className={`text-xs px-2 py-1 rounded-full ${
                                rate.enabled 
                                  ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' 
                                  : 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400'
                              }`}>
                                {rate.enabled ? __('Active') : __('Inactive')}
                              </span>
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => handleDeleteMethod(rate.instance_id)}
                                disabled={deleteMethodMutation.isPending}
                              >
                                <Trash2 className="h-4 w-4 text-destructive" />
                              </Button>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </TabsContent>

                <TabsContent value="details" className="flex-1 overflow-y-auto px-6 pb-6 mt-0">
                  <div className="space-y-4 mt-4">
                    <div className="bg-muted/50 rounded-lg p-4">
                      <div className="space-y-3">
                        <div>
                          <p className="text-sm font-medium mb-1">{__('Zone Name')}</p>
                          <p className="text-sm text-muted-foreground">{selectedZone.name}</p>
                        </div>
                        <div>
                          <p className="text-sm font-medium mb-1">{__('Regions')}</p>
                          <p className="text-sm text-muted-foreground">{selectedZone.regions}</p>
                        </div>
                        <div>
                          <p className="text-sm font-medium mb-1">{__('Zone Order')}</p>
                          <p className="text-sm text-muted-foreground">{selectedZone.order}</p>
                          <p className="text-xs text-muted-foreground mt-1">{__('Priority in shipping calculations')}</p>
                        </div>
                      </div>
                    </div>
                    <p className="text-sm text-muted-foreground">
                      {__('To edit zone name, regions, or order, use WooCommerce.')}
                    </p>
                  </div>
                </TabsContent>
              </Tabs>
              <div className="px-6 py-4 border-t flex justify-between gap-3">
                <Button
                  variant="outline"
                  asChild
                >
                  <a href={`${wcAdminUrl}/admin.php?page=wc-settings&tab=shipping&zone_id=${selectedZone.id}`} target="_blank" rel="noopener noreferrer">
                    <ExternalLink className="h-4 w-4 mr-2" />
                    {__('Edit in WooCommerce')}
                  </a>
                </Button>
                <Button onClick={() => setIsModalOpen(false)}>
                  {__('Done')}
                </Button>
              </div>
            </DialogContent>
          </Dialog>
        ) : (
          <Drawer open={isModalOpen} onOpenChange={setIsModalOpen}>
            <DrawerContent className="max-h-[90vh] flex flex-col">
              <DrawerHeader className="border-b">
                <DrawerTitle>{selectedZone.name}</DrawerTitle>
                <p className="text-sm text-muted-foreground mt-1">
                  {selectedZone.regions}
                </p>
              </DrawerHeader>
              <div className="flex-1 overflow-y-auto px-4 py-6 min-h-0">
                <div className="space-y-6">
                  {/* Zone Summary */}
                  <div className="bg-muted/50 rounded-lg p-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-sm font-medium">{__('Zone Order')}</p>
                        <p className="text-xs text-muted-foreground">{__('Priority in shipping calculations')}</p>
                      </div>
                      <span className="text-2xl font-bold text-muted-foreground">{selectedZone.order}</span>
                    </div>
                  </div>

                  {/* Shipping Methods */}
                  <div>
                    <div className="flex items-center justify-between mb-3">
                      <h4 className="font-semibold">{__('Shipping Methods')}</h4>
                      <span className="text-sm text-muted-foreground">
                        {selectedZone.rates?.length} {selectedZone.rates?.length === 1 ? 'method' : 'methods'}
                      </span>
                    </div>
                    <div className="space-y-3">
                      {selectedZone.rates?.map((rate: any) => (
                        <div key={rate.id} className="border rounded-lg p-3">
                          <div className="flex items-start justify-between gap-3">
                            <div className="flex-1">
                              <div className="flex items-center gap-2 mb-1">
                                <Truck className="h-4 w-4 text-muted-foreground" />
                                <span className="font-medium text-sm" dangerouslySetInnerHTML={{ __html: rate.name }} />
                              </div>
                              <div className="text-sm text-muted-foreground">
                                <span>{__('Cost')}:</span>{' '}
                                <span className="font-semibold" dangerouslySetInnerHTML={{ __html: rate.price }} />
                              </div>
                            </div>
                            <span className={`text-xs px-2 py-1 rounded-full whitespace-nowrap ${
                              rate.enabled 
                                ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' 
                                : 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400'
                            }`}>
                              {rate.enabled ? __('Active') : __('Inactive')}
                            </span>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
              <div className="px-4 py-4 border-t flex flex-col gap-2">
                <Button
                  variant="outline"
                  asChild
                  className="w-full"
                >
                  <a href={`${wcAdminUrl}/admin.php?page=wc-settings&tab=shipping&zone_id=${selectedZone.id}`} target="_blank" rel="noopener noreferrer">
                    <ExternalLink className="h-4 w-4 mr-2" />
                    {__('Edit in WooCommerce')}
                  </a>
                </Button>
                <Button onClick={() => setIsModalOpen(false)} className="w-full">
                  {__('Done')}
                </Button>
              </div>
            </DrawerContent>
          </Drawer>
        )
      )}

      {/* Add Method Dialog */}
      <Dialog open={showAddMethod} onOpenChange={setShowAddMethod}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>{__('Add Shipping Method')}</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <p className="text-sm text-muted-foreground">
              {__('Select a shipping method to add to this zone:')}
            </p>
            <div className="space-y-2">
              {availableMethods.map((method: any) => (
                <button
                  key={method.id}
                  onClick={() => handleAddMethod(method.id)}
                  disabled={addMethodMutation.isPending}
                  className="w-full text-left p-4 border rounded-lg hover:border-primary hover:bg-accent transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  <div className="font-medium">{method.title}</div>
                  {method.description && (
                    <div className="text-sm text-muted-foreground mt-1">
                      {method.description}
                    </div>
                  )}
                </button>
              ))}
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </SettingsLayout>
  );
}