import { useState, useEffect, useCallback } from 'react';
import type { DashboardData } from './types';

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './components/ui/table';
import { Badge } from './components/ui/badge';
import { CheckCircle2, RefreshCw, AlertTriangle, LayoutGrid, Link, X, Key, Lock, Shield, Hash, Smartphone } from 'lucide-react';
import {
  SettingsLayout,
  SettingsHeader,
  SecondaryButton,
  ModernCardHeader,
  SettingCard,
  SettingInput,
  StatusMessage,
  SaveWithStatus
} from './components/ui/settings-ui';
import { useSettingsSave } from './hooks/useSettingsSave';

interface FBGraphAccount {
  id: string;
  name: string;
  phone_numbers?: {
    data: Array<{
      id: string;
      display_phone_number: string;
    }>;
  };
  whatsapp_business_accounts?: {
    data: Array<{
      id: string;
      name: string;
      phone_numbers?: {
        data: Array<{
          id: string;
          display_phone_number: string;
        }>;
      };
    }>;
  };
}

export default function MetaAPISender({ data: dashboardData }: { data: DashboardData }) {
  const t = (key: string, fallback: string = ''): string => {
    const val = (dashboardData?.i18n as Record<string, unknown>)?.[key];
    return typeof val === 'string' ? val : fallback;
  };

  const data = dashboardData?.metaApiSenderData || { settings: {}, templates: [] };

  const [settings, setSettings] = useState<Record<string, string>>(data.settings || {});
  const [templates, setTemplates] = useState(data.templates || []);
  const [isSyncing, setIsSyncing] = useState(false);
  const [isFBConnecting, setIsFBConnecting] = useState(false);
  const [isWebhooking, setIsWebhooking] = useState(false);
  const [statusMessage, setStatusMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);

  const [prevData, setPrevData] = useState(data);
  if (data !== prevData) {
    setPrevData(data);
    if (data.settings) setSettings(data.settings);
    if (data.templates) setTemplates(data.templates);
  }

  const dStat = dashboardData?.domainStatus;
  const cSec = dashboardData?.currentSection;

  const loadFBSDK = useCallback(() => {
    if (window.FB) return;
    if (document.getElementById('facebook-jssdk')) return;

    const js = document.createElement('script');
    js.id = 'facebook-jssdk';
    js.src = `${dashboardData.global.pluginUrl}assets/js/resources/fb-sdk.js`;
    js.async = true;
    js.defer = true;
    document.body.appendChild(js);
  }, [dashboardData.global.pluginUrl]);

  // Handle SDK loading and initialization
  useEffect(() => {
    window.fbAsyncInit = function () {
      if (settings.wawp_mws_app_id && window.FB) {
        window.FB.init({
          appId: settings.wawp_mws_app_id,
          cookie: true,
          xfbml: true,
          version: 'v21.0'
        });
      }
    };
    loadFBSDK();
  }, [settings.wawp_mws_app_id, loadFBSDK]);

  const { saveStatus, hasUnsavedChanges, isSaving, handleSave, markDirty } = useSettingsSave({
    onSave: async () => {
      try {
        const response = await fetch(`${dashboardData.global.settingsRestUrl}?_=${Date.now()}`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-WP-Nonce': dashboardData.global.wpRestNonce
          },
          body: JSON.stringify({ settings: settings })
        });
        const result = await response.json();
        if (result.success) {
          window.dispatchEvent(new CustomEvent('wawp-refresh-data', { detail: { section: 'meta-api-sender' } }));
          return true;
        }
        return false;
      } catch (error) {
        console.error('Meta settings save error:', error);
        return false;
      }
    }
  });

  if (dStat && dStat !== 'active' && cSec !== 'account') return null;

  const initFB = () => {
    if (!settings.wawp_mws_app_id) {
      setStatusMessage({ type: 'error', text: 'Please enter your Meta App ID first.' });
      return false;
    }

    const FB = window.FB;
    if (FB) {
      try {
        FB.init({
          appId: settings.wawp_mws_app_id,
          cookie: true,
          xfbml: true,
          version: 'v21.0'
        });
        return true;
      } catch (e: unknown) {
        console.warn('FB.init catch:', e);
        return true; // Often it's already initialized
      }
    }

    loadFBSDK();
    setStatusMessage({ type: 'error', text: 'Facebook SDK is loading. Please wait a few seconds and try again.' });
    return false;
  };

  const handleFacebookLogin = () => {
    if (!initFB()) return;

    setIsFBConnecting(true);
    setStatusMessage(null);

    window.FB.login((response) => {
      if (response.authResponse) {
        const token = response.authResponse.accessToken;
        handleInputChange('wawp_mws_api_token', token);

        // Auto-generate Verify Token if empty
        if (!settings.wawp_mws_verify_token) {
          const randomToken = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
          handleInputChange('wawp_mws_verify_token', randomToken);
        }

        // Fetch WABA and Phone ID via Graph API - Trying direct WABA endpoint for better accuracy
        window.FB.api(
          '/me/whatsapp_business_accounts?fields=id,name,phone_numbers{id,display_phone_number}',
          (graphResponse: unknown) => {
            let foundWaba = '';
            let foundPhone = '';
            const gData = (graphResponse as { data?: FBGraphAccount[] }).data;

            if (gData && gData.length > 0) {
              const waba = gData[0];
              foundWaba = waba.id;
              if (waba.phone_numbers?.data && waba.phone_numbers.data.length > 0) {
                foundPhone = waba.phone_numbers.data[0].id;
              }
            } else {
              // Fallback to /me/accounts if direct WABA query returns nothing
              window.FB.api('/me/accounts?fields=whatsapp_business_accounts{id,name,phone_numbers{id,display_phone_number}}', (accountResponse: unknown) => {
                const aData = (accountResponse as { data?: FBGraphAccount[] }).data;
                if (aData) {
                  for (const acc of aData) {
                    if (acc.whatsapp_business_accounts?.data && acc.whatsapp_business_accounts.data.length > 0) {
                      const waba = acc.whatsapp_business_accounts.data[0];
                      foundWaba = waba.id;
                      foundPhone = waba.phone_numbers?.data?.[0]?.id || '';
                      break;
                    }
                  }
                }

                if (foundWaba) handleInputChange('wawp_mws_waba_id', foundWaba);
                if (foundPhone) handleInputChange('wawp_mws_phone_number_id', foundPhone);

                setStatusMessage({
                  type: 'success',
                  text: foundWaba
                    ? 'Sync Complete! Tokens and IDs were successfully pulled from Meta.'
                    : 'Token Updated! However, Meta returned no active Business Accounts. Please ensure you have added a phone number in your App Dashboard.'
                });
                setIsFBConnecting(false);
              });
              return;
            }

            if (foundWaba) handleInputChange('wawp_mws_waba_id', foundWaba);
            if (foundPhone) handleInputChange('wawp_mws_phone_number_id', foundPhone);

            setStatusMessage({
              type: 'success',
              text: foundWaba
                ? 'Sync Complete! Tokens and IDs were successfully pulled from Meta.'
                : 'Token Updated! However, Meta returned no active Business Accounts. Please ensure you have added a phone number in your App Dashboard.'
            });
            setIsFBConnecting(false);
          }
        );
      } else {
        setStatusMessage({ type: 'error', text: 'Facebook Login cancelled or failed.' });
        setIsFBConnecting(false);
      }
    }, { scope: 'whatsapp_business_management,whatsapp_business_messaging' });
  };

  const handleInputChange = (field: string, value: string) => {
    setSettings((prev: Record<string, string>) => ({ ...prev, [field]: value }));
    markDirty();
  };

  const handleRefreshTemplates = async () => {
    setIsSyncing(true);
    setStatusMessage(null);
    try {
      const response = await fetch(`${dashboardData.global.apiRestUrl}/accounts/meta/sync?_=${Date.now()}`, {
        method: 'POST',
        headers: {
          'X-WP-Nonce': dashboardData.global.wpRestNonce
        }
      });
      const result = await response.json();
      if (result.success) {
        setStatusMessage({ type: 'success', text: result.message || 'Templates fetched successfully.' });
        if (result.templates) setTemplates(result.templates);
      } else {
        setStatusMessage({ type: 'error', text: result.message || 'Failed to fetch templates.' });
      }
    } catch {
      setStatusMessage({ type: 'error', text: 'An unexpected error occurred.' });
    }
    setIsSyncing(false);
  };

  const handleSetWebhook = async () => {
    setIsWebhooking(true);
    setStatusMessage(null);
    try {
      const response = await fetch(`${dashboardData.global.apiRestUrl}/accounts/meta/webhook?_=${Date.now()}`, {
        method: 'POST',
        headers: {
          'X-WP-Nonce': dashboardData.global.wpRestNonce
        }
      });
      const result = await response.json();
      if (result.success) {
        setStatusMessage({ type: 'success', text: result.message || 'Webhook successfully subscribed.' });
      } else {
        setStatusMessage({ type: 'error', text: result.message || 'Failed to set webhook.' });
      }
    } catch {
      setStatusMessage({ type: 'error', text: 'An unexpected error occurred.' });
    }
    setIsWebhooking(false);
  };

  return (
    <SettingsLayout>
      <div className="max-w-7xl mx-auto space-y-4 animate-in fade-in duration-500">

        {/* Header */}
        <SettingsHeader
          title="Meta API Configuration"
          description="Setup official WhatsApp Business API integration via Meta Cloud API."
          backUrl="admin.php?page=wawp&wawp_section=senders"
          className="mb-6"
        >
          <SaveWithStatus
            saveStatus={saveStatus}
            hasUnsavedChanges={hasUnsavedChanges}
            isSaving={isSaving}
            onSave={() => handleSave(false)}
          />
        </SettingsHeader>

        {statusMessage && (
          <div className={`p-4 rounded-[5px] border flex items-start gap-3 text-sm font-bold animate-in zoom-in-95 duration-200 relative group ${statusMessage.type === 'success' ? 'bg-emerald-50 border-emerald-100 text-emerald-700' : 'bg-rose-50 border-rose-100 text-rose-700'}`}>
            {statusMessage.type === 'success' ? <CheckCircle2 className="w-5 h-5 mt-0.5 shrink-0" /> : <AlertTriangle className="w-5 h-5 mt-0.5 shrink-0" />}
            <span className="whitespace-pre-wrap leading-relaxed flex-1">{statusMessage.text}</span>
            <button
              onClick={() => setStatusMessage(null)}
              className={`p-1 rounded hover:bg-black/5 transition-colors shrink-0 ${statusMessage.type === 'success' ? 'text-emerald-400 hover:text-emerald-600' : 'text-rose-400 hover:text-rose-600'}`}
            >
              <X className="w-4 h-4" />
            </button>
          </div>
        )}

        {/* Credentials Card */}
        <SettingCard className="p-0 overflow-hidden">
          <ModernCardHeader
            iconPath={`${dashboardData?.global?.pluginUrl}assets/img/senders/meta.svg`}
            title="API Credentials"
            description="Authorize your Business Account and sync tokens"
          />
          <div className="p-6 space-y-8">
            {/* Connection Bar */}
            <div className="p-5 bg-slate-50 rounded-[5px] border border-slate-100 flex flex-col sm:flex-row items-center justify-between gap-4">
              <div>
                <h4 className="text-sm font-bold text-slate-800">Quick Connect</h4>
                <p className="text-[11px] text-slate-400 font-medium">Auto-fetch access tokens using your Meta App credentials below.</p>
              </div>
              <SecondaryButton
                onClick={handleFacebookLogin}
                disabled={isFBConnecting || !settings.wawp_mws_app_id}
                className="!text-[#1877F2] border-[#1877F2]/30 hover:bg-[#1877F2]/5 uppercase tracking-widest font-bold"
              >
                {isFBConnecting ? <RefreshCw className="mr-2 h-3.5 w-3.5 animate-spin" /> : <i className="ri-facebook-box-fill mr-2 text-xl !text-[#1877F2]"></i>}
                Connect with Facebook
              </SecondaryButton>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-7">
              {/* Prioritized App Credentials */}
              <SettingInput
                label="Meta App ID (Client ID)"
                value={settings.wawp_mws_app_id || ''}
                onChange={(val: string) => handleInputChange('wawp_mws_app_id', val)}
                icon={Key}
                placeholder=""
              />
              <SettingInput
                label="Meta App Secret"
                type="password"
                value={settings.wawp_mws_app_secret || ''}
                onChange={(val: string) => handleInputChange('wawp_mws_app_secret', val)}
                icon={Lock}
                placeholder=""
              />

              <div className="md:col-span-2 pt-2">
                <Separator className="mb-6" />
                <SettingInput
                  label="Permanent Access Token"
                  type="password"
                  value={settings.wawp_mws_api_token || ''}
                  onChange={(val: string) => handleInputChange('wawp_mws_api_token', val)}
                  placeholder=""
                  icon={Shield}
                />
                <p className="text-[10px] text-slate-400 font-medium mt-2">Get your permanent token from the <a href="https://developers.facebook.com/apps/" target="_blank" rel="noreferrer" className="text-indigo-600 hover:underline font-bold">Meta Dev Dashboard</a>.</p>
              </div>

              <SettingInput
                label="WhatsApp Business ID (WABA)"
                value={settings.wawp_mws_waba_id || ''}
                onChange={(val: string) => handleInputChange('wawp_mws_waba_id', val)}
                placeholder=""
                icon={Hash}
              />
              <SettingInput
                label="Phone Number ID"
                value={settings.wawp_mws_phone_number_id || ''}
                onChange={(val: string) => handleInputChange('wawp_mws_phone_number_id', val)}
                placeholder=""
                icon={Smartphone}
              />
            </div>
            <div className="pt-4">
              <StatusMessage
                type={(settings.wawp_mws_api_token && settings.wawp_mws_phone_number_id) ? 'active' : 'inactive'}
                message={(settings.wawp_mws_api_token && settings.wawp_mws_phone_number_id)
                  ? "Cloud API credentials are set. Official Meta routing is ready for delivery."
                  : "Incomplete credentials. Please connect with Facebook or enter your IDs manually to enable Cloud API."}
              />
            </div>
          </div>
        </SettingCard>

        {/* Webhook Configuration Card */}
        <SettingCard className="p-0 overflow-hidden">
          <ModernCardHeader
            iconPath={`${dashboardData?.global?.pluginUrl}assets/img/senders/meta.svg`}
            title="Incoming Events (Webhook)"
            description="Track delivery status and customer replies in real-time"
          />
          <div className="p-6 space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-7">
              <div className="space-y-4">
                <SettingInput
                  label="Verify Token"
                  value={settings.wawp_mws_verify_token || ''}
                  onChange={(val: string) => handleInputChange('wawp_mws_verify_token', val)}
                  placeholder=""
                  icon={Lock}
                />
                <p className="text-[10px] text-slate-400 font-medium leading-tight mt-1">Must match the token in Meta App Webhook Settings.</p>
              </div>

              <div className="space-y-2">
                <span className="text-xs font-bold text-slate-700 uppercase tracking-wide block mb-2">Rest Endpoint URL</span>
                <div className="h-11 flex items-center bg-slate-50 border border-slate-100 px-3 rounded-[5px] font-mono text-[11px] text-slate-600 truncate border-dashed select-all" title="Click to select and copy this URL to Meta Developer Portal">
                  {(() => {
                    const restPath = dashboardData?.urls?.restUrl || '/wp-json/';
                    const fullUrl = restPath.startsWith('http') ? restPath : window.location.origin + restPath;
                    return fullUrl + 'wawp/v2/webhook';
                  })()}
                </div>
              </div>
            </div>

            <div className="pt-4 border-t border-slate-50 space-y-4">
              <div className="flex items-center justify-between">
                <p className="text-[11px] text-slate-400 font-medium flex items-center gap-2 max-w-md leading-relaxed">
                  <AlertTriangle className="w-3.5 h-3.5 text-amber-500 shrink-0" />
                  Webhook subscriptions allow the platform to track real-time delivery status and update your logs.
                </p>
                <SecondaryButton onClick={handleSetWebhook} disabled={isWebhooking} className="border-indigo-100 text-indigo-700 hover:bg-slate-50 uppercase tracking-widest" icon={isWebhooking ? RefreshCw : Link}>
                  Subscribe Automatically
                </SecondaryButton>
              </div>
              <StatusMessage
                type={settings.wawp_mws_verify_token ? 'active' : 'inactive'}
                message={settings.wawp_mws_verify_token
                  ? "Webhook tracking is configured. Ensure the 'Verify Token' matches your settings in the Meta App dashboard."
                  : "Webhook tracking is disabled. You won't receive real-time delivery status updates from Meta."}
              />
            </div>
          </div>
        </SettingCard>

        {/* Templates Card */}
        <SettingCard className="p-0 overflow-hidden">
          <ModernCardHeader
            iconPath={`${dashboardData?.global?.pluginUrl}assets/img/senders/meta.svg`}
            title="WhatsApp Templates"
            description="Official templates fetched from Cloud API"
            rightAction={
              <SecondaryButton onClick={handleRefreshTemplates} disabled={isSyncing} className="border-slate-200 bg-white hover:bg-slate-50 uppercase tracking-widest group">
                <RefreshCw className={`mr-2 h-3.5 w-3.5 text-slate-400 group-hover:rotate-180 transition-transform duration-500 ${isSyncing ? 'animate-spin' : ''}`} />
                {t('syncTemplates', 'Sync Now')}
              </SecondaryButton>
            }
          />
          <div className="p-0">
            {templates && templates.length > 0 ? (
              <Table>
                <TableHeader>
                  <TableRow className="bg-slate-50/50 hover:bg-slate-50 transition-none border-b border-slate-100">
                    <TableHead className="h-11 font-bold text-slate-500 text-[10px] uppercase tracking-widest pl-6">Template Name</TableHead>
                    <TableHead className="h-11 font-bold text-slate-500 text-[10px] uppercase tracking-widest">Language</TableHead>
                    <TableHead className="h-11 font-bold text-slate-500 text-[10px] uppercase tracking-widest pr-6">Content Preview</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {(templates as Array<{ template_name: string; language_code: string; body?: string }>).map((template, index: number) => (
                    <TableRow key={index} className="group hover:bg-slate-50/30 transition-colors border-b border-slate-50 last:border-0">
                      <TableCell className="font-bold text-slate-700 py-4 pl-6">{template.template_name}</TableCell>
                      <TableCell>
                        <Badge className="bg-slate-100 text-slate-600 border-none font-mono text-[10px] px-2 py-0.5 rounded-[3px] font-bold">{template.language_code}</Badge>
                      </TableCell>
                      <TableCell className="pr-6">
                        <div className="max-w-md truncate text-[11px] text-slate-400 font-medium" title={template.body}>
                          {template.body || <span className="italic opacity-50">No content preview</span>}
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            ) : (
              <div className="p-16 text-center">
                <div className="w-12 h-12 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4 border border-slate-100">
                  <LayoutGrid className="w-6 h-6 text-slate-300 opacity-50" />
                </div>
                <p className="text-sm font-bold text-slate-500 uppercase tracking-widest">No templates synced</p>
                <p className="text-xs text-slate-400 mt-1 max-w-xs mx-auto">Templates must be approved in your Meta Business Manager before they appear here.</p>
              </div>
            )}
          </div>
        </SettingCard>

      </div>
    </SettingsLayout>
  );
}

const Separator = ({ className }: { className?: string }) => (
  <div className={`h-px bg-slate-100 w-full ${className}`} />
);