'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, toHeleketDraft } from '@/lib/admin/utils';
import type { HeleketDraft, HeleketSettingsResponse } from '@/lib/types/admin';
import { heleketSettingsCache } from './_cache';

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

export function HeleketTab({ isAdmin, setErrorMessage, setSuccessMessage }: HeleketTabProps) {
  const initialCached = heleketSettingsCache.read()?.data ?? null;
  const [heleketSettings, setHeleketSettings] = useState<HeleketSettingsResponse | null>(initialCached);
  const [heleketDraft, setHeleketDraft] = useState<HeleketDraft | null>(
    initialCached ? toHeleketDraft(initialCached) : null
  );
  const [heleketApiKey, setHeleketApiKey] = useState('');
  const [isHeleketSaving, setIsHeleketSaving] = useState(false);
  const [isHeleketTesting, setIsHeleketTesting] = useState(false);

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

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

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

    setHeleketSettings(data);
    setHeleketDraft(toHeleketDraft(data));
  }, [getApiErrorText, isAdmin]);

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

  const handleSaveHeleket = useCallback(async () => {
    if (!isAdmin || !heleketDraft) return;

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

    setIsHeleketSaving(true);
    setSuccessMessage('');

    try {
      const payload: Record<string, unknown> = {
        enabled: heleketDraft.enabled,
        merchantId: heleketDraft.merchantId.trim() || null,
        fiat: heleketDraft.fiat.trim() || 'USD',
        toCurrency: heleketDraft.toCurrency.trim() || null,
        cryptoNetwork: heleketDraft.cryptoNetwork.trim() || null,
        invoiceExpiresInSec,
      };
      if (heleketApiKey.trim()) {
        payload.apiKey = heleketApiKey.trim();
      }

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

      const data = await response.json() as HeleketSettingsResponse;
      heleketSettingsCache.set(data);
      setHeleketSettings(data);
      setHeleketDraft(toHeleketDraft(data));
      setHeleketApiKey('');
      setErrorMessage('');
      setSuccessMessage('Настройки Heleket сохранены.');
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : 'Не удалось сохранить настройки Heleket');
    } finally {
      setIsHeleketSaving(false);
    }
  }, [getApiErrorText, heleketApiKey, heleketDraft, isAdmin, setErrorMessage, setSuccessMessage]);

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

    setIsHeleketTesting(true);
    setSuccessMessage('');

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

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

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

  const canTestHeleket = Boolean(heleketSettings?.hasToken && heleketSettings.merchantId);

  return (
    <motion.div
      key="heleket"
      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">
          Настройки Heleket доступны только администратору.
        </div>
      ) : !heleketDraft || !heleketSettings ? (
        <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>Загрузка настроек Heleket...</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>
                Платежная интеграция Heleket
              </h2>
              <p className="text-gray-400 mt-2 max-w-2xl leading-relaxed text-sm">
                Heleket — отдельный криптопровайдер оплаты. Адрес уведомлений об оплате автоматически прикрепляется к каждому счёту — в кабинете Heleket его указывать не нужно.
              </p>
            </div>
            <div className="flex items-center gap-3 shrink-0">
              <button
                type="button"
                onClick={() => void handleSaveHeleket()}
                disabled={isHeleketSaving}
                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"
              >
                {isHeleketSaving ? 'Сохранение...' : 'Сохранить все'}
              </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">Приём платежей Heleket</span>
                      <span className="text-xs text-gray-500 block">Кнопка оплаты будет показана на странице тарифов</span>
                    </div>
                    <CustomToggle checked={heleketDraft.enabled} onChange={(value) => setHeleketDraft((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={heleketDraft.invoiceExpiresInSec}
                      onChange={(event) => setHeleketDraft((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={heleketDraft.fiat}
                        onChange={(event) => setHeleketDraft((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={heleketDraft.toCurrency}
                        onChange={(event) => setHeleketDraft((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={heleketDraft.cryptoNetwork}
                      onChange={(event) => setHeleketDraft((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>
              </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={heleketDraft.merchantId}
                      onChange={(event) => setHeleketDraft((prev) => (prev ? { ...prev, merchantId: 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">В кабинете Heleket называется <span className="font-mono">Merchant 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',
                          heleketSettings.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" /> {heleketSettings.hasToken ? 'Сохранён' : 'Не задан'}
                      </span>
                    </label>
                    <div className="flex gap-2">
                      <input
                        type="password"
                        placeholder={heleketSettings.hasToken ? 'Оставьте пустым, чтобы не менять' : 'Введите API-ключ'}
                        value={heleketApiKey}
                        onChange={(event) => setHeleketApiKey(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 handleTestHeleket()}
                        disabled={isHeleketTesting || !canTestHeleket}
                        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"
                      >
                        {isHeleketTesting ? 'Проверка...' : 'Проверить'}
                      </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={heleketSettings.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 handleCopyWebhook()} 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">
                      Прикрепляется к каждому счёту автоматически — Heleket присылает на этот адрес уведомление, как только счёт оплачен.
                    </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">Приём платежей</span>
                      <span
                        className={cn(
                          'font-medium flex items-center gap-2 w-max px-3 py-1 rounded-lg border',
                          heleketSettings.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" /> {heleketSettings.enabled ? 'Включен' : 'Выключен'}
                      </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',
                          heleketSettings.hasMerchantId
                            ? '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" /> {heleketSettings.hasMerchantId ? 'Задан' : 'Не задан'}
                      </span>
                    </div>
                    <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',
                          heleketSettings.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" /> {heleketSettings.hasToken ? 'Сохранён' : 'Не задан'}
                      </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(heleketSettings.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(heleketSettings.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">{heleketSettings.diagnostics.lastWebhookErrorText || '— Ошибок не зафиксировано'}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </>
      )}
    </motion.div>
  );
}