import { ComponentConfig } from "@reacteditor/core";
import { useEffect, useState } from "react";
import { FolderOpen } from "lucide-react";
import { shopifyFetch } from "~/editor/services/shopify/client";
import { GET_COLLECTIONS_QUERY } from "~/editor/graphql/collections";
import { Typography } from "~/editor/theme/Typography";

export type CollectionGridProps = {
  tagline: string;
  heading: string;
  subheading: string;
  layout: "tiles" | "editorial";
  limit: number;
};

type CollectionRow = {
  id: string;
  handle: string;
  title: string;
  description?: string;
  image?: { url: string; altText?: string };
};

function CollectionGrid({
  tagline,
  heading,
  subheading,
  layout,
  limit,
}: CollectionGridProps) {
  const [collections, setCollections] = useState<CollectionRow[]>([]);

  useEffect(() => {
    shopifyFetch<any>({
      query: GET_COLLECTIONS_QUERY,
      variables: { first: limit },
    })
      .then((res) => {
        const list = (res.data?.collections?.edges ?? []).map((e: any) => e.node);
        setCollections(list);
      })
      .catch(() => setCollections([]));
  }, [limit]);

  const isEditorial = layout === "editorial";

  return (
    <section className="bg-background py-20 md:py-28">
      <div className="container mx-auto max-w-7xl px-6">
        <div className="mx-auto mb-12 max-w-2xl text-center">
          {tagline ? (
            <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
              {tagline}
            </p>
          ) : null}
          <Typography variant="h2">{heading}</Typography>
          {subheading ? (
            <Typography variant="subtitle1" className="mt-3">
              {subheading}
            </Typography>
          ) : null}
        </div>

        <div
          className={
            isEditorial
              ? "grid grid-cols-1 gap-8 md:grid-cols-2"
              : "grid grid-cols-2 gap-x-6 gap-y-12 md:grid-cols-3 lg:grid-cols-4"
          }
        >
          {(collections.length === 0
            ? Array.from({ length: limit }).map((_, i) => ({ id: `sk-${i}` }) as any)
            : collections
          ).map((c: CollectionRow) => (
            <a
              key={c.id}
              href={c.handle ? `/collections/${c.handle}` : "#"}
              className="group block"
            >
              <div
                className={`relative overflow-hidden rounded-md bg-muted ${isEditorial ? "aspect-[3/4] md:aspect-[5/6]" : "aspect-[4/5]"}`}
              >
                {c.image?.url ? (
                  <img
                    src={c.image.url}
                    alt={c.image.altText || c.title}
                    className="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
                  />
                ) : null}
                {isEditorial ? (
                  <div className="absolute inset-0 flex items-end bg-gradient-to-t from-black/60 via-transparent to-transparent p-8">
                    <div>
                      <Typography variant="h4" className="text-white">
                        {c.title}
                      </Typography>
                      <span className="mt-2 inline-flex text-xs uppercase tracking-[0.2em] text-white/80">
                        Shop now →
                      </span>
                    </div>
                  </div>
                ) : null}
              </div>
              {!isEditorial ? (
                <div className="mt-4 flex items-center justify-between">
                  <h3 className="text-sm font-medium tracking-tight">{c.title}</h3>
                  <span className="text-xs text-muted-foreground transition-opacity group-hover:opacity-100">
                    →
                  </span>
                </div>
              ) : null}
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

export const collectionGridEditor: ComponentConfig<CollectionGridProps> = {
  label: "Collections",
  icon: <FolderOpen size={16} />,
  category: "commerce",
  defaultProps: {
    tagline: "Shop by collection",
    heading: "Curated edits",
    subheading: "Bundles built around the way you actually live.",
    layout: "tiles",
    limit: 6,
  },
  fields: {
    tagline: { label: "Tagline", type: "text", contentEditable: true },
    heading: { label: "Heading", type: "text", contentEditable: true },
    subheading: { label: "Subheading", type: "textarea", contentEditable: true },
    layout: {
      label: "Layout",
      type: "radio",
      options: [
        { label: "Tiles", value: "tiles" },
        { label: "Editorial", value: "editorial" },
      ],
    },
    limit: { label: "Limit", type: "number", min: 2, max: 12 },
  },
  render: (props) => <CollectionGrid {...props} />,
};