import { ComponentConfig } from "@reacteditor/core";
import { FolderOpen } from "lucide-react";
import type { ShopifyCollection } from "@reacteditor/field-shopify";
import { useCollectionProducts } from "~/editor/hooks/use-shopify-collections";
import { ProductCard } from "./product-card";
import { Typography } from "~/editor/theme/Typography";

export type CollectionProps = {
  collection: ShopifyCollection | null;
  showDescription: "yes" | "no";
};

function CollectionView({
  collection: selected,
  showDescription,
}: CollectionProps) {
  const handle = selected?.handle ?? "";
  const { collection, loading } = useCollectionProducts(handle, { first: 24 });

  if (!selected) {
    return (
      <section className="py-20">
        <div className="container mx-auto max-w-7xl px-6">
          <div className="mx-auto max-w-md rounded-md border border-dashed border-border p-8 text-center text-sm text-muted-foreground">
            Pick a collection to render this page.
          </div>
        </div>
      </section>
    );
  }

  // The hook flattens collection.products.edges into a plain Product[].
  const products = (collection?.products as any[] | undefined) ?? [];
  const description = collection?.description ?? selected.description;

  return (
    <section className="bg-background pb-24 pt-12 md:pt-20">
      <div className="container mx-auto max-w-7xl px-6">
        <header className="mx-auto mb-14 max-w-2xl text-center">
          <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
            Collection
          </p>
          <Typography variant="h1">
            {collection?.title ?? selected.title}
          </Typography>
          {showDescription === "yes" && description ? (
            <Typography variant="subtitle1" className="mt-4">
              {description}
            </Typography>
          ) : null}
        </header>

        <div className="grid grid-cols-2 gap-x-6 gap-y-12 md:grid-cols-3 lg:grid-cols-4">
          {loading
            ? Array.from({ length: 8 }).map((_, i) => (
                <div
                  key={i}
                  className="aspect-[4/5] w-full animate-pulse rounded-md bg-muted"
                />
              ))
            : products.map((p: any) => <ProductCard key={p.id} product={p} />)}
        </div>

        {!loading && products.length === 0 ? (
          <div className="mx-auto mt-12 max-w-md text-center text-sm text-muted-foreground">
            This collection has no products yet.
          </div>
        ) : null}
      </div>
    </section>
  );
}

export function createCollectionEditor(opts: {
  collectionField: any;
}): ComponentConfig<CollectionProps> {
  return {
    label: "Collection page",
    icon: <FolderOpen size={16} />,
    category: "commerce",
    defaultProps: { collection: null, showDescription: "no" },
    fields: {
      collection: { label: "Collection", ...opts.collectionField },
      showDescription: {
        label: "Description",
        type: "radio",
        options: [
          { label: "Hide description", value: "no" },
          { label: "Show description", value: "yes" },
        ],
      },
    },
    render: (props) => <CollectionView {...props} />,
  };
}