'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import AppLayout from '@/components/layout/AppLayout';
import { apiUrl, appRoute } from '@/lib/utils/asset';

interface MetaAssetAccount {
  id: string;
  name: string;
}

interface MetaPageAsset {
  id: string;
  name: string;
  instagram_id?: string;
  instagram_username?: string;
}

interface MetaInstagramAsset {
  id: string;
  username: string;
  name?: string;
}

export default function IntegrationPage() {
  const searchParams = useSearchParams();
  const queryShop = searchParams.get('shop') || '';

  const [loading, setLoading] = useState(true);
  const [fetchError, setFetchError] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);
  const [notification, setNotification] = useState<{
    type: 'success' | 'error';
    message: string;
  } | null>(null);

  // Connection status & user
  const [isConnected, setIsConnected] = useState(false);
  const [businessId, setBusinessId] = useState('');
  const [businessName, setBusinessName] = useState('');
  const [tokenMasked, setTokenMasked] = useState('');

  // Available assets
  const [businesses, setBusinesses] = useState<MetaAssetAccount[]>([]);
  const [pages, setPages] = useState<MetaPageAsset[]>([]);
  const [instagramAccounts, setInstagramAccounts] = useState<MetaInstagramAsset[]>([]);
  const [adAccounts, setAdAccounts] = useState<MetaAssetAccount[]>([]);
  const [pixels, setPixels] = useState<MetaAssetAccount[]>([]);
  const [catalogs, setCatalogs] = useState<Array<{ id: string; name: string; product_count?: number }>>([]);

  // Selected assets
  const [selectedBusinessId, setSelectedBusinessId] = useState('');
  const [selectedPageId, setSelectedPageId] = useState('');
  const [selectedInstagramId, setSelectedInstagramId] = useState('');
  const [selectedAdAccountId, setSelectedAdAccountId] = useState('');
  const [selectedPixelId, setSelectedPixelId] = useState('');
  const [selectedCatalogId, setSelectedCatalogId] = useState('');

  // Connect modal
  const [showConnectModal, setShowConnectModal] = useState(false);
  const [manualToken, setManualToken] = useState('');
  const [manualBizId, setManualBizId] = useState('');
  const [connecting, setConnecting] = useState(false);

  const loadData = async () => {
    setLoading(true);
    setFetchError(null);
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 10000);

    try {
      const shopParam = queryShop ? `?shop=${encodeURIComponent(queryShop)}` : '';
      const [statusRes, accountsRes] = await Promise.all([
        fetch(apiUrl(`/api/meta/status${shopParam}`), { signal: controller.signal }),
        fetch(apiUrl(`/api/meta/accounts${shopParam}`), { signal: controller.signal }),
      ]);
      clearTimeout(timeoutId);

      const statusData = await statusRes.json();
      const accountsData = await accountsRes.json();

      if (statusData.success && statusData.connected) {
        setIsConnected(true);
        setBusinessId(statusData.meta?.businessId || '');
        setBusinessName(statusData.meta?.businessName || '');
        setSelectedBusinessId(statusData.meta?.businessId || '');
        setSelectedPageId(statusData.meta?.pageId || '');
        setSelectedInstagramId(statusData.meta?.instagramId || '');
        setSelectedAdAccountId(statusData.meta?.adAccountId || '');
        setSelectedPixelId(statusData.meta?.pixelId || '');
        setSelectedCatalogId(statusData.meta?.catalogId || '');
      } else {
        setIsConnected(false);
      }

      if (accountsData.success) {
        setBusinesses(accountsData.businesses || []);
        setPages(accountsData.pages || []);
        setInstagramAccounts(accountsData.instagramAccounts || []);
        setAdAccounts(accountsData.adAccounts || []);
        setPixels(accountsData.pixels || []);
        setCatalogs(accountsData.catalogs || []);
        setTokenMasked(accountsData.accessTokenMasked || '');

        if (accountsData.currentAssets) {
          if (!selectedPageId && accountsData.currentAssets.pageId) {
            setSelectedPageId(accountsData.currentAssets.pageId);
          }
          if (!selectedInstagramId && accountsData.currentAssets.instagramId) {
            setSelectedInstagramId(accountsData.currentAssets.instagramId);
          }
          if (!selectedAdAccountId && accountsData.currentAssets.adAccountId) {
            setSelectedAdAccountId(accountsData.currentAssets.adAccountId);
          }
          if (!selectedPixelId && accountsData.currentAssets.pixelId) {
            setSelectedPixelId(accountsData.currentAssets.pixelId);
          }
          if (!selectedCatalogId && accountsData.currentAssets.catalogId) {
            setSelectedCatalogId(accountsData.currentAssets.catalogId);
          }
        }
      }
    } catch (err: any) {
      clearTimeout(timeoutId);
      const isTimeout = err?.name === 'AbortError';
      const msg = isTimeout
        ? 'Request timed out while connecting to Meta services. Please check your network and retry.'
        : (err?.message || 'Failed to query Meta assets from server');
      console.error('Failed to load Meta assets:', err);
      setFetchError(msg);
      setNotification({
        type: 'error',
        message: msg,
      });
    } finally {
      clearTimeout(timeoutId);
      setLoading(false);
    }
  };

  useEffect(() => {
    loadData();
  }, [queryShop]);

  const handleSaveAssets = async () => {
    setSaving(true);
    setNotification(null);
    try {
      const selectedPage = pages.find((p) => p.id === selectedPageId);
      const selectedIg = instagramAccounts.find((ig) => ig.id === selectedInstagramId);
      const selectedAd = adAccounts.find((ad) => ad.id === selectedAdAccountId);
      const selectedPx = pixels.find((px) => px.id === selectedPixelId);
      const selectedCat = catalogs.find((c) => c.id === selectedCatalogId);
      const selectedBiz = businesses.find((b) => b.id === selectedBusinessId);

      const payload = {
        shopDomain: queryShop || undefined,
        businessId: selectedBusinessId || businessId,
        businessName: selectedBiz?.name || businessName,
        pageId: selectedPageId || null,
        pageName: selectedPage?.name || null,
        instagramActorId: selectedInstagramId || null,
        instagramName: selectedIg?.username || selectedIg?.name || null,
        adAccountId: selectedAdAccountId || null,
        adAccountName: selectedAd?.name || null,
        pixelId: selectedPixelId || null,
        pixelName: selectedPx?.name || null,
        catalogId: selectedCatalogId || null,
        catalogName: selectedCat?.name || null,
        onboardingCompleted: true,
      };

      const res = await fetch(apiUrl('/api/meta/connect'), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });

      const data = await res.json();
      if (data.success) {
        setNotification({
          type: 'success',
          message: 'Facebook & Instagram assets updated and saved successfully!',
        });
        await loadData();
      } else {
        setNotification({
          type: 'error',
          message: data.error || 'Failed to save Meta asset configuration',
        });
      }
    } catch (err: any) {
      setNotification({
        type: 'error',
        message: err.message || 'Network error while saving assets',
      });
    } finally {
      setSaving(false);
    }
  };

  const handleConnectToken = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!manualToken.trim()) return;
    setConnecting(true);
    setNotification(null);
    try {
      const res = await fetch(apiUrl('/api/meta/connect'), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          shopDomain: queryShop || undefined,
          accessToken: manualToken.trim(),
          businessId: manualBizId.trim() || undefined,
          onboardingCompleted: true,
        }),
      });

      const data = await res.json();
      if (data.success) {
        setShowConnectModal(false);
        setManualToken('');
        setManualBizId('');
        setNotification({
          type: 'success',
          message: 'Successfully connected Meta Business account!',
        });
        await loadData();
      } else {
        setNotification({
          type: 'error',
          message: data.error || 'Could not connect Meta account with this token',
        });
      }
    } catch (err: any) {
      setNotification({
        type: 'error',
        message: err.message || 'Connection request failed',
      });
    } finally {
      setConnecting(false);
    }
  };

  const handleDisconnect = async () => {
    if (!confirm('Are you sure you want to disconnect your Meta Business account? This will pause synchronization until reconnected.')) {
      return;
    }
    setLoading(true);
    try {
      const res = await fetch(apiUrl('/api/meta/connect'), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          shopDomain: queryShop || undefined,
          disconnect: true,
        }),
      });
      const data = await res.json();
      if (data.success) {
        setIsConnected(false);
        setNotification({
          type: 'success',
          message: 'Meta account disconnected successfully.',
        });
        await loadData();
      }
    } catch (err: any) {
      setNotification({
        type: 'error',
        message: err.message || 'Disconnect failed',
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <AppLayout currentRoute="/integration">
      <div className="space-y-6 pb-12">
        {/* Header */}
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-slate-200/80 pb-5">
          <div>
            <div className="flex items-center gap-2 text-xs font-semibold text-blue-600 uppercase tracking-wider">
              <i className="fa-brands fa-meta text-xs" />
              <span>Asset Management</span>
            </div>
            <h1 className="text-2xl font-black text-slate-900 tracking-tight mt-1">
              Facebook &amp; Instagram Integration
            </h1>
            <p className="text-xs text-slate-500">
              Connect your Meta Business Portfolio and select your Facebook Pages, Instagram Accounts, and Ad Accounts.
            </p>
          </div>

          <div className="flex items-center gap-2">
            {isConnected ? (
              <>
                <button
                  type="button"
                  onClick={loadData}
                  disabled={loading}
                  className="px-3.5 py-2 rounded-xl text-xs font-semibold bg-white border border-slate-200 hover:bg-slate-50 text-slate-700 shadow-2xs transition cursor-pointer flex items-center gap-1.5"
                  title="Reload Assets from Meta"
                >
                  <i className={`fa-solid fa-arrows-rotate text-xs ${loading ? 'fa-spin text-blue-600' : 'text-slate-500'}`} />
                  <span>Refresh</span>
                </button>
                <button
                  type="button"
                  onClick={handleSaveAssets}
                  disabled={saving || loading}
                  className="px-4 py-2 rounded-xl text-xs font-bold bg-blue-600 hover:bg-blue-700 text-white shadow-xs transition cursor-pointer flex items-center gap-1.5 disabled:opacity-50"
                >
                  <i className={`fa-solid ${saving ? 'fa-spinner fa-spin' : 'fa-check'} text-xs`} />
                  <span>{saving ? 'Saving...' : 'Save Assets'}</span>
                </button>
              </>
            ) : (
              <button
                type="button"
                onClick={() => setShowConnectModal(true)}
                className="px-4 py-2 rounded-xl text-xs font-bold bg-slate-900 hover:bg-slate-800 text-white shadow-xs transition cursor-pointer flex items-center gap-1.5"
              >
                <i className="fa-brands fa-meta text-xs" />
                <span>Connect Meta Account</span>
              </button>
            )}
          </div>
        </div>

        {/* Notification Toast */}
        {notification && (
          <div
            className={`p-4 rounded-2xl border text-xs shadow-2xs flex items-center justify-between gap-3 animate-in fade-in-50 duration-200 ${
              notification.type === 'success'
                ? 'bg-emerald-50 border-emerald-200 text-emerald-900'
                : 'bg-rose-50 border-rose-200 text-rose-900'
            }`}
          >
            <div className="flex items-center gap-2.5">
              <i
                className={`fa-solid ${
                  notification.type === 'success' ? 'fa-circle-check text-emerald-600' : 'fa-circle-exclamation text-rose-600'
                } text-base shrink-0`}
              />
              <span className="font-medium leading-relaxed">{notification.message}</span>
            </div>
            <button
              onClick={() => setNotification(null)}
              className="text-slate-400 hover:text-slate-600 font-bold p-1 cursor-pointer shrink-0"
            >
              ✕
            </button>
          </div>
        )}

        {/* Error State */}
        {!loading && fetchError ? (
          <div className="bg-white rounded-3xl border border-rose-200/80 shadow-sm p-8 sm:p-12 text-center max-w-xl mx-auto space-y-4">
            <div className="w-14 h-14 rounded-2xl bg-rose-50 border border-rose-200 text-rose-600 flex items-center justify-center mx-auto text-xl">
              <i className="fa-solid fa-circle-exclamation" />
            </div>
            <h2 className="text-lg font-bold text-slate-900">Unable to Load Meta Assets</h2>
            <p className="text-xs text-slate-500 max-w-md mx-auto">{fetchError}</p>
            <div className="pt-2">
              <button
                type="button"
                onClick={loadData}
                className="px-5 py-2.5 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs shadow-xs transition inline-flex items-center gap-2 cursor-pointer"
              >
                <i className="fa-solid fa-arrows-rotate text-xs" />
                <span>Retry Loading</span>
              </button>
            </div>
          </div>
        ) : loading ? (
          /* Loading State */
          <div className="p-16 text-center text-slate-400 flex items-center justify-center gap-2 text-xs bg-white rounded-2xl border border-slate-200/80">
            <i className="fa-solid fa-spinner fa-spin text-blue-600 text-base" />
            <span>Loading Meta assets...</span>
          </div>
        ) : !isConnected ? (
          /* Disconnected / Empty State */
          <div className="bg-white rounded-3xl border border-slate-200/90 shadow-sm p-8 sm:p-14 text-center max-w-xl mx-auto space-y-6">
            <div className="w-16 h-16 rounded-3xl bg-blue-50 text-blue-600 flex items-center justify-center mx-auto shadow-inner">
              <i className="fa-brands fa-meta text-3xl" />
            </div>
            <div className="space-y-2">
              <h2 className="text-xl sm:text-2xl font-black text-slate-900 tracking-tight">
                No Meta Account Connected
              </h2>
              <p className="text-xs sm:text-sm text-slate-500 max-w-md mx-auto leading-relaxed">
                Connect your Meta Business Account (or provide an Access Token) to select your Facebook Pages, Instagram business profiles, Catalogs, and Pixels.
              </p>
            </div>
            <div className="pt-2 flex flex-col sm:flex-row items-center justify-center gap-3">
              <button
                type="button"
                onClick={() => setShowConnectModal(true)}
                className="w-full sm:w-auto px-6 py-2.5 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs shadow-sm transition flex items-center justify-center gap-2 cursor-pointer"
              >
                <i className="fa-brands fa-facebook text-sm" />
                <span>Connect with Meta Token</span>
              </button>
              <Link
                href={appRoute('/pixel?onboarding=true', searchParams)}
                className="w-full sm:w-auto px-5 py-2.5 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-xs transition flex items-center justify-center gap-2"
              >
                <i className="fa-solid fa-wand-magic-sparkles text-xs" />
                <span>Launch Onboarding Wizard</span>
              </Link>
            </div>
          </div>
        ) : (
          /* Connected State: Asset Selectors */
          <div className="space-y-6">
            {/* Account Status Card */}
            <div className="bg-white rounded-2xl border border-slate-200/80 p-5 shadow-2xs">
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-2xl bg-blue-600 text-white flex items-center justify-center font-bold text-base shadow-xs shrink-0">
                    <i className="fa-brands fa-meta" />
                  </div>
                  <div>
                    <div className="flex items-center gap-2">
                      <h3 className="text-sm font-bold text-slate-900">
                        {businessName || 'Connected Business Portfolio'}
                      </h3>
                      <span className="inline-flex items-center gap-1 text-[10px] font-bold text-emerald-700 bg-emerald-50 border border-emerald-200 px-2 py-0.5 rounded-full">
                        <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
                        Connected
                      </span>
                    </div>
                    <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-slate-500 mt-0.5">
                      {businessId && <span>Business ID: <code className="font-mono text-slate-700">{businessId}</code></span>}
                      {tokenMasked && <span>Token: <code className="font-mono text-slate-700">{tokenMasked}</code></span>}
                    </div>
                  </div>
                </div>

                <div className="flex items-center gap-2">
                  <button
                    type="button"
                    onClick={() => setShowConnectModal(true)}
                    className="px-3 py-1.5 rounded-xl text-xs font-semibold bg-white border border-slate-200 hover:bg-slate-50 text-slate-700 shadow-2xs transition cursor-pointer"
                  >
                    Change Token
                  </button>
                  <button
                    type="button"
                    onClick={handleDisconnect}
                    className="px-3 py-1.5 rounded-xl text-xs font-semibold bg-rose-50 border border-rose-200 hover:bg-rose-100 text-rose-700 transition cursor-pointer"
                  >
                    Disconnect
                  </button>
                </div>
              </div>
            </div>

            {/* Asset Selection Grid */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* Asset 1: Facebook Page */}
              <div className="bg-white rounded-2xl border border-slate-200/80 p-5 shadow-2xs space-y-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2.5">
                    <div className="w-8 h-8 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center shrink-0">
                      <i className="fa-brands fa-facebook text-base" />
                    </div>
                    <div>
                      <h4 className="text-xs font-bold text-slate-900">Facebook Page</h4>
                      <p className="text-[11px] text-slate-400">Select the page representing your Shopify store</p>
                    </div>
                  </div>
                  <span className="text-[10px] font-bold text-slate-400 bg-slate-100 px-2 py-0.5 rounded-md">
                    {pages.length} Available
                  </span>
                </div>

                {pages.length === 0 ? (
                  <div className="p-4 rounded-xl bg-slate-50 border border-slate-200/70 text-center space-y-1">
                    <p className="text-xs font-semibold text-slate-700">No Facebook Pages Found</p>
                    <p className="text-[11px] text-slate-400">
                      Your Meta account does not have admin permissions on any Facebook Page or none are connected.
                    </p>
                  </div>
                ) : (
                  <div className="space-y-2">
                    <label className="block text-[11px] font-semibold text-slate-600">Select Active Page</label>
                    <select
                      value={selectedPageId}
                      onChange={(e) => setSelectedPageId(e.target.value)}
                      className="w-full px-3 py-2.5 bg-white border border-slate-200 rounded-xl text-xs text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
                    >
                      <option value="">-- Choose Facebook Page --</option>
                      {pages.map((p) => (
                        <option key={p.id} value={p.id}>
                          {p.name} (ID: {p.id})
                        </option>
                      ))}
                    </select>
                    {selectedPageId && (
                      <p className="text-[11px] text-emerald-600 flex items-center gap-1 font-medium pt-1">
                        <i className="fa-solid fa-circle-check text-xs" />
                        Selected Page ID: <code className="font-mono">{selectedPageId}</code>
                      </p>
                    )}
                  </div>
                )}
              </div>

              {/* Asset 2: Instagram Business Account */}
              <div className="bg-white rounded-2xl border border-slate-200/80 p-5 shadow-2xs space-y-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2.5">
                    <div className="w-8 h-8 rounded-xl bg-pink-50 text-pink-600 flex items-center justify-center shrink-0">
                      <i className="fa-brands fa-instagram text-base" />
                    </div>
                    <div>
                      <h4 className="text-xs font-bold text-slate-900">Instagram Account</h4>
                      <p className="text-[11px] text-slate-400">Select your Instagram Business or Creator account</p>
                    </div>
                  </div>
                  <span className="text-[10px] font-bold text-slate-400 bg-slate-100 px-2 py-0.5 rounded-md">
                    {instagramAccounts.length} Available
                  </span>
                </div>

                {instagramAccounts.length === 0 ? (
                  <div className="p-4 rounded-xl bg-slate-50 border border-slate-200/70 text-center space-y-1">
                    <p className="text-xs font-semibold text-slate-700">No Instagram Accounts Found</p>
                    <p className="text-[11px] text-slate-400">
                      Link your Instagram Professional account to your Facebook Page in Meta Business Suite to display it here.
                    </p>
                  </div>
                ) : (
                  <div className="space-y-2">
                    <label className="block text-[11px] font-semibold text-slate-600">Select Active Instagram</label>
                    <select
                      value={selectedInstagramId}
                      onChange={(e) => setSelectedInstagramId(e.target.value)}
                      className="w-full px-3 py-2.5 bg-white border border-slate-200 rounded-xl text-xs text-slate-800 focus:outline-none focus:ring-2 focus:ring-pink-500/20 focus:border-pink-500"
                    >
                      <option value="">-- Choose Instagram Account --</option>
                      {instagramAccounts.map((ig) => (
                        <option key={ig.id} value={ig.id}>
                          @{ig.username || ig.name} (ID: {ig.id})
                        </option>
                      ))}
                    </select>
                    {selectedInstagramId && (
                      <p className="text-[11px] text-pink-600 flex items-center gap-1 font-medium pt-1">
                        <i className="fa-solid fa-circle-check text-xs" />
                        Selected Instagram ID: <code className="font-mono">{selectedInstagramId}</code>
                      </p>
                    )}
                  </div>
                )}
              </div>

              {/* Asset 3: Meta Ad Account */}
              <div className="bg-white rounded-2xl border border-slate-200/80 p-5 shadow-2xs space-y-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2.5">
                    <div className="w-8 h-8 rounded-xl bg-indigo-50 text-indigo-600 flex items-center justify-center shrink-0">
                      <i className="fa-solid fa-bullhorn text-sm" />
                    </div>
                    <div>
                      <h4 className="text-xs font-bold text-slate-900">Ad Account</h4>
                      <p className="text-[11px] text-slate-400">Select your Meta Ad Account for Advantage+ campaigns</p>
                    </div>
                  </div>
                  <span className="text-[10px] font-bold text-slate-400 bg-slate-100 px-2 py-0.5 rounded-md">
                    {adAccounts.length} Available
                  </span>
                </div>

                {adAccounts.length === 0 ? (
                  <div className="p-4 rounded-xl bg-slate-50 border border-slate-200/70 text-center space-y-1">
                    <p className="text-xs font-semibold text-slate-700">No Ad Accounts Found</p>
                    <p className="text-[11px] text-slate-400">
                      No accessible ad accounts detected under this Business Portfolio.
                    </p>
                  </div>
                ) : (
                  <div className="space-y-2">
                    <label className="block text-[11px] font-semibold text-slate-600">Select Active Ad Account</label>
                    <select
                      value={selectedAdAccountId}
                      onChange={(e) => setSelectedAdAccountId(e.target.value)}
                      className="w-full px-3 py-2.5 bg-white border border-slate-200 rounded-xl text-xs text-slate-800 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500"
                    >
                      <option value="">-- Choose Ad Account --</option>
                      {adAccounts.map((ad) => (
                        <option key={ad.id} value={ad.id}>
                          {ad.name} (ID: {ad.id})
                        </option>
                      ))}
                    </select>
                    {selectedAdAccountId && (
                      <p className="text-[11px] text-indigo-600 flex items-center gap-1 font-medium pt-1">
                        <i className="fa-solid fa-circle-check text-xs" />
                        Selected Ad Account ID: <code className="font-mono">{selectedAdAccountId}</code>
                      </p>
                    )}
                  </div>
                )}
              </div>

              {/* Asset 4: Primary Catalog & Pixel */}
              <div className="bg-white rounded-2xl border border-slate-200/80 p-5 shadow-2xs space-y-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2.5">
                    <div className="w-8 h-8 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0">
                      <i className="fa-solid fa-boxes-stacked text-sm" />
                    </div>
                    <div>
                      <h4 className="text-xs font-bold text-slate-900">Primary Catalog &amp; Pixel</h4>
                      <p className="text-[11px] text-slate-400">Connect primary catalog and tracking pixel</p>
                    </div>
                  </div>
                </div>

                <div className="space-y-3">
                  <div>
                    <label className="block text-[11px] font-semibold text-slate-600 mb-1">Default Product Catalog</label>
                    <select
                      value={selectedCatalogId}
                      onChange={(e) => setSelectedCatalogId(e.target.value)}
                      className="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
                    >
                      <option value="">-- Choose Catalog --</option>
                      {catalogs.map((c) => (
                        <option key={c.id} value={c.id}>
                          {c.name} (ID: {c.id})
                        </option>
                      ))}
                    </select>
                  </div>

                  <div>
                    <label className="block text-[11px] font-semibold text-slate-600 mb-1">Default Meta Pixel</label>
                    <select
                      value={selectedPixelId}
                      onChange={(e) => setSelectedPixelId(e.target.value)}
                      className="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
                    >
                      <option value="">-- Choose Pixel --</option>
                      {pixels.map((p) => (
                        <option key={p.id} value={p.id}>
                          {p.name}
                        </option>
                      ))}
                    </select>
                  </div>
                </div>
              </div>
            </div>

            {/* Bottom Save Bar */}
            <div className="bg-white rounded-2xl border border-slate-200/80 p-4 shadow-2xs flex items-center justify-between">
              <span className="text-xs text-slate-500">
                Remember to click Save Assets to apply your selections across all sync pipelines.
              </span>
              <button
                type="button"
                onClick={handleSaveAssets}
                disabled={saving || loading}
                className="px-6 py-2.5 rounded-xl text-xs font-bold bg-slate-900 hover:bg-slate-800 text-white shadow-xs transition cursor-pointer flex items-center gap-1.5 disabled:opacity-50"
              >
                <i className={`fa-solid ${saving ? 'fa-spinner fa-spin' : 'fa-check'} text-xs`} />
                <span>{saving ? 'Saving Changes...' : 'Save Asset Configuration'}</span>
              </button>
            </div>
          </div>
        )}

        {/* Connect / Change Token Modal */}
        {showConnectModal && (
          <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 backdrop-blur-xs p-4">
            <div className="bg-white rounded-3xl border border-slate-200 shadow-2xl max-w-md w-full p-6 space-y-5 animate-in fade-in-50 zoom-in-95 duration-200">
              <div className="flex items-center justify-between border-b border-slate-100 pb-3">
                <div className="flex items-center gap-2">
                  <i className="fa-brands fa-meta text-blue-600 text-lg" />
                  <h3 className="text-sm font-bold text-slate-900">Connect Meta Business Account</h3>
                </div>
                <button
                  onClick={() => setShowConnectModal(false)}
                  className="text-slate-400 hover:text-slate-600 text-xs font-bold p-1 cursor-pointer"
                >
                  ✕
                </button>
              </div>

              <form onSubmit={handleConnectToken} className="space-y-4">
                <p className="text-xs text-slate-500 leading-relaxed">
                  Enter your Meta Graph API System User or User Access Token with permissions (<code className="text-slate-800 font-mono">business_management</code>, <code className="text-slate-800 font-mono">pages_read_engagement</code>, <code className="text-slate-800 font-mono">catalog_management</code>).
                </p>

                <div className="space-y-1">
                  <label className="block text-[11px] font-semibold text-slate-700">
                    Meta Access Token <span className="text-rose-500">*</span>
                  </label>
                  <textarea
                    rows={3}
                    value={manualToken}
                    onChange={(e) => setManualToken(e.target.value)}
                    placeholder="EAAB..."
                    required
                    className="w-full px-3 py-2 text-xs font-mono bg-white border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20"
                  />
                </div>

                <div className="space-y-1">
                  <label className="block text-[11px] font-semibold text-slate-700">
                    Business Portfolio ID (Optional)
                  </label>
                  <input
                    type="text"
                    value={manualBizId}
                    onChange={(e) => setManualBizId(e.target.value)}
                    placeholder="e.g. 1029384756"
                    className="w-full px-3 py-2 text-xs bg-white border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20"
                  />
                </div>

                <div className="pt-2 flex items-center justify-end gap-2">
                  <button
                    type="button"
                    onClick={() => setShowConnectModal(false)}
                    className="px-4 py-2 rounded-xl text-xs font-semibold border border-slate-200 text-slate-600 hover:bg-slate-50 cursor-pointer"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    disabled={connecting || !manualToken.trim()}
                    className="px-5 py-2 rounded-xl text-xs font-bold bg-blue-600 hover:bg-blue-700 disabled:opacity-40 text-white shadow-xs transition cursor-pointer flex items-center gap-1.5"
                  >
                    <i className={`fa-solid ${connecting ? 'fa-spinner fa-spin' : 'fa-link'} text-xs`} />
                    <span>{connecting ? 'Connecting...' : 'Connect Account'}</span>
                  </button>
                </div>
              </form>
            </div>
          </div>
        )}
      </div>
    </AppLayout>
  );
}