import * as icon from '@mdi/js';
import axios from 'axios';
import Head from 'next/head';
import React, { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
import BaseButton from '../components/BaseButton';
import BaseIcon from '../components/BaseIcon';
import CardBox from '../components/CardBox';
import SectionMain from '../components/SectionMain';
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
import LayoutAuthenticated from '../layouts/Authenticated';
import { getPageTitle } from '../config';
import { useAppSelector } from '../stores/hooks';

type UniverseProfile = {
  businessName: string;
  trustScore: number;
  verified: boolean;
  walletBalance: number;
  geoseekRadiusKm: number;
  aiQuota: number;
  phone?: string;
  phoneVerified?: boolean;
};

type UniverseModule = {
  id: string;
  icon: string;
  name: string;
  description: string;
  metric: string;
  status: string;
  trustImpact: number;
  launches: number;
  lastRun?: string;
};

type UniverseProduct = {
  id: string;
  name: string;
  price: number;
  seller: string;
  category: string;
  stock: number;
};

type LedgerItem = {
  id: string;
  title: string;
  detail: string;
  time: string;
  tone: 'info' | 'success' | 'warning' | 'danger';
};

type UniverseSettings = {
  trustAutoSync: boolean;
  marketplaceMode: string;
  riskReview: string;
};

type UniverseState = {
  profile: UniverseProfile;
  modules: UniverseModule[];
  products: UniverseProduct[];
  ledger: LedgerItem[];
  settings: UniverseSettings;
  persistedAt?: string;
};

type SocialComment = {
  id: string;
  post_id: string;
  user: string;
  comment: string;
  parent_id: string;
  created_at: string;
};

type SocialPost = {
  id: string;
  user: string;
  content: string;
  created_at: string;
  comments: SocialComment[];
};

type SocialFeed = {
  posts: SocialPost[];
  stats: {
    postsCount: number;
    commentsCount: number;
  };
  syncedAt?: string;
};

type SocialMutationResponse = {
  feed: SocialFeed;
  state: UniverseState;
};

type QuickMenuItem = {
  id: string;
  label: string;
  icon: string;
  description: string;
};

type ProductDraft = {
  name: string;
  seller: string;
  category: string;
  price: string;
  stock: string;
};

type OtpRequestResponse = {
  message: string;
  phone: string;
  devOtp: string;
  expiresAt: string;
  state: UniverseState;
};

type OtpVerifyResponse = {
  message: string;
  verified: boolean;
  state: UniverseState;
};

type UniverseAction = () => Promise<{ data: UniverseState }>;
type SocialAction = () => Promise<{ data: SocialMutationResponse }>;

const fallbackIcon = icon.mdiViewDashboardOutline;
const resolveIcon = (name: string) => (
  name in icon ? icon[name as keyof typeof icon] : fallbackIcon
) as string;

const initialUniverseState: UniverseState = {
  profile: {
    businessName: 'VORTA Nexus Demo',
    trustScore: 50,
    verified: false,
    walletBalance: 1850000,
    geoseekRadiusKm: 7,
    aiQuota: 32,
    phone: '',
    phoneVerified: false,
  },
  modules: [
    {
      id: 'business-chat',
      icon: '💬',
      name: 'Chat Bisnis',
      description: 'Inbox komersial untuk buyer, seller, partner, dan tim internal.',
      metric: '128 percakapan',
      status: 'Online',
      trustImpact: 2,
      launches: 0,
    },
    {
      id: 'marketplace',
      icon: '🛒',
      name: 'Marketplace',
      description: 'Etalase produk, seller score, katalog cepat, dan aktivitas listing.',
      metric: '24 listing aktif',
      status: 'Online',
      trustImpact: 3,
      launches: 0,
    },
    {
      id: 'wallet',
      icon: '💳',
      name: 'Wallet',
      description: 'Saldo, pembayaran, reward, dan settlement untuk pengguna VORTA.',
      metric: 'Rp1,85 jt saldo',
      status: 'Online',
      trustImpact: 2,
      launches: 0,
    },
    {
      id: 'geoseek',
      icon: '🌍',
      name: 'GeoSeek',
      description: 'Pencarian peluang, mitra, dan kebutuhan berdasarkan lokasi.',
      metric: '7 km radius',
      status: 'Beta',
      trustImpact: 1,
      launches: 0,
    },
    {
      id: 'vorta-ai',
      icon: '🤖',
      name: 'VORTA AI',
      description: 'Asisten AI untuk ide bisnis, analisis produk, dan rekomendasi aksi.',
      metric: '32 prompt tersisa',
      status: 'Siap',
      trustImpact: 2,
      launches: 0,
    },
    {
      id: 'trust-system',
      icon: '⭐',
      name: 'Trust System',
      description: 'Nexus Trust Score, validasi profil, reputasi transaksi, dan sinyal risiko.',
      metric: 'Score dasar 50',
      status: 'Aktif',
      trustImpact: 4,
      launches: 0,
    },
  ],
  products: [
    {
      id: 'VU-PRD-001',
      name: 'VORTA Starter Kit',
      price: 149000,
      seller: 'Nexus Seller Lab',
      category: 'Digital Toolkit',
      stock: 120,
    },
    {
      id: 'VU-PRD-002',
      name: 'GeoSeek Local Leads',
      price: 99000,
      seller: 'VORTA Data Market',
      category: 'Lead Pack',
      stock: 45,
    },
    {
      id: 'VU-PRD-003',
      name: 'Trust Boost Verification',
      price: 199000,
      seller: 'VORTA Trust Desk',
      category: 'Verification',
      stock: 18,
    },
  ],
  ledger: [
    {
      id: 'VU-LOG-1',
      title: 'Nexus Trust Score aktif',
      detail: 'Baseline score dimulai dari 50 dan tersimpan di database PostgreSQL.',
      time: 'Baru saja',
      tone: 'success',
    },
    {
      id: 'VU-LOG-2',
      title: 'Marketplace demo tersambung',
      detail: 'Produk awal siap diuji tanpa membuat aplikasi Express/SQLite terpisah.',
      time: 'Baru saja',
      tone: 'info',
    },
  ],
  settings: {
    trustAutoSync: true,
    marketplaceMode: 'Demo Aktif',
    riskReview: 'Medium',
  },
};

const initialSocialFeed: SocialFeed = {
  posts: [],
  stats: {
    postsCount: 0,
    commentsCount: 0,
  },
};

const initialProductDraft: ProductDraft = {
  name: 'Produk Custom VORTA',
  seller: 'VORTA Universe Seller',
  category: 'Custom Product',
  price: '175000',
  stock: '30',
};

const quickMenuItems: QuickMenuItem[] = [
  {
    id: 'vorta-overview',
    label: 'Overview',
    icon: 'mdiViewDashboardOutline',
    description: 'Ringkasan trust, wallet, AI, GeoSeek, dan marketplace.',
  },
  {
    id: 'vorta-auth',
    label: 'Auth & OTP',
    icon: 'mdiShieldKeyOutline',
    description: 'Login Google/email, daftar akun, profil, dan OTP dev.',
  },
  {
    id: 'vorta-modules',
    label: 'Modules',
    icon: 'mdiApps',
    description: 'Jalankan module Universe dan buka entity terkait.',
  },
  {
    id: 'vorta-social',
    label: 'Social Feed',
    icon: 'mdiPostOutline',
    description: 'Post, komentar, refresh feed, dan sinkronisasi PostgreSQL.',
  },
  {
    id: 'vorta-marketplace',
    label: 'Marketplace',
    icon: 'mdiStorefrontOutline',
    description: 'Produk demo/custom dan tabel inventory Universe.',
  },
  {
    id: 'vorta-settings',
    label: 'Settings',
    icon: 'mdiCogOutline',
    description: 'Mode marketplace, risk review, dan timestamp persistensi.',
  },
];

const moduleEntityLinks: Record<string, string> = {
  'business-chat': '/chats/chats-list',
  marketplace: '/products/products-list',
  wallet: '/wallets/wallets-list',
  geoseek: '/geo_rules/geo_rules-list',
  'vorta-ai': '/facta_queries/facta_queries-list',
  'trust-system': '/trust_profiles/trust_profiles-list',
};

const formatCurrency = (value: number) => new Intl.NumberFormat('id-ID', {
  style: 'currency',
  currency: 'IDR',
  maximumFractionDigits: 0,
}).format(value);

const formatNumber = (value: number) => new Intl.NumberFormat('id-ID', {
  maximumFractionDigits: 0,
}).format(value);

const formatDateTime = (value?: string) => {
  if (!value) return 'Baru saja';

  return new Intl.DateTimeFormat('id-ID', {
    dateStyle: 'medium',
    timeStyle: 'short',
  }).format(new Date(value));
};

const getToneClass = (tone: LedgerItem['tone']) => {
  if (tone === 'success') return 'bg-emerald-500';
  if (tone === 'warning') return 'bg-amber-500';
  if (tone === 'danger') return 'bg-red-500';

  return 'bg-blue-500';
};

const getTrustLabel = (score: number) => {
  if (score >= 80) return 'Verified Nexus';
  if (score >= 65) return 'Trusted Growth';
  if (score >= 45) return 'Starter Trust';

  return 'Perlu Review';
};

const VortaUniversePage = () => {
  const { currentUser } = useAppSelector((state) => state.auth);
  const iconsColor = useAppSelector((state) => state.style.iconsColor);
  const [profile, setProfile] = useState<UniverseProfile>(initialUniverseState.profile);
  const [modules, setModules] = useState<UniverseModule[]>(initialUniverseState.modules);
  const [products, setProducts] = useState<UniverseProduct[]>(initialUniverseState.products);
  const [ledger, setLedger] = useState<LedgerItem[]>(initialUniverseState.ledger);
  const [settings, setSettings] = useState<UniverseSettings>(initialUniverseState.settings);
  const [persistedAt, setPersistedAt] = useState<string | null>(null);
  const [isLoadingUniverse, setIsLoadingUniverse] = useState(true);
  const [isSavingUniverse, setIsSavingUniverse] = useState(false);
  const [universeError, setUniverseError] = useState<string | null>(null);
  const [socialFeed, setSocialFeed] = useState<SocialFeed>(initialSocialFeed);
  const [postContent, setPostContent] = useState('');
  const [commentDrafts, setCommentDrafts] = useState<Record<string, string>>({});
  const [isLoadingSocial, setIsLoadingSocial] = useState(true);
  const [isSavingSocial, setIsSavingSocial] = useState(false);
  const [socialError, setSocialError] = useState<string | null>(null);
  const [otpPhone, setOtpPhone] = useState(profile.phone || '');
  const [otpCode, setOtpCode] = useState('');
  const [otpStatus, setOtpStatus] = useState<string | null>(null);
  const [otpDevCode, setOtpDevCode] = useState<string | null>(null);
  const [isOtpBusy, setIsOtpBusy] = useState(false);
  const [productDraft, setProductDraft] = useState<ProductDraft>(initialProductDraft);
  const [universeNotice, setUniverseNotice] = useState<string | null>(null);
  const [socialNotice, setSocialNotice] = useState<string | null>(null);

  const applyUniverseState = useCallback((payload: UniverseState) => {
    setProfile(payload.profile || initialUniverseState.profile);
    setModules(payload.modules || initialUniverseState.modules);
    setProducts(payload.products || initialUniverseState.products);
    setLedger(payload.ledger || initialUniverseState.ledger);
    setSettings(payload.settings || initialUniverseState.settings);
    setPersistedAt(payload.persistedAt || new Date().toISOString());
  }, []);

  const applySocialFeed = useCallback((payload: SocialFeed) => {
    setSocialFeed(payload || initialSocialFeed);
  }, []);

  const loadUniverseState = useCallback(async () => {
    setIsLoadingUniverse(true);
    setUniverseError(null);
    setUniverseNotice(null);

    try {
      const response = await axios.get<UniverseState>('/vorta-universe/state');
      applyUniverseState(response.data);
      setOtpPhone(response.data.profile?.phone || '');
    } catch (error) {
      console.error('Failed to load VORTA Universe state:', error);
      setUniverseError('Data VORTA Universe belum bisa dimuat dari database. Fallback demo lokal tetap ditampilkan.');
    } finally {
      setIsLoadingUniverse(false);
    }
  }, [applyUniverseState]);

  const loadSocialFeed = useCallback(async () => {
    setIsLoadingSocial(true);
    setSocialError(null);
    setSocialNotice(null);

    try {
      const response = await axios.get<SocialFeed>('/vorta-universe/social-feed');
      applySocialFeed(response.data);
    } catch (error) {
      console.error('Failed to load VORTA social feed:', error);
      setSocialError('Feed komunitas belum bisa dimuat dari tabel PostgreSQL.');
    } finally {
      setIsLoadingSocial(false);
    }
  }, [applySocialFeed]);

  useEffect(() => {
    loadUniverseState();
    loadSocialFeed();
  }, [loadUniverseState, loadSocialFeed]);

  const runUniverseAction = useCallback(async (action: UniverseAction, errorMessage: string) => {
    setIsSavingUniverse(true);
    setUniverseError(null);
    setUniverseNotice(null);

    try {
      const response = await action();
      applyUniverseState(response.data);
      return true;
    } catch (error) {
      console.error(errorMessage, error);
      setUniverseError(`${errorMessage} Cek backend log untuk detail.`);
      return false;
    } finally {
      setIsSavingUniverse(false);
    }
  }, [applyUniverseState]);

  const runSocialAction = useCallback(async (action: SocialAction, errorMessage: string) => {
    setIsSavingSocial(true);
    setSocialError(null);
    setSocialNotice(null);

    try {
      const response = await action();
      applySocialFeed(response.data.feed);
      applyUniverseState(response.data.state);
      return true;
    } catch (error) {
      console.error(errorMessage, error);
      setSocialError(`${errorMessage} Cek backend log untuk detail.`);
      return false;
    } finally {
      setIsSavingSocial(false);
    }
  }, [applySocialFeed, applyUniverseState]);

  const metrics = useMemo(() => {
    const inventoryValue = products.reduce((total, product) => total + product.price * product.stock, 0);
    const activeModules = modules.filter((item) => item.status !== 'Offline').length;
    const totalLaunches = modules.reduce((total, item) => total + (item.launches || 0), 0);

    return {
      inventoryValue,
      activeModules,
      totalLaunches,
      productCount: products.length,
      totalStock: products.reduce((total, product) => total + product.stock, 0),
    };
  }, [modules, products]);

  const greetingName = currentUser?.firstName || currentUser?.email || 'Founder VORTA';
  const trustLabel = getTrustLabel(profile.trustScore);

  const updateTrustScore = (nextScore: number) => {
    runUniverseAction(
      () => axios.patch<UniverseState>('/vorta-universe/trust-score', { data: { score: nextScore } }),
      'Gagal memperbarui Nexus Trust Score.',
    );
  };

  const runModule = async (moduleId: string) => {
    const target = modules.find((item) => item.id === moduleId);
    const saved = await runUniverseAction(
      () => axios.post<UniverseState>(`/vorta-universe/modules/${moduleId}/run`),
      'Gagal menjalankan module VORTA Universe.',
    );

    if (saved) {
      setUniverseNotice(`${target?.name || 'Module'} berhasil dijalankan dan tersimpan di ledger.`);
    }
  };

  const runAllModules = async () => {
    if (!modules.length) {
      setUniverseError('Belum ada module untuk dijalankan.');
      return;
    }

    setIsSavingUniverse(true);
    setUniverseError(null);
    setUniverseNotice(null);

    try {
      let latestState: UniverseState | null = null;

      for (const item of modules) {
        const response = await axios.post<UniverseState>(`/vorta-universe/modules/${item.id}/run`);
        latestState = response.data;
      }

      if (latestState) {
        applyUniverseState(latestState);
      }

      setUniverseNotice(`Semua ${modules.length} module berhasil dijalankan berurutan.`);
    } catch (error) {
      console.error('Failed to run all VORTA modules:', error);
      setUniverseError('Gagal menjalankan semua module VORTA Universe. Cek backend log untuk detail.');
    } finally {
      setIsSavingUniverse(false);
    }
  };

  const createDemoProduct = async () => {
    const saved = await runUniverseAction(
      () => axios.post<UniverseState>('/vorta-universe/products/demo'),
      'Gagal menambahkan produk demo.',
    );

    if (saved) {
      setUniverseNotice('Produk demo berhasil ditambahkan ke Marketplace Products.');
    }
  };

  const createCustomProduct = async () => {
    if (!productDraft.name.trim()) {
      setUniverseError('Nama produk custom wajib diisi.');
      return;
    }

    const saved = await runUniverseAction(
      () => axios.post<UniverseState>('/vorta-universe/products', {
        data: {
          name: productDraft.name,
          seller: productDraft.seller,
          category: productDraft.category,
          price: Number(productDraft.price),
          stock: Number(productDraft.stock),
        },
      }),
      'Gagal menambahkan produk custom.',
    );

    if (saved) {
      setUniverseNotice(`${productDraft.name} berhasil ditambahkan ke marketplace.`);
      setProductDraft(initialProductDraft);
    }
  };

  const createPost = async () => {
    if (!postContent.trim()) {
      setSocialError('Isi post terlebih dahulu.');
      return;
    }

    const saved = await runSocialAction(
      () => axios.post<SocialMutationResponse>('/vorta-universe/posts', { data: { content: postContent } }),
      'Gagal membuat post komunitas.',
    );

    if (saved) {
      setPostContent('');
      setSocialNotice('Post komunitas berhasil tersimpan permanen di PostgreSQL.');
    }
  };

  const createComment = async (postId: string) => {
    const comment = commentDrafts[postId] || '';

    if (!comment.trim()) {
      setSocialError('Isi komentar terlebih dahulu.');
      return;
    }

    const saved = await runSocialAction(
      () => axios.post<SocialMutationResponse>(`/vorta-universe/posts/${postId}/comments`, {
        data: { comment, parent_id: '0' },
      }),
      'Gagal membuat komentar komunitas.',
    );

    if (saved) {
      setCommentDrafts((drafts) => ({ ...drafts, [postId]: '' }));
      setSocialNotice('Komentar berhasil tersimpan permanen di PostgreSQL.');
    }
  };

  const requestOtp = async () => {
    setIsOtpBusy(true);
    setOtpStatus(null);
    setOtpDevCode(null);

    try {
      const response = await axios.post<OtpRequestResponse>('/vorta-universe/auth/otp/request', {
        data: { phone: otpPhone },
      });
      applyUniverseState(response.data.state);
      setOtpStatus(response.data.message);
      setOtpDevCode(response.data.devOtp);
    } catch (error) {
      console.error('Failed to request VORTA OTP:', error);
      setOtpStatus('Gagal membuat OTP. Pastikan nomor HP minimal 8 digit.');
    } finally {
      setIsOtpBusy(false);
    }
  };

  const verifyOtp = async () => {
    setIsOtpBusy(true);
    setOtpStatus(null);

    try {
      const response = await axios.post<OtpVerifyResponse>('/vorta-universe/auth/otp/verify', {
        data: { phone: otpPhone, otp: otpCode },
      });
      applyUniverseState(response.data.state);
      setOtpStatus(response.data.message);
      setOtpDevCode(null);
      setOtpCode('');
    } catch (error) {
      console.error('Failed to verify VORTA OTP:', error);
      setOtpStatus('OTP tidak valid atau kedaluwarsa. Request kode baru jika perlu.');
    } finally {
      setIsOtpBusy(false);
    }
  };

  const openGoogleLogin = () => {
    window.location.assign('/api/auth/signin/google?app=/vorta-universe');
  };

  const scrollToSection = (sectionId: string) => {
    document.getElementById(sectionId)?.scrollIntoView({
      behavior: 'smooth',
      block: 'start',
    });
  };

  const refreshEverything = async () => {
    await Promise.all([loadUniverseState(), loadSocialFeed()]);
    setUniverseNotice('State Universe dan social feed berhasil direfresh dari PostgreSQL.');
    setSocialNotice('Social feed berhasil direfresh dari PostgreSQL.');
  };

  const resetUniverseState = async () => {
    const saved = await runUniverseAction(
      () => axios.post<UniverseState>('/vorta-universe/state/reset'),
      'Gagal reset state VORTA Universe.',
    );

    if (saved) {
      setProductDraft(initialProductDraft);
      setOtpCode('');
      setOtpDevCode(null);
      setOtpStatus('State demo berhasil di-reset. Request OTP baru jika ingin verifikasi ulang.');
      setUniverseNotice('State VORTA Universe berhasil di-reset ke data demo awal.');
    }
  };

  const resetSocialFeed = async () => {
    const saved = await runSocialAction(
      () => axios.post<SocialMutationResponse>('/vorta-universe/social-feed/reset'),
      'Gagal reset social feed VORTA Universe.',
    );

    if (saved) {
      setPostContent('');
      setCommentDrafts({});
      setSocialNotice('Social feed berhasil di-reset ke post dan komentar demo awal.');
    }
  };

  const clearSocialDrafts = () => {
    setPostContent('');
    setCommentDrafts({});
    setSocialNotice('Draft post dan komentar di layar sudah dibersihkan.');
  };

  return (
    <>
      <Head>
        <title>{getPageTitle('4. Vorta Nexus')}</title>
      </Head>
      <SectionMain>
        <SectionTitleLineWithButton
          icon={resolveIcon('mdiOrbitVariant')}
          title="4. Vorta Nexus"
          main
        >
          <BaseButton
            label={isSavingUniverse ? 'Menyimpan...' : isLoadingUniverse ? 'Memuat DB...' : 'Database Aktif'}
            icon={resolveIcon('mdiDatabaseCheckOutline')}
            color="success"
            small
            disabled
          />
        </SectionTitleLineWithButton>

        {universeError ? (
          <div className="mb-4 rounded-2xl border border-red-200 bg-red-50 p-4 text-sm font-medium text-red-700 dark:border-red-900/40 dark:bg-red-900/20 dark:text-red-200">
            {universeError}
          </div>
        ) : null}

        {universeNotice ? (
          <div className="mb-4 rounded-2xl border border-emerald-200 bg-emerald-50 p-4 text-sm font-medium text-emerald-700 dark:border-emerald-900/40 dark:bg-emerald-900/20 dark:text-emerald-200">
            {universeNotice}
          </div>
        ) : null}

        {(isLoadingUniverse || isSavingUniverse) ? (
          <div className="mb-4 rounded-2xl border border-blue-200 bg-blue-50 p-4 text-sm font-medium text-blue-700 dark:border-blue-900/40 dark:bg-blue-900/20 dark:text-blue-200">
            {isLoadingUniverse ? 'Mengambil state dari PostgreSQL...' : 'Menyimpan perubahan VORTA Universe...'}
          </div>
        ) : null}

        <CardBox id="vorta-overview" className="mb-6 overflow-hidden border border-slate-100/80 bg-slate-950 text-white dark:border-dark-700">
          <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
            <div className="lg:col-span-2">
              <div className="inline-flex rounded-full bg-white/10 px-3 py-1 text-xs font-semibold tracking-widest text-emerald-200">
                VORTA UNIVERSE • 4. Vorta Nexus
              </div>
              <h1 className="mt-5 text-4xl font-black tracking-tight md:text-5xl">
                4. Vorta Nexus
              </h1>
              <p className="mt-3 max-w-3xl text-base text-slate-300 md:text-lg">
                Halo {greetingName}, Skor Kepercayaan 0-100 Untuk Identitas, Bisnis, Ulasan, Dan Akses Komunitas.
              </p>
              <div className="mt-6 flex flex-wrap gap-3">
                <BaseButton
                  label="Boost Trust +5"
                  color="success"
                  disabled={isSavingUniverse}
                  onClick={() => updateTrustScore(profile.trustScore + 5)}
                />
                <BaseButton
                  label="Review -5"
                  color="warning"
                  disabled={isSavingUniverse}
                  onClick={() => updateTrustScore(profile.trustScore - 5)}
                />
                <BaseButton
                  label="Run Semua Module"
                  color="info"
                  disabled={isSavingUniverse}
                  onClick={() => runAllModules()}
                />
                <BaseButton
                  label="Reload Semua"
                  color="info"
                  outline
                  disabled={isLoadingUniverse || isLoadingSocial}
                  onClick={() => refreshEverything()}
                />
                <BaseButton
                  label="Reset Demo"
                  color="danger"
                  outline
                  disabled={isSavingUniverse}
                  onClick={() => resetUniverseState()}
                />
              </div>
            </div>
            <div className="rounded-3xl border border-white/10 bg-white/10 p-6">
              <p className="text-sm uppercase tracking-widest text-slate-300">Nexus Trust Score</p>
              <div className="mt-3 flex items-end gap-3">
                <span className="text-6xl font-black">{profile.trustScore}</span>
                <span className="mb-2 rounded-full bg-emerald-400 px-3 py-1 text-xs font-bold uppercase text-slate-950">
                  {trustLabel}
                </span>
              </div>
              <div className="mt-5 h-3 overflow-hidden rounded-full bg-slate-800">
                <div
                  className="h-full rounded-full bg-gradient-to-r from-emerald-400 to-blue-400"
                  style={{ width: `${Math.min(Math.max(profile.trustScore, 0), 100)}%` }}
                />
              </div>
              <p className="mt-4 text-sm text-slate-300">
                Phone: {profile.phoneVerified ? `✅ ${profile.phone}` : 'Belum verifikasi OTP'}
              </p>
            </div>
          </div>
        </CardBox>

        <CardBox className="mb-6 border border-slate-100/80 dark:border-dark-700">
          <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
            <div>
              <h2 className="text-xl font-bold">Quick Menu VORTA</h2>
              <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                Shortcut operasional Nexus tetap aktif, sementara menu utama VORTA Universe mengikuti urutan 1 sampai 5.
              </p>
            </div>
            <div className="flex flex-wrap gap-2">
              <BaseButton label="Profil" icon={resolveIcon('mdiAccountCircleOutline')} color="white" small href="/profile" />
              <BaseButton label="API Docs" icon={resolveIcon('mdiFileCodeOutline')} color="white" small href="/api-docs" target="_blank" />
              <BaseButton
                label="Refresh Semua"
                icon={resolveIcon('mdiRefresh')}
                color="info"
                small
                disabled={isLoadingUniverse || isLoadingSocial}
                onClick={() => refreshEverything()}
              />
            </div>
          </div>
          <div className="mt-5 grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
            {quickMenuItems.map((item) => (
              <button
                key={item.id}
                type="button"
                className="rounded-2xl border border-slate-100 bg-slate-50 p-4 text-left transition hover:-translate-y-0.5 hover:border-blue-200 hover:bg-blue-50 dark:border-dark-700 dark:bg-dark-800 dark:hover:border-blue-900/60 dark:hover:bg-blue-900/20"
                onClick={() => scrollToSection(item.id)}
              >
                <div className="flex items-start gap-3">
                  <span className="rounded-xl bg-white p-2 text-blue-600 shadow-sm dark:bg-dark-900 dark:text-blue-300">
                    <BaseIcon path={resolveIcon(item.icon)} size={20} />
                  </span>
                  <span>
                    <span className="block font-bold">{item.label}</span>
                    <span className="mt-1 block text-sm text-gray-500 dark:text-gray-400">{item.description}</span>
                  </span>
                </div>
              </button>
            ))}
          </div>
        </CardBox>

        <div className="mb-6 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
          <CardBox className="border border-slate-100/80 dark:border-dark-700">
            <div className="flex items-center gap-3">
              <BaseIcon path={resolveIcon('mdiWalletOutline')} className={iconsColor} size={30} />
              <div>
                <p className="text-sm text-gray-500 dark:text-gray-400">Wallet Balance</p>
                <p className="text-2xl font-black">{formatCurrency(profile.walletBalance)}</p>
              </div>
            </div>
          </CardBox>
          <CardBox className="border border-slate-100/80 dark:border-dark-700">
            <div className="flex items-center gap-3">
              <BaseIcon path={resolveIcon('mdiMapMarkerRadiusOutline')} className={iconsColor} size={30} />
              <div>
                <p className="text-sm text-gray-500 dark:text-gray-400">GeoSeek Radius</p>
                <p className="text-2xl font-black">{profile.geoseekRadiusKm} km</p>
              </div>
            </div>
          </CardBox>
          <CardBox className="border border-slate-100/80 dark:border-dark-700">
            <div className="flex items-center gap-3">
              <BaseIcon path={resolveIcon('mdiRobotOutline')} className={iconsColor} size={30} />
              <div>
                <p className="text-sm text-gray-500 dark:text-gray-400">VORTA AI Quota</p>
                <p className="text-2xl font-black">{profile.aiQuota} prompt</p>
              </div>
            </div>
          </CardBox>
          <CardBox className="border border-slate-100/80 dark:border-dark-700">
            <div className="flex items-center gap-3">
              <BaseIcon path={resolveIcon('mdiStorefrontOutline')} className={iconsColor} size={30} />
              <div>
                <p className="text-sm text-gray-500 dark:text-gray-400">Marketplace Value</p>
                <p className="text-2xl font-black">{formatCurrency(metrics.inventoryValue)}</p>
              </div>
            </div>
          </CardBox>
        </div>

        <div className="mb-6 grid grid-cols-1 gap-4 xl:grid-cols-3">
          <CardBox id="vorta-auth" className="border border-slate-100/80 xl:col-span-2 dark:border-dark-700">
            <h2 className="text-xl font-bold">Masuk / Daftar</h2>
            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
              Panel ini mengambil ide dari prototype. Google dan Email/Password memakai auth bawaan Flatlogic.
            </p>
            <div className="mt-5 grid grid-cols-1 gap-3 md:grid-cols-3">
              <BaseButton
                label="🔵 Masuk Google"
                color="white"
                onClick={openGoogleLogin}
              />
              <BaseButton
                label="✉️ Email Login"
                color="info"
                href="/login"
              />
              <BaseButton
                label="Daftar Akun"
                color="success"
                href="/register"
              />
            </div>
            <div className="mt-5 rounded-2xl bg-slate-50 p-4 dark:bg-dark-800">
              <p className="text-sm font-semibold">Status user saat ini</p>
              <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                {currentUser?.email || 'Belum ada user terdeteksi'} · Role/auth tetap dari sistem Flatlogic.
              </p>
            </div>
          </CardBox>

          <CardBox className="border border-slate-100/80 dark:border-dark-700">
            <h2 className="text-xl font-bold">📱 OTP Login MVP</h2>
            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
              OTP development disimpan sebagai hash di PostgreSQL dan kode test ditampilkan di UI.
            </p>
            <div className="mt-5 space-y-3">
              <input
                className="h-10 w-full rounded-lg border border-gray-300 bg-white px-3 text-sm dark:border-dark-700 dark:bg-dark-900"
                placeholder="Nomor HP"
                value={otpPhone}
                onChange={(event) => setOtpPhone(event.target.value)}
              />
              <div className="flex gap-2">
                <input
                  className="h-10 min-w-0 flex-1 rounded-lg border border-gray-300 bg-white px-3 text-sm dark:border-dark-700 dark:bg-dark-900"
                  placeholder="Kode OTP"
                  value={otpCode}
                  onChange={(event) => setOtpCode(event.target.value)}
                />
                <BaseButton
                  label="Verify"
                  color="success"
                  small
                  disabled={isOtpBusy}
                  onClick={() => verifyOtp()}
                />
              </div>
              <BaseButton
                label={isOtpBusy ? 'Memproses OTP...' : 'Request OTP Dev'}
                color="info"
                className="w-full"
                disabled={isOtpBusy}
                onClick={() => requestOtp()}
              />
              {otpDevCode ? (
                <div className="rounded-xl bg-amber-50 p-3 text-sm font-semibold text-amber-800 dark:bg-amber-900/20 dark:text-amber-200">
                  Kode OTP dev: {otpDevCode}
                </div>
              ) : null}
              {otpStatus ? (
                <p className="text-sm text-gray-500 dark:text-gray-400">{otpStatus}</p>
              ) : null}
            </div>
          </CardBox>
        </div>

        <div className="mb-6 grid grid-cols-1 gap-4 lg:grid-cols-3">
          <CardBox id="vorta-modules" className="border border-slate-100/80 lg:col-span-2 dark:border-dark-700">
            <div className="mb-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
              <div>
                <h2 className="text-xl font-bold">Universe Modules</h2>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  {metrics.activeModules} module aktif, {formatNumber(metrics.totalLaunches)} launch tersimpan.
                </p>
              </div>
              <div className="flex flex-wrap gap-2">
                <BaseButton
                  label="Run Semua"
                  icon={resolveIcon('mdiPlayCircleOutline')}
                  color="success"
                  small
                  disabled={isSavingUniverse}
                  onClick={() => runAllModules()}
                />
                <BaseButton
                  label="Entity Produk"
                  icon={resolveIcon('mdiStorefrontOutline')}
                  color="white"
                  small
                  href="/products/products-list"
                />
              </div>
            </div>
            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
              {modules.map((item) => (
                <div key={item.id} className="rounded-2xl border border-slate-100 bg-slate-50 p-4 dark:border-dark-700 dark:bg-dark-800">
                  <div className="flex items-start justify-between gap-3">
                    <div className="text-4xl">{item.icon}</div>
                    <span className="rounded-full bg-white px-2 py-1 text-[11px] font-semibold uppercase text-gray-600 dark:bg-dark-900 dark:text-gray-300">
                      {item.status}
                    </span>
                  </div>
                  <h3 className="mt-4 font-bold">{item.name}</h3>
                  <p className="mt-2 min-h-[60px] text-sm text-gray-500 dark:text-gray-400">{item.description}</p>
                  <div className="mt-4 flex items-center justify-between gap-2">
                    <div>
                      <p className="text-xs uppercase tracking-widest text-gray-400">Metric</p>
                      <p className="text-sm font-semibold">{item.metric}</p>
                    </div>
                    <div className="flex flex-wrap justify-end gap-2">
                      <BaseButton
                        label={`Run +${item.trustImpact}`}
                        color="info"
                        small
                        disabled={isSavingUniverse}
                        onClick={() => runModule(item.id)}
                      />
                      <BaseButton
                        label="Buka"
                        color="white"
                        small
                        href={moduleEntityLinks[item.id]}
                        disabled={!moduleEntityLinks[item.id]}
                      />
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </CardBox>

          <CardBox className="border border-slate-100/80 dark:border-dark-700">
            <h2 className="text-xl font-bold">Activity Ledger</h2>
            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
              Log aksi terbaru dari API VORTA Universe.
            </p>
            <div className="mt-5 space-y-4">
              {ledger.map((item) => (
                <div key={item.id} className="flex gap-3">
                  <span className={`mt-1 h-3 w-3 shrink-0 rounded-full ${getToneClass(item.tone)}`} />
                  <div>
                    <p className="font-semibold">{item.title}</p>
                    <p className="text-sm text-gray-500 dark:text-gray-400">{item.detail}</p>
                    <p className="mt-1 text-xs uppercase tracking-widest text-gray-400">{item.time}</p>
                  </div>
                </div>
              ))}
            </div>
          </CardBox>
        </div>

        <div className="mb-6 grid grid-cols-1 gap-4 xl:grid-cols-3">
          <CardBox id="vorta-social" className="border border-slate-100/80 xl:col-span-2 dark:border-dark-700">
            <div className="mb-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
              <div>
                <h2 className="text-xl font-bold">Community Posts & Comments</h2>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  {socialFeed.stats.postsCount} post, {socialFeed.stats.commentsCount} komentar dari PostgreSQL.
                </p>
              </div>
              <div className="flex flex-wrap gap-2">
                <BaseButton
                  label={isLoadingSocial ? 'Memuat Feed...' : 'Refresh Feed'}
                  icon={resolveIcon('mdiRefresh')}
                  color="info"
                  small
                  outline
                  disabled={isLoadingSocial}
                  onClick={() => loadSocialFeed()}
                />
                <BaseButton
                  label="Bersihkan Draft"
                  icon={resolveIcon('mdiBroom')}
                  color="white"
                  small
                  onClick={() => clearSocialDrafts()}
                />
                <BaseButton
                  label="Reset Feed"
                  icon={resolveIcon('mdiRestore')}
                  color="danger"
                  small
                  outline
                  disabled={isSavingSocial}
                  onClick={() => resetSocialFeed()}
                />
              </div>
            </div>
            {socialError ? (
              <div className="mb-4 rounded-2xl border border-red-200 bg-red-50 p-4 text-sm font-medium text-red-700 dark:border-red-900/40 dark:bg-red-900/20 dark:text-red-200">
                {socialError}
              </div>
            ) : null}
            {socialNotice ? (
              <div className="mb-4 rounded-2xl border border-emerald-200 bg-emerald-50 p-4 text-sm font-medium text-emerald-700 dark:border-emerald-900/40 dark:bg-emerald-900/20 dark:text-emerald-200">
                {socialNotice}
              </div>
            ) : null}
            <div className="rounded-2xl bg-slate-50 p-4 dark:bg-dark-800">
              <textarea
                className="min-h-[92px] w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dark-700 dark:bg-dark-900"
                placeholder="Tulis update VORTA Universe..."
                value={postContent}
                onChange={(event) => setPostContent(event.target.value)}
              />
              <div className="mt-3 flex justify-end">
                <BaseButton
                  label={isSavingSocial ? 'Menyimpan...' : 'Post ke Universe'}
                  color="success"
                  disabled={isSavingSocial}
                  onClick={() => createPost()}
                />
              </div>
            </div>
            <div className="mt-5 space-y-4">
              {!socialFeed.posts.length ? (
                <div className="rounded-2xl border border-dashed border-slate-200 p-6 text-center text-sm text-gray-500 dark:border-dark-700 dark:text-gray-400">
                  Belum ada post. Klik Refresh Feed untuk membuat seed demo awal atau tulis post pertama.
                </div>
              ) : null}
              {socialFeed.posts.map((post) => (
                <div key={post.id} className="rounded-2xl border border-slate-100 p-4 dark:border-dark-700">
                  <div className="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
                    <p className="font-bold">{post.user}</p>
                    <p className="text-xs uppercase tracking-widest text-gray-400">{formatDateTime(post.created_at)}</p>
                  </div>
                  <p className="mt-3 whitespace-pre-wrap text-sm text-gray-700 dark:text-gray-200">{post.content}</p>
                  <div className="mt-4 space-y-3">
                    {post.comments.map((comment) => (
                      <div key={comment.id} className="rounded-xl bg-slate-50 p-3 dark:bg-dark-800">
                        <div className="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
                          <p className="text-sm font-semibold">{comment.user}</p>
                          <p className="text-[11px] uppercase tracking-widest text-gray-400">
                            {formatDateTime(comment.created_at)} · parent {comment.parent_id}
                          </p>
                        </div>
                        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{comment.comment}</p>
                      </div>
                    ))}
                  </div>
                  <div className="mt-4 flex flex-col gap-2 md:flex-row">
                    <input
                      className="h-10 min-w-0 flex-1 rounded-lg border border-gray-300 bg-white px-3 text-sm dark:border-dark-700 dark:bg-dark-900"
                      placeholder="Tulis komentar..."
                      value={commentDrafts[post.id] || ''}
                      onChange={(event) => setCommentDrafts((drafts) => ({
                        ...drafts,
                        [post.id]: event.target.value,
                      }))}
                    />
                    <BaseButton
                      label="Komentar"
                      color="info"
                      small
                      disabled={isSavingSocial}
                      onClick={() => createComment(post.id)}
                    />
                  </div>
                </div>
              ))}
            </div>
          </CardBox>

          <CardBox className="border border-slate-100/80 dark:border-dark-700">
            <h2 className="text-xl font-bold">SQLite → PostgreSQL</h2>
            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
              SQL prototype Anda diterjemahkan aman tanpa bentrok dengan entity posts existing.
            </p>
            <div className="mt-5 space-y-4">
              <div className="rounded-2xl bg-slate-50 p-4 dark:bg-dark-800">
                <p className="text-xs uppercase tracking-widest text-gray-400">Posts table</p>
                <p className="mt-1 font-semibold">vorta_social_posts</p>
                <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">user, content, created_at</p>
              </div>
              <div className="rounded-2xl bg-slate-50 p-4 dark:bg-dark-800">
                <p className="text-xs uppercase tracking-widest text-gray-400">Comments table</p>
                <p className="mt-1 font-semibold">vorta_social_comments</p>
                <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                  post_id, user, comment, parent_id, created_at
                </p>
              </div>
              <div className="rounded-2xl bg-slate-50 p-4 dark:bg-dark-800">
                <p className="text-xs uppercase tracking-widest text-gray-400">OTP table</p>
                <p className="mt-1 font-semibold">vorta_login_otps</p>
                <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">Kode OTP disimpan hash bcrypt.</p>
              </div>
            </div>
          </CardBox>
        </div>

        <div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
          <CardBox id="vorta-marketplace" className="border border-slate-100/80 xl:col-span-2 dark:border-dark-700">
            <div className="mb-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
              <div>
                <h2 className="text-xl font-bold">Marketplace Products</h2>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  {metrics.productCount} produk, total stok {formatNumber(metrics.totalStock)} unit.
                </p>
              </div>
              <BaseButton
                label="Tambah Demo"
                icon={resolveIcon('mdiPlus')}
                color="success"
                small
                disabled={isSavingUniverse}
                onClick={() => createDemoProduct()}
              />
            </div>
            <div className="mb-5 rounded-2xl bg-slate-50 p-4 dark:bg-dark-800">
              <div className="mb-3 flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
                <div>
                  <h3 className="font-bold">Tambah Produk Custom</h3>
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    Data masuk ke state marketplace VORTA Universe dan tersimpan di PostgreSQL.
                  </p>
                </div>
                <BaseButton
                  label="Buka Entity Produk"
                  icon={resolveIcon('mdiOpenInNew')}
                  color="white"
                  small
                  href="/products/products-list"
                />
              </div>
              <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-5">
                <input
                  className="h-10 rounded-lg border border-gray-300 bg-white px-3 text-sm dark:border-dark-700 dark:bg-dark-900"
                  placeholder="Nama produk"
                  value={productDraft.name}
                  onChange={(event) => setProductDraft((draft) => ({ ...draft, name: event.target.value }))}
                />
                <input
                  className="h-10 rounded-lg border border-gray-300 bg-white px-3 text-sm dark:border-dark-700 dark:bg-dark-900"
                  placeholder="Seller"
                  value={productDraft.seller}
                  onChange={(event) => setProductDraft((draft) => ({ ...draft, seller: event.target.value }))}
                />
                <input
                  className="h-10 rounded-lg border border-gray-300 bg-white px-3 text-sm dark:border-dark-700 dark:bg-dark-900"
                  placeholder="Kategori"
                  value={productDraft.category}
                  onChange={(event) => setProductDraft((draft) => ({ ...draft, category: event.target.value }))}
                />
                <input
                  className="h-10 rounded-lg border border-gray-300 bg-white px-3 text-sm dark:border-dark-700 dark:bg-dark-900"
                  placeholder="Harga"
                  type="number"
                  min="0"
                  value={productDraft.price}
                  onChange={(event) => setProductDraft((draft) => ({ ...draft, price: event.target.value }))}
                />
                <input
                  className="h-10 rounded-lg border border-gray-300 bg-white px-3 text-sm dark:border-dark-700 dark:bg-dark-900"
                  placeholder="Stok"
                  type="number"
                  min="0"
                  value={productDraft.stock}
                  onChange={(event) => setProductDraft((draft) => ({ ...draft, stock: event.target.value }))}
                />
              </div>
              <div className="mt-3 flex flex-wrap justify-end gap-2">
                <BaseButton
                  label="Reset Form"
                  color="white"
                  small
                  onClick={() => setProductDraft(initialProductDraft)}
                />
                <BaseButton
                  label={isSavingUniverse ? 'Menyimpan...' : 'Tambah Custom'}
                  icon={resolveIcon('mdiPlusCircleOutline')}
                  color="success"
                  small
                  disabled={isSavingUniverse}
                  onClick={() => createCustomProduct()}
                />
              </div>
            </div>

            <div className="overflow-x-auto">
              <table className="w-full text-left text-sm">
                <thead>
                  <tr className="border-b border-slate-100 text-xs uppercase tracking-widest text-gray-400 dark:border-dark-700">
                    <th className="py-3 pr-4">Produk</th>
                    <th className="py-3 pr-4">Seller</th>
                    <th className="py-3 pr-4">Kategori</th>
                    <th className="py-3 pr-4 text-right">Harga</th>
                    <th className="py-3 text-right">Stok</th>
                  </tr>
                </thead>
                <tbody>
                  {products.map((product) => (
                    <tr key={product.id} className="border-b border-slate-100 last:border-0 dark:border-dark-700">
                      <td className="py-3 pr-4">
                        <p className="font-semibold">{product.name}</p>
                        <p className="text-xs text-gray-400">{product.id}</p>
                      </td>
                      <td className="py-3 pr-4 text-gray-500 dark:text-gray-400">{product.seller}</td>
                      <td className="py-3 pr-4">
                        <span className="rounded-full bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-700 dark:bg-blue-900/30 dark:text-blue-200">
                          {product.category}
                        </span>
                      </td>
                      <td className="py-3 pr-4 text-right font-semibold">{formatCurrency(product.price)}</td>
                      <td className="py-3 text-right font-semibold">{formatNumber(product.stock)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </CardBox>

          <CardBox id="vorta-settings" className="border border-slate-100/80 dark:border-dark-700">
            <h2 className="text-xl font-bold">Universe Settings</h2>
            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">Konfigurasi aktif dari state backend.</p>
            <div className="mt-4 flex flex-wrap gap-2">
              <BaseButton
                label="Refresh"
                icon={resolveIcon('mdiRefresh')}
                color="info"
                small
                outline
                disabled={isLoadingUniverse || isLoadingSocial}
                onClick={() => refreshEverything()}
              />
              <BaseButton
                label="Reset Demo"
                icon={resolveIcon('mdiRestore')}
                color="danger"
                small
                outline
                disabled={isSavingUniverse}
                onClick={() => resetUniverseState()}
              />
            </div>
            <div className="mt-5 space-y-4">
              <div className="rounded-2xl bg-slate-50 p-4 dark:bg-dark-800">
                <p className="text-xs uppercase tracking-widest text-gray-400">Business</p>
                <p className="mt-1 font-semibold">{profile.businessName}</p>
              </div>
              <div className="rounded-2xl bg-slate-50 p-4 dark:bg-dark-800">
                <p className="text-xs uppercase tracking-widest text-gray-400">Marketplace Mode</p>
                <p className="mt-1 font-semibold">{settings.marketplaceMode}</p>
              </div>
              <div className="rounded-2xl bg-slate-50 p-4 dark:bg-dark-800">
                <p className="text-xs uppercase tracking-widest text-gray-400">Risk Review</p>
                <p className="mt-1 font-semibold">{settings.riskReview}</p>
              </div>
              <div className="rounded-2xl bg-slate-50 p-4 dark:bg-dark-800">
                <p className="text-xs uppercase tracking-widest text-gray-400">Persisted At</p>
                <p className="mt-1 break-all text-sm font-semibold">{persistedAt || 'Menunggu sync database'}</p>
              </div>
            </div>
          </CardBox>
        </div>
      </SectionMain>
    </>
  );
};

VortaUniversePage.getLayout = function getLayout(page: ReactElement) {
  return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
};

export default VortaUniversePage;
