import React, { useState, useEffect } from 'react';
import { Truck, ToggleLeft, ToggleRight, Sparkles, RefreshCw, Eye, EyeOff, ShieldAlert } from 'lucide-react';
import api from '@/lib/api';
import { showToast } from '@/components/common/Toast';

export default function ShippingProviderConfigurator() {
  const [providers, setProviders] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [selectedProvider, setSelectedProvider] = useState<any>(null);
  const [showSecret, setShowSecret] = useState<Record<string, boolean>>({});
  const [testStatus, setTestStatus] = useState<Record<string, { status: string; color: string }>>({});

  useEffect(() => {
    fetchProviders();
  }, []);

  const fetchProviders = async () => {
    setLoading(true);
    try {
      const res = await api.get('/admin/shipping/providers');
      const list = res.data?.data?.providers || [];
      setProviders(list);
      if (list.length > 0 && !selectedProvider) {
        setSelectedProvider(list[0]);
      } else if (selectedProvider) {
        const updated = list.find((p: any) => p.id === selectedProvider.id);
        if (updated) setSelectedProvider(updated);
      }
    } catch (err: any) {
      showToast('Failed to load shipping configurations', 'error');
    } finally {
      setLoading(false);
    }
  };

  const handleToggleProvider = async (provider: any) => {
    try {
      const res = await api.post(`/admin/shipping/providers/${provider.id}/toggle`);
      showToast(res.data?.message || 'Provider status updated', 'success');
      fetchProviders();
    } catch (err: any) {
      showToast('Toggle failed', 'error');
    }
  };

  const handleTestConnection = async (provider: any) => {
    setTestStatus((prev) => ({ ...prev, [provider.id]: { status: 'Testing...', color: 'text-amber-500' } }));
    try {
      const res = await api.post(`/admin/shipping/providers/${provider.id}/test-connection`);
      const { connected, message } = res.data?.data || {};
      if (connected) {
        setTestStatus((prev) => ({ ...prev, [provider.id]: { status: 'Connected', color: 'text-green-600' } }));
        showToast(`Connected to ${provider.providerName}: ${message}`, 'success');
      } else {
        setTestStatus((prev) => ({ ...prev, [provider.id]: { status: 'Failed', color: 'text-red-500' } }));
        showToast(`Connection to ${provider.providerName} failed: ${message}`, 'error');
      }
    } catch (err: any) {
      setTestStatus((prev) => ({ ...prev, [provider.id]: { status: 'Error', color: 'text-red-500' } }));
    }
  };

  const handleSave = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedProvider) return;

    try {
      await api.put(`/admin/shipping/providers/${selectedProvider.id}`, selectedProvider);
      showToast(`${selectedProvider.displayName} settings saved successfully!`, 'success');
      fetchProviders();
    } catch (err: any) {
      showToast('Failed to save settings', 'error');
    }
  };

  const toggleVisibility = (field: string) => {
    setShowSecret((prev) => ({ ...prev, [field]: !prev[field] }));
  };

  return (
    <div className="bg-white dark:bg-zinc-900 rounded-3xl border border-zinc-200 dark:border-zinc-800 p-6 sm:p-8 space-y-8 shadow-sm mt-8">
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-zinc-100 dark:border-zinc-800 pb-5">
        <div>
          <h2 className="text-xl font-extrabold flex items-center gap-2">
            <Truck className="w-5 h-5 text-[#701a08]" /> Shipping Providers Settings
          </h2>
          <p className="text-xs text-zinc-500 mt-0.5">
            Configure integration tokens, sandbox testing, priority ordering, and warehouse details for carriers.
          </p>
        </div>
        <button
          onClick={fetchProviders}
          className="p-2 rounded-xl bg-zinc-50 dark:bg-zinc-800 hover:bg-zinc-100 text-zinc-600 dark:text-zinc-300"
        >
          <RefreshCw className="w-4 h-4" />
        </button>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Left Side: Providers List */}
        <div className="space-y-3">
          <span className="text-[10px] uppercase font-bold tracking-wider text-zinc-400 block mb-1">Shipping Channels</span>
          {providers.map((p) => {
            const isSelected = selectedProvider?.id === p.id;
            const statusInfo = testStatus[p.id] || { status: 'Untested', color: 'text-zinc-400' };

            return (
              <div
                key={p.id}
                onClick={() => setSelectedProvider(p)}
                className={`p-4 rounded-2xl border cursor-pointer transition-all space-y-2.5 ${
                  isSelected
                    ? 'border-[#701a08] bg-rose-50/50 dark:bg-rose-950/20 text-[#701a08] shadow-xs'
                    : 'border-zinc-200 dark:border-zinc-800 hover:border-zinc-300'
                }`}
              >
                <div className="flex justify-between items-center">
                  <span className="font-extrabold text-xs text-zinc-950 dark:text-zinc-100">{p.displayName}</span>
                  <button
                    type="button"
                    onClick={(e) => {
                      e.stopPropagation();
                      handleToggleProvider(p);
                    }}
                    className="text-zinc-600 hover:text-[#701a08]"
                  >
                    {p.isEnabled ? (
                      <ToggleRight className="w-8 h-8 text-green-600" />
                    ) : (
                      <ToggleLeft className="w-8 h-8 text-zinc-400" />
                    )}
                  </button>
                </div>
                <div className="flex justify-between items-center text-[10px] font-bold">
                  <span className="uppercase text-zinc-400">{p.environment}</span>
                  <span className={statusInfo.color}>{statusInfo.status}</span>
                </div>
              </div>
            );
          })}
        </div>

        {/* Right Side: Configuration settings forms */}
        <div className="lg:col-span-2">
          {selectedProvider ? (
            <form onSubmit={handleSave} className="space-y-6 text-xs font-semibold">
              <div className="border-b border-zinc-100 dark:border-zinc-800 pb-3 flex justify-between items-center">
                <span className="text-sm font-extrabold text-zinc-900 dark:text-zinc-100">
                  Configure {selectedProvider.displayName}
                </span>
                <button
                  type="button"
                  onClick={() => handleTestConnection(selectedProvider)}
                  className="px-3 py-1.5 rounded-lg bg-zinc-100 hover:bg-zinc-200 dark:bg-zinc-800 text-[10px] font-bold flex items-center gap-1.5 shadow-sm"
                >
                  <Sparkles className="w-3.5 h-3.5 text-amber-500" /> Test Connection
                </button>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="text-zinc-500 block mb-1">Display Name</label>
                  <input
                    type="text"
                    value={selectedProvider.displayName}
                    onChange={(e) => setSelectedProvider({ ...selectedProvider, displayName: e.target.value })}
                    className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
                  />
                </div>

                <div>
                  <label className="text-zinc-500 block mb-1">Environment Mode</label>
                  <select
                    value={selectedProvider.environment}
                    onChange={(e) => setSelectedProvider({ ...selectedProvider, environment: e.target.value })}
                    className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
                  >
                    <option value="sandbox">Sandbox (Testing)</option>
                    <option value="production">Production (Live)</option>
                  </select>
                </div>

                {selectedProvider.providerName === 'SHIPROCKET' ? (
                  <>
                    <div>
                      <label className="text-zinc-500 block mb-1">API Email</label>
                      <input
                        type="text"
                        value={selectedProvider.apiEmail || ''}
                        onChange={(e) => setSelectedProvider({ ...selectedProvider, apiEmail: e.target.value })}
                        className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-mono"
                      />
                    </div>
                    <div>
                      <label className="text-zinc-500 block mb-1">API Password</label>
                      <div className="relative">
                        <input
                          type={showSecret['apiPassword'] ? 'text' : 'password'}
                          value={selectedProvider.apiPassword || ''}
                          onChange={(e) => setSelectedProvider({ ...selectedProvider, apiPassword: e.target.value })}
                          className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-mono"
                        />
                        <button
                          type="button"
                          onClick={() => toggleVisibility('apiPassword')}
                          className="absolute right-3 top-3 text-zinc-400 hover:text-zinc-600"
                        >
                          {showSecret['apiPassword'] ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                        </button>
                      </div>
                    </div>
                  </>
                ) : null}

                {/* Warehouse details */}
                <div>
                  <label className="text-zinc-500 block mb-1">Warehouse Name</label>
                  <input
                    type="text"
                    value={selectedProvider.warehouseName || ''}
                    onChange={(e) => setSelectedProvider({ ...selectedProvider, warehouseName: e.target.value })}
                    className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
                  />
                </div>

                <div>
                  <label className="text-zinc-500 block mb-1">Pickup Location Code</label>
                  <input
                    type="text"
                    value={selectedProvider.pickupLocation || ''}
                    onChange={(e) => setSelectedProvider({ ...selectedProvider, pickupLocation: e.target.value })}
                    className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-mono"
                  />
                </div>

                <div className="sm:col-span-2">
                  <label className="text-zinc-500 block mb-1">Warehouse Address</label>
                  <textarea
                    value={selectedProvider.warehouseAddress || ''}
                    onChange={(e) => setSelectedProvider({ ...selectedProvider, warehouseAddress: e.target.value })}
                    rows={2}
                    className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
                  />
                </div>

                <div>
                  <label className="text-zinc-500 block mb-1">Contact Person Name</label>
                  <input
                    type="text"
                    value={selectedProvider.contactPerson || ''}
                    onChange={(e) => setSelectedProvider({ ...selectedProvider, contactPerson: e.target.value })}
                    className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
                  />
                </div>

                <div>
                  <label className="text-zinc-500 block mb-1">Phone Number</label>
                  <input
                    type="text"
                    value={selectedProvider.phone || ''}
                    onChange={(e) => setSelectedProvider({ ...selectedProvider, phone: e.target.value })}
                    className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
                  />
                </div>

                <div>
                  <label className="text-zinc-500 block mb-1">Pincode</label>
                  <input
                    type="text"
                    value={selectedProvider.pincode || ''}
                    onChange={(e) => setSelectedProvider({ ...selectedProvider, pincode: e.target.value })}
                    className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
                  />
                </div>

                <div>
                  <label className="text-zinc-500 block mb-1">Priority Order</label>
                  <input
                    type="number"
                    value={selectedProvider.priority}
                    onChange={(e) => setSelectedProvider({ ...selectedProvider, priority: parseInt(e.target.value) || 0 })}
                    className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
                  />
                </div>

                <div className="flex items-center gap-2 mt-4 sm:col-span-2">
                  <input
                    type="checkbox"
                    id="defaultProvider"
                    checked={selectedProvider.defaultProvider}
                    onChange={(e) => setSelectedProvider({ ...selectedProvider, defaultProvider: e.target.checked })}
                    className="rounded text-[#701a08]"
                  />
                  <label htmlFor="defaultProvider" className="text-zinc-700 dark:text-zinc-300 select-none">
                    Set as default routing provider for newly placed paid orders
                  </label>
                </div>
              </div>

              <div className="flex justify-end pt-4 border-t border-zinc-100 dark:border-zinc-800">
                <button
                  type="submit"
                  className="px-6 py-3 rounded-xl bg-[#701a08] hover:bg-[#581406] text-white text-xs font-extrabold shadow-md"
                >
                  Save Shipping Config
                </button>
              </div>
            </form>
          ) : (
            <div className="h-full flex items-center justify-center text-zinc-400 font-bold p-10 bg-zinc-50 dark:bg-zinc-850 rounded-2xl">
              Select a logistics carrier to edit credentials settings.
            </div>
          )}
        </div>
      </div>
    </div>
  );
}