import {createElement} from "react";
import {defineArrayMember, defineField, defineType} from "sanity";

function buildRemotePreviewMedia(title: string | undefined, url: string | undefined) {
  if (!url) return undefined;

  return createElement("img", {
    src: url,
    alt: title || "Showroom image",
    style: {
      width: "100%",
      height: "100%",
      objectFit: "cover",
      borderRadius: "6px",
    },
  });
}

const rasterImageAccept = "image/png,image/jpeg,image/webp,image/gif";
const svgFileAccept = "image/svg+xml,.svg";

export const showroomPage = defineType({
  name: "showroomPage",
  title: "Showroom",
  type: "document",
  groups: [
    {name: "hero", title: "Hero"},
    {name: "gallery", title: "Contenu", default: true},
    {name: "seo", title: "SEO"},
  ],
  fields: [
    defineField({
      name: "eyebrow",
      title: "Sur-titre",
      type: "string",
      group: "hero",
      initialValue: "Showroom",
    }),
    defineField({
      name: "title",
      title: "Titre",
      type: "string",
      group: "hero",
      validation: (rule) => rule.required(),
      initialValue: "L'univers Stylunique en images",
    }),
    defineField({
      name: "intro",
      title: "Introduction",
      type: "text",
      rows: 4,
      group: "hero",
      initialValue: "Ajoutez ici les photos du showroom et organisez leur affichage directement depuis Sanity.",
    }),
    defineField({
      name: "slots",
      title: "Themes / series",
      type: "array",
      group: "gallery",
      description: "Chaque entree peut contenir une couverture et une galerie complete.",
      of: [
        defineArrayMember({
          type: "object",
          name: "slot",
          title: "Entree showroom",
          fields: [
            defineField({
              name: "slug",
              title: "Slug",
              type: "slug",
              options: {source: "title"},
            }),
            defineField({
              name: "title",
              title: "Titre",
              type: "string",
              validation: (rule) => rule.required(),
            }),
            defineField({
              name: "isActive",
              title: "Actif",
              type: "boolean",
              initialValue: true,
              description: "Desactivez pour masquer cette entree du showroom sur le front.",
            }),
            defineField({
              name: "description",
              title: "Texte",
              type: "text",
              rows: 3,
            }),
            defineField({
              name: "coverImage",
              title: "Image de couverture",
              type: "image",
              description: "PNG, JPG, WebP ou GIF. Pour un SVG, utilisez le champ Fichier SVG de couverture.",
              options: {hotspot: true, accept: rasterImageAccept},
            }),
            defineField({
              name: "coverSvg",
              title: "Fichier SVG de couverture",
              type: "file",
              description: "Upload direct d'un SVG depuis Sanity, sans transformation image.",
              options: {accept: svgFileAccept},
            }),
            defineField({
              name: "coverImageUrl",
              title: "URL image de couverture",
              type: "url",
              description: "Fallback si l'image est hebergee hors de Sanity.",
            }),
            defineField({
              name: "layout",
              title: "Format",
              type: "string",
              initialValue: "portrait",
              options: {
                list: [
                  {title: "Portrait", value: "portrait"},
                  {title: "Carre", value: "square"},
                  {title: "Paysage", value: "landscape"},
                  {title: "Large", value: "wide"},
                ],
                layout: "radio",
              },
            }),
            defineField({
              name: "alt",
              title: "Texte alternatif",
              type: "string",
              description: "Utilise pour l'accessibilite et le SEO.",
            }),
            defineField({
              name: "gallery",
              title: "Galerie",
              type: "array",
              of: [
                defineArrayMember({
                  type: "object",
                  name: "galleryItem",
                  title: "Image galerie",
                  fields: [
                    defineField({
                      name: "image",
                      title: "Image",
                      type: "image",
                      description: "PNG, JPG, WebP ou GIF. Pour un SVG, utilisez le champ Fichier SVG.",
                      options: {hotspot: true, accept: rasterImageAccept},
                    }),
                    defineField({
                      name: "svg",
                      title: "Fichier SVG",
                      type: "file",
                      description: "Upload direct d'un SVG depuis Sanity, sans transformation image.",
                      options: {accept: svgFileAccept},
                    }),
                    defineField({
                      name: "url",
                      title: "URL image",
                      type: "url",
                    }),
                    defineField({
                      name: "alt",
                      title: "Texte alternatif",
                      type: "string",
                    }),
                  ],
                }),
              ],
            }),
          ],
          preview: {
            select: {
              title: "title",
              subtitle: "layout",
              media: "coverImage",
              coverImageUrl: "coverImageUrl",
              isActive: "isActive",
            },
            prepare: ({title, subtitle, media, coverImageUrl, isActive}) => {
              const baseSubtitle = coverImageUrl ? `${subtitle || "portrait"} - image distante` : subtitle || "portrait";
              return {
                title: title || "Entree showroom",
                subtitle: isActive === false ? `${baseSubtitle} - inactive` : baseSubtitle,
                media: media || buildRemotePreviewMedia(title, coverImageUrl),
              };
            },
          },
        }),
      ],
    }),
    defineField({name: "seoTitle", title: "SEO title", type: "string", group: "seo"}),
    defineField({name: "seoDescription", title: "SEO description", type: "text", rows: 3, group: "seo"}),
  ],
  preview: {
    select: {
      title: "title",
      subtitle: "eyebrow",
    },
  },
});