import { AppProvider } from '@shopify/polaris';
import { Provider as AppBridgeProvider } from '@shopify/app-bridge-react';
import '@shopify/polaris/build/esm/styles.css';
import translations from '@shopify/polaris/locales/en.json';
import { useSearchParams } from '@remix-run/react';

// Shopify App Bridge React root provider setup
export default function AppRoot({ children }: { children: React.ReactNode }) {
  const [searchParams] = useSearchParams();
  const host = searchParams.get('host') ?? '';

  const appBridgeConfig = {
    apiKey: process.env.SHOPIFY_API_KEY!,
    host: host,
    forceRedirect: true,  // Redirect to OAuth if no valid session
  };

  return (
    <AppBridgeProvider config={appBridgeConfig}>
      <AppProvider i18n={translations}>
        {children}
      </AppProvider>
    </AppBridgeProvider>
  );
}

import { useAppBridge } from '@shopify/app-bridge-react';
import { Toast, Loading } from '@shopify/app-bridge/actions';
import { useCallback, useState } from 'react';

// Shopify App Bridge React: show native Toast notification
export function useBridgeToast() {
  const app = useAppBridge();

  const showToast = useCallback((message: string, isError = false) => {
    const toast = Toast.create(app, {
      message,
      duration: 5000,
      isError,
    });
    toast.dispatch(Toast.Action.SHOW);
  }, [app]);

  return { showToast };
}

// Shopify App Bridge React: show/hide admin loading bar
export function useBridgeLoading() {
  const app = useAppBridge();
  const [loading] = useState(() => Loading.create(app));

  const startLoading = () => loading.dispatch(Loading.Action.START);
  const stopLoading  = () => loading.dispatch(Loading.Action.STOP);

  return { startLoading, stopLoading };
}

// Usage in a component
function SaveProductButton({ onSave }: { onSave: () => Promise<void> }) {
  const { showToast }    = useBridgeToast();
  const { startLoading, stopLoading } = useBridgeLoading();

  const handleSave = async () => {
    startLoading();
    try {
      await onSave();
      showToast('Product saved successfully');
    } catch {
      showToast('Save failed — please try again', true);
    } finally {
      stopLoading();
    }
  };

  return <button onClick={handleSave}>Save</button>;
}

import { ResourcePicker } from '@shopify/app-bridge-react';
import { useState } from 'react';

interface SelectedProduct {
  id: string;
  title: string;
  variants: Array<{ id: string; title: string; price: string }>;
}

// Shopify App Bridge React ResourcePicker for product selection
export function ProductSelector({ onSelect }: { onSelect: (products: SelectedProduct[]) => void }) {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Select products</button>

      {/* Shopify App Bridge React ResourcePicker component */}
      <ResourcePicker
        resourceType="Product"
        open={open}
        allowMultiple={true}
        onSelection={({ selection }) => {
          onSelect(selection as SelectedProduct[]);
          setOpen(false);
        }}
        onCancel={() => setOpen(false)}
        // Filter to in-stock products only
        filterQuery="tag:featured"
      />
    </>
  );
}

import { TitleBar } from '@shopify/app-bridge-react';
import { useNavigate } from '@remix-run/react';

// Shopify App Bridge React TitleBar on every admin page
export function ProductsPageTitleBar({ onSave, isSaving }: { onSave: () => void; isSaving: boolean }) {
  const navigate = useNavigate();

  return (
    <TitleBar
      title="Products"
      primaryAction={{
        content: isSaving ? 'Saving...' : 'Save changes',
        onAction: onSave,
        disabled: isSaving,
        loading: isSaving,
      }}
      secondaryActions={[
        {
          content: 'Import CSV',
          onAction: () => navigate('/import'),
        },
        {
          content: 'View in Shopify',
          url: 'https://admin.shopify.com/store/products',
          target: 'REMOTE',
        },
      ]}
    />
  );
}