'use client';

import React, { useState, useEffect, useCallback } from 'react';
import { useBranding } from '@/context/BrandingContext';
import StoreDetailsModal from '@/components/saas-admin/StoreDetailsModal';
import PlanEditModal from '@/components/saas-admin/PlanEditModal';
import BrandingSettingsSection from '@/components/saas-admin/BrandingSettingsSection';
import PlanDefinitionModal from '@/components/saas-admin/PlanDefinitionModal';
import FeatureDefinitionModal from '@/components/saas-admin/FeatureDefinitionModal';
import { DemoStoreItem } from '@/lib/saas-admin/demoData';
import { AdminRole, PricingPlan, FeatureDefinition } from '@/types';
import { normalizeAssetUrl } from '@/lib/utils/asset';

type TabType = 'stores' | 'overview' | 'subscriptions' | 'branding';

export default function SaasAdminPage() {
  const { branding } = useBranding();

  // Navigation
  const [activeTab, setActiveTab] = useState<TabType>('stores');

  // Authentication
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [isCheckingAuth, setIsCheckingAuth] = useState(true);
  const [adminUser, setAdminUser] = useState<{
    id: string;
    name: string;
    email: string;
    role: AdminRole;
  } | null>(null);
  const [loginEmail, setLoginEmail] = useState('');
  const [loginPassword, setLoginPassword] = useState('');
  const [isLoggingIn, setIsLoggingIn] = useState(false);
  const [loginError, setLoginError] = useState('');

  // Overview Data
  const [overview, setOverview] = useState<{
    totalStores: number;
    activeStores: number;
    paidStores: number;
    freePlanStores: number;
    monthlyRecurringRevenue: number;
    trialStores: number;
  }>({
    totalStores: 0,
    activeStores: 0,
    paidStores: 0,
    freePlanStores: 0,
    monthlyRecurringRevenue: 0,
    trialStores: 0,
  });

  // Stores Data
  const [stores, setStores] = useState<DemoStoreItem[]>([]);
  const [isLoadingStores, setIsLoadingStores] = useState(true);
  const [search, setSearch] = useState('');
  const [statusFilter, setStatusFilter] = useState<'ALL' | 'installed' | 'uninstalled'>('ALL');

  // Modals & Feedback
  const [selectedStore, setSelectedStore] = useState<DemoStoreItem | null>(null);
  const [planEditStore, setPlanEditStore] = useState<DemoStoreItem | null>(null);
  const [editingPlanDefinition, setEditingPlanDefinition] = useState<PricingPlan | null>(null);
  const [feedback, setFeedback] = useState<{ type: 'success' | 'error'; message: string } | null>(null);

  // Pricing Plans & Features Data
  const [plans, setPlans] = useState<PricingPlan[]>([]);
  const [isLoadingPlans, setIsLoadingPlans] = useState(false);
  const [featureDefinitions, setFeatureDefinitions] = useState<FeatureDefinition[]>([]);
  const [editingFeature, setEditingFeature] = useState<FeatureDefinition | null>(null);

  const showToast = (message: string, type: 'success' | 'error' = 'success') => {
    setFeedback({ type, message });
    setTimeout(() => setFeedback(null), 3000);
  };

  // Check Session
  useEffect(() => {
    let isMounted = true;
    const checkSession = async () => {
      try {
        const res = await fetch('/api/saas-admin/auth/me', { cache: 'no-store' });
        if (res.ok) {
          const data = await res.json();
          if (data.authenticated && data.admin) {
            if (isMounted) {
              setIsAuthenticated(true);
              setAdminUser(data.admin);
            }
            return;
          }
        }
        if (isMounted) {
          setIsAuthenticated(false);
          setAdminUser(null);
        }
      } catch {
        if (isMounted) {
          setIsAuthenticated(false);
          setAdminUser(null);
        }
      } finally {
        if (isMounted) {
          setIsCheckingAuth(false);
        }
      }
    };
    checkSession();
    return () => {
      isMounted = false;
    };
  }, []);

  // Fetch Overview Metrics
  const fetchOverview = useCallback(async () => {
    try {
      const res = await fetch('/api/saas-admin/overview');
      const data = await res.json();
      if (data.success && data.summary) {
        setOverview({
          totalStores: data.summary.totalStores || 0,
          activeStores: data.summary.activeStores || 0,
          paidStores: data.summary.paidStores || 0,
          freePlanStores: data.summary.freePlanStores || 0,
          monthlyRecurringRevenue: data.summary.monthlyRecurringRevenue || 0,
          trialStores: data.summary.trialStores || 0,
        });
      }
    } catch {
      // ignore
    }
  }, []);

  // Fetch Stores
  const fetchStores = useCallback(async () => {
    setIsLoadingStores(true);
    try {
      const q = new URLSearchParams();
      if (search) q.set('search', search);
      if (statusFilter !== 'ALL') q.set('status', statusFilter);
      q.set('pageSize', '50');

      const res = await fetch(`/api/saas-admin/stores?${q.toString()}`);
      const data = await res.json();
      if (data.success) {
        setStores(data.stores || []);
      }
    } catch {
      setStores([]);
    } finally {
      setIsLoadingStores(false);
    }
  }, [search, statusFilter]);

  // Fetch Subscription Plans
  const fetchPlans = useCallback(async () => {
    setIsLoadingPlans(true);
    try {
      const res = await fetch('/api/saas-admin/plans');
      const data = await res.json();
      if (data.success) {
        if (data.plans) {
          const order = ['basic', 'growth', 'scale', 'accelerate'];
          const sorted = (data.plans as PricingPlan[]).sort((a, b) => {
            const idxA = order.indexOf(a.id);
            const idxB = order.indexOf(b.id);
            return (idxA > -1 ? idxA : 99) - (idxB > -1 ? idxB : 99);
          });
          setPlans(sorted);
        }
        if (data.featureDefinitions) {
          setFeatureDefinitions(data.featureDefinitions);
        }
      }
    } catch {
      // ignore
    } finally {
      setIsLoadingPlans(false);
    }
  }, []);

  const handleSaveFeature = async (updatedFeature: Partial<FeatureDefinition> & { id: string }) => {
    try {
      const res = await fetch('/api/saas-admin/features', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(updatedFeature),
      });
      const data = await res.json();
      if (data.success) {
        showToast(data.message || 'Feature entitlement updated successfully! Live on frontend.');
        await fetchPlans();
      } else {
        throw new Error(data.error || 'Failed to update feature');
      }
    } catch (err: any) {
      showToast(err?.message || 'Error updating feature entitlement', 'error');
      throw err;
    }
  };

  useEffect(() => {
    if (isAuthenticated) {
      fetchOverview();
      fetchStores();
      fetchPlans();
    }
  }, [isAuthenticated, fetchOverview, fetchStores, fetchPlans]);

  // Super Admin Plan Definition Save Handler
  const handleSavePlanDefinition = async (updatedPlan: Partial<PricingPlan> & { plan_id: string }) => {
    try {
      const res = await fetch('/api/saas-admin/plans', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(updatedPlan),
      });
      const data = await res.json();
      if (data.success) {
        showToast(data.message || 'Plan updated successfully! Live on frontend.');
        await fetchPlans();
        await fetchOverview();
      } else {
        throw new Error(data.error || 'Failed to update plan definition');
      }
    } catch (err: any) {
      showToast(err?.message || 'Error updating plan definition', 'error');
      throw err;
    }
  };

  // Super Admin Enable / Disable Plan Handler
  const [togglingPlanId, setTogglingPlanId] = useState<string | null>(null);
  const handleTogglePlanActive = async (planId: string, currentActive: boolean) => {
    const newActive = !currentActive;
    setTogglingPlanId(planId);

    // Optimistically update local plans state
    setPlans((prev) =>
      prev.map((p) => (p.id === planId ? { ...p, is_active: newActive } : p))
    );

    try {
      const res = await fetch('/api/saas-admin/plans', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          plan_id: planId,
          is_active: newActive,
        }),
      });
      const data = await res.json();
      if (data.success) {
        showToast(
          newActive
            ? `Plan enabled! It will now show on frontend app.`
            : `Plan disabled! It is now hidden from frontend app.`
        );
        fetchPlans();
      } else {
        // Revert on failure
        setPlans((prev) =>
          prev.map((p) => (p.id === planId ? { ...p, is_active: currentActive } : p))
        );
        showToast(data.error || 'Failed to update plan status', 'error');
      }
    } catch (err: any) {
      // Revert on failure
      setPlans((prev) =>
        prev.map((p) => (p.id === planId ? { ...p, is_active: currentActive } : p))
      );
      showToast(err?.message || 'Error updating plan status', 'error');
    } finally {
      setTogglingPlanId(null);
    }
  };

  // Auth Handlers
  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoggingIn(true);
    setLoginError('');
    try {
      const res = await fetch('/api/saas-admin/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: loginEmail, password: loginPassword }),
      });
      const data = await res.json();
      if (data.success) {
        setIsAuthenticated(true);
        setAdminUser(data.admin);
        fetchOverview();
        fetchStores();
        fetchPlans();
      } else {
        setLoginError(data.error || 'Invalid credentials');
      }
    } catch (err: any) {
      setLoginError(err.message || 'Login failed');
    } finally {
      setIsLoggingIn(false);
    }
  };

  const handleLogout = async () => {
    try {
      await fetch('/api/saas-admin/auth/logout', { method: 'POST', cache: 'no-store' });
    } catch {}
    setIsAuthenticated(false);
    setAdminUser(null);
    setLoginEmail('');
    setLoginPassword('');
    setLoginError('');
  };

  // Plan Edit Handler
  const handleSavePlan = async (storeId: string, newPlan: string) => {
    try {
      const res = await fetch(`/api/saas-admin/stores/${storeId}/plan`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ plan: newPlan }),
      });
      const data = await res.json();
      if (data.success) {
        showToast(`Plan successfully updated to ${newPlan.toUpperCase()}`);
        fetchStores();
        fetchOverview();
      } else {
        showToast(data.error || 'Failed to update plan', 'error');
      }
    } catch {
      showToast('Error updating plan', 'error');
    }
  };

  // CSV Export
  const handleExportCSV = () => {
    if (stores.length === 0) {
      showToast('No stores available to export', 'error');
      return;
    }
    const headers = ['Store Name', 'Domain', 'Status', 'Plan', 'Monthly Revenue', 'Installed Date'];
    const rows = stores.map((s) => [
      `"${s.shop_name}"`,
      `"${s.shopify_domain}"`,
      `"${s.status}"`,
      `"${s.plan}"`,
      `"$${s.monthly_revenue}"`,
      `"${new Date(s.installed_at).toLocaleDateString()}"`,
    ]);
    const csvContent = 'data:text/csv;charset=utf-8,' + [headers.join(','), ...rows.map((r) => r.join(','))].join('\n');
    const link = document.createElement('a');
    link.setAttribute('href', encodeURI(csvContent));
    link.setAttribute('download', `saas_stores_${Date.now()}.csv`);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  // --------------------------------------------------------------------------
  // AUTH CHECK LOADING SPINNER
  // --------------------------------------------------------------------------
  if (isCheckingAuth) {
    return (
      <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
        <div className="flex flex-col items-center gap-3">
          <div className="w-8 h-8 border-2 border-slate-300 border-t-slate-900 rounded-full animate-spin" />
          <p className="text-xs font-medium text-slate-500">Checking admin session...</p>
        </div>
      </div>
    );
  }

  // --------------------------------------------------------------------------
  // LOGIN SCREEN (Minimal)
  // --------------------------------------------------------------------------
  if (!isAuthenticated) {
    return (
      <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
        <div className="w-full max-w-sm bg-white rounded-2xl border border-slate-200 p-8 shadow-sm space-y-6">
          <div className="text-center space-y-2">
            <div className="w-12 h-12 rounded-xl bg-theme/10 text-theme mx-auto flex items-center justify-center font-bold text-lg">
              {branding.logoUrl ? (
                <img src={normalizeAssetUrl(branding.logoUrl)} alt="Logo" className="w-8 h-8 object-contain" />
              ) : (
                <i className="fa-solid fa-layer-group" />
              )}
            </div>
            <h1 className="text-lg font-bold text-slate-900">Admin Sign In</h1>
            <p className="text-xs text-slate-500">{branding.appName}</p>
          </div>

          {loginError && (
            <div className="p-3 rounded-lg bg-rose-50 border border-rose-200 text-xs text-rose-700 text-center">
              {loginError}
            </div>
          )}

          <form onSubmit={handleLogin} className="space-y-4">
            <div className="space-y-1.5">
              <label className="text-xs font-semibold text-slate-700">Email Address</label>
              <input
                type="email"
                value={loginEmail}
                onChange={(e) => setLoginEmail(e.target.value)}
                placeholder="name@example.com"
                required
                className="w-full px-3 py-2 rounded-lg border border-slate-200 text-xs text-slate-800 focus:outline-none focus:border-theme focus:ring-1 focus:ring-theme"
              />
            </div>

            <div className="space-y-1.5">
              <label className="text-xs font-semibold text-slate-700">Password</label>
              <input
                type="password"
                value={loginPassword}
                onChange={(e) => setLoginPassword(e.target.value)}
                placeholder="Enter password"
                required
                className="w-full px-3 py-2 rounded-lg border border-slate-200 text-xs text-slate-800 focus:outline-none focus:border-theme focus:ring-1 focus:ring-theme"
              />
            </div>

            <button
              type="submit"
              disabled={isLoggingIn}
              className="w-full py-2.5 rounded-lg bg-theme hover:bg-theme-hover text-white text-xs font-bold transition-colors cursor-pointer"
            >
              {isLoggingIn ? 'Signing in...' : 'Sign In'}
            </button>
          </form>
        </div>
      </div>
    );
  }

  // --------------------------------------------------------------------------
  // MAIN ADMIN INTERFACE (Simple & Minimal)
  // --------------------------------------------------------------------------
  return (
    <div className="min-h-screen bg-slate-50 text-slate-800">
      {/* Toast Feedback */}
      {feedback && (
        <div
          className={`fixed bottom-5 right-5 z-50 px-4 py-2.5 rounded-xl text-xs font-semibold shadow-lg text-white ${
            feedback.type === 'error' ? 'bg-rose-600' : 'bg-slate-900'
          }`}
        >
          {feedback.message}
        </div>
      )}

      {/* Sleek Minimal Header */}
      <header className="bg-white border-b border-slate-200/80 sticky top-0 z-30">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          {/* Brand Logo & Name */}
          <div className="flex items-center gap-3">
            {branding.logoUrl ? (
              <img src={normalizeAssetUrl(branding.logoUrl)} alt="Logo" className="h-8 w-auto object-contain" />
            ) : (
              <div className="w-8 h-8 rounded-lg bg-theme text-white flex items-center justify-center font-bold text-xs">
                M
              </div>
            )}
            <div>
              <div className="text-sm font-bold text-slate-900 tracking-tight leading-tight">
                {branding.appName}
              </div>
              <span className="text-[10px] font-semibold text-slate-400 uppercase tracking-wider">
                SaaS Admin
              </span>
            </div>
          </div>

          {/* Minimal Navigation Tabs */}
          <nav className="flex items-center gap-1 bg-slate-100/80 p-1 rounded-xl">
            <button
              onClick={() => setActiveTab('stores')}
              className={`px-3.5 py-1.5 rounded-lg text-xs font-semibold transition-all cursor-pointer ${
                activeTab === 'stores'
                  ? 'bg-white text-slate-900 shadow-xs'
                  : 'text-slate-600 hover:text-slate-900'
              }`}
            >
              Stores {overview.totalStores > 0 && `(${overview.totalStores})`}
            </button>
            <button
              onClick={() => setActiveTab('overview')}
              className={`px-3.5 py-1.5 rounded-lg text-xs font-semibold transition-all cursor-pointer ${
                activeTab === 'overview'
                  ? 'bg-white text-slate-900 shadow-xs'
                  : 'text-slate-600 hover:text-slate-900'
              }`}
            >
              Overview
            </button>
            <button
              onClick={() => setActiveTab('subscriptions')}
              className={`px-3.5 py-1.5 rounded-lg text-xs font-semibold transition-all cursor-pointer ${
                activeTab === 'subscriptions'
                  ? 'bg-white text-slate-900 shadow-xs'
                  : 'text-slate-600 hover:text-slate-900'
              }`}
            >
              Subscriptions
            </button>
            <button
              onClick={() => setActiveTab('branding')}
              className={`px-3.5 py-1.5 rounded-lg text-xs font-semibold transition-all cursor-pointer ${
                activeTab === 'branding'
                  ? 'bg-white text-slate-900 shadow-xs'
                  : 'text-slate-600 hover:text-slate-900'
              }`}
            >
              Branding
            </button>
          </nav>

          {/* User & Sign Out */}
          <div className="flex items-center gap-3">
            <span className="text-xs text-slate-500 hidden sm:inline">{adminUser?.email}</span>
            <button
              onClick={handleLogout}
              className="text-xs text-slate-500 hover:text-rose-600 font-semibold flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg hover:bg-slate-100 transition-colors cursor-pointer"
            >
              <i className="fa-solid fa-arrow-right-from-bracket text-[11px]" />
              <span>Logout</span>
            </button>
          </div>
        </div>
      </header>

      {/* Main Content Area */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* ============================================================== */}
        {/* TAB 1: STORES                                                  */}
        {/* ============================================================== */}
        {activeTab === 'stores' && (
          <div className="space-y-4">
            {/* Action Bar */}
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
              <div>
                <h2 className="text-lg font-bold text-slate-900 tracking-tight">Connected Stores</h2>
                <p className="text-xs text-slate-500">
                  {stores.length} {stores.length === 1 ? 'store' : 'stores'} registered
                </p>
              </div>

              <div className="flex items-center gap-2">
                <button
                  onClick={() => {
                    fetchStores();
                    fetchOverview();
                  }}
                  className="px-3 py-1.5 rounded-lg border border-slate-200 bg-white hover:bg-slate-50 text-xs font-semibold text-slate-700 flex items-center gap-1.5 transition-colors cursor-pointer"
                >
                  <i className={`fa-solid fa-arrows-rotate text-[11px] ${isLoadingStores ? 'fa-spin' : ''}`} />
                  <span>Refresh</span>
                </button>
                {stores.length > 0 && (
                  <button
                    onClick={handleExportCSV}
                    className="px-3 py-1.5 rounded-lg bg-theme hover:bg-theme-hover text-white text-xs font-bold flex items-center gap-1.5 transition-colors cursor-pointer shadow-xs"
                  >
                    <i className="fa-solid fa-download text-[11px]" />
                    <span>Export</span>
                  </button>
                )}
              </div>
            </div>

            {/* Filter Bar */}
            <div className="flex flex-col sm:flex-row gap-2.5 items-stretch sm:items-center justify-between bg-white p-3 rounded-xl border border-slate-200/80">
              <div className="relative flex-1 max-w-sm">
                <i className="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-xs" />
                <input
                  type="text"
                  placeholder="Search store name, domain, email..."
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                  className="w-full pl-8 pr-3 py-1.5 rounded-lg border border-slate-200 text-xs text-slate-800 focus:outline-none focus:border-theme focus:ring-1 focus:ring-theme"
                />
              </div>

              <div className="flex items-center gap-1 bg-slate-100 p-0.5 rounded-lg text-xs font-medium">
                {(['ALL', 'installed', 'uninstalled'] as const).map((st) => (
                  <button
                    key={st}
                    onClick={() => setStatusFilter(st)}
                    className={`px-3 py-1 rounded-md capitalize transition-all cursor-pointer ${
                      statusFilter === st
                        ? 'bg-white text-slate-900 font-bold shadow-xs'
                        : 'text-slate-600 hover:text-slate-900'
                    }`}
                  >
                    {st === 'ALL' ? 'All' : st}
                  </button>
                ))}
              </div>
            </div>

            {/* Stores Table or Minimal Empty State */}
            {isLoadingStores ? (
              <div className="bg-white border border-slate-200/80 rounded-2xl p-12 text-center text-xs text-slate-400">
                <i className="fa-solid fa-circle-notch fa-spin text-lg text-theme mb-2" />
                <p>Loading stores...</p>
              </div>
            ) : stores.length === 0 ? (
              <div className="bg-white border border-slate-200/80 rounded-2xl p-16 text-center space-y-3 shadow-2xs">
                <div className="w-12 h-12 rounded-2xl bg-slate-100 text-slate-400 mx-auto flex items-center justify-center">
                  <i className="fa-solid fa-store text-xl" />
                </div>
                <h3 className="text-sm font-bold text-slate-900">No stores connected yet</h3>
                <p className="text-xs text-slate-500 max-w-sm mx-auto">
                  When merchants install the app via Shopify, their store details, plan tier, and revenue metrics will appear here automatically.
                </p>
              </div>
            ) : (
              <div className="bg-white border border-slate-200/80 rounded-2xl overflow-hidden shadow-2xs">
                <div className="overflow-x-auto">
                  <table className="w-full text-left text-xs">
                    <thead className="bg-slate-50/80 text-slate-400 font-bold uppercase text-[10px] border-b border-slate-100">
                      <tr>
                        <th className="py-3 px-4">Store Name &amp; Domain</th>
                        <th className="py-3 px-4">Owner Email</th>
                        <th className="py-3 px-3">Plan</th>
                        <th className="py-3 px-3">Status</th>
                        <th className="py-3 px-3">Monthly Rev</th>
                        <th className="py-3 px-4">Installed</th>
                        <th className="py-3 px-4 text-right">Actions</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100">
                      {stores.map((s) => (
                        <tr key={s.id} className="hover:bg-slate-50/80 transition-colors">
                          <td className="py-3.5 px-4 font-semibold text-slate-900">
                            <div>{s.shop_name}</div>
                            <div className="text-[11px] font-mono text-slate-400">{s.shopify_domain}</div>
                          </td>
                          <td className="py-3.5 px-4 text-slate-600">{s.owner_email}</td>
                          <td className="py-3.5 px-3">
                            <span className="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-theme/10 text-theme border border-theme/20">
                              {s.plan}
                            </span>
                          </td>
                          <td className="py-3.5 px-3">
                            <span
                              className={`px-2 py-0.5 rounded-full text-[10px] font-bold capitalize ${
                                s.status === 'installed'
                                  ? 'bg-emerald-50 text-emerald-700'
                                  : 'bg-rose-50 text-rose-700'
                              }`}
                            >
                              {s.status}
                            </span>
                          </td>
                          <td className="py-3.5 px-3 font-bold text-slate-900">${s.monthly_revenue}</td>
                          <td className="py-3.5 px-4 text-slate-500">
                            {new Date(s.installed_at).toLocaleDateString()}
                          </td>
                          <td className="py-3.5 px-4 text-right">
                            <div className="flex items-center justify-end gap-1.5">
                              <button
                                onClick={() => setSelectedStore(s)}
                                className="px-2.5 py-1 rounded-md text-xs font-semibold bg-slate-100 hover:bg-slate-200 text-slate-700 transition-colors cursor-pointer"
                              >
                                View
                              </button>
                              <button
                                onClick={() => setPlanEditStore(s)}
                                className="px-2.5 py-1 rounded-md text-xs font-semibold bg-theme/10 text-theme hover:bg-theme/20 transition-colors cursor-pointer"
                              >
                                Plan
                              </button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            )}
          </div>
        )}

        {/* ============================================================== */}
        {/* TAB 2: OVERVIEW (Minimal KPI Cards)                            */}
        {/* ============================================================== */}
        {activeTab === 'overview' && (
          <div className="space-y-6">
            <div>
              <h2 className="text-lg font-bold text-slate-900 tracking-tight">Platform Overview</h2>
              <p className="text-xs text-slate-500">High-level store, installation, and revenue metrics</p>
            </div>

            {/* 4 Minimal Metric Cards */}
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
              <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-2xs space-y-1">
                <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Total Stores</span>
                <div className="text-2xl font-black text-slate-900">{overview.totalStores}</div>
                <div className="text-[11px] text-slate-500">{overview.activeStores} active</div>
              </div>

              <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-2xs space-y-1">
                <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Active Installs</span>
                <div className="text-2xl font-black text-theme">{overview.activeStores}</div>
                <div className="text-[11px] text-emerald-600 font-semibold">Currently installed</div>
              </div>

              <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-2xs space-y-1">
                <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Monthly Revenue (MRR)</span>
                <div className="text-2xl font-black text-theme">
                  ${overview.monthlyRecurringRevenue.toFixed(2)}
                </div>
                <div className="text-[11px] text-slate-500">From paid subscribers</div>
              </div>

              <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-2xs space-y-1">
                <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Paid Subscribers</span>
                <div className="text-2xl font-black text-slate-900">{overview.paidStores}</div>
                <div className="text-[11px] text-slate-500">{overview.trialStores} in trial</div>
              </div>
            </div>

            {/* Plan Distribution Summary */}
            <div className="bg-white p-6 rounded-2xl border border-slate-200/80 shadow-2xs space-y-4">
              <h3 className="text-sm font-bold text-slate-900">Plan Distribution</h3>
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <div className="p-4 rounded-xl bg-slate-50 border border-slate-100 flex items-center justify-between">
                  <div>
                    <div className="text-xs font-bold text-slate-700">
                      {plans.find((p) => p.id === 'basic')?.name || 'Basic Plan'}
                    </div>
                    <div className="text-[11px] text-slate-400">
                      ${plans.find((p) => p.id === 'basic')?.price ?? 0} / month
                    </div>
                  </div>
                  <span className="text-lg font-black text-slate-900">{overview.freePlanStores}</span>
                </div>
                <div className="p-4 rounded-xl bg-slate-50 border border-slate-100 flex items-center justify-between">
                  <div>
                    <div className="text-xs font-bold text-slate-700">
                      {plans.find((p) => p.id === 'growth')?.name || 'Growth Plan'}
                    </div>
                    <div className="text-[11px] text-slate-400">
                      ${plans.find((p) => p.id === 'growth')?.price ?? 13} / month
                    </div>
                  </div>
                  <span className="text-lg font-black text-theme">{overview.paidStores}</span>
                </div>
                <div className="p-4 rounded-xl bg-slate-50 border border-slate-100 flex items-center justify-between">
                  <div>
                    <div className="text-xs font-bold text-slate-700">
                      {plans.find((p) => p.id === 'accelerate')?.name || 'Accelerate Plan'}
                    </div>
                    <div className="text-[11px] text-slate-400">
                      ${plans.find((p) => p.id === 'accelerate')?.price ?? 99} / month
                    </div>
                  </div>
                  <span className="text-lg font-black text-slate-900">0</span>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* ============================================================== */}
        {/* TAB 3: SUBSCRIPTIONS                                           */}
        {/* ============================================================== */}
        {activeTab === 'subscriptions' && (
          <div className="space-y-6">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
              <div>
                <h2 className="text-lg font-bold text-slate-900 tracking-tight">Subscription Plans</h2>
                <p className="text-xs text-slate-500">
                  Official Shopify app subscription tiers and capabilities. Updates reflect immediately on merchant frontend.
                </p>
              </div>
              <button
                onClick={fetchPlans}
                className="px-3 py-1.5 rounded-lg border border-slate-200 bg-white hover:bg-slate-50 text-xs font-semibold text-slate-700 flex items-center gap-1.5 transition-colors cursor-pointer self-start sm:self-auto"
              >
                <i className={`fa-solid fa-arrows-rotate text-[11px] ${isLoadingPlans ? 'fa-spin' : ''}`} />
                <span>Refresh Plans</span>
              </button>
            </div>

            {isLoadingPlans && plans.length === 0 ? (
              <div className="bg-white border border-slate-200/80 rounded-2xl p-12 text-center text-xs text-slate-400">
                <i className="fa-solid fa-circle-notch fa-spin text-lg text-theme mb-2" />
                <p>Loading plans...</p>
              </div>
            ) : (
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                {plans.map((plan) => {
                  const isHighlighted = plan.badge || plan.id === 'growth';
                  const isPlanEnabled = plan.is_active !== false;

                  return (
                    <div
                      key={plan.id}
                      className={`p-5 rounded-2xl border transition-all shadow-2xs space-y-4 flex flex-col justify-between ${
                        !isPlanEnabled
                          ? 'border-slate-300 bg-slate-50/70'
                          : isHighlighted
                          ? 'bg-white border-theme ring-2 ring-theme/10'
                          : 'bg-white border-slate-200/80 hover:border-slate-300'
                      }`}
                    >
                      <div className="space-y-3">
                        {/* Header with Title, Badge, and Toggle Switch */}
                        <div className="flex items-start justify-between gap-3 pb-3 border-b border-slate-100">
                          <div>
                            <div className="flex items-center gap-2">
                              <h3 className="text-sm font-bold text-slate-900">{plan.name}</h3>
                              {plan.badge && (
                                <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-theme text-white shadow-2xs">
                                  {plan.badge}
                                </span>
                              )}
                            </div>
                            <span className="text-[10px] font-mono text-slate-400 capitalize">
                              ID: {plan.id}
                            </span>
                          </div>

                          {/* Interactive Enable / Disable Toggle Switch */}
                          <div className="flex flex-col items-end gap-1">
                            <button
                              type="button"
                              disabled={togglingPlanId === plan.id}
                              onClick={() => handleTogglePlanActive(plan.id, isPlanEnabled)}
                              className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
                                isPlanEnabled ? 'bg-emerald-500' : 'bg-slate-300'
                              } ${togglingPlanId === plan.id ? 'opacity-50 cursor-wait' : ''}`}
                              title={isPlanEnabled ? 'Click to disable and hide from app' : 'Click to enable and show in app'}
                            >
                              <span
                                className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-md ring-0 transition duration-200 ease-in-out ${
                                  isPlanEnabled ? 'translate-x-5' : 'translate-x-0'
                                }`}
                              />
                            </button>
                            <span
                              className={`text-[10px] font-bold uppercase tracking-wider ${
                                isPlanEnabled ? 'text-emerald-600' : 'text-slate-400'
                              }`}
                            >
                              {togglingPlanId === plan.id ? 'Updating...' : isPlanEnabled ? 'Enabled' : 'Disabled'}
                            </span>
                          </div>
                        </div>

                        {/* Frontend Visibility Status Banner */}
                        <div
                          className={`px-3 py-2 rounded-xl text-xs flex items-center justify-between transition-colors ${
                            isPlanEnabled
                              ? 'bg-emerald-50 text-emerald-800 border border-emerald-200/80'
                              : 'bg-rose-50 text-rose-800 border border-rose-200/80'
                          }`}
                        >
                          <div className="flex items-center gap-2">
                            <span
                              className={`w-2 h-2 rounded-full shrink-0 ${
                                isPlanEnabled ? 'bg-emerald-500 animate-pulse' : 'bg-rose-500'
                              }`}
                            />
                            <span className="font-semibold text-[11px]">
                              {isPlanEnabled
                                ? 'Showing in Frontend App'
                                : 'Hidden from Frontend App'}
                            </span>
                          </div>
                          <span
                            className={`text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-md ${
                              isPlanEnabled
                                ? 'bg-emerald-100/80 text-emerald-800'
                                : 'bg-rose-100/80 text-rose-800'
                            }`}
                          >
                            {isPlanEnabled ? 'Live' : 'Hidden'}
                          </span>
                        </div>

                        {/* Price & Billing Interval */}
                        <div className="pt-1">
                          <div className="text-2xl font-black text-slate-900">
                            {plan.price === 0 ? 'Free' : `$${plan.price}`}
                            {plan.price > 0 && <span className="text-xs text-slate-400 font-normal"> / mo</span>}
                          </div>
                          <div className="text-[11px] text-slate-500 flex items-center gap-1.5 mt-0.5">
                            <i className="fa-regular fa-clock text-[10px] text-slate-400" />
                            <span>
                              {plan.trial_days && plan.trial_days > 0
                                ? `${plan.trial_days}-Day Free Trial`
                                : 'No Free Trial'}
                            </span>
                          </div>
                        </div>

                        {/* Key Entitlements */}
                        <div className="grid grid-cols-2 gap-2 p-2.5 rounded-xl bg-slate-50 border border-slate-100 text-[11px]">
                          <div>
                            <span className="text-slate-400 block text-[10px] uppercase font-bold">Catalog SKUs</span>
                            <span className="font-bold text-slate-800">
                              {plan.sku_limit ? `${plan.sku_limit.toLocaleString()}` : 'Unlimited'}
                            </span>
                          </div>
                          <div>
                            <span className="text-slate-400 block text-[10px] uppercase font-bold">Ad Campaigns</span>
                            <span className="font-bold text-slate-800">
                              {plan.campaigns_limit ? `${plan.campaigns_limit}` : 'Unlimited'}
                            </span>
                          </div>
                        </div>

                        {/* Feature bullets */}
                        <div className="pt-2 border-t border-slate-100">
                          <span className="text-[10px] font-bold uppercase tracking-wider text-slate-400 block mb-2">
                            Included Features:
                          </span>
                          <ul className="text-xs text-slate-600 space-y-1.5">
                            {(plan.features || []).map((feat, idx) => (
                              <li key={idx} className="flex items-start gap-1.5 leading-snug">
                                <span className="text-theme font-bold">&bull;</span>
                                <span>{feat}</span>
                              </li>
                            ))}
                          </ul>
                        </div>
                      </div>

                      {/* Card Footer Actions */}
                      <div className="pt-3 border-t border-slate-100 flex items-center gap-2">
                        <button
                          onClick={() => setEditingPlanDefinition(plan)}
                          className="flex-1 py-2 px-3 rounded-lg bg-theme/10 hover:bg-theme text-theme hover:text-white font-bold text-xs flex items-center justify-center gap-1.5 transition-colors cursor-pointer"
                        >
                          <i className="fa-solid fa-pen-to-square text-[11px]" />
                          <span>Edit Plan &amp; Quotas</span>
                        </button>
                        <button
                          type="button"
                          disabled={togglingPlanId === plan.id}
                          onClick={() => handleTogglePlanActive(plan.id, isPlanEnabled)}
                          className={`py-2 px-3 rounded-lg font-bold text-xs flex items-center justify-center gap-1.5 transition-colors cursor-pointer ${
                            isPlanEnabled
                              ? 'bg-rose-50 hover:bg-rose-100 text-rose-700 border border-rose-200'
                              : 'bg-emerald-50 hover:bg-emerald-100 text-emerald-700 border border-emerald-200'
                          }`}
                          title={isPlanEnabled ? 'Click to disable and hide from app' : 'Click to enable and show in app'}
                        >
                          <i className={`fa-solid ${isPlanEnabled ? 'fa-eye-slash' : 'fa-eye'} text-[11px]`} />
                          <span>{isPlanEnabled ? 'Disable' : 'Enable'}</span>
                        </button>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}

            {/* Feature-by-Feature Capability Matrix (17 Global Features) */}
            <div className="bg-white rounded-2xl border border-slate-200/80 shadow-2xs overflow-hidden mt-6">
              <div className="p-5 border-b border-slate-100 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                <div>
                  <h3 className="text-sm font-bold text-slate-900 flex items-center gap-2">
                    <i className="fa-solid fa-list-check text-indigo-600" />
                    <span>Feature Capabilities &amp; Entitlements Matrix ({featureDefinitions.length} Features)</span>
                  </h3>
                  <p className="text-xs text-slate-500 mt-0.5">
                    Configure feature access, quotas, and display text across Free, Growth, and Scale plans. Changes update the /pricing page immediately.
                  </p>
                </div>
                <span className="text-[11px] font-bold text-indigo-600 bg-indigo-50 px-2.5 py-1 rounded-full border border-indigo-100 self-start sm:self-auto">
                  Live Database Driven
                </span>
              </div>

              <div className="overflow-x-auto">
                <table className="w-full text-left text-xs border-collapse min-w-[700px]">
                  <thead>
                    <tr className="bg-slate-50/70 border-b border-slate-200 text-slate-700 font-extrabold">
                      <th className="p-3.5 pl-5">Feature Name &amp; Description</th>
                      <th className="p-3.5 text-center">Category</th>
                      <th className="p-3.5 text-center">Free Plan</th>
                      <th className="p-3.5 text-center bg-indigo-50/40 text-indigo-900">Growth Plan</th>
                      <th className="p-3.5 text-center">Scale Plan</th>
                      <th className="p-3.5 text-center">Actions</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100 text-slate-600">
                    {featureDefinitions.map((feat) => (
                      <tr key={feat.id} className="hover:bg-slate-50/60 transition-colors">
                        <td className="p-3.5 pl-5">
                          <div className="font-bold text-slate-900">{feat.name}</div>
                          {feat.description && (
                            <div className="text-[11px] text-slate-400 mt-0.5 max-w-sm truncate">{feat.description}</div>
                          )}
                          <div className="text-[10px] font-mono text-slate-400">{feat.id}</div>
                        </td>
                        <td className="p-3.5 text-center">
                          <span className="px-2 py-0.5 rounded-md bg-slate-100 text-slate-600 text-[10px] font-semibold">
                            {feat.category || 'General'}
                          </span>
                        </td>
                        <td className="p-3.5 text-center font-medium text-slate-700">
                          {feat.basic_value || (feat.basic_enabled ? 'Yes' : 'No')}
                        </td>
                        <td className="p-3.5 text-center font-semibold text-indigo-700 bg-indigo-50/20">
                          {feat.growth_value || (feat.growth_enabled ? 'Yes' : 'No')}
                        </td>
                        <td className="p-3.5 text-center font-bold text-purple-700">
                          {feat.scale_value || (feat.scale_enabled ? 'Yes' : 'No')}
                        </td>
                        <td className="p-3.5 text-center">
                          <button
                            type="button"
                            onClick={() => setEditingFeature(feat)}
                            className="px-2.5 py-1 rounded-lg bg-indigo-50 hover:bg-indigo-100 text-indigo-700 text-xs font-bold transition-colors cursor-pointer"
                          >
                            Edit
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}

        {/* ============================================================== */}
        {/* TAB 4: BRANDING                                                */}
        {/* ============================================================== */}
        {activeTab === 'branding' && (
          <div className="space-y-4">
            <div>
              <h2 className="text-lg font-bold text-slate-900 tracking-tight">Branding Settings</h2>
              <p className="text-xs text-slate-500">Update application display name, logo, and favicon</p>
            </div>
            <BrandingSettingsSection adminUser={adminUser} />
          </div>
        )}
      </main>

      {/* Modals */}
      {selectedStore && (
        <StoreDetailsModal
          store={selectedStore}
          onClose={() => setSelectedStore(null)}
          onPlanChangeRequest={(s) => {
            setSelectedStore(null);
            setPlanEditStore(s);
          }}
        />
      )}

      {planEditStore && (
        <PlanEditModal
          store={planEditStore}
          onClose={() => setPlanEditStore(null)}
          onSavePlan={handleSavePlan}
          availablePlans={
            plans.length > 0
              ? plans.map((p) => ({ id: p.id, name: p.name, price: p.price }))
              : [
                  { id: 'basic', name: 'Basic Plan', price: 0 },
                  { id: 'growth', name: 'Growth Plan', price: 13 },
                  { id: 'accelerate', name: 'Accelerate Plan', price: 99 },
                ]
          }
        />
      )}

      {editingPlanDefinition && (
        <PlanDefinitionModal
          plan={editingPlanDefinition}
          onClose={() => setEditingPlanDefinition(null)}
          onSave={handleSavePlanDefinition}
        />
      )}

      {editingFeature && (
        <FeatureDefinitionModal
          feature={editingFeature}
          onClose={() => setEditingFeature(null)}
          onSave={handleSaveFeature}
        />
      )}
    </div>
  );
}