'use client';

import { useCallback, useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import {
  CheckCircle2,
  Copy,
  CreditCard,
  Globe,
  Info,
  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, toPlategaDraft } from '@/lib/admin/utils';
import type { PlategaDraft, PlategaSettingsResponse } from '@/lib/types/admin';
import { plategaSettingsCache } from './_cache';

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

export function PlategaTab({ isAdmin, setErrorMessage, setSuccessMessage }: PlategaTabProps) {
  const initialCached = plategaSettingsCache.read()?.data ?? null;
  const [plategaSettings, setPlategaSettings] = useState<PlategaSettingsResponse | null>(initialCached);
  const [plategaDraft, setPlategaDraft] = useState<PlategaDraft | null>(
    initialCached ? toPlategaDraft(initialCached) : null
  );
  const [plategaApiKey, setPlategaApiKey] = useState('');
  const [isPlategaSaving, setIsPlategaSaving] = useState(false);
  const [isPlategaTesting, setIsPlategaTesting] = useState(false);

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

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

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

    setPlategaSettings(data);
    setPlategaDraft(toPlategaDraft(data));
  }, [getApiErrorText, isAdmin]);

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

  const handleSavePlatega = useCallback(async () => {
    if (!isAdmin || !plategaDraft) return;

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

    setIsPlategaSaving(true);
    setSuccessMessage('');

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

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

      const data = await response.json() as PlategaSettingsResponse;
      plategaSettingsCache.set(data);
      setPlategaSettings(data);
      setPlategaDraft(toPlategaDraft(data));
      setPlategaApiKey('');
      setErrorMessage('');
      setSuccessMessage('Настройки Platega сохранены.');
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : 'Не удалось сохранить настройки Platega');
    } finally {
      setIsPlategaSaving(false);
    }
  }, [getApiErrorText, plategaApiKey, plategaDraft, isAdmin, setErrorMessage, setSuccessMessage]);

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

    setIsPlategaTesting(true);
    setSuccessMessage('');

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

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

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

  const canTestPlatega = Boolean(plategaSettings?.hasToken && plategaSettings.merchantId);

  return (
    <motion.div
      key="platega"
      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">
          Настройки Platega доступны только администратору.
        </div>
      ) : !plategaDraft || !plategaSettings ? (
        <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>Загрузка настроек Platega...</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-emerald-500/10 rounded-xl border border-emerald-500/20 group-hover:scale-110 transition-transform">
                  <CreditCard className="w-6 h-6 text-emerald-400 drop-shadow-[0_0_10px_rgba(16,185,129,0.3)]" />
                </div>
                Платежная интеграция Platega
              </h2>
              <p className="text-gray-400 mt-2 max-w-2xl leading-relaxed text-sm">
                Platega — единая платёжная ссылка: карта / СБП / ЕРИП / крипта. Метод оплаты плательщик выбирает сам на странице Platega.
              </p>
            </div>
            <div className="flex items-center gap-3 shrink-0">
              <button
                type="button"
                onClick={() => void handleSavePlatega()}
                disabled={isPlategaSaving}
                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"
              >
                {isPlategaSaving ? 'Сохранение...' : 'Сохранить все'}
              </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">Приём платежей Platega</span>
                      <span className="text-xs text-gray-500 block">Кнопка оплаты будет показана на странице тарифов</span>
                    </div>
                    <CustomToggle checked={plategaDraft.enabled} onChange={(value) => setPlategaDraft((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={plategaDraft.invoiceExpiresInSec}
                      onChange={(event) => setPlategaDraft((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"
                    />
                    <p className="text-[11px] text-gray-500 ml-1">Страница оплаты Platega сама устанавливает реальный срок (обычно 15 минут); это значение используется как fallback на нашей стороне.</p>
                  </div>

                  <div className="space-y-2">
                    <label className="text-sm text-gray-300 font-medium ml-1">Fiat валюта</label>
                    <input
                      type="text"
                      placeholder="USD"
                      value={plategaDraft.fiat}
                      onChange={(event) => setPlategaDraft((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>
              </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={plategaDraft.merchantId}
                      onChange={(event) => setPlategaDraft((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">В личном кабинете Platega (раздел «Настройки») называется <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',
                          plategaSettings.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" /> {plategaSettings.hasToken ? 'Сохранён' : 'Не задан'}
                      </span>
                    </label>
                    <div className="flex gap-2">
                      <input
                        type="password"
                        placeholder={plategaSettings.hasToken ? 'Оставьте пустым, чтобы не менять' : 'Введите API-ключ'}
                        value={plategaApiKey}
                        onChange={(event) => setPlategaApiKey(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 handleTestPlatega()}
                        disabled={isPlategaTesting || !canTestPlatega}
                        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"
                      >
                        {isPlategaTesting ? 'Проверка...' : 'Проверить'}
                      </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={plategaSettings.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>
                    <div className="flex items-start gap-2 mt-2 p-3 rounded-2xl border border-amber-500/20 bg-amber-500/5">
                      <Info className="w-4 h-4 text-amber-300 mt-0.5 shrink-0" />
                      <p className="text-[11px] text-amber-100/90 leading-relaxed">
                        У Platega этот адрес задаётся один раз в личном кабинете: <span className="font-semibold">Настройки → Callback URLs</span>. Скопируйте отсюда и вставьте туда — на этот адрес Platega присылает уведомления об оплате.
                      </p>
                    </div>
                  </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',
                          plategaSettings.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" /> {plategaSettings.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',
                          plategaSettings.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" /> {plategaSettings.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',
                          plategaSettings.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" /> {plategaSettings.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(plategaSettings.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(plategaSettings.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">{plategaSettings.diagnostics.lastWebhookErrorText || '— Ошибок не зафиксировано'}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </>
      )}
    </motion.div>
  );
}