backend_shopify_data4autos/app/routes/app.brands.jsx

import { json } from "@remix-run/node";
import { useLoaderData, Form, useActionData } from "@remix-run/react";
import {
  Page,
  Layout,
  Card,
  TextField,
  Checkbox,
  Button,
  Thumbnail,
  Spinner,
  Toast,
  Frame,
} from "@shopify/polaris";
import { useEffect, useState } from "react";
import { TitleBar } from "@shopify/app-bridge-react";
import { getTurn14AccessTokenFromMetafield } from "../utils/turn14Token.server";
import { authenticate } from "../shopify.server";

export const loader = async ({ request }) => {
  const accessToken = await getTurn14AccessTokenFromMetafield(request);
  const { admin } = await authenticate.admin(request);

  // fetch brands
  const brandRes = await fetch("https://turn14.data4autos.com/v1/brands", {
    headers: {
      Authorization: `Bearer ${accessToken}`,
      "Content-Type": "application/json",
    },
  });
  const brandJson = await brandRes.json();
  if (!brandRes.ok) {
    return json({ error: brandJson.error || "Failed to fetch brands" }, { status: 500 });
  }

  // fetch Shopify collections
  const gqlRaw = await admin.graphql(`
    {
      collections(first: 100) {
        edges {
          node {
            id
            title
          }
        }
      }
    }
  `);
  const gql = await gqlRaw.json();
  const collections = gql?.data?.collections?.edges.map(e => e.node) || [];

  return json({ brands: brandJson.data, collections });
};

export const action = async ({ request }) => {
  const formData = await request.formData();
  const selectedBrands = JSON.parse(formData.get("selectedBrands") || "[]");
  const selectedOldBrands = JSON.parse(formData.get("selectedOldBrands") || "[]");
  const { session } = await authenticate.admin(request);
  const shop = session.shop; // "veloxautomotive.myshopify.com"

  selectedBrands.forEach(brand => {
    delete brand.pricegroups;
  });

  selectedOldBrands.forEach(brand => {
    delete brand.pricegroups;
  });


  const resp = await fetch("https://backend.data4autos.com/managebrands", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "shop-domain": shop,
    },
    body: JSON.stringify({ shop, selectedBrands, selectedOldBrands }),
  });

  if (!resp.ok) {
    const err = await resp.text();
    return json({ error: err }, { status: resp.status });
  }

  const { processId, status } = await resp.json();
  return json({ processId, status });
};

export default function BrandsPage() {
  const { brands, collections } = useLoaderData();
  const actionData = useActionData() || {};
  const [selectedIdsold, setSelectedIdsold] = useState([])
  const [selectedIds, setSelectedIds] = useState(() => {
    const titles = new Set(collections.map(c => c.title.toLowerCase()));
    return brands
      .filter(b => titles.has(b.name.toLowerCase()))
      .map(b => b.id);
  });

  const [search, setSearch] = useState("");
  const [filteredBrands, setFilteredBrands] = useState(brands);
  const [toastActive, setToastActive] = useState(false);
  const [polling, setPolling] = useState(false);
  const [status, setStatus] = useState(actionData.status || "");


  useEffect(() => {
    const selids = selectedIds
    console.log("Selected IDS : ", selids)
    setSelectedIdsold(selids)
  }, [toastActive]);


  useEffect(() => {
    const term = search.toLowerCase();
    setFilteredBrands(brands.filter(b => b.name.toLowerCase().includes(term)));
  }, [search, brands]);

  useEffect(() => {
    if (actionData.status) {
      setStatus(actionData.status);
      setToastActive(true);
    }
  }, [actionData.status]);

  const checkStatus = async () => {
    if (!actionData.processId) return;
    setPolling(true);
    const resp = await fetch(
      `https://backend.data4autos.com/managebrands/status/${actionData.processId}`,
      { headers: { "shop-domain": window.shopify.shop || "" } }
    );
    const jsonBody = await resp.json();
    setStatus(
      jsonBody.status + (jsonBody.detail ? ` (${jsonBody.detail})` : "")
    );
    setPolling(false);
  };

  const toggleSelect = id =>
    setSelectedIds(prev =>
      prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
    );

  const allFilteredSelected =
    filteredBrands.length > 0 &&
    filteredBrands.every(b => selectedIds.includes(b.id));

  const toggleSelectAll = () => {
    const ids = filteredBrands.map(b => b.id);
    if (allFilteredSelected) {
      setSelectedIds(prev => prev.filter(id => !ids.includes(id)));
    } else {
      setSelectedIds(prev => Array.from(new Set([...prev, ...ids])));
    }
  };

  var isSubmitting;
  console.log("actionData", actionData);
  if (actionData.status) {
    isSubmitting = !actionData.status && !actionData.error && !actionData.processId;
  } else {
    isSubmitting = false;
  }
  console.log("isSubmitting", isSubmitting);

  const toastMarkup = toastActive ? (
    <Toast
      content="Collections updated successfully!"
      onDismiss={() => setToastActive(false)}
    />
  ) : null;

  const selectedBrands = brands.filter(b => selectedIds.includes(b.id));
  const selectedOldBrands = brands.filter(b => selectedIdsold.includes(b.id));
  console.log("123456", selectedOldBrands)
  return (
    <Frame>
      <Page title="Data4Autos Turn14 Brands List">
        <TitleBar title="Data4Autos Turn14 Integration" />

        <Layout>
          <Layout.Section>
            <Form method="post">
              <input
                type="hidden"
                name="selectedBrands"
                value={JSON.stringify(selectedBrands)}
              />
              <input
                type="hidden"
                name="selectedOldBrands"
                value={JSON.stringify(selectedOldBrands)}
              />
              <Button primary submit disabled={selectedIds.length === 0 || isSubmitting}>
                {isSubmitting ? <Spinner size="small" /> : "Save Collections"}
              </Button>
            </Form>
          </Layout.Section>

          <Layout.Section>
            <div style={{ display: "flex", gap: 16, alignItems: "center" }}>

              {(actionData.processId || false) && (
                <div style={{ marginTop: 16 }}>
                  <p>
                    <strong>Process ID:</strong> {actionData.processId}
                  </p>
                  <p>
                    <strong>Status:</strong> {status || "—"}
                  </p>
                  <Button onClick={checkStatus} loading={polling}>
                    Check Status
                  </Button>
                </div>
              )}
              <TextField
                label="Search brands"
                value={search}
                onChange={setSearch}
                placeholder="Type brand name…"
                autoComplete="off"
              />
              <Checkbox
                label="Select All"
                checked={allFilteredSelected}
                onChange={toggleSelectAll}
              />

            </div>
          </Layout.Section>

          <Layout.Section>
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
                gap: 16,
              }}
            >
              {filteredBrands.map(brand => (
                <Card key={brand.id} sectioned>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <Checkbox
                      label=""
                      checked={selectedIds.includes(brand.id)}
                      onChange={() => toggleSelect(brand.id)}
                    />
                    <Thumbnail
                      source={
                        brand.logo ||
                        "https://cdn.shopify.com/s/files/1/0757/9955/files/no-image_280x@2x.png"
                      }
                      alt={brand.name}
                      size="small"
                    />
                    <span>{brand.name}</span>
                  </div>
                </Card>
              ))}


            </div>
          </Layout.Section>
        </Layout>

        {toastMarkup}
      </Page>
    </Frame>
  );
}