'use client';

import { useEffect, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { PopupList } from '@/components/settings/PopupManagement';
import { PopupDetailClientV2 } from '@/components/settings/PopupManagement/PopupDetailClientV2';
import { getPopups } from '@/components/settings/PopupManagement/actions';
import type { Popup } from '@/components/settings/PopupManagement/types';
import { GenericPageSkeleton } from '@/components/ui/skeleton';

export default function PopupManagementPage() {
  const searchParams = useSearchParams();
  const mode = searchParams.get('mode');

  const [data, setData] = useState<Popup[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    if (mode !== 'new') {
      getPopups({ size: 100 })
        .then(result => {
          setData(result);
        })
        .finally(() => setIsLoading(false));
    } else {
      setIsLoading(false);
    }
  }, [mode]);

  if (mode === 'new') {
    return <PopupDetailClientV2 popupId="new" />;
  }

  if (isLoading) return <GenericPageSkeleton />;

  return <PopupList initialData={data} />;
}
