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

export default function PaymentGatewayConfigurator() {
  const [gateways, setGateways] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [selectedGateway, setSelectedGateway] = useState<any>(null);
  const [showSecret, setShowSecret] = useState<Record<string, boolean>>({});
  const [testStatus, setTestStatus] = useState<Record<string, { status: string; color: string }>>({});

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

  const fetchGateways = async () => {
    setLoading(true);
    try {
      const res = await api.get('/admin/payment-gateways');
      const list = res.data?.data?.gateways || [];
      setGateways(list);
      if (list.length > 0 && !selectedGateway) {
        setSelectedGateway(list[0]);
      } else if (selectedGateway) {
        const updated = list.find((g: any) => g.id === selectedGateway.id);
        if (updated) setSelectedGateway(updated);
      }
    } catch (err: any) {
      showToast('Failed to load gateways configuration', 'error');
    } finally {
      setLoading(false);
    }
  };

  const handleToggleGateway = async (gateway: any) => {
    try {
      const res = await api.post(`/admin/payment-gateways/${gateway.id}/toggle`);
      showToast(res.data?.message || 'Gateway status updated', 'success');
      fetchGateways();
    } catch (err: any) {
      showToast('Toggle failed', 'error');
    }
  };

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

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

    try {
      await api.put(`/admin/payment-gateways/${selectedGateway.id}`, selectedGateway);
      showToast(`${selectedGateway.displayName} settings saved successfully!`, 'success');
      fetchGateways();
    } 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">
      <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">
            <CreditCard className="w-5 h-5 text-[#701a08]" /> Payment Gateway Configurations
          </h2>
          <p className="text-xs text-zinc-500 mt-0.5">
            Manage public-facing gateways, toggle live/sandbox environments, configure APIs, and verify endpoints.
          </p>
        </div>
        <button
          onClick={fetchGateways}
          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 animate-spin-slow" />
        </button>
      </div>

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

            return (
              <div
                key={g.id}
                onClick={() => setSelectedGateway(g)}
                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">{g.displayName}</span>
                  <button
                    type="button"
                    onClick={(e) => {
                      e.stopPropagation();
                      handleToggleGateway(g);
                    }}
                    className="text-zinc-600 hover:text-[#701a08] transition-colors"
                  >
                    {g.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">{g.environment}</span>
                  <span className={statusInfo.color}>{statusInfo.status}</span>
                </div>
              </div>
            );
          })}
        </div>

        {/* Right Side: Gateway Settings Form */}
        <div className="lg:col-span-2">
          {selectedGateway ? (
            <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 {selectedGateway.displayName}
                </span>
                <button
                  type="button"
                  onClick={() => handleTestConnection(selectedGateway)}
                  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={selectedGateway.displayName}
                    onChange={(e) => setSelectedGateway({ ...selectedGateway, 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={selectedGateway.environment}
                    onChange={(e) => setSelectedGateway({ ...selectedGateway, 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="live">Live (Production)</option>
                  </select>
                </div>

                {/* Conditional Fields based on Gateway Type */}
                {selectedGateway.gatewayName === 'PAYPAL' ? (
                  <>
                    <div>
                      <label className="text-zinc-500 block mb-1">Client ID</label>
                      <input
                        type="text"
                        value={selectedGateway.clientId || ''}
                        onChange={(e) => setSelectedGateway({ ...selectedGateway, clientId: 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">Client Secret</label>
                      <div className="relative">
                        <input
                          type={showSecret['clientSecret'] ? 'text' : 'password'}
                          value={selectedGateway.clientSecret || ''}
                          onChange={(e) => setSelectedGateway({ ...selectedGateway, clientSecret: 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('clientSecret')}
                          className="absolute right-3 top-3 text-zinc-400 hover:text-zinc-600"
                        >
                          {showSecret['clientSecret'] ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                        </button>
                      </div>
                    </div>
                  </>
                ) : selectedGateway.gatewayName === 'PHONEPE' ? (
                  <>
                    <div>
                      <label className="text-zinc-500 block mb-1">Merchant ID</label>
                      <input
                        type="text"
                        value={selectedGateway.merchantId || ''}
                        onChange={(e) => setSelectedGateway({ ...selectedGateway, merchantId: 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">Salt Key</label>
                      <div className="relative">
                        <input
                          type={showSecret['saltKey'] ? 'text' : 'password'}
                          value={selectedGateway.saltKey || ''}
                          onChange={(e) => setSelectedGateway({ ...selectedGateway, saltKey: 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('saltKey')}
                          className="absolute right-3 top-3 text-zinc-400 hover:text-zinc-600"
                        >
                          {showSecret['saltKey'] ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                        </button>
                      </div>
                    </div>
                    <div>
                      <label className="text-zinc-500 block mb-1">Salt Index</label>
                      <input
                        type="text"
                        value={selectedGateway.saltIndex || ''}
                        onChange={(e) => setSelectedGateway({ ...selectedGateway, saltIndex: 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>
                  </>
                ) : selectedGateway.gatewayName === 'UPI' ? (
                  <>
                    <div>
                      <label className="text-zinc-500 block mb-1">UPI VPA Merchant ID</label>
                      <input
                        type="text"
                        value={selectedGateway.merchantId || ''}
                        onChange={(e) => setSelectedGateway({ ...selectedGateway, merchantId: 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 Key / Merchant Key</label>
                      <input
                        type="text"
                        value={selectedGateway.keyId || ''}
                        onChange={(e) => setSelectedGateway({ ...selectedGateway, keyId: 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">Secret Key / Salt Key</label>
                      <div className="relative">
                        <input
                          type={showSecret['keySecret'] ? 'text' : 'password'}
                          value={selectedGateway.keySecret || ''}
                          onChange={(e) => setSelectedGateway({ ...selectedGateway, keySecret: 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('keySecret')}
                          className="absolute right-3 top-3 text-zinc-400 hover:text-zinc-600"
                        >
                          {showSecret['keySecret'] ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                        </button>
                      </div>
                    </div>
                  </>
                )}

                {/* Common Fields */}
                <div>
                  <label className="text-zinc-500 block mb-1">Callback Redirect URL</label>
                  <input
                    type="text"
                    value={selectedGateway.callbackUrl || ''}
                    onChange={(e) => setSelectedGateway({ ...selectedGateway, callbackUrl: 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 text-zinc-400"
                  />
                </div>

                <div>
                  <label className="text-zinc-500 block mb-1">Webhook URL</label>
                  <input
                    type="text"
                    value={selectedGateway.webhookUrl || ''}
                    onChange={(e) => setSelectedGateway({ ...selectedGateway, webhookUrl: 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 text-zinc-400"
                  />
                </div>

                <div>
                  <label className="text-zinc-500 block mb-1">Currency Code</label>
                  <input
                    type="text"
                    value={selectedGateway.currency}
                    onChange={(e) => setSelectedGateway({ ...selectedGateway, currency: 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">Sort Order</label>
                  <input
                    type="number"
                    value={selectedGateway.sortOrder}
                    onChange={(e) => setSelectedGateway({ ...selectedGateway, sortOrder: 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>

              <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 flex items-center gap-1.5"
                >
                  Save Settings
                </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 payment gateway channel from the left menu to configure credentials.
            </div>
          )}
        </div>
      </div>
    </div>
  );
}