'use client';

import { useCallback, useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import {
  CheckCircle2,
  Copy,
  CreditCard,
  Globe,
  Link as LinkIcon,
  Zap,
} from 'lucide-react';
import { Activity } from '@/app/admin/_components/icons';
import { CustomToggle } from '@/app/admin/_components/CustomToggle';
import { getResponseErrorTextWithRequestId } from '@/lib/api-client';
import { cn, formatDateTime, toGateway2328Draft } from '@/lib/admin/utils';
import type { Gateway2328Draft, Gateway2328SettingsResponse } from '@/lib/types/admin';
import { gateway2328SettingsCache } from './_cache';

type Gateway2328TabProps = {
  isAdmin: boolean;
  setErrorMessage: (message: string) => void;
  setSuccessMessage: (message: string) => void;
};

export function Gateway2328Tab({ isAdmin, setErrorMessage, setSuccessMessage }: Gateway2328TabProps) {
  const initialCached = gateway2328SettingsCache.read()?.data ?? null;
  const [gateway2328Settings, setGateway2328Settings] = useState<Gateway2328SettingsResponse | null>(initialCached);
  const [gateway2328Draft, setGateway2328Draft] = useState<Gateway2328Draft | null>(
    initialCached ? toGateway2328Draft(initialCached) : null
  );
  const [gateway2328ApiKey, setGateway2328ApiKey] = useState('');
  const [isGateway2328Saving, setIsGateway2328Saving] = useState(false);
  const [isGateway2328Testing, setIsGateway2328Testing] = useState(false);

  const getApiErrorText = useCallback(async (response: Response, fallback: string) => {
    return getResponseErrorTextWithRequestId(response, fallback);
  }, []);

  const fetchGateway2328Settings = useCallback(async (options?: { force?: boolean }) => {
    if (!isAdmin) return;

    const data = await gateway2328SettingsCache.fetch(async () => {
      const response = await fetch('/api/admin/billing/providers/gateway2328', { cache: 'no-store' });
      if (!response.ok) {
        throw new Error(await getApiErrorText(response, 'Не удалось загрузить настройки 2328.io'));
      }
      return await response.json() as Gateway2328SettingsResponse;
    }, options);

    setGateway2328Settings(data);
    setGateway2328Draft(toGateway2328Draft(data));
  }, [getApiErrorText, isAdmin]);

  useEffect(() => {
    if (!isAdmin) return;
    const cached = gateway2328SettingsCache.read();
    if (cached && gateway2328SettingsCache.isFresh(cached)) {
      return;
    }
    let cancelled = false;
    void fetchGateway2328Settings().catch((error) => {
      if (!cancelled) {
        setErrorMessage(error instanceof Error ? error.message : 'Не удалось загрузить настройки 2328.io');
      }
    });
    return () => {
      cancelled = true;
    };
  }, [fetchGateway2328Settings, isAdmin, setErrorMessage]);

  const handleSaveGateway2328 = useCallback(async () => {
    if (!isAdmin || !gateway2328Draft) return;

    const invoiceExpiresInSec = Number.parseInt(gateway2328Draft.invoiceExpiresInSec, 10);
    if (!Number.isInteger(invoiceExpiresInSec) || invoiceExpiresInSec <= 0) {
      setErrorMessage('Срок жизни счёта должен быть целым числом больше 0.');
      return;
    }

    setIsGateway2328Saving(true);
    setSuccessMessage('');

    try {
      const payload: Record<string, unknown> = {
        enabled: gateway2328Draft.enabled,
        projectUuid: gateway2328Draft.projectUuid.trim() || null,
        fiat: gateway2328Draft.fiat.trim() || 'USD',
        toCurrency: gateway2328Draft.toCurrency.trim() || null,
        cryptoNetwork: gateway2328Draft.cryptoNetwork.trim() || null,
        feeSplit: gateway2328Draft.feeSplit.trim() || null,
        priceMarkup: gateway2328Draft.priceMarkup.trim() || null,
        invoiceExpiresInSec,
      };
      if (gateway2328ApiKey.trim()) {
        payload.apiKey = gateway2328ApiKey.trim();
      }

      const response = await fetch('/api/admin/billing/providers/gateway2328', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      if (!response.ok) {
        throw new Error(await getApiErrorText(response, 'Не удалось сохранить настройки 2328.io'));
      }

      const data = await response.json() as Gateway2328SettingsResponse;
      gateway2328SettingsCache.set(data);
      setGateway2328Settings(data);
      setGateway2328Draft(toGateway2328Draft(data));
      setGateway2328ApiKey('');
      setErrorMessage('');
      setSuccessMessage('Настройки 2328.io сохранены.');
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : 'Не удалось сохранить настройки 2328.io');
    } finally {
      setIsGateway2328Saving(false);
    }
  }, [gateway2328ApiKey, gateway2328Draft, getApiErrorText, isAdmin, setErrorMessage, setSuccessMessage]);

  const handleTestGateway2328 = useCallback(async () => {
    if (!isAdmin) return;

    setIsGateway2328Testing(true);
    setSuccessMessage('');

    try {
      const response = await fetch('/api/admin/billing/providers/gateway2328/test', {
        method: 'POST',
      });
      if (!response.ok) {
        throw new Error(await getApiErrorText(response, 'Не удалось проверить подключение 2328.io'));
      }

      await fetchGateway2328Settings({ force: true });
      setErrorMessage('');
      setSuccessMessage('Подключение 2328.io успешно проверено.');
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : 'Не удалось проверить подключение 2328.io');
    } finally {
      setIsGateway2328Testing(false);
    }
  }, [fetchGateway2328Settings, getApiErrorText, isAdmin, setErrorMessage, setSuccessMessage]);

  const handleCopyGateway2328Webhook = useCallback(async () => {
    if (!gateway2328Settings?.webhookUrl) return;
    try {
      await navigator.clipboard.writeText(gateway2328Settings.webhookUrl);
      setSuccessMessage('Адрес уведомлений 2328.io скопирован.');
    } catch {
      setErrorMessage('Не удалось скопировать адрес уведомлений.');
    }
  }, [gateway2328Settings, setErrorMessage, setSuccessMessage]);

  const canTestGateway2328 = Boolean(gateway2328Settings?.hasToken && gateway2328Settings.projectUuid);

  return (
    <motion.div key="gateway2328" initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} className="space-y-6 max-w-5xl mx-auto pb-10">
      {!isAdmin ? (
        <div className="rounded-2xl border border-white/10 bg-white/[0.02] p-6 text-sm text-gray-300">
          Настройки 2328.io доступны только администратору.
        </div>
      ) : !gateway2328Draft || !gateway2328Settings ? (
        <div className="rounded-2xl border border-white/10 bg-white/[0.02] p-10 text-sm text-gray-400 text-center">
          <div className="inline-block w-6 h-6 border-2 border-violet-500 border-t-transparent rounded-full animate-spin mb-3" />
          <p>Загрузка настроек 2328.io...</p>
        </div>
      ) : (
        <>
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8 group">
            <div>
              <h2 className="text-2xl font-bold flex items-center gap-3">
                <div className="p-2.5 bg-violet-500/10 rounded-xl border border-violet-500/20 group-hover:scale-110 transition-transform">
                  <CreditCard className="w-6 h-6 text-violet-400 drop-shadow-[0_0_10px_rgba(139,92,246,0.3)]" />
                </div>
                Платёжная интеграция 2328.io
              </h2>
              <p className="text-gray-400 mt-2 max-w-2xl leading-relaxed text-sm">
                Криптошлюз 2328.io для приёма платежей. Поддерживает разные сети и автоматический перевод из USD в крипту на стороне провайдера. Адрес уведомлений об оплате прикрепляется к каждому счёту автоматически — в кабинете 2328 его указывать не нужно.
              </p>
            </div>
            <div className="flex items-center gap-3 shrink-0">
              <button
                type="button"
                onClick={() => void handleSaveGateway2328()}
                disabled={isGateway2328Saving}
                className="bg-gradient-to-r from-fuchsia-500 to-violet-600 hover:brightness-110 text-white font-medium px-6 py-2.5 rounded-xl text-sm transition-all shadow-[0_0_20px_rgba(139,92,246,0.25)] hover:shadow-[0_0_25px_rgba(139,92,246,0.45)] hover:-translate-y-0.5 disabled:opacity-60"
              >
                {isGateway2328Saving ? 'Сохранение...' : 'Сохранить все'}
              </button>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
            <div className="space-y-6 flex flex-col min-w-0">
              <div className="bg-[#0A0A0A] border border-white/5 rounded-3xl p-6 md:p-8 shadow-xl hover:border-white/10 transition-colors">
                <h3 className="text-lg font-bold text-white mb-6 flex items-center gap-2">
                  <Zap className="w-5 h-5 text-gray-400" /> Основные настройки
                </h3>

                <div className="space-y-5">
                  <div className="flex items-center justify-between gap-4 bg-white/[0.02] border border-white/[0.05] hover:border-violet-500/30 p-4 rounded-2xl transition-all group/toggle">
                    <div className="space-y-1 pr-4 min-w-0">
                      <span className="text-sm font-bold text-white block group-hover/toggle:text-violet-200 transition-colors">Приём платежей 2328.io</span>
                      <span className="text-xs text-gray-500 block">Кнопка оплаты будет показана на странице тарифов</span>
                    </div>
                    <CustomToggle checked={gateway2328Draft.enabled} onChange={(value) => setGateway2328Draft((prev) => (prev ? { ...prev, enabled: value } : prev))} />
                  </div>

                  <div className="space-y-2">
                    <label className="text-sm text-gray-300 font-medium ml-1">Срок жизни счёта, сек</label>
                    <input
                      type="number"
                      min={1}
                      value={gateway2328Draft.invoiceExpiresInSec}
                      onChange={(event) => setGateway2328Draft((prev) => (prev ? { ...prev, invoiceExpiresInSec: event.target.value } : prev))}
                      className="w-full bg-black/40 border border-white/10 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-violet-500/50 text-white"
                    />
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div className="space-y-2">
                      <label className="text-sm text-gray-300 font-medium ml-1">Fiat валюта</label>
                      <input
                        type="text"
                        placeholder="USD"
                        value={gateway2328Draft.fiat}
                        onChange={(event) => setGateway2328Draft((prev) => (prev ? { ...prev, fiat: event.target.value.toUpperCase() } : prev))}
                        className="w-full bg-black/40 border border-white/10 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-violet-500/50 text-white font-mono"
                      />
                    </div>
                    <div className="space-y-2">
                      <label className="text-sm text-gray-300 font-medium ml-1">Целевая крипта</label>
                      <input
                        type="text"
                        placeholder="USDT"
                        value={gateway2328Draft.toCurrency}
                        onChange={(event) => setGateway2328Draft((prev) => (prev ? { ...prev, toCurrency: event.target.value.toUpperCase() } : prev))}
                        className="w-full bg-black/40 border border-white/10 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-violet-500/50 text-white font-mono"
                      />
                    </div>
                  </div>

                  <div className="space-y-2">
                    <label className="text-sm text-gray-300 font-medium ml-1">Сеть</label>
                    <input
                      type="text"
                      placeholder="TRX-TRC20"
                      value={gateway2328Draft.cryptoNetwork}
                      onChange={(event) => setGateway2328Draft((prev) => (prev ? { ...prev, cryptoNetwork: event.target.value.toUpperCase() } : prev))}
                      className="w-full bg-black/40 border border-white/10 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-violet-500/50 text-white font-mono"
                    />
                    <p className="text-[11px] text-gray-500 ml-1">Например: TRX-TRC20, BSC-BEP20, TON. Оставьте пустым для выбора на стороне пользователя.</p>
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div className="space-y-2">
                      <label className="text-sm text-gray-300 font-medium ml-1">Fee split (0–100)</label>
                      <input
                        type="number"
                        min={0}
                        max={100}
                        value={gateway2328Draft.feeSplit}
                        onChange={(event) => setGateway2328Draft((prev) => (prev ? { ...prev, feeSplit: event.target.value } : prev))}
                        className="w-full bg-black/40 border border-white/10 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-violet-500/50 text-white"
                      />
                    </div>
                    <div className="space-y-2">
                      <label className="text-sm text-gray-300 font-medium ml-1">Price markup (-99..100)</label>
                      <input
                        type="number"
                        min={-99}
                        max={100}
                        value={gateway2328Draft.priceMarkup}
                        onChange={(event) => setGateway2328Draft((prev) => (prev ? { ...prev, priceMarkup: event.target.value } : prev))}
                        className="w-full bg-black/40 border border-white/10 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-violet-500/50 text-white"
                      />
                    </div>
                  </div>
                </div>
              </div>

              <div className="bg-[#0A0A0A] border border-white/5 rounded-3xl p-6 md:p-8 shadow-xl hover:border-white/10 transition-colors">
                <h3 className="text-lg font-bold text-white mb-6 flex items-center gap-2">
                  <LinkIcon className="w-5 h-5 text-gray-400" /> Подключение и API
                </h3>

                <div className="space-y-5">
                  <div className="space-y-2">
                    <label className="text-sm text-gray-300 font-medium ml-1">Идентификатор проекта</label>
                    <input
                      type="text"
                      placeholder="abcdef01-2345-..."
                      value={gateway2328Draft.projectUuid}
                      onChange={(event) => setGateway2328Draft((prev) => (prev ? { ...prev, projectUuid: event.target.value } : prev))}
                      className="w-full bg-black/40 border border-white/10 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-violet-500/50 text-white font-mono"
                    />
                    <p className="text-[11px] text-gray-500 ml-1">В кабинете 2328.io называется <span className="font-mono">Project UUID</span>.</p>
                  </div>

                  <div className="space-y-2">
                    <label className="text-sm text-gray-300 font-medium ml-1 flex justify-between items-center gap-2">
                      <span>API-ключ проекта</span>
                      <span className={cn(
                        'text-[10px] px-2 py-1 rounded-lg border font-bold uppercase tracking-wider flex items-center gap-1',
                        gateway2328Settings.hasToken
                          ? 'text-green-400 bg-green-500/10 border-green-500/20'
                          : 'text-gray-400 bg-white/5 border-white/10'
                      )}>
                        <CheckCircle2 className="w-3 h-3" /> {gateway2328Settings.hasToken ? 'Сохранён' : 'Не задан'}
                      </span>
                    </label>
                    <div className="flex gap-2">
                      <input
                        type="password"
                        placeholder={gateway2328Settings.hasToken ? 'Оставьте пустым, чтобы не менять' : 'Введите API-ключ'}
                        value={gateway2328ApiKey}
                        onChange={(event) => setGateway2328ApiKey(event.target.value)}
                        className="flex-1 min-w-0 bg-black/40 hover:bg-white/[0.02] border border-white/10 rounded-2xl px-4 py-2.5 text-sm outline-none focus:border-violet-500/50 focus:bg-white/[0.02] placeholder-gray-600 transition-all text-white"
                      />
                      <button
                        type="button"
                        onClick={() => void handleTestGateway2328()}
                        disabled={isGateway2328Testing || !canTestGateway2328}
                        className="px-4 py-2.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-2xl text-sm font-medium transition-colors text-white whitespace-nowrap disabled:opacity-60"
                      >
                        {isGateway2328Testing ? 'Проверка...' : 'Проверить'}
                      </button>
                    </div>
                    <p className="text-[11px] text-gray-500 ml-1">Сначала сохраните ключи и идентификаторы, затем можно выполнить проверку.</p>
                  </div>

                  <div className="space-y-2">
                    <label className="text-sm text-gray-300 font-medium ml-1 flex items-center gap-2">
                      <Globe className="w-4 h-4 text-violet-400" /> Адрес уведомлений об оплате
                    </label>
                    <div className="flex gap-2 relative">
                      <input type="text" readOnly value={gateway2328Settings.webhookUrl} className="flex-1 min-w-0 bg-black/40 border border-white/10 rounded-2xl px-4 py-2.5 pr-11 text-xs outline-none text-violet-200 font-mono" />
                      <button type="button" onClick={() => void handleCopyGateway2328Webhook()} className="absolute right-1.5 top-1/2 -translate-y-1/2 p-2 bg-white/5 hover:bg-white/10 rounded-xl text-gray-400 hover:text-white transition-colors border border-white/5 hover:border-white/10" title="Скопировать адрес">
                        <Copy className="w-3.5 h-3.5" />
                      </button>
                    </div>
                    <p className="text-[11px] text-gray-500 ml-1">Прикрепляется к каждому счёту автоматически — 2328.io присылает сюда уведомление об оплате. Вручную в кабинете 2328 ничего указывать не нужно. Проверьте, что домен совпадает с адресом сайта.</p>
                  </div>
                </div>
              </div>
            </div>

            <div className="min-w-0">
              <div className="bg-white/[0.02] border border-white/5 rounded-3xl p-6 md:p-8 shadow-xl lg:sticky lg:top-4">
                <h3 className="font-bold text-lg text-white flex items-center gap-3 mb-6">
                  <div className="p-2 bg-green-500/20 rounded-xl border border-green-500/30 text-green-400">
                    <Activity className="w-4 h-4" />
                  </div>
                  Диагностика связи
                </h3>

                <div className="space-y-5 text-sm">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 border-b border-white/5 pb-5">
                    <div className="flex flex-col gap-1.5">
                      <span className="text-gray-500 text-xs font-bold uppercase tracking-wider">API-ключ</span>
                      <span className={cn(
                        'font-medium flex items-center gap-2 w-max px-3 py-1 rounded-lg border',
                        gateway2328Settings.hasToken
                          ? 'text-green-400 bg-green-500/10 border-green-500/20'
                          : 'text-gray-400 bg-white/5 border-white/10'
                      )}>
                        <CheckCircle2 className="w-4 h-4" /> {gateway2328Settings.hasToken ? 'Сохранён' : 'Не задан'}
                      </span>
                    </div>
                    <div className="flex flex-col gap-1.5">
                      <span className="text-gray-500 text-xs font-bold uppercase tracking-wider">Приём платежей</span>
                      <span className={cn(
                        'font-medium flex items-center gap-2 w-max px-3 py-1 rounded-lg border',
                        gateway2328Settings.enabled
                          ? 'text-green-400 bg-green-500/10 border-green-500/20'
                          : 'text-gray-400 bg-white/5 border-white/10'
                      )}>
                        <CheckCircle2 className="w-4 h-4" /> {gateway2328Settings.enabled ? 'Включен' : 'Выключен'}
                      </span>
                    </div>
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 border-b border-white/5 pb-5">
                    <div className="flex flex-col gap-1.5">
                      <span className="text-gray-500 text-xs font-bold uppercase tracking-wider">Последняя проверка</span>
                      <span className="text-gray-300 font-mono bg-black/40 w-max px-3 py-1 rounded-lg border border-white/5">{formatDateTime(gateway2328Settings.diagnostics.lastCheckedAt)}</span>
                    </div>
                    <div className="flex flex-col gap-1.5">
                      <span className="text-gray-500 text-xs font-bold uppercase tracking-wider">Последнее уведомление</span>
                      <span className="text-gray-300 font-mono bg-black/40 w-max px-3 py-1 rounded-lg border border-white/5">{formatDateTime(gateway2328Settings.diagnostics.lastWebhookAt)}</span>
                    </div>
                  </div>

                  <div className="flex flex-col gap-1.5">
                    <span className="text-gray-500 text-xs font-bold uppercase tracking-wider">Последняя ошибка</span>
                    <span className="text-gray-400 text-xs break-words">{gateway2328Settings.diagnostics.lastWebhookErrorText || '— Ошибок не зафиксировано'}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </>
      )}
    </motion.div>
  );
}