'use client';

import { Panel, StatCard } from '@chego/ui';
import { useEffect, useMemo, useState } from 'react';
import { fetchWithSession } from './api-helpers';

type ProviderStatus = {
  provider: string;
  mode: 'ready' | 'pending';
  publicKeyConfigured: boolean;
  secretConfigured: boolean;
  webhookConfigured: boolean;
};

type GatewaySettings = {
  mercadoPagoEnabled: boolean;
  mercadoPagoEnvironment: 'production' | 'sandbox';
  mercadoPagoAccessToken: string;
  mercadoPagoPublicKey: string;
  mercadoPagoWebhookSecret: string;
  stripePublicKey: string;
  pixProvider: string;
  webhookBaseUrl: string;
  firebaseProjectId: string;
  settlementMode: string;
  settlementFlow: string;
  platformReceivesAllOnlinePayments: boolean;
  restaurantPayoutDelayDays: number;
  defaultCashOnDeliveryEnabled: boolean;
  autoConfirmOnPaidWebhook: boolean;
  autoRefundOnRefundWebhook: boolean;
  wascriptEnabled: boolean;
  wascriptBaseUrl: string;
  wascriptInstanceToken: string;
  wascriptFallbackToWeb: boolean;
  wascriptWebhookEnabled: boolean;
  wascriptWebhookSecret: string;
  wascriptWebhookCallbackUrl: string;
  providers: ProviderStatus[];
};

const emptyForm: Omit<GatewaySettings, 'providers'> = {
  mercadoPagoEnabled: false,
  mercadoPagoEnvironment: 'production',
  mercadoPagoAccessToken: '',
  mercadoPagoPublicKey: '',
  mercadoPagoWebhookSecret: '',
  stripePublicKey: '',
  pixProvider: 'PIX_INTERNO',
  webhookBaseUrl: '',
  firebaseProjectId: '',
  settlementMode: 'homologacao',
  settlementFlow: 'platform_collects_and_repasses',
  platformReceivesAllOnlinePayments: true,
  restaurantPayoutDelayDays: 7,
  defaultCashOnDeliveryEnabled: false,
  autoConfirmOnPaidWebhook: true,
  autoRefundOnRefundWebhook: true,
  wascriptEnabled: false,
  wascriptBaseUrl: 'https://api-whatsapp.wascript.com.br',
  wascriptInstanceToken: '',
  wascriptFallbackToWeb: true,
  wascriptWebhookEnabled: false,
  wascriptWebhookSecret: '',
  wascriptWebhookCallbackUrl: '',
};

export function GatewaySettingsPanel() {
  const [settings, setSettings] = useState<GatewaySettings | null>(null);
  const [form, setForm] = useState(emptyForm);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');

  const load = async () => {
    setLoading(true);
    setError('');
    try {
      const payload = (await fetchWithSession('/payments/gateway-settings')) as GatewaySettings;
      setSettings(payload);
      setForm({
        mercadoPagoEnabled: payload.mercadoPagoEnabled ?? false,
        mercadoPagoEnvironment: payload.mercadoPagoEnvironment ?? 'production',
        mercadoPagoAccessToken: payload.mercadoPagoAccessToken ?? '',
        mercadoPagoPublicKey: payload.mercadoPagoPublicKey ?? '',
        mercadoPagoWebhookSecret: payload.mercadoPagoWebhookSecret ?? '',
        stripePublicKey: payload.stripePublicKey ?? '',
        pixProvider: payload.pixProvider ?? 'PIX_INTERNO',
        webhookBaseUrl: payload.webhookBaseUrl ?? '',
        firebaseProjectId: payload.firebaseProjectId ?? '',
        settlementMode: payload.settlementMode ?? 'homologacao',
        settlementFlow: payload.settlementFlow ?? 'platform_collects_and_repasses',
        platformReceivesAllOnlinePayments: payload.platformReceivesAllOnlinePayments ?? true,
        restaurantPayoutDelayDays: payload.restaurantPayoutDelayDays ?? 7,
        defaultCashOnDeliveryEnabled: payload.defaultCashOnDeliveryEnabled ?? false,
        autoConfirmOnPaidWebhook: payload.autoConfirmOnPaidWebhook,
        autoRefundOnRefundWebhook: payload.autoRefundOnRefundWebhook,
        wascriptEnabled: payload.wascriptEnabled ?? false,
        wascriptBaseUrl: payload.wascriptBaseUrl ?? 'https://api-whatsapp.wascript.com.br',
        wascriptInstanceToken: payload.wascriptInstanceToken ?? '',
        wascriptFallbackToWeb: payload.wascriptFallbackToWeb ?? true,
        wascriptWebhookEnabled: payload.wascriptWebhookEnabled ?? false,
        wascriptWebhookSecret: payload.wascriptWebhookSecret ?? '',
        wascriptWebhookCallbackUrl: payload.wascriptWebhookCallbackUrl ?? '',
      });
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao carregar gateways.');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    void load();
  }, []);

  const metrics = useMemo(() => {
    const providers = settings?.providers ?? [];
    return {
      ready: providers.filter((provider) => provider.mode === 'ready').length,
      pending: providers.filter((provider) => provider.mode !== 'ready').length,
      secrets: providers.filter((provider) => provider.secretConfigured).length,
      publicKeys: providers.filter((provider) => provider.publicKeyConfigured).length,
    };
  }, [settings]);

  const save = async () => {
    setSaving(true);
    setError('');
    setSuccess('');
    try {
      const payload = (await fetchWithSession('/payments/gateway-settings', {
        method: 'PATCH',
        body: JSON.stringify(form),
      })) as { value: Omit<GatewaySettings, 'providers'>; providers: ProviderStatus[] };

      const nextSettings: GatewaySettings = {
        ...payload.value,
        providers: payload.providers,
      };
      setSettings(nextSettings);
      setSuccess('Configuracoes operacionais dos gateways atualizadas.');
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao salvar gateways.');
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="space-y-6">
      <section className="grid gap-4 md:grid-cols-4">
        <StatCard label="Provedores prontos" value={`${metrics.ready}`} hint="segredos presentes em .env" tone="emerald" />
        <StatCard label="Pendentes" value={`${metrics.pending}`} hint="faltam credenciais ou webhook" tone="amber" />
        <StatCard label="Segredos detectados" value={`${metrics.secrets}`} hint="server-side only" tone="sky" />
        <StatCard label="Public keys" value={`${metrics.publicKeys}`} hint="front e checkout" tone="rose" />
      </section>

      <Panel title="Gateways, PIX e notificacoes push" eyebrow="Configuracao operacional do ecossistema">
        <div className="grid gap-4 lg:grid-cols-2">
          <label className="flex items-center gap-3 rounded-[1rem] border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-700 lg:col-span-2">
            <input type="checkbox" checked={form.mercadoPagoEnabled} onChange={(event) => setForm((current) => ({ ...current, mercadoPagoEnabled: event.target.checked }))} />
            Habilitar Mercado Pago para cobranca real de PIX e cartao
          </label>
          <label className="grid gap-2 text-sm font-semibold text-slate-700">
            Ambiente Mercado Pago
            <select value={form.mercadoPagoEnvironment} onChange={(event) => setForm((current) => ({ ...current, mercadoPagoEnvironment: event.target.value as GatewaySettings['mercadoPagoEnvironment'] }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none">
              <option value="production">production</option>
              <option value="sandbox">sandbox</option>
            </select>
          </label>
          <label className="grid gap-2 text-sm font-semibold text-slate-700">
            Mercado Pago public key
            <input value={form.mercadoPagoPublicKey} onChange={(event) => setForm((current) => ({ ...current, mercadoPagoPublicKey: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" />
          </label>
          <label className="grid gap-2 text-sm font-semibold text-slate-700">
            Mercado Pago access token
            <input type="password" value={form.mercadoPagoAccessToken} onChange={(event) => setForm((current) => ({ ...current, mercadoPagoAccessToken: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" />
          </label>
          <label className="grid gap-2 text-sm font-semibold text-slate-700">
            Mercado Pago webhook secret
            <input type="password" value={form.mercadoPagoWebhookSecret} onChange={(event) => setForm((current) => ({ ...current, mercadoPagoWebhookSecret: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" />
          </label>
          <label className="grid gap-2 text-sm font-semibold text-slate-700">
            Stripe public key
            <input value={form.stripePublicKey} onChange={(event) => setForm((current) => ({ ...current, stripePublicKey: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" />
          </label>
          <label className="grid gap-2 text-sm font-semibold text-slate-700">
            PIX provider
            <input value={form.pixProvider} onChange={(event) => setForm((current) => ({ ...current, pixProvider: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" />
          </label>
          <label className="grid gap-2 text-sm font-semibold text-slate-700">
            Firebase project id
            <input value={form.firebaseProjectId} onChange={(event) => setForm((current) => ({ ...current, firebaseProjectId: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" />
          </label>
          <label className="grid gap-2 text-sm font-semibold text-slate-700 lg:col-span-2">
            Base dos webhooks
            <input value={form.webhookBaseUrl} onChange={(event) => setForm((current) => ({ ...current, webhookBaseUrl: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" />
          </label>
          <label className="grid gap-2 text-sm font-semibold text-slate-700">
            Modo de liquidacao
            <select value={form.settlementMode} onChange={(event) => setForm((current) => ({ ...current, settlementMode: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none">
              <option value="homologacao">homologacao</option>
              <option value="producao">producao</option>
              <option value="hibrido">hibrido</option>
            </select>
          </label>
          <label className="grid gap-2 text-sm font-semibold text-slate-700">
            Fluxo de repasse
            <select value={form.settlementFlow} onChange={(event) => setForm((current) => ({ ...current, settlementFlow: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none">
              <option value="platform_collects_and_repasses">plataforma recebe e repassa</option>
              <option value="direct_split">split direto</option>
            </select>
          </label>
          <label className="grid gap-2 text-sm font-semibold text-slate-700">
            Prazo de repasse em dias
            <input
              type="number"
              min={0}
              value={form.restaurantPayoutDelayDays}
              onChange={(event) => setForm((current) => ({ ...current, restaurantPayoutDelayDays: Number(event.target.value || 0) }))}
              className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none"
            />
          </label>
        </div>

        <div className="mt-6 grid gap-4 lg:grid-cols-2">
          <label className="flex items-center gap-3 rounded-[1rem] border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-700 lg:col-span-2">
            <input type="checkbox" checked={form.wascriptEnabled} onChange={(event) => setForm((current) => ({ ...current, wascriptEnabled: event.target.checked }))} />
            Habilitar Wascript para WhatsApp operacional
          </label>
          <label className="grid gap-2 text-sm font-semibold text-slate-700">
            Wascript base URL
            <input value={form.wascriptBaseUrl} onChange={(event) => setForm((current) => ({ ...current, wascriptBaseUrl: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" />
          </label>
          <label className="grid gap-2 text-sm font-semibold text-slate-700">
            Wascript instance token
            <input type="password" value={form.wascriptInstanceToken} onChange={(event) => setForm((current) => ({ ...current, wascriptInstanceToken: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" />
          </label>
          <label className="flex items-center gap-3 rounded-[1rem] border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-700">
            <input type="checkbox" checked={form.wascriptFallbackToWeb} onChange={(event) => setForm((current) => ({ ...current, wascriptFallbackToWeb: event.target.checked }))} />
            Permitir fallback para abertura manual do WhatsApp
          </label>
          <label className="flex items-center gap-3 rounded-[1rem] border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-700">
            <input type="checkbox" checked={form.wascriptWebhookEnabled} onChange={(event) => setForm((current) => ({ ...current, wascriptWebhookEnabled: event.target.checked }))} />
            Habilitar webhook da Wascript
          </label>
          <label className="grid gap-2 text-sm font-semibold text-slate-700">
            Wascript webhook secret
            <input type="password" value={form.wascriptWebhookSecret} onChange={(event) => setForm((current) => ({ ...current, wascriptWebhookSecret: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" />
          </label>
          <label className="grid gap-2 text-sm font-semibold text-slate-700">
            Wascript callback URL
            <input value={form.wascriptWebhookCallbackUrl} onChange={(event) => setForm((current) => ({ ...current, wascriptWebhookCallbackUrl: event.target.value }))} className="rounded-[1rem] border border-slate-200 bg-white px-4 py-3 outline-none" />
          </label>
        </div>

        <div className="mt-5 grid gap-3 md:grid-cols-2">
          <label className="flex items-center gap-3 rounded-[1rem] border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-700">
            <input type="checkbox" checked={form.platformReceivesAllOnlinePayments} onChange={(event) => setForm((current) => ({ ...current, platformReceivesAllOnlinePayments: event.target.checked }))} />
            Todos os pagamentos online entram primeiro na conta da plataforma
          </label>
          <label className="flex items-center gap-3 rounded-[1rem] border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-700">
            <input type="checkbox" checked={form.defaultCashOnDeliveryEnabled} onChange={(event) => setForm((current) => ({ ...current, defaultCashOnDeliveryEnabled: event.target.checked }))} />
            Novas lojas ja podem nascer com dinheiro na entrega habilitado
          </label>
          <label className="flex items-center gap-3 rounded-[1rem] border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-700">
            <input type="checkbox" checked={form.autoConfirmOnPaidWebhook} onChange={(event) => setForm((current) => ({ ...current, autoConfirmOnPaidWebhook: event.target.checked }))} />
            Confirmar pedido quando o webhook marcar pagamento como PAID
          </label>
          <label className="flex items-center gap-3 rounded-[1rem] border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-700">
            <input type="checkbox" checked={form.autoRefundOnRefundWebhook} onChange={(event) => setForm((current) => ({ ...current, autoRefundOnRefundWebhook: event.target.checked }))} />
            Marcar pedido como REFUNDED quando chegar webhook de estorno
          </label>
        </div>

        <div className="mt-6 grid gap-3 lg:grid-cols-3">
          {(settings?.providers ?? []).map((provider) => (
            <div key={provider.provider} className="rounded-[1.5rem] border border-slate-200 bg-slate-50 p-4">
              <p className="text-sm font-black text-slate-900">{provider.provider}</p>
              <div className="mt-3 space-y-2 text-sm text-slate-600">
                <p>Modo: <strong>{provider.mode}</strong></p>
                <p>Public key: <strong>{provider.publicKeyConfigured ? 'OK' : 'Nao'}</strong></p>
                <p>Secret key: <strong>{provider.secretConfigured ? 'OK' : 'Nao'}</strong></p>
                <p>Webhook secret: <strong>{provider.webhookConfigured ? 'OK' : 'Nao'}</strong></p>
              </div>
            </div>
          ))}
        </div>

        {error ? <p className="mt-4 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{error}</p> : null}
        {success ? <p className="mt-4 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">{success}</p> : null}

        <div className="mt-6 flex flex-wrap gap-3">
          <button type="button" onClick={() => void save()} disabled={saving || loading} className="rounded-full border border-slate-900 bg-slate-900 px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-white disabled:opacity-60">
            {saving ? 'Salvando...' : 'Salvar gateways'}
          </button>
          <button type="button" onClick={() => void load()} disabled={loading} className="rounded-full border border-slate-200 bg-white px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-slate-800">
            Recarregar
          </button>
        </div>
      </Panel>
    </div>
  );
}